 |
-- Main.gmurray71 - 23 Jul 2007
Main data model page | jMaki Homepage | jMaki Wiki
Fisheye Data Model
(1) Introduction
This wiki page is dedicated to discussing the jMaki Fisheye data model. This data model will be used for all menu widgets in jMaki regardless
of the underlying toolkit. It is expected that not all toolkits will support all features in the data model however each menu should support all
most of the features. The motivation for specifying a data model for all menus is to enable users to move between toolkits more easily and to
provide a standard way of represent the data required by the widgets.
(1.1) Examples
Below is an example using the new menu data model. Data passed to the menu widgets will be in JSON format as shown here.
[
{
'action': {
'topic': '/foo',
'message': 'item 1'
},
'iconSrc': 'https://ajax.dev.java.net/images/blog_murray.jpg',
'label': 'You are here!'
},
{
'iconSrc': 'https://ajax.dev.java.net/images/chinnici.jpg',
'label': 'test3'
},
{
'iconSrc': 'https://ajax.dev.java.net/images/JayashriVisvanathan.jpg',
'href': 'http://jmaki.com',
'label': 'test4'
}
]
(2) Data Model
Following is the data model for Fisheye widgets
fishEye ::= "[" {<item>} "]"
item ::= "menu:" "[" {<label>} "]"
label ::= "{" "label:" <string>, [<href> [<action>] ] "},"
href ::= "href:" <string> ,
action ::= "action:" "{" [<topic>] <message> ] | <topic> [<message>]"},"
topic ::= "topic:" <string>,
message ::= "message:" <obj>
obj ::= <string> | <JavaScript object literal>
JSON schema format is
{
"description" : "jMaki Fisheye",
"type" : "array",
"items" : {
"type" : "object",
"properties" : {
"id" : {"type": "string", "optional":true,},
"label" : {"type": "string"},
"iconSrc" : {"type": "string"},
"href" : {"type": "string","optional":true},
"action" : {"type" : "object","optional":true,
"properties": {
"topic": {"type" : "string", "optional" : true},
"message": {"type" : ["string","object"],, "optional" : true} }
}
}
}
}
(2.2) Property Descriptions
The outermost menu property or properties identify the labels of the menu bar. As you will see below, the label element allows nodes to be nested to an arbitrary level. Note that there are no restrictions on the order of subordinate properties.
The label property defines the text that will be displayed for this particular node. This property is required.
The href property indicates that the string following the property is a URL and that navigation should go to that URL.
The action property is used to provide the name of the page that is then published on the topic. If this property is present, a click on this node will cause the message to be published on the topic. There must be a listener (most likely a dcontainer) which actually loads the page but that is outside the scope of this model. Either topic or message or both must be supplied.
The topic property overrides the publish arg at the tag level for the particular item identified by label.
(3) Event Handling
Events that trigger a payload to be published are:
| event type | payload |
| onSelect | widgetId : widget id, topic name, href or message |
(4) Background and history
All Fisheye parameters were passed in as the value or as the args.items property. We decided to make this model look and feel more like a menu so we are merging the models and using consistent terminology for such as label instead of caption.
Here is an example of the old format which will not be supported in jMaki 1.0 and beyond.
[
{iconSrc:'https://ajax.dev.java.net/images/blog_murray.jpg',caption:'You are here!'},
{iconSrc:'https://ajax.dev.java.net/images/chinnici.jpg',caption:'test3'},
{iconSrc:'https://ajax.dev.java.net/images/JayashriVisvanathan.jpg',caption:'test4'}
]
(5) Read Fisheye message values in a JavaScript program.
From the index.jsp:
<div class="main">
<div class="leftSidebar">
<a:widget name="dojo.fisheye"
args="{ orientation:'vertical'}"
value="[
{iconSrc:'menu1.jpg',label:'Menu1:Greg Murray:Ajax',action:{topic:'/jmaki/dcontainer',message:'menu1.jsp'}},
{iconSrc:'menu2.jpg',label:'Menu2:Carla Mott:Ajax',action:{topic:'/jmaki/dcontainer',message:'menu2.jsp'}},
{iconSrc:'menu3.jpg',label:'Menu3:Stacy David Thurston:href',href:'http://blogs.sun.com/tiger/'},
{iconSrc:'menu4.jpg',label:'Menu4:Rick Evans:glue.js',action:{topic:'/jmaki/glue',message:{id:'rick',url:'menu4.jsp'}}},
{iconSrc:'menu3.jpg',label:'Menu5:Stacy David Thurston:href',href:'http://blogs.sun.com/tiger/'}
]"/>
</div> <!-- leftSidebar -->
<div class="content" style="height:400px">
<h3>Biography Display for Ajax Link</h3>
<div style="margin: 10px 10px 10px 10px">
<a:widget name="jmaki.dcontainer" subscribe="/jmaki/dcontainer" />
</div>
</div> <!-- content -->
</div> <!-- main -->
In menu4 of the above Fisheye menu, use the following code in glue.js to echo the event values and publish the href to the jMaki dcontainer ("/jmaki/dcontainer").
From the glue.js:
jmaki.debug = true;
jmaki.subscribe("/jmaki/glue", function(args) {
jmaki.log("fisheye args.targetId="+args.targetId+" args.message.id="+args.message.id+" args.message.href="+args.message.url);
jmaki.publish("/jmaki/dcontainer", args.message.url);
});
|