jMaki Tabbed View Data Model

(1) Introduction

(1.2) Examples

{ 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

    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>

  {
       "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

(3.1) Subscribe Events

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'});

(4.0) Background and History

{
  'tabs' :[
        {'label' :'My Tab', 'content' : 'Some Content', },
        {'label' :'My Tab 2', 'url' : 'tab1.jsp'}
        ]
}

-- Main.carlavmott - 01 Aug 2007