Revision as of 10:49, 20 October 2009

qooxWave protocol

Team:Freiburg_software/Project#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.

'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") and defined as follows: ...

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 1: / Line 1: @@
-===Building a GUI - Server to Client Communication===
+=qooxWave protocol=
+[[Team:Freiburg_software/Project#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:
@@ Line 20: / Line 23: @@
 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===
+==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.
 * ''''type' : 'ui''''
@@ Line 68: / Line 71: @@
 [[Image:Freiburg_software_qooxwave_protocol_flowchart.png]]
-===Building GUI Events - Client to Server Communication===
+==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>") and defined as follows:
 ...
-===Example of qooxWave ===
+==Example of qooxWave ==
   <nowiki>

Team:Freiburg software/Project/qooxWave-details

From 2009.igem.org