 |
| | Main data model discussion page
jMaki Accordion Data Model | | |
{
"description" : "jMaki Accordion", | |
< < | "type":"object",
-
-
- "properties"
- { "items" : {
| | | "type" : "array",
"items" : {
"type" : "object", | | | }
}
} | |
< < | }
} | | |
|
| | Main data model discussion page
jMaki Accordion Data Model | | | "description" : "jMaki Accordion",
"type":"object",
-
-
- "properties"
- {
| |
< < | "items" : {"type" : "object"}, | > > | "items" : {
"type" : "array",
"items" : {
"type" : "object",
"properties" : {
"id" : {"type": "string", "optional":true,}, | | | "label" : {"type": "string"}, | |
< < | "content" : {"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", | > > | "action" : {"type" : "object","optional":true, | | |
-
-
-
-
- "properties"
- {
- "topic"
- {"type" : "string", "optional" : true},
| |
< < | "message": {"type" : "object", "optional" : true} | > > | "message": {"type" : "string", "optional" : true} }
} | | | }
}
}
} | |
> > | }
| | |
(2.2) Property Descriptions |
| | Main data model discussion page
jMaki Accordion Data Model | | | | |
> > | JSON schema format is:
{
"description" : "jMaki Accordion",
"type":"object",
"properties": {
"items" : {"type" : "object"},
"label" : {"type": "string"},
"content" : {"type": "string"},
"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",
"properties": {
"topic": {"type" : "string", "optional" : true},
"message": {"type" : "object", "optional" : true}
}
}
}
}
| | | (2.2) Property Descriptions |
| | Main data model discussion page
jMaki Accordion Data Model | | |
items ::= "{" {<label> } "}" | |
< < | label ::= "{" "label:" , [ | | ] [] [] "}," | > > | label ::= "{" "label:" , [ | | ] [] [] [ | | | selected ::= "selected:" "true" | "false" (default is false)
include ::= "include:" , | |
< < | lazyload ::= "lazyload:" "true" | "false", | > > | lazyload ::= "lazyLoad:" "true" | "false",
iframe ::= "iframe:" "true" | "false", | | | id ::= "id:" ,
content ::= "content:" ,
action ::= "action:" "{" [] "}," | | | 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 |
| | Main data model discussion page
jMaki Accordion Data Model | | |
items ::= "{" {<label> } "}" | |
< < | label ::= "{" "label:" , [ | | ] [] [] "}," | > > | label ::= "{" "label:" , [ | | ] [] [] "}," | | | selected ::= "selected:" "true" | "false" (default is false)
include ::= "include:" ,
lazyload ::= "lazyload:" "true" | "false", | |
< < | targetId ::= "targetId:" , | > > | id ::= "id:" , | | | content ::= "content:" ,
action ::= "action:" "{" [] "},"
topic ::= "topic:" , | | | 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. | |
< < | targetId identifies the row. If not provided, it is autogenerated and is used to in the payload to identify the row which had an action. | > > | 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. |
| | Main data model discussion page
jMaki Accordion Data Model | | | | |
< < | { rows : | > > | { items : | | | [
{ label : 'Books', content : 'Book content'},
{ label : 'Magazines', content :'Magazines here'}, | | | | |
< < | rows ::= "{" { | > > | items ::= "{" { | | | selected ::= "selected:" "true" | "false" (default is false)
include ::= "include:" ,
lazyload ::= "lazyload:" "true" | "false", | |
< < | rowid ::= "rowid:" , | > > | targetId ::= "targetId:" , | | | content ::= "content:" ,
action ::= "action:" "{" [] "},"
topic ::= "topic:" , | | | (2.2) Property Descriptions | |
< < | rows is the outermost property of the data structure. | > > | 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. | | | 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. | |
< < | rowid identifies the row. If not provided, it is autogenerated and is used to in the payload to identify the row which had an action. | > > | targetId identifies the row. If not provided, it is autogenerated and is used to in the payload to identify the row which had an action. | | | include is the page that should be loaded in the row. |
|
< < | -- Main.carlavmott - 08 Jun 2007 | | | Main data model discussion page | |
< < | jMaki Accordion Data Model sample. | > > | jMaki Accordion Data Model | | |
(1) Introduction | |
< < | This wiki page is dedicated to discussing the jMaki accordion view data model. This data model will be used for all accordion 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 accordion widget should support
most of the features. The motivation for specifying a data model for all accordions is to enable users to move between toolkits more easily and to
provide a standard way of represent the data required by the widgets. | | | | |
> > | 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. |
| | -- Main.carlavmott - 08 Jun 2007
Main data model discussion page | | | | |
< < | {'rows' : | > > | { rows : | | | [ | |
< < | {'label':'Books','content':'Book content'},
{'label':'Magazines','content':'Magazines here'},
{'label':'Newspaper','include' : 'foo.jsp' action: {topic: '/mytopic', message: 'foo.jsp'}} | > > | { label : 'Books', content : 'Book content'},
{ label : 'Magazines', content :'Magazines here'},
{ label : 'Newspaper', include : 'foo.jsp',
action: {topic: '/mytopic', message: 'foo.jsp'}
} | | | ]
}
| | | Set the conent of a pane: | |
< < | jmaki.publish("/spry/accordion/setContent", { targetId : 'foo2', value : 'conent is king'}); | > > | jmaki.publish("/spry/accordion/setContent", { targetId : 'foo2', value : 'content is king'}); | | |
Change the included page of a pane: |
| | -- Main.carlavmott - 08 Jun 2007
Main data model discussion page | | | (3.1) Publish Events
| |
< < | |onSelect | widget id, topic name, targetId, message if it exists|Published when a user selects an accordion pane. | > > |
| 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 with content |
| > > |
| setContent | targetId, value (string which may include markup) |
| | |
| setInclude | targetId, value which is a URL to include (same domain) |
Examples: |
| | -- Main.carlavmott - 08 Jun 2007
Main data model discussion page | | | (3.1) Publish Events
| |
< < | |||onSelect | widget id, topic name, targetId, message if it exists|Published when a user selects an accordion pane. | > > | |onSelect | widget id, topic name, targetId, message if it exists|Published when a user selects an accordion pane. | | | (3.2) Subscribe Events
| |
< < |
| | select | widget id, targetId |
| | setContent | targetId, value with content |
| | setInclude | targetId, value which is a URL to include (same domain) |
| > > |
| select | widget id, targetId |
| setContent | targetId, value with content |
| 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 : 'conent 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. |
| | -- Main.carlavmott - 08 Jun 2007
Main data model discussion page | | | 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
|||onSelect | widget id, topic name, targetId, message if it exists|Published when a user selects an accordion pane.
(3.2) Subscribe Events | | |
| |
< < |
| onClick | widget id, topic name, rowid, message if it exists |
| onLoad | widget id, topic name, rowid, message if it exists |
| onLoadComplete | widget id, topic name, rowid, message if it exists |
| onSelect | widget id, topic name, rowid, message if it exists |
| > > |
| | select | widget id, targetId |
| | setContent | targetId, value with content |
| | setInclude | targetId, value which is a URL to include (same domain) |
| | | (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. |
| | -- Main.carlavmott - 08 Jun 2007
Main data model discussion page | | | (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. We want the message to be a string or JavaScript object literal and this may need additional specification. | > > | 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. | | | | | | | |
< < | (2.2) Element Descriptions | > > | (2.2) Property Descriptions | | | | |
< < | rows is the outermost element of the data structure. | > > | rows is the outermost property of the data structure. | | | | |
< < | label is the element which identifies a particular tab, It is required and there may be more than one. | > > | 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. |
|
< < | | | | -- Main.carlavmott - 08 Jun 2007
Main data model discussion page | | | Below is an example using the new accordion data model. | |
< < | verbatim> | > > | | | | {'rows' :
[
{'label':'Books','content':'Book content'}, |
|
< < | | | | -- Main.carlavmott - 08 Jun 2007 | |
< < | jMaki accordion Data Model sample. | > > | Main data model discussion page
jMaki Accordion Data Model sample.
(1) Introduction
This wiki page is dedicated to discussing the jMaki accordion view data model. This data model will be used for all accordion 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 accordion widget should support
most of the features. The motivation for specifying a data model for all accordions 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 accordion data model.
verbatim>
{'rows' :
[
{'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. We want the message to be a string or JavaScript object literal and this may need additional specification.
rows ::= "{" {<label> } "}"
label ::= "{" "label:" <string>, [<content> | <include> |<action> ] [<lazyload>] [<rowid>] <selected>"},"
selected ::= "selected:" "true" | "false" (default is false)
include ::= "include:" <string> ,
lazyload ::= "lazyload:" "true" | "false",
rowid ::= "rowid:" <string> ,
content ::= "content:" <string>,
action ::= "action:" "{" [<topic>] <message> "},"
topic ::= "topic:" <string>,
message ::= "message:" <obj>
obj ::= <string> | <JavaScript object literal>
(2.2) Element Descriptions
rows is the outermost element of the data structure.
label is the element 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.
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.
rowid identifies the row. If not provided, it is autogenerated and is used to in the payload to identify the row which had an action.
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.
| Event | Payload |
| onClick | widget id, topic name, rowid, message if it exists |
| onLoad | widget id, topic name, rowid, message if it exists |
| onLoadComplete | widget id, topic name, rowid, message if it exists |
| onSelect | widget id, topic name, rowid, message if it exists |
(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' : |
|
> > |
-- Main.carlavmott - 08 Jun 2007
jMaki accordion Data Model sample.
{'rows' :
[
{'label':'Books','content':'Book content'},
{'label':'Magazines','content':'Magazines here'},
{'label':'Newspaper','url' : 'foo.jsp'}
]
}
|
|