Team:Freiburg software/Project/qooxWave-details

From 2009.igem.org

(Difference between revisions)
(Building GUI Events - Client to Server Communication)
Line 87: Line 87:
==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:
+
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.
-
...
+
 
==Example of qooxWave ==
==Example of qooxWave ==

Revision as of 12:10, 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 | ?

Freiburg software qooxwave protocol flowchart.png

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:

Freiburg software qooxwave qooxwave-1.png