|
|
| Line 12: |
Line 12: |
| | </style></html></div> | | </style></html></div> |
| | {{:Team:Freiburg_software/Templates/Header}} | | {{:Team:Freiburg_software/Templates/Header}} |
| - | <nowiki>
| |
| - | /* ************************************************************************
| |
| - |
| |
| - | Copyright: SynBioWave (synbiowave.org)
| |
| - |
| |
| - | License: GPL
| |
| - |
| |
| - | Authors: David Nellessen (mail@davidn.de)
| |
| - |
| |
| - | DESCRIPTION:
| |
| - |
| |
| - | This Application is used to create a GUI inside a wave
| |
| - | gadget from a JSON passed via the wave API (wave.getState()). This
| |
| - | Application expects the JSON data to construct the menu
| |
| - | from in wave.getState('ui.structure') with a special structure we call
| |
| - | the qooxwave protocol. This protocol is not yet completed.
| |
| - | For understanding qooxwave protocol, have a look at the documentation:
| |
| - | https://2009.igem.org/Team:Freiburg_software/Project/qooxWave-details
| |
| - |
| |
| - | TODO:
| |
| - | - complete qooxwave protocol
| |
| - | - gadget resizing should respect menus
| |
| - | - Refreshing UI on every state update is not neccessary
| |
| - | - solve absolute url problem (still pointing to sourceforge.net in config.josn)
| |
| - | - rebuild the model on user input and bind model to store
| |
| - | - MVC improvement: when changing something like clicking on a checkbox, the model is not updated correctly
| |
| - | therefore the state has still the old value (no checkbox clicked),
| |
| - | nothing will happen, eventhough the server might whant to uncheck the checkbox!
| |
| - | So there must be either
| |
| - | - a update of the model
| |
| - | - allways update gui on stateupdate
| |
| - | - some kind of mixing of the above: not on every state update, but if the model
| |
| - | might be out of sync
| |
| - | - modelling is very sensible cerncerning their ids. they cannot contain certain characters, which?
| |
| - | - check target url for upload widget
| |
| - |
| |
| - | ************************************************************************ */
| |
| - |
| |
| - | /* ************************************************************************
| |
| - |
| |
| - | #asset(qooxwaveclient/*)
| |
| - |
| |
| - | ************************************************************************ */
| |
| - |
| |
| - | /**
| |
| - | * This is the main application class of "qooxwaveClient"
| |
| - | */
| |
| - | qx.Class.define("qooxwaveclient.Application",
| |
| - | {
| |
| - | extend : qx.application.Standalone,
| |
| - |
| |
| - |
| |
| - | properties : { //this app makes use of the dynamic property feature of qooxdoo. guiModel bind to the model in the store using data binding feature of qooxdoo
| |
| - | guiModel : {nullable : true, apply : "_applyGuiModel", event : "changeGuiModel"}
| |
| - | },
| |
| - |
| |
| - | /*
| |
| - | *****************************************************************************
| |
| - | MEMBERS
| |
| - | *****************************************************************************
| |
| - | */
| |
| - |
| |
| - | members :
| |
| - | {
| |
| - | /**
| |
| - | * This method contains the initial application code and gets called
| |
| - | * during startup of the application
| |
| - | */
| |
| - | main : function()
| |
| - | {
| |
| - | // Call super class
| |
| - | this.base(arguments);
| |
| - |
| |
| - | // Enable logging in debug variant
| |
| - | if (qx.core.Variant.isSet("qx.debug", "on"))
| |
| - | {
| |
| - | // support native logging capabilities, e.g. Firebug for Firefox
| |
| - | qx.log.appender.Native;
| |
| - | // support additional cross-browser console. Press F7 to toggle visibility
| |
| - | qx.log.appender.Console;
| |
| - | }
| |
| - |
| |
| - | /*
| |
| - | -------------------------------------------------------------------------
| |
| - | Below is actual application code...
| |
| - | -------------------------------------------------------------------------
| |
| - | */
| |
| - |
| |
| - | /*
| |
| - | * Define main objects
| |
| - | */
| |
| - |
| |
| - | //general member variables:
| |
| - | this.namespace = new Object();
| |
| - | this.namespace.ui = 'ui';
| |
| - | this.namespace.ui_structure = this.namespace.ui + '.structure';
| |
| - |
| |
| - | //set minHeight of the gadget. This is unfortunaltely nedded, because the auto resizing does not respect menus
| |
| - | this.minHeight = 80;
| |
| - |
| |
| - | //Get Wave Object (simulated when outside of wave)
| |
| - | var wave = new qooxwaveclient.wave.WaveFactory().getWave();
| |
| - |
| |
| - | //create a Store for server-client (wave-thisApp) communication
| |
| - | this.store = new qooxwaveclient.Store(wave, new Array(this.namespace.ui_structure), this.namespace.ui_structure);
| |
| - | wave.setStateCallback(this.store.processStateUpdate, this.store);
| |
| - | this.store.bind("model", this, "guiModel");
| |
| - |
| |
| - | //uncomment the following lines to activate the testing ui
| |
| - | //this.buildTestingUI();
| |
| - | //this.minHeight = 400;
| |
| - |
| |
| - | //Testing Ui can also be activated with a shortcut (works only outside wave)
| |
| - | var find = new qx.event.Command("Control-Y");
| |
| - | find.addListener("execute", function(){
| |
| - | if(qx.ui.core.Widget.contains(this.getRoot(), this.testUi)){
| |
| - | this.testUi.destroy();
| |
| - | this.minHeight = 100;
| |
| - | }
| |
| - | else{
| |
| - | this.buildTestingUI();
| |
| - | this.minHeight = 400;
| |
| - | }
| |
| - | this.refresh();
| |
| - | }, this);
| |
| - |
| |
| - | },
| |
| - |
| |
| - |
| |
| - |
| |
| - | //build the main Widget from guiModel | destruction suggested first
| |
| - | buildMainWidget : function (model){
| |
| - | this.__buildRootGadget();
| |
| - | if(!model) return true;
| |
| - | if(model.type == "ui" && model.subitem){ //distinguish different implementations of qooxwave
| |
| - | model = model.subitem;
| |
| - | }
| |
| - | for(var itemid in model){
| |
| - | var widget = this.__loop(itemid, model[itemid]);
| |
| - | if(widget.qxwidget) this.gadget.add(widget.qxwidget);
| |
| - | else return false;
| |
| - | }
| |
| - | return true;
| |
| - | },
| |
| - |
| |
| - | //public method to destruct gadget
| |
| - | destructMainWidget :function () {
| |
| - | this.__destructRootGadget();
| |
| - | },
| |
| - |
| |
| - | //reBuild this.gadget from guiModel
| |
| - | refresh : function (){
| |
| - | this.destructMainWidget();
| |
| - | //alert(this.getGuiModel().toString());
| |
| - | this.buildMainWidget(this.getGuiModel());
| |
| - | this.resizeGadget();
| |
| - | return true;
| |
| - | },
| |
| - |
| |
| - | //resize wave gadget
| |
| - | resizeGadget : function (){
| |
| - | var heightDest = this.minHeight; //minimal height
| |
| - | if(this.gadget.getBounds()) var heightDest = Math.max(heightDest, this.gadget.getBounds().height);
| |
| - | if(typeof gadgets != "undefined") gadgets.window.adjustHeight(heightDest);
| |
| - | this.debug("SET HEIGHT: " + heightDest);
| |
| - | },
| |
| - |
| |
| - | //executed when new value of GuiModel applied
| |
| - | _applyGuiModel : function (value, old){
| |
| - | if(value == old) this.debug("Apply guiModel. But NO Change detected");
| |
| - | else {
| |
| - | this.debug("Apply guiModel: " + value);
| |
| - | this.refresh();
| |
| - | }
| |
| - | },
| |
| - |
| |
| - | //loops an object item according to the qooxWave protocol
| |
| - | __loop : function (itemid, item){
| |
| - | item.id = itemid;
| |
| - | if(item.type == "toolbar") item = this.__processToolbar(itemid, item);
| |
| - | else if(item.type == "button") item = this.__processButton(itemid, item);
| |
| - | else if(item.type == "checkbox") item = this.__processCheckbox(itemid, item);
| |
| - | else if(item.type == "menu") item = this.__processMenu(itemid, item);
| |
| - | else if(item.type == "label") item = this.__processLabel(itemid, item);
| |
| - | else if(item.type == "form") item = this.__processForm(itemid, item);
| |
| - | else if(item.type == "upload") item = this.__processUpload(itemid, item);
| |
| - | else if(item.type == "chron") item = this.__processChron(itemid, item);
| |
| - | return item;
| |
| - | },
| |
| - |
| |
| - |
| |
| - | //proccesses the toolbar typed items
| |
| - | __processToolbar : function (itemid, item){
| |
| - | if(typeof item.qxwidget == "undefined") item.qxwidget = new qx.ui.toolbar.ToolBar(); //could be create earlier
| |
| - |
| |
| - | if(typeof item.subitem != "undefined"){ //loop subitems
| |
| - | for(var subitemid in item.subitem){
| |
| - | if(item.subitem[subitemid].type == "button"){ //if type of subitem is button create a special toolbar button (design issue)
| |
| - | item.subitem[subitemid].qxwidget = new qx.ui.toolbar.Button();
| |
| - | item.subitem[subitemid] = this.__loop(subitemid, item.subitem[subitemid]);
| |
| - | item.qxwidget.add(item.subitem[subitemid].qxwidget);
| |
| - | }
| |
| - | else if(item.subitem[subitemid].type == "checkbox"){ //if type of subitem is checkbox, create a special toolbar button (design issue)
| |
| - | item.subitem[subitemid].qxwidget = new qx.ui.toolbar.CheckBox();
| |
| - | item.subitem[subitemid] = this.__loop(subitemid, item.subitem[subitemid]);
| |
| - | item.qxwidget.add(item.subitem[subitemid].qxwidget);
| |
| - | }
| |
| - | else if(item.subitem[subitemid].type == "menu"){ //create a special menu (design issue)
| |
| - | item.subitem[subitemid].qxwidget = new qx.ui.toolbar.MenuButton();
| |
| - | item.subitem[subitemid] = this.__loop(subitemid, item.subitem[subitemid]);
| |
| - | item.qxwidget.add(item.subitem[subitemid].qxwidget);
| |
| - | }
| |
| - | }
| |
| - | }
| |
| - | return item;
| |
| - | },
| |
| - |
| |
| - | //processes the form typed items
| |
| - | __processForm : function (itemid, item){
| |
| - | if(typeof item.qxform == "undefined") item.qxform = new qx.ui.form.Form(); //could be create earlier }
| |
| - | item.qxform.addGroupHeader(item.label);
| |
| - |
| |
| - | //create widget
| |
| - | item.qxwidget = new qx.ui.groupbox.GroupBox(""+item.label, null);
| |
| - | item.qxwidget.setLayout(new qx.ui.layout.VBox(5));
| |
| - | item.qxwidget.setMaxWidth(300);
| |
| - |
| |
| - | //A atom that shows loading state
| |
| - | var loadingAtom = new qx.ui.basic.Atom("State", "qooxwaveclient/ajax-loader-large.gif");
| |
| - | loadingAtom.set({alignX : "center", marginTop : 10});
| |
| - | loadingAtom.hide();
| |
| - |
| |
| - | //create model
| |
| - | var model = new Object();
| |
| - |
| |
| - | //create submit queue
| |
| - | var queue = new Array();
| |
| - | var queueCount = 0;
| |
| - |
| |
| - | if(typeof item.subitem != "undefined"){ //loop subitems | most of them are processed directly here, cause they can only be subitems of form
| |
| - |
| |
| - | for(var subitemid in item.subitem){
| |
| - | var skipModelSetup = false;
| |
| - | if(item.subitem[subitemid].type == "textarea"){
| |
| - | item.subitem[subitemid].qxwidget = new qx.ui.form.TextArea();
| |
| - | item.subitem[subitemid].value = item.subitem[subitemid].value+"";
| |
| - | }
| |
| - | else if(item.subitem[subitemid].type == "textfield"){
| |
| - | item.subitem[subitemid].qxwidget = new qx.ui.form.TextField();
| |
| - | item.subitem[subitemid].qxwidget.setMinWidth(150);
| |
| - | item.subitem[subitemid].value = item.subitem[subitemid].value+"";
| |
| - | }
| |
| - | else if(item.subitem[subitemid].type == "checkbox"){
| |
| - | item.subitem[subitemid].qxwidget = new qx.ui.form.CheckBox();
| |
| - | item.subitem[subitemid].value = !!item.subitem[subitemid].value; //parse to boolean
| |
| - | }
| |
| - | else if(item.subitem[subitemid].type == "radio"){
| |
| - | item.subitem[subitemid].qxwidget = new qx.ui.form.RadioButton();
| |
| - | item.subitem[subitemid].value = !!item.subitem[subitemid].value; //parse to boolean
| |
| - | //add to radio group
| |
| - | if(!item.subitem[subitemid].group) continue;
| |
| - | if(typeof item.radiogroups == "undefined") item.radiogroups = new Object();
| |
| - | if(typeof item.radiogroups[item.subitem[subitemid].group] == "undefined") item.radiogroups[item.subitem[subitemid].group] = new qx.ui.form.RadioButtonGroup();
| |
| - | item.radiogroups[item.subitem[subitemid].group].add(item.subitem[subitemid].qxwidget);
| |
| - | }
| |
| - | else if(item.subitem[subitemid].type == "download"){ //section copied from == "upload" so the notaion is wrong. TODO: change this
| |
| - | item.subitem[subitemid].upload = new qooxwaveclient.Download(item.subitem[subitemid].target+"", this.namespace.ui + "." + subitemid, this.store, false, "application/x-www-form-urlencoded");
| |
| - | item.qxwidget.add(item.subitem[subitemid].upload);
| |
| - | item.subitem[subitemid].qxwidget = new qx.ui.form.TextField();
| |
| - | item.subitem[subitemid].qxwidget.setReadOnly(true);
| |
| - |
| |
| - | //bind filename upload -> textfield
| |
| - | item.subitem[subitemid].upload.bind("fileName", item.subitem[subitemid].qxwidget, "value");
| |
| - | item.subitem[subitemid].value = item.subitem[subitemid].value+"";
| |
| - |
| |
| - | //process submitting
| |
| - | item.subitem[subitemid].upload.queueCount = queueCount;
| |
| - | item.subitem[subitemid].upload.go = function(){
| |
| - | toogelLoadingAtom("downloading ...");
| |
| - | this.modefieUri(item.serialize("uri"));
| |
| - | this.submit();
| |
| - | toogelLoadingAtom("Uploading " + this.getFileName() + "...");
| |
| - | };
| |
| - | item.subitem[subitemid].upload.addListener("onload", function(e){
| |
| - | qx.event.Timer.once(queue[this.queueCount+1].go, queue[this.queueCount+1], 1000);
| |
| - | },item.subitem[subitemid].upload);
| |
| - | queue[queueCount] = item.subitem[subitemid].upload;
| |
| - | queueCount++;
| |
| - |
| |
| - | //hide textfield
| |
| - | item.subitem[subitemid].qxwidget.setEnabled(false);
| |
| - | }
| |
| - | else if(item.subitem[subitemid].type == "upload" ){
| |
| - | item.subitem[subitemid].upload = new qooxwaveclient.Upload(item.subitem[subitemid].target+"", this.namespace.ui + "." + subitemid, this.store, false, "multipart/form-data");
| |
| - | item.qxwidget.add(item.subitem[subitemid].upload);
| |
| - | item.subitem[subitemid].qxwidget = new qx.ui.form.TextField();
| |
| - | item.subitem[subitemid].qxwidget.setReadOnly(true);
| |
| - |
| |
| - | //bind filename upload -> textfield
| |
| - | item.subitem[subitemid].upload.bind("fileName", item.subitem[subitemid].qxwidget, "value");
| |
| - | item.subitem[subitemid].value = item.subitem[subitemid].value+"";
| |
| - |
| |
| - | //process submitting
| |
| - | item.subitem[subitemid].upload.queueCount = queueCount;
| |
| - | item.subitem[subitemid].upload.go = function(){
| |
| - | toogelLoadingAtom("Uploading ...");
| |
| - | this.modefieUri(item.serialize("uri"));
| |
| - | this.submit();
| |
| - | toogelLoadingAtom("Uploading " + this.getFileName() + "...");
| |
| - | };
| |
| - | item.subitem[subitemid].upload.addListener("onload", function(e){
| |
| - | qx.event.Timer.once(queue[this.queueCount+1].go, queue[this.queueCount+1], 1000);
| |
| - | },item.subitem[subitemid].upload);
| |
| - | item.subitem[subitemid].upload.addListener("error", function(e){
| |
| - | alert('There was one upload field not specified. Nothing to send.');
| |
| - | qx.event.Timer.once(queue[this.queueCount+1].go, queue[this.queueCount+1], 1000);
| |
| - | },item.subitem[subitemid].upload);
| |
| - | queue[queueCount] = item.subitem[subitemid].upload;
| |
| - | queueCount++;
| |
| - |
| |
| - | //hide textfield
| |
| - | item.subitem[subitemid].qxwidget.setEnabled(false);
| |
| - | }
| |
| - | else continue; //make sure only available subitems are processed
| |
| - | if(!skipModelSetup){ //TODO ... HMMMM
| |
| - | model[subitemid] = item.subitem[subitemid].value; //fill the model
| |
| - | item.subitem[subitemid].qxwidget.setValue(item.subitem[subitemid].value);
| |
| - | }
| |
| - | item.subitem[subitemid].qxwidget.setWidth(180); //TODO
| |
| - | item.qxform.add(item.subitem[subitemid].qxwidget, item.subitem[subitemid].label, null, subitemid);
| |
| - | }
| |
| - | }
| |
| - |
| |
| - | //form model and data binding
| |
| - | model = qx.data.marshal.Json.createModel(model);
| |
| - | var formController = new qx.data.controller.Form(model, item.qxform);
| |
| - | item.serialize = function(method){
| |
| - | if(method == "json"){
| |
| - | var modelJson = qx.util.Serializer.toJson(model);
| |
| - | var value = modelJson+"";
| |
| - | value = value.replace(/"/g, "'");
| |
| - | }
| |
| - | else if(method == "uri"){
| |
| - | var modelUri = qx.util.Serializer.toUriParameter(model, function(object){return ""+object;});
| |
| - | var value = modelUri+"";
| |
| - | value = value.replace(/"/g, "'");
| |
| - | }
| |
| - | else value = null;
| |
| - | return value;
| |
| - | };
| |
| - |
| |
| - | //toggle loading icon
| |
| - | toogelLoadingAtom = function (label){
| |
| - | //if(qx.ui.core.contains(item.qxwidget, this.))
| |
| - | if(!label) loadingAtom.hide();
| |
| - | else {
| |
| - | loadingAtom.setLabel(""+label);
| |
| - | loadingAtom.show();
| |
| - | }
| |
| - | };
| |
| - |
| |
| - | // send button
| |
| - | var sendButton = new qx.ui.form.Button("Send", "icon/16/actions/dialog-ok.png");
| |
| - | queue[queueCount] = new Object();
| |
| - | queue[queueCount].deltaid = this.namespace.ui + "." + itemid;
| |
| - | queue[queueCount].store = this.store;
| |
| - | queue[queueCount].gadget = this.gadget;
| |
| - | queue[queueCount].widget = item.qxwidget;
| |
| - | queue[queueCount].go = function(){
| |
| - | toogelLoadingAtom("validating form");
| |
| - | //TODO: validation
| |
| - | var delta = new Object();
| |
| - | value = item.serialize("json");
| |
| - | delta[this.deltaid] = "{'event' : 'changeValue', 'value' : " + value + "}";
| |
| - | this.store.submitEventDelta(delta);
| |
| - |
| |
| - | toogelLoadingAtom(null);
| |
| - | if(qx.ui.core.Widget.contains(this.gadget, this.widget)) this.gadget.remove(this.widget); //remove form
| |
| - |
| |
| - | };
| |
| - |
| |
| - | //submit form on pressing the send button
| |
| - | sendButton.addListener("execute", function(e){
| |
| - | queue[0].go();
| |
| - | }, this);
| |
| - | item.qxform.addButton(sendButton);
| |
| - |
| |
| - | // reset button
| |
| - | var resetButton = new qx.ui.form.Button("Reset", "icon/16/actions/dialog-cancel.png");
| |
| - | resetButton.addListener("execute", function() {
| |
| - | item.qxform.reset();
| |
| - | }, this);
| |
| - | item.qxform.addButton(resetButton);
| |
| - |
| |
| - | //add formwidget to item.qxwidget
| |
| - | item.qxwidget.view = item.qxform.createView();
| |
| - | item.qxwidget.add(item.qxwidget.view);
| |
| - |
| |
| - | //add loadingAtom
| |
| - | item.qxwidget.add(loadingAtom);
| |
| - |
| |
| - | return item;
| |
| - | },
| |
| - |
| |
| - |
| |
| - | //processes the upload typed items
| |
| - | __processUpload : function (itemid, item){
| |
| - | item.qxwidget = new qooxwaveclient.Upload(item.target+"", this.namespace.ui + "." + item.id, this.store, true, "multipart/form-data");
| |
| - | return item;
| |
| - | },
| |
| - |
| |
| - |
| |
| - | //processes the button typed items
| |
| - | __processButton : function (itemid, item){
| |
| - | if(typeof item.qxwidget == "undefined") item.qxwidget = new qx.ui.form.Button(); //could be create earlier }
| |
| - | item.qxwidget.setLabel(item.label);
| |
| - | var childrenToToogle = new Array();
| |
| - |
| |
| - | if(typeof item.subitem != "undefined"){ //loop subitems
| |
| - | for(var subitemid in item.subitem){
| |
| - | if(item.subitem[subitemid].type == "form"){ //create a form
| |
| - | item.subitem[subitemid] = this.__loop(subitemid, item.subitem[subitemid]);
| |
| - | //for toogling on and off the forms onClick (so some lines below...)
| |
| - | childrenToToogle.push(item.subitem[subitemid].qxwidget);
| |
| - | }
| |
| - | if(item.subitem[subitemid].type == "upload"){ //create a upload form
| |
| - | item.subitem[subitemid] = this.__loop(subitemid, item.subitem[subitemid]);
| |
| - | //for toogling on and off the forms onClick (so some lines below...)
| |
| - | childrenToToogle.push(item.subitem[subitemid].qxwidget);
| |
| - | }
| |
| - | else continue; // make sure only allowed subitems are added
| |
| - |
| |
| - | }
| |
| - | }
| |
| - |
| |
| - | //attach onClick event
| |
| - | item.qxwidget.addListener("execute", function (event) {
| |
| - |
| |
| - | //toogle forms on and off
| |
| - | for(var i = 0; i<childrenToToogle.length; i++){
| |
| - | //alert(i);
| |
| - | if(qx.ui.core.Widget.contains(this.gadget, childrenToToogle[i])){
| |
| - | this.gadget.remove(childrenToToogle[i]);
| |
| - | }
| |
| - | else{
| |
| - | this.gadget.add(childrenToToogle[i]);
| |
| - | }
| |
| - | }
| |
| - | if(typeof item.subitem == "undefined") { //only fire if there are no subitems
| |
| - | var delta = new Object();
| |
| - | var id = this.namespace.ui + "." + item.id;
| |
| - | delta[id] = "{'event' : 'execute'}";
| |
| - | //delta[id]['status'] = "fired";
| |
| - | this.store.submitEventDelta(delta);
| |
| - | }
| |
| - | }, this);
| |
| - |
| |
| - | return item;
| |
| - | },
| |
| - |
| |
| - | //processes the checkbox typed items
| |
| - | __processCheckbox : function (itemid, item){
| |
| - | if(typeof item.qxwidget == "undefined") item.qxwidget = new qx.ui.form.CheckBox(); //could be create earlier }
| |
| - | item.qxwidget.setLabel(item.label);
| |
| - | item.qxwidget.setValue(!!item.value);
| |
| - |
| |
| - | //attach onClick event
| |
| - | item.qxwidget.addListener("changeValue", function (event) {
| |
| - | var delta = new Object();
| |
| - | var id = this.namespace.ui + "." + item.id;
| |
| - | delta[id] = "{\"event\" : \"changeValue\", \"value\" : \"" + event.getValue() + "\"}";
| |
| - | this.store.submitEventDelta(delta);
| |
| - | }, this);
| |
| - |
| |
| - | return item;
| |
| - | },
| |
| - |
| |
| - | //processes the chron typed items. This item fires automated events.
| |
| - | __processChron : function (itemid, item){
| |
| - | item.qxwidget = new qx.ui.groupbox.GroupBox("", null);
| |
| - | item.qxwidget.setLayout(new qx.ui.layout.VBox(5));
| |
| - | item.qxwidget.setMaxWidth(300);
| |
| - |
| |
| - | var loadingAtom = new qx.ui.basic.Atom(""+item.label, "qooxwaveclient/ajax-loader-large.gif");
| |
| - | loadingAtom.set({alignX : "center"});
| |
| - | item.qxwidget.add(loadingAtom);
| |
| - |
| |
| - | var count = 1;
| |
| - |
| |
| - | item.chron = function(){
| |
| - | var delta = new Object();
| |
| - | var id = this.namespace.ui + "." + item.id;
| |
| - | //loadingAtom.setLabel(""+count);
| |
| - | count++;
| |
| - | delta[id] = "{'event' : 'execute'}";
| |
| - | //delta[id]['status'] = "fired";
| |
| - | this.store.submitEventDelta(delta);
| |
| - | };
| |
| - |
| |
| - | //create timer to regularily fire events
| |
| - | var timer = new qx.event.Timer(parseInt(item.value)+10);
| |
| - | timer.addListener("interval", item.chron, this);
| |
| - | timer.start();
| |
| - |
| |
| - | return item;
| |
| - | },
| |
| - |
| |
| - | //processes the label typed items
| |
| - | __processLabel : function (itemid, item){
| |
| - | if(typeof item.qxwidget == "undefined") item.qxwidget = new qx.ui.basic.Label(item.label); //could be create earlier }
| |
| - | return item;
| |
| - | },
| |
| - |
| |
| - | //processes the menu typed items
| |
| - | __processMenu : function (itemid, item){
| |
| - | if(typeof item.qxwidget == "undefined") item.qxwidget = new qx.ui.menu.Button(); //could be create earlier }
| |
| - | item.qxwidget.setLabel(item.label);
| |
| - |
| |
| - | var menu = new qx.ui.menu.Menu(); //create a new menucontainer
| |
| - | item.qxwidget.setMenu(menu); //and set it
| |
| - | if(typeof item.subitem != "undefined"){ //loop subitems
| |
| - | for(var subitemid in item.subitem){
| |
| - | if(item.subitem[subitemid].type == "button"){ //if type of subitem is button, create a special menu button (design issue)
| |
| - | item.subitem[subitemid].qxwidget = new qx.ui.menu.Button();
| |
| - | item.subitem[subitemid] = this.__loop(subitemid, item.subitem[subitemid]);
| |
| - | menu.add(item.subitem[subitemid].qxwidget);
| |
| - | }
| |
| - | else if(item.subitem[subitemid].type == "checkbox"){ //if type of subitem is checkbox, create a special menu checkbox (design issue)
| |
| - | item.subitem[subitemid].qxwidget = new qx.ui.menu.CheckBox();
| |
| - | item.subitem[subitemid] = this.__loop(subitemid, item.subitem[subitemid]);
| |
| - | menu.add(item.subitem[subitemid].qxwidget);
| |
| - | }
| |
| - | else if(item.subitem[subitemid].type == "menu"){ //create a special menu (design issue)
| |
| - | item.subitem[subitemid].qxwidget = new qx.ui.menu.Button();
| |
| - | item.subitem[subitemid] = this.__loop(subitemid, item.subitem[subitemid]);
| |
| - | menu.add(item.subitem[subitemid].qxwidget);
| |
| - | }
| |
| - | }
| |
| - | }
| |
| - |
| |
| - | return item;
| |
| - | },
| |
| - |
| |
| - | //Destructs this.gadget, the root gadget of the application
| |
| - | __destructRootGadget : function (){
| |
| - | if(typeof this.gadget != "undefined" && !this.gadget.isDisposed()){
| |
| - | this.getRoot().remove(this.gadget);
| |
| - | this.gadget.dispose();
| |
| - | }
| |
| - | },
| |
| - |
| |
| - | //builds the root geadget (this,gadget) of the application. Any other gadget is added to this. this.gadget != this.getRoot()
| |
| - | __buildRootGadget : function (){
| |
| - | this.gadget = new qx.ui.container.Composite(); //set an individual 'root' object called gadget. could be changed later on to calculate the correct height of the widget. Is also used to use a different layout than canvas
| |
| - |
| |
| - | //Set the layut of the root.gadget container
| |
| - | var layout = new qx.ui.layout.VBox();
| |
| - | layout.setSpacing(4); // apply spacing
| |
| - | this.gadget.setLayout(layout);
| |
| - | this.getRoot().add(this.gadget, {left:0, top:0, right:0});
| |
| - | this.gadget.addListener("resize", function(){
| |
| - | this.debug("HEIGHT: " + this.gadget.getBounds().height);
| |
| - | this.resizeGadget();
| |
| - | }, this);
| |
| - | },
| |
| - |
| |
| - |
| |
| - | //returns a test string in qooxwave protocol form
| |
| - | __getTestString : function (){
| |
| - |
| |
| - | var submenu = "'submenu' : {" +
| |
| - | "'type' : 'menu' ," +
| |
| - | "'label' : 'Click Me' ," +
| |
| - | "'subitem' : {'subsubmenu' : {" +
| |
| - | "'type' : 'button' ," +
| |
| - | "'label' : 'or click me'" +
| |
| - | "}}" +
| |
| - | "}";
| |
| - | var upload =
| |
| - | "'datei1' : {" +
| |
| - | "'label' : 'Datei 1' ," +
| |
| - | "'type' : 'upload'," +
| |
| - | "'target' : 'http://www.davidn.de/index.php'" +
| |
| - | "}";
| |
| - | var upload2 =
| |
| - | "'datei2' : {" +
| |
| - | "'label' : 'Datei 2' ," +
| |
| - | "'type' : 'upload'," +
| |
| - | "'target' : 'http://www.davidn.de/index.php'" +
| |
| - | "}";
| |
| - |
| |
| - | var formular = "'id0000' : {" +
| |
| - | "'label' : 'Upload File' ," +
| |
| - | "'type' : 'form'," +
| |
| - | "'subitem' : {" +
| |
| - | "'form_bemerkung' : {" +
| |
| - | "'type' : 'textfield'," +
| |
| - | "'label' : 'Bemerkung'," +
| |
| - | "'value' : ''" +
| |
| - | "}," +
| |
| - | "'form_checkbox1' : {" +
| |
| - | "'type' : 'checkbox'," +
| |
| - | "'label' : 'Aut. Erkennung'," +
| |
| - | "'value' : true" +
| |
| - | "}," +
| |
| - | "'form_format1' : {" +
| |
| - | "'type' : 'radio'," +
| |
| - | "'label' : 'Format 1'," +
| |
| - | "'group' : 'formatgruppe'," +
| |
| - | "'value' : 'abc'" +
| |
| - | "}," +
| |
| - | "'form_format2' : {" +
| |
| - | "'type' : 'radio'," +
| |
| - | "'label' : 'Format 3'," +
| |
| - | "'group' : 'formatgruppe'," +
| |
| - | "'value' : false" +
| |
| - | "}," +
| |
| - | upload + "," + upload2 +
| |
| - | "} " +
| |
| - | "}";
| |
| - |
| |
| - | return "{" +
| |
| - |
| |
| - | // formular + "," +
| |
| - | "'rootid' : {" +
| |
| - | "'type' : 'toolbar' ," +
| |
| - | "'label' : 'root element' ," +
| |
| - | "'subitem' : {" +
| |
| - | /* "'subid1' : {" +
| |
| - | "'type' : 'button' ," +
| |
| - | "'label' : 'Form'," +
| |
| - | "'subitem' : " +
| |
| - | "{" +
| |
| - | formular +
| |
| - | "}" +
| |
| - | "}," +*/
| |
| - | "'subid2' : {" +
| |
| - | "'type' : 'button' ," +
| |
| - | "'label' : 'Upload a file'," +
| |
| - | "'subitem' : {" +
| |
| - | upload +
| |
| - | "}" +
| |
| - | "}," +
| |
| - | " 'subid3' : {" +
| |
| - | "'type' : 'menu' ," +
| |
| - | "'label' : 'Menu' ," +
| |
| - | "'subitem' : {" +
| |
| - | submenu +
| |
| - | "}" +
| |
| - | "}}" +
| |
| - | "} " +
| |
| - | "}";
| |
| - | },
| |
| - |
| |
| - | //builds the testing ui for debuggin. It shows state data and allows to create ui from user input strings
| |
| - | buildTestingUI : function () {
| |
| - | var container = new qx.ui.container.Composite();
| |
| - | this.testUi = container;
| |
| - | var layout = new qx.ui.layout.VBox();
| |
| - | layout.setSpacing(10);
| |
| - | container.setLayout(layout);
| |
| - | this.getRoot().add(container, {right: 0, top: 40});
| |
| - |
| |
| - | var button = new qx.ui.form.Button("Refresh GUI (state update causes this)");
| |
| - | button.addListener("execute", this.refresh, this);
| |
| - |
| |
| - | container.add(new qx.ui.core.Spacer(50));
| |
| - | container.add(new qx.ui.basic.Label("Submit a JSON-String as Delta with key " + this.namespace.ui_structure + ":"));
| |
| - | var input = new qx.ui.form.TextArea();
| |
| - | input.app = this;
| |
| - | container.add(input);
| |
| - |
| |
| - | var button = new qx.ui.form.Button("Submit the above input as structure");
| |
| - | container.add(button);
| |
| - | button.addListener("execute", function (e){
| |
| - | var delta = new Object();
| |
| - | delta[this.app.namespace.ui_structure] = this.getValue();
| |
| - | this.app.store.submitEventDelta(delta);
| |
| - | }, input);
| |
| - |
| |
| - | var button = new qx.ui.form.Button("TEST ME! (Example JSON)");
| |
| - | container.add(button);
| |
| - | button.addListener("execute", function (e){
| |
| - | var delta = new Object();
| |
| - | delta[this.app.namespace.ui_structure] = this.app.__getTestString();
| |
| - | this.app.store.submitEventDelta(delta);
| |
| - | this.setValue(delta[this.app.namespace.ui_structure]);
| |
| - | }, input);
| |
| - |
| |
| - | container.add(new qx.ui.core.Spacer(50));
| |
| - | var info = new qx.ui.form.TextArea();
| |
| - | info.setReadOnly(true);
| |
| - | container.add(new qx.ui.basic.Label("Submit Delta Info:"));
| |
| - | container.add(info);
| |
| - | this.store.bind("modelDebug", info, "value");
| |
| - | }
| |
| - |
| |
| - | }
| |
| - | });
| |
| - | </nowiki>
| |
"
