org.argeo.slc.webapp/src/main/webapp/argeo-ria-lib/slc/class/org/argeo/slc/ria/execution/SpecEditor.js

   1 /**
   2  * Generic modal popup window.
   3  * It is layed out with a dock layout. When adding components to it, they are added as "center".
   4  * @author Charles du Jeu
   5  */
   6 qx.Class.define("org.argeo.slc.ria.execution.SpecEditor",
   7 {
   8         extend : qx.ui.window.Window,
   9
  10         properties : {
  11                 batchEntrySpec : {
  12                         check : "org.argeo.slc.ria.execution.BatchEntrySpec"
  13                 }
  14         },
  15
  16         events : {
  17                 /**
  18                  * Triggered when the user clicks the "save" button.
  19                  */
  20                 "save" : "qx.event.type.Event",
  21                 "modified" : "qx.event.type.Event"
  22
  23         },
  24         /**
  25          *
  26          * @param caption {String} Title of the window
  27          * @param icon {String} Icon of the window
  28          * @param text {String} Default content of the window.
  29          */
  30         construct : function(batchEntrySpec){
  31                 var editorLabel = "Edit Specs for "+batchEntrySpec.getLabel();
  32                 this.base(arguments, editorLabel);
  33                 this.set({
  34                         batchEntrySpec : batchEntrySpec,
  35                         showMaximize : false,
  36                         showMinimize : false,
  37                         width: Math.min(parseInt(qx.bom.Viewport.getWidth()*90/100), 400),
  38                         height: parseInt(qx.bom.Viewport.getHeight()*60/100)
  39                 });
  40                 this.setLayout(new qx.ui.layout.Dock());
  41                 this.setModal(true);
  42                 this.center();
  43                 this._initFormObject(this.getBatchEntrySpec().getLabel());
  44                 this._addFormHeader(this.formObject, editorLabel);
  45                 this.createFormFromSpec();
  46                 this.addContent(this.formObject.pane);
  47                 this.addOkCancel();
  48                 this.addListener("save", function(e){
  49                         this.saveFormToSpec();
  50                 }, this);
  51         },
  52
  53         members : {
  54                 createFormFromSpec : function(){
  55                         var values = this.getBatchEntrySpec().getValues();
  56                         for(var key in values){
  57                                 var valueObj = values[key];
  58                                 var label = key;
  59                                 var hidden = valueObj.getHidden();
  60                                 var disabled = valueObj.getFrozen();
  61                                 var value = valueObj.getValue();
  62                                 var type = valueObj.getSpecType();
  63                                 var subType = valueObj.getSpecSubType();
  64                                 if(type == "primitive" && !hidden){
  65                                         this._addFormInputText(this.formObject, key, key, value, disabled, subType);
  66                                 }
  67                         }
  68                 },
  69
  70                 saveFormToSpec : function(){
  71                         var values = this.getBatchEntrySpec().getValues();
  72                         for(var key in values){
  73                                 var valueObj = values[key];
  74                                 var hidden = valueObj.getHidden();
  75                                 var disabled = valueObj.getFrozen();
  76                                 if(valueObj.getSpecType() == "primitive"){
  77                                         if(!hidden && !disabled){
  78                                                 valueObj.setValue(this.formObject.fields[key].getValue());
  79                                         }
  80                                 }
  81                         }
  82                 },
  83
  84                 /**
  85                  * Display a component (panel) in the center of the popup
  86                  * @param panel {qx.ui.core.Widget} A gui component (will be set at width 100%).
  87                  */
  88                 addContent: function(panel){
  89                         this.add(new qx.ui.container.Scroll(panel), {edge:'center', width:'100%'});
  90                 },
  91                 /**
  92                  * Automatically attach to the application root, then show.
  93                  */
  94                 attachAndShow:function(){
  95                         org.argeo.ria.components.ViewsManager.getInstance().getApplicationRoot().add(this);
  96                         this.show();
  97                 },
  98                 /**
  99                  * Init a form part : creates a pane, a set of fields, etc.
 100                  * @param label {String} A label
 101                  * @return {Map} The form part.
 102                  */
 103                 _initFormObject : function(label){
 104                         this.formObject = {};
 105                         this.formObject.hiddenFields = {};
 106                         this.formObject.freeFields = [];
 107                         this.formObject.fields = {};
 108                         this.formObject.label = label;
 109                         this.formObject.pane = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));
 110                         return this.formObject;
 111                 },
 112
 113                 /**
 114                  * Creates a simple label/input form entry.
 115                  * @param formObject {Map} The form part
 116                  * @param fieldName {String} Name
 117                  * @param fieldLabel {String} Label of the field
 118                  * @param defaultValue {String} The default value
 119                  * @param choiceValues {Map} An map of values
 120                  */
 121                 _addFormInputText : function(formObject, fieldName, fieldLabel, defaultValue, disabled, subType, choiceValues){
 122                         var labelElement;
 123                         if(choiceValues){
 124                                 var fieldElement = new qx.ui.form.SelectBox();
 125                                 for(var key in choiceValues){
 126                                         fieldElement.add(new qx.ui.form.ListItem(choiceValues[key], null, key));
 127                                 }
 128                                 fieldElement.addListener("changeSelected", function(e){this.fireEvent("modified")}, this);
 129                         }else{
 130                                 var fieldElement = new qx.ui.form.TextField();
 131                                 if(subType == "integer"){
 132                                         fieldElement.addListener("changeValue", function(e){
 133                                                 var isNum = !isNaN(e.getData() * 1);
 134                                                 if(!isNum){
 135                                                         alert("Warning, this field only accepts Integers!");
 136                                                 }
 137                                         }, this);
 138                                 }
 139                                 fieldElement.addListener("input", function(e){this.fireEvent("modified")}, this);
 140                         }
 141                         if(defaultValue){
 142                                 fieldElement.setValue(defaultValue);
 143                         }
 144                         if(fieldName && fieldLabel){
 145                                 labelElement = new qx.ui.basic.Label(fieldLabel);
 146                                 formObject.fields[fieldName] = fieldElement;
 147                         }else{
 148                                 labelElement = new qx.ui.form.TextField();
 149                                 formObject.freeFields.push({
 150                                         labelEl:labelElement,
 151                                         valueEl:fieldElement
 152                                 });
 153                         }
 154                         if(disabled) fieldElement.setEnabled(false);
 155                         this._addFormEntry(formObject, labelElement, fieldElement);
 156                 },
 157
 158                 /**
 159                  * Add an header
 160                  * @param formObject {Map} The form part
 161                  * @param content {Mixed} Content to add.
 162                  * @param additionnalButton {Mixed} Any widget to add on the east.
 163                  */
 164                 _addFormHeader : function(formObject, content, additionnalButton){
 165                         var header = new qx.ui.basic.Label('<big><b>'+content+'</b></big>');
 166                         header.setRich(true);
 167                         if(!additionnalButton){
 168                                 header.setPaddingBottom(10);
 169                                 formObject.pane.add(header);
 170                         }else{
 171                                 var pane = new qx.ui.container.Composite(new qx.ui.layout.Dock());
 172                                 pane.setPaddingBottom(10);
 173                                 pane.setPaddingRight(10);
 174                                 pane.add(header, {edge:'center'});
 175                                 pane.add(additionnalButton, {edge:'east'});
 176                                 formObject.pane.add(pane);
 177                         }
 178                 },
 179
 180                 /**
 181                  * Adds a label/input like entry in the form.
 182                  * @param formObject {Map} The form part
 183                  * @param labelElement {Object} Either a label or an input
 184                  * @param fieldElement {Object} Any form input.
 185                  */
 186                 _addFormEntry : function(formObject, labelElement, fieldElement){
 187                         var entryPane = new qx.ui.container.Composite(new qx.ui.layout.HBox(5));
 188                         labelElement.setWidth(150);
 189                         labelElement.setTextAlign("right");
 190                         entryPane.add(labelElement);
 191                         entryPane.add(new qx.ui.basic.Label(':'));
 192                         fieldElement.setWidth(150);
 193                         entryPane.add(fieldElement);
 194                         formObject.pane.add(entryPane);
 195                 },
 196
 197                 /**
 198                  * Adds a close button bottom-center aligned to the popup
 199                  */
 200                 addCloseButton : function(){
 201                         this.closeButton = new qx.ui.form.Button("Close");
 202                         this.closeButton.addListener("execute", this._closeAndDestroy, this);
 203                         this.add(this.closeButton, {edge:'south'});
 204                 },
 205                 /**
 206                  * Adds two buttons bottom-center aligned (Ok and Cancel).
 207                  * Ok button has no listener by default, Cancel will close and destroy the popup.
 208                  */
 209                 addOkCancel : function(){
 210                         var buttonPane = new qx.ui.container.Composite(new qx.ui.layout.HBox(5, 'right'));
 211                         buttonPane.setAlignX("center");
 212                         this.add(buttonPane, {edge:"south"});
 213                         this.okButton = new qx.ui.form.Button("Save");
 214                         this.okButton.setEnabled(false);
 215                         this.addListener("modified", function(e){
 216                                 this.okButton.setEnabled(true);
 217                         }, this);
 218                         this.okButton.addListener("execute", function(e){
 219                                 this.fireEvent("save");
 220                                 this.okButton.setEnabled(false);
 221                         }, this);
 222                         this.cancelButton = new qx.ui.form.Button("Close");
 223                         this.cancelButton.addListener("execute", this._closeAndDestroy, this);
 224                         buttonPane.add(this.okButton);
 225                         buttonPane.add(this.cancelButton);
 226                 },
 227                 /**
 228                  * Close this modal window and destroy it.
 229                  */
 230                 _closeAndDestroy : function(){
 231                         this.hide();
 232                         this.destroy();
 233                 }
 234         }
 235 });