This section assumes you have already read and understood the Time example.
The Select widget allows one to select an item on a page by clicking on it's icon. When an item is selected, this item will be highlighted by all other widgets that support selection.
If you have Mash Maker installed then you can try out the Select widget on Craigslist Apartments.
The Select Widget makes use of the Patterns Library.
The Configuration File for Select is similar to that for Time. The widget includes URLs for both a content panel and a settings panel. In each case, we also provide a Test Mode version, so that we can easily test out new versions without disrupting users of the widget.
<widget title="Select"
description="Select items so they are highlighted in other widgets"
icon="http://mashmaker.intel.com/icons/arrow_in.png"
version="15">
<feature name="incremental"/>
<settings href="http://mashmaker.intel.com/newwidgets/select_settings.html"/>
<content height="20" resizable="false" href="http://mashmaker.intel.com/newwidgets/select.html"/>
<testsettings href="http://mashmaker.intel.com/testwidgets/select_settings.html"/>
<testcontent height="20" resizable="false" scroll="yes" href="http://mashmaker.intel.com/testwidgets/select.html"/>
</widget>
The Select settings panel is defined at http://mashmaker.intel.com/newwidgets/select_settings.html. The only setting is the path to the items that should have select buttons added to them.
The code that generates the settings panel is as follows:
<!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="text/javascript" src="http://mashmaker.intel.com/v15/mashmaker_api.js"></script>
<script type="text/javascript" src="http://mashmaker.intel.com/v15/mashmaker_settings.js"></script>
<script type="text/javascript" src="http://mashmaker.intel.com/v15/mashmaker_patterns.js"></script>
<link rel="stylesheet" href="http://mashmaker.intel.com/style/settingstyle.css"/>
<script type="text/javascript" defer="true">
//<![CDATA[
function init(){
var opts = {
path:true,
slots:[]
}
mashmaker_patterns.itemsByProp.settings("table",opts);
}
// ]]>
</script>
<body onload="init()">
<table class="mm-table" id="table" />
</body>
The first few lines include the Widget API, Settings Library, and Patterns Library. We also include a standard style sheet that goes with the Settings Library.
All the work is done in the init function. This function makes a call to the Patterns Library telling it to generate a standard itemsByProp settings panel, requesting that the user specify a path, and not requiring any slots.
If the user has not yet provided any settings then the Patterns Library will try to guess the settings. In this case, it will guess that some collection of items on the page is the set of items the user wishes to be able to select from.
The code for the main widget frame is available at http://mashmaker.intel.com/newwidgets/select.html and is also pretty simple.
The code is as follows:
<!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>
<link rel="stylesheet" href="http://mashmaker.intel.com/style/widgetstyle.css"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://mashmaker.intel.com/v15/mashmaker_api.js"></script>
<script type="text/javascript" src="http://mashmaker.intel.com/v15/mashmaker_util.js"></script>
<script type="text/javascript" src="http://mashmaker.intel.com/v15/mashmaker_settings.js"></script>
<script type="text/javascript" src="http://mashmaker.intel.com/v15/mashmaker_patterns.js"></script>
<script type="text/javascript">
//<![CDATA[
function init(){
var opts = {
path : true,
slots : [],
addRemoveItems : add_remove_items
};
mashmaker_patterns.itemsByProp.widget(opts);
}
function add_icon(id){
mashmaker.addIcon(id,null,"select this item",function(){
mashmaker.select(id);
mashmaker.itemDone(id);
add_icon(id);
});
}
// we can ignore removes. If they disappeared, the icon went too
function add_remove_items(additems,removeids){
var i;
for(i in additems){
add_icon(additems[i].id);
}
mashmaker.setSize(document.body.offsetWidth,document.body.offsetHeight);
mashmaker.done();
}
// ]]>
</script>
</head>
<body onload="init()" style="margin:0px; padding:0px;" style="overflow:auto">
<div class="mm-text">Click the <img style="vertical-align:bottom" src="http://mashmaker.intel.com/icons/arrow_in.png" alt="select icon"/> icon to select on item</div>
</body>
</html>
As before, we start by including the standard library scripts. We'll walk through the rest of the code in the following sections.
function init(){
var opts = {
path : true,
slots : [],
addRemoveItems : add_remove_items
};
mashmaker_patterns.itemsByProp.widget(opts);
mashmaker.setSize(document.body.offsetWidth,document.body.offsetHeight);
}
When the page loads, the widget calls the Patterns Library, passing it the same options that it passed in the Settings Panel. The main purpose of this function is to register an add_remove_items function that should be called when items that the widget is interested in are added or removed from the page.
This function also calls setSize to adjust the size of the widget to it's content.
The add_remove_items function is called whenever items that the widget is interested in are added to or removed from the page. In particular, this function will be called at widget startup, adding all matching items on the page.
function add_remove_items(additems,removeids){
var i;
for(i in additems){
add_icon(additems[i].id);
}
mashmaker.done();
}
Thus function walks through all the items that have been added to the page and calls addIcon on them to add an action icon. In this case we don't need to do anything about removing items since, as we did not require that our items have any particular properties, the only way an item would be removed would be if it were removed from the page entirely - in which case it's icon would have disappeared anyway.
function add_icon(id){
mashmaker.addIcon(id,null,"select this item",function(){
mashmaker.select(id);
mashmaker.itemDone(id);
add_icon(id);
});
};
To add an icon, we call addIcon, passing it the id of the item to have an icon added, and some tooltip text. When the icon is clicked, our callback calls select to select the item, and then calls itemDone to turn off the progress animation for the action icon. The callback finishes off by calling add_icon again, to put the icon back on the page - since, by default, Mash Maker deletes an icon when it is clicked on...
The body of the Select widget is a simple help message telling users that they should click on the select icon to select a particular item. A widget is encouraged to place such a help message in its main frame if it adds action icons to the page.
<body onload="init()" style="margin:0px; padding:0px;" style="overflow:auto"> <div class="mm-text">Click the <img style="vertical-align:bottom" src="http://mashmaker.intel.com/icons/arrow_in.png" alt="select icon"/> icon to select on item</div> </body>
