"
Team:Freiburg software/Project/qooxWave-details
From 2009.igem.org
(→Item Structure) |
(→Item Structure) |
||
| Line 38: | Line 38: | ||
==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. | 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'''' | * ''''type' : 'ui'''' | ||
** available keys: | ** available keys: | ||
Revision as of 12:12, 21 October 2009
Contents |
qooxWave protocol
You can find an introduction to the qooxWave protocol here: 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"). There is no complete documentaion available at the moment because this part of the protocol is still in heavy changes.
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:
