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