"
Team:Freiburg software/Project/qooxWave-details
From 2009.igem.org
(New page: ===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: <nowiki> ...)
Newer edit →
Revision as of 10:47, 20 October 2009
Contents |
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:
