The Time widget adds the current time to the current page, both as a visualization, and as a property. This time value can potentially be used by other widgets on the page to compare the current time to the time of various events.
While the time widget is very simple, and not hugely useful, it provides a useful introduction to the principles of Mash Maker widget development using the Widget API.
The first step of creating any widget is creating the Configuration File. The configuration file for Time is given below:
<widget title="Time" description="What is the current time?" icon="http://mashmaker.intel.com/icons/time.png" version="12"> <content resizable="false" href="http://mashmaker.intel.com/newwidgets/time.html"/> </widget>
Since the time information is of fixed size, we set the resizable property to false.
We register this file using the procedure described in the API Overview.
The body page is the page used to show the widget's top level visualization and used for its main logic. In the case of Time, the body page is very simple.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="application/x-javascript" src="http://mashmaker.intel.com/v12/mashmaker_api.js"></script>
<link rel="stylesheet" href="http://mashmaker.intel.com/style/widgetstyle.css"/>
<script type="application/x-javascript">
// <![CDATA[
function mashmaker_widget_init(args){
var date = new Date().toString();
mashmaker.addProp(0,"time now",{text:date});
document.getElementById("time").textContent = date;
mashmaker.setHeight(document.body.offsetHeight);
mashmaker.done();
}
// ]]>
</script>
</head>
<body style="margin:0px; padding-left: 5px">
<span class='mm-name'>time now:</span>
<span class='mm-val' id="time"></span>
<button onclick="mashmaker_widget_init()">update</button>
</body>
</html>
We'll walk through this example step by step:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="application/x-javascript" src="http://mashmaker.intel.com/v12/mashmaker_api.js"></script>
<link rel="stylesheet" href="http://mashmaker.intel.com/style/widgetstyle.css"/>
The body page is just a normal HTML web page. The only unusual part is that it includes the Mash Maker widget API. The current version of the API (described in this document) is version 12, and it can be found at http://mashmaker.intel.com/v12/mashmaker_api.js. This file defines the mashmaker object that implements the various Mash Maker Methods.
In this case, we also include the widgetstyle style sheet, which allows widgets to have a consistent look and feel.
<script type="application/x-javascript">
// <![CDATA[
function mashmaker_widget_init(args){
var date = new Date().toString();
mashmaker.addProp(0,"time now",{text:date});
document.getElementById("time").textContent = date;
mashmaker.setSize(document.body.offsetWidth,document.body.offsetHeight);
mashmaker.done();
}
// ]]>
</script>
</head>
The Time widget only needs seven lines of javascript to do its work. It does the following:
- Defines an implementation of mashmaker_widget_init. This will be called when the widget is first added to the page.
- Get the current date and time as a string
- Calls addProp to add the current time as a property of the whole page. The property is encoded in Widget Data Format
- Add the date to the top level visualization in the document body
- Calls setSize to set the size of the widget's frame to match it's content
- Calls done to tell Mash Maker that it has finished rendering and that Mash Maker should stop showing the progress animation.
<body style="margin:0px; padding-left: 5px"> <span class='mm-name'>time now:</span> <span class='mm-val' id="time"></span> <button onclick="mashmaker_widget_init()">update</button> </body> </html>
The document body is the widget's top level visualization.
