 |
Main data model discussion page
jMaki Accordion Data Model
(1) Introduction
This wiki page is dedicated to discussing the jMaki accordion view data model. This model resembles the
tabbed view model which allows for the same types of interactions.
(1.2) Examples
Below is an example using the new accordion data model.
{ items :
[
{ label : 'Books', content : 'Book content'},
{ label : 'Magazines', content :'Magazines here'},
{ label : 'Newspaper', include : 'foo.jsp',
action: {topic: '/mytopic', message: 'foo.jsp'}
}
]
}
(2) Data Model
The model is similar to the previous model with a few added features. 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 that was specified by the publish property on the tag. We want the message to be a string or JavaScript object literal and this may need additional specification.
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 is:
{
"description" : "jMaki Accordion",
"type" : "array",
"items" : {
"type" : "object",
"properties" : {
"id" : {"type": "string", "optional":true,},
"label" : {"type": "string"},
"content" : {"type": "string", "optional":true,},
"include" : {"type": "string","optional":true},
"lazyload" : {"type": "boolean","optional":true, "default":false},
"selected" : {"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 row is displayed when the widget is rendered. If more than one row or label have selected 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 row when the widget is rendered. It indicates that the static content is included inline.
id identifies the row. If not provided, it is autogenerated and is used to in the payload to identify the row which had an action and can be used as an identifier on change events for the accordion
include is the page that should be loaded in the row.
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 accordion 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, targetId, message if it exists | Published when a user selects an accordion pane. |
(3.2) Subscribe Events
| Event | Payload |
| select | widget id, targetId |
| setContent | targetId, value (string which may include markup) |
| setInclude | targetId, value which is a URL to include (same domain) |
Examples:
Select a pane:
jmaki.publish("/spry/accordion/select", { targetId : 'foo2'});
Set the conent of a pane:
jmaki.publish("/spry/accordion/setContent", { targetId : 'foo2', value : 'content is king'});
Change the included page of a pane:
jmaki.publish("/spry/accordion/setInclude", { targetId : 'foo2', value : 'foo3.jsp'});
(4.0) Background and History
The accordion widgets support the following format as of release .9. This model lacks some features such as lazyloading, ability to publish events that may be useful for others to consume and the ability to select the row which should be open when the widget is rendered.
{'rows' :
[
{'label':'Books','content':'Book content'},
{'label':'Magazines','content':'Magazines here'},
{'label':'Newspaper','url' : 'foo.jsp'}
]
}
|