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

{ 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

(3.2) Subscribe Events

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

{'rows' : 
    [
     {'label':'Books','content':'Book content'},
     {'label':'Magazines','content':'Magazines here'},
     {'label':'Newspaper','url' : 'foo.jsp'}
   ]
}