| META TOPICPARENT | name="JMakiDataModels" |
|---|
Main data model discussion page
jMaki Multi View Container Data Model
(1) Introduction
This wiki page is dedicated to discussing the jMaki multi view container data model. This data model will be used for all tabbed view widgets, accordion widgets, and jMaki dynamic container jMaki regardless of the underlying toolkit. It is expected that not all toolkits will support all features in the data model however each tabbed view should support
most of the features. The motivation for specifying a data model for all tabbed views 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.2) Examples
Below is an example using the new tabbed view data model.
{ items :[
{label: 'My Tab', content : 'Some Content', id: 'tab1', selected: true}},
{label: 'My Tab 2', content : '', action:{topic: '/mytopic', message : { value : 'data.jsp'} }},
{label: 'My Tab 3', include: 'tab3.jsp', lazyload: true}
]
}
(2) Data Model
We wanted to
add an action property which allows users to specify the message to publish and the topic to publish to.
If no topic is specified then the default topic is used. We want the message to be a string or JavaScript
object literal and this may need additional specification. Also we want to be able to specify CSS which
is passed through to the underlying widget.
items ::= "{" {<label> } "}"
label ::= "{" "label:" <string>, [<content> | <include> |<action> ] [<lazyload>] [<id>] <selected> [<iframe>] "},"
selected ::= "selected:" "true" | "false" (default is false)
include ::= "include:" <string> ,
lazyload ::= "lazyLoad:" "true" | "false",
iframe ::= "iframe:" "true" | "false",
id ::= "id:" <string> ,
content ::= "content:" <string>,
action ::= "action:" "{" [<topic>] <message> "},"
topic ::= "topic:" <string>,
message ::= "message:" <obj>
obj ::= <string> | <JavaScript object literal>
JSON Schema format:
{
"description" : "jMaki TabbedMenu",
"type":"object",
"properties": {
"items" : {
"type" : "array",
"properties" : {
"id" : {"type": "string", "optional":true},
"label" : {"type": "string"},
"content" : {"type": "string","optional":true},
"include" : {"type": "string","optional":true},
"selected" : {"type": "boolean","optional":true, "default":false},
"lazyload" : {"type": "boolean","optional":true, "default":false},
"iframe" : {"type": "boolean","optional":true, "default":false},
"action" : {"type" : "object","optional":true,
"properties": {
"topic": {"type" : "string", "optional" : true},
"message": {"type" : "string", "optional" : true}
}
}
}
}
}
}
(2.2) Property Descriptions
items is the outermost property of the data structure.
label is the property which identifies a particular tab, It is required and there may be more than one.
selected if set to true then this tab is displayed when the widget is rendered. If more than one label has the selected property set to true then the last one set wins.
iframe if set to true then the content is loaded into an iframe. iframes are needed by some things like google and yahoo maps.
lazyLoad if set to true then the content is loaded when the pane is selected.
content describes the static content which will be displayed in the tab when the widget is rendered. It indicates that the static content is included inline.
id identifier for the tab. If not provided, it is autogenerated and is used in the payload to identify the tab which had an event. This project can also be used to specify which tab to perform an event on.
include the string following this property is the page that should be loaded in the tab. This is done behind the scenes using the dcontainer.
action is the way to override the default events that are fired if no action is specified.
(3.0) Events
Several events are fired in the tab model. The table below describes the default events and payload published with each event.
(3.1) Publish Events
| Event | Payload | Event |
| onSelect | widget id, topic name, type : 'onSelect' , targetId (selected tab), message if it exists | Publsihed when a tab is selected |
(3.1) Subscribe Events
| Event | Payload |
| select | targetId (tab id to select) |
| setContent | targetId (tab id to select), value (content including markup to put in the tab) |
| setInclude | targetId (tab id to select), value (URL to be included) |
Examples:
Set the content of a tab.
jmaki.publish("/yahoo/tabbedview/setContent", {targetId : 'foo', value : 'New content'});
Set the include URL of a tab.
jmaki.publish("/yahoo/tabbedview/setInclude", {targetId : 'foo', value : 'bar.jsp'});
Select a given tab.
jmaki.publish("/yahoo/tabbedview/select", {targetId : 'foo'});
|