Latest revision as of 12:18, 21 October 2009

qooxWave protocol

You can find an introduction to the qooxWave protocol here: Team:Freiburg_software/Project#Bring_it_together:_The_qooxWave_protocol.

Building a GUI - Server to Client Communication

The JSON-object for building a GUI is stored as a String in wave.getState().get("ui.structure") and defined as follows:

{ 'type' : 'ui', 'subitem' : ITEMLIST} where ITEMLIST is associative Array with ids as keys and ITEM objects as values:

  { 'mySubitemId1' : ITEM, 'mySubitemId2' : ITEM, ...}

where ITEM is of the form

  {
    'label' : STRING <i>label</i>,
    'type' : ENUM('toolbar', 'button', 'menu', 'checkbox', 'radio', 'label', 'form') [,
    'subitem' : ITEMLIST ] 
  }

This protocol has a recursive structure. Each item can have an itemlist as subitem. This provides a basis for creating complex menus, forms and ui elements. The type specifies the element. We will extend the available types from time to time. Have a look at Team:Freiburg_software#Item_Structure for the available types and which combinations are allowed.

Item Structure

This section gives an overview of the available types for the items described above. It also depends on the type which other keys can be used for the object and which types are allowed for the subitem list.

Freiburg software qooxwave protocol flowchart.png

'type' : 'ui'
- available keys:
- available subitem types: toolbar, menu, button, checkbox, form, label
'type' : 'toolbar'
- available keys: subitem
- available subitem types: button, checkbox, menu
'type' : 'menu'
- available keys: label, subitem
- available subitem types: button, checkbox, menu
- submits event/data: TODO
'type' : 'button'
- available keys: label
- available subitem types: -
- submits event/data: TODO
'type' : 'checkbox'
- available keys: label, value (true|false)
- available subitem types: -
- submits event/data: TODO
'type' : 'radio'
- available keys: label, value (true|false), group (to group radio items to one radiogroup)
- available subitem types: -
- submits event/data: TODO
'type' : 'label'
- available keys: label
- available subitem types: -
'type' : 'form'
- available keys: label, subitem
- available subitem types: textfield, textarea, checkbox, radio, upload, download
- submits event/data: many, especially on uploads, downloads | TODO
'type' : 'textarea'
- available keys: label, value
- available subitem types: -
'type' : 'textfield'
- available keys: label, value
- available subitem types: -
'type' : 'upload'
- available keys: label, target
- available subitem types: -
- submits event/data: TODO | submitted, completed
'type' : 'download'
- available keys: label, target
- available subitem types: -
- submits event/data: TODO | ?

Building GUI Events - Client to Server Communication

The JSON-object for submitting a GUI-Event from client to server is stored as a String in wave.getState().get("ui.idofelemt"). There is no complete documentaion available at the moment because this part of the protocol is still in heavy changes. Have a look at the item structure to see which items fire event and send data back to server. The submitted JSON for events is of the form:

{ 'event' : EVENTTYPE, 'value' : VALUE }

EVENTTYPE is a String defining the specific event
VALUE is some String-data, for example a serialized form model.

Example of qooxWave

    {'type':'ui','label':'ui','subitem':{'0':{'type':'toolbar','label':'toolbar','subitem':
    {'0':{'type':'menu','label':'DNA','subitem':{'0':{'type':'menu','label':'Import','subitem':
    {'0':{'type':'button','label':'from File'},'1':{'type':'button','label':'from Database'}}},'1':
    {'type':'button','label':'Translate'},'2':{'type':'button','label':'Rev-Complement'}}},'1':
    {'type':'menu','label':'Protein','subitem':{'0':{'type':'button','label':'Import'},'1':
    {'type':'button','label':'Export'},'2':{'type':'button','label':'Backtranslate'}}},'2':
    {'type':'button','label':'Titel3'},'3':{'type':'button','label':'Titel4'}}}}}

The above JSON-String creates the following GUI:

@@ Line 14: / Line 14: @@
 =qooxWave protocol=
-You can find an introduction to the qooxWave protocol here: [[Team:Freiburg_software/Project#qooxWave_protocol]].
+You can find an introduction to the qooxWave protocol here: [[Team:Freiburg_software/Project#Bring_it_together:_The_qooxWave_protocol]].
 ==Building a GUI - Server to Client Communication==
@@ Line 38: / Line 38: @@
 ==Item Structure==
-[[Image:Freiburg_software_qooxwave_protocol_flowchart.png|right|300px]]
 This section gives an overview of the available types for the items described above. It also depends on the type which other keys can be used for the object and which types are allowed for the subitem list.
+[[Image:Freiburg_software_qooxwave_protocol_flowchart.png|right|500px]]
 * ''''type' : 'ui''''
 ** available keys:
@@ Line 88: / Line 89: @@
 ==Building GUI Events - Client to Server Communication==
-The JSON-object for submitting a GUI-Event from client to server is stored as a String in wave.getState().get("ui.<i>idofelemt</i>"). There is no complete documentaion available at the moment because this part of the protocol is still in heavy changes.
+The JSON-object for submitting a GUI-Event from client to server is stored as a String in wave.getState().get("ui.<i>idofelemt</i>"). There is no complete documentaion available at the moment because this part of the protocol is still in heavy changes. Have a look at the [[Team:Freiburg_software/Project/qooxWave-details#Item_Structure|item structure]] to see which items fire event and send data back to server. The submitted JSON for events is of the form:
+ <nowiki>
+{ 'event' : EVENTTYPE, 'value' : VALUE }
+</nowiki>
+* EVENTTYPE is a String defining the specific event
+* VALUE is some String-data, for example a serialized form model.
 ==Example of qooxWave ==

Team:Freiburg software/Project/qooxWave-details

From 2009.igem.org