JMakiComboxModel < Projects < TWiki

TWiki . Projects . JMakiComboxModel

Main data model discussion page

Combobox Data Model

(1) Introduction

This wiki page is dedicated to discussing the jMaki Combox

(1.1) Examples

Below is an example using the Combobox data model. Data passed to the Combobox widgets will be in JSON format as shown here.
[
  { id : 'al',   label : 'Alabama', value : 'AL'},
  { id : 'ca', label : 'California', value : 'CA'},
  { id : 'ny', label : 'New York', value : 'NY', selected : true},
  { id, 'tx', label : 'Texas', value : 'TX'}              
 ]

An optional selected property allows you to define the selected item.

(2) Data Model

The value of a given combobox passed as the value property or via a service property must adhere to the following format.

    combobox ::= "["  {<item>} "]"
    item ::=  "{" "label:"  <string>, [<value>] [<selected> ] [<action>] [<id>]  "},"
    selected ::=  "selected: false"
    action ::= "action:" "{" [<topic>] <message>  "},"
    topic ::=  "topic:" <string>
    message ::= "message:" <obj>
    id ::== "id" : <string>
    obj ::= <string> | <JavaScript object literal>

JSON schema format is:

{
       "description" : "jMaki ComboBox",
             "type" : "array",
               "items" : { 
                 "type" : "object", 
                 "properties" : {
                    "id" : {"type": "string", "optional":true,},
                  "label" : {"type": "string"},
                  "value" : {"type": "string", "optional":true,},
                  "selected" : {"type": "boolean","optional":true, "default":false},
                  "action" :  {"type" : "object","optional":true,
                        "properties": {
                           "topic": {"type" : "string", "optional" : true},
                            "message": {"type" : ["string","object"], "optional" : true}                            }
                      }
                  }
               }               
  }

(2.2) Property Descriptions

The combobox array of items. Each time has a label property node.

The label property defines the text that will be displayed for this particular node. This element is required.

The id property defines an id associated with the item. This can later be used to select the item. It can be the same as the value but does not have to be.

The value is published as the value property of the payload when an item is selected.

The selected property if the item is selected. As we can not prevent multiple items with selected = true the last one with selected = true wins

(3) Event Handling

Events are published to the topic assigned to the given widget instance. Events include:

Subscribe Events

event type argument (object literal)
select { value: <itemId>}
setValues { value: <[item]>}

Subscribe events allow you to manipulate a given instance of a widget. The event names are appended to the the subscribe topic name following a "/". For example "setValues" for a dojo.combobox would be "/dojo/combobox/setValues"

jmaki.publish("/dojo/combobox/select", {
     targetId : 'ca'}
 });

jmaki.publish("/dojo/combobox/setValues", {
     value :
      [
        { label : 'Alabama', value : 'AL'},
        { label : 'California', value : 'CA'},
        { label : 'New York', value : 'NY', selected : true},
        { label : 'Texas', value : 'TX'}              
      ]
 });

Publish Events

These are the events published to the "publish" topic associated with a widget.

Event type Payload Event
onSelect {widgetId : uuid , topic : , type : 'onSelect' , targetId : selected_id, value : selected_value} Publshed when a user selects a item.

-- Main.gmurray71 - 29 Sept 2007 -

----- Revision r12 - 23 Jul 2008 - 15:01:15 - Main.gmurray71