org.argeo.slc.webapp/src/main/webapp/argeo-ria-src/class/org/argeo/ria/components/Modal.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.ria.components.Modal",
   7 {
   8         extend : qx.ui.window.Window,
   9
  10         properties : {
  11                 persistent : {
  12                         check : "Boolean",
  13                         init : false
  14                 }
  15         },
  16
  17         events : {
  18                 /**
  19                  * Triggered when the user clicks the "ok" button.
  20                  */
  21                 "ok" : "qx.event.type.Event"
  22         },
  23         /**
  24          *
  25          * @param caption {String} Title of the window
  26          * @param icon {String} Icon of the window
  27          * @param text {String} Default content of the window.
  28          */
  29         construct : function(caption, icon, text){
  30                 this.base(arguments, caption, icon);
  31                 this.set({
  32                         showMaximize : false,
  33                         showMinimize : false,
  34                         width: 200,
  35                         height: 150
  36                 });
  37                 this.setLayout(new qx.ui.layout.Dock());
  38                 this.setModal(true);
  39                 this.center();
  40                 if(text){
  41                         this.addLabel(text);
  42                 }
  43         },
  44
  45         members : {
  46
  47                 addCenter : function(component){
  48                         if(!this.getPersistent()){
  49                                 this.add(component, {edge : 'center', width:'100%'});
  50                         }else{
  51                                 if(!this.centerScroller){
  52                                         this.centerScroller = new qx.ui.container.Composite(new qx.ui.layout.VBox(1));
  53                                         this.add(new qx.ui.container.Scroll(this.centerScroller), {edge : 'center', width:'100%', height:'100%'});
  54                                 }
  55                                 this.centerScroller.add(component);
  56                         }
  57                 },
  58
  59                 /**
  60                  * Display text inside the popup
  61                  * @param text {String} A string content for the popup
  62                  */
  63                 addLabel:function(text){
  64                         var label = new qx.ui.basic.Label(text);
  65                         label.setRich(true);
  66                         label.setTextAlign("center");
  67                         this.addCenter(label);
  68                         this.addCloseButton();
  69                 },
  70                 /**
  71                  * Add a question and ok / cancel buttons
  72                  * @param text {String} The question to ask to the user
  73                  */
  74                 addConfirm : function(text){
  75                         var label = new qx.ui.basic.Label(text);
  76                         label.setRich(true);
  77                         label.setTextAlign("center");
  78                         this.addCenter(label);
  79                         this.addOkCancel();
  80                 },
  81                 /**
  82                  * Display a component (panel) in the center of the popup
  83                  * @param panel {qx.ui.core.Widget} A gui component (will be set at width 100%).
  84                  */
  85                 addContent: function(panel){
  86                         this.addCenter(panel);
  87                         this.addCloseButton();
  88                 },
  89                 /**
  90                  * Automatically attach to the application root, then show.
  91                  */
  92                 attachAndShow:function(){
  93                         if(!this.attached){
  94                                 org.argeo.ria.components.ViewsManager.getInstance().getApplicationRoot().add(this);
  95                                 this.attached = true;
  96                         }
  97                         this.show();
  98                 },
  99                 /**
 100                  * Adds a close button bottom-center aligned to the popup
 101                  */
 102                 addCloseButton : function(){
 103                         this.closeButton = new qx.ui.form.Button("Close");
 104                         this.closeButton.addListener("execute", this._closeAndDestroy, this);
 105                         this.add(this.closeButton, {edge:'south'});
 106                 },
 107                 /**
 108                  * Adds two buttons bottom-center aligned (Ok and Cancel).
 109                  * Ok button has no listener by default, Cancel will close and destroy the popup.
 110                  */
 111                 addOkCancel : function(){
 112                         var buttonPane = new qx.ui.container.Composite(new qx.ui.layout.HBox(5, 'right'));
 113                         buttonPane.setAlignX("center");
 114                         this.add(buttonPane, {edge:"south"});
 115                         this.okButton = new qx.ui.form.Button("Ok");
 116                         this.okButton.addListener("execute", function(e){
 117                                 this.fireEvent("ok");
 118                                 this._closeAndDestroy();
 119                         }, this);
 120                         this.cancelButton = new qx.ui.form.Button("Cancel");
 121                         this.cancelButton.addListener("execute", this._closeAndDestroy, this);
 122                         buttonPane.add(this.okButton);
 123                         buttonPane.add(this.cancelButton);
 124                 },
 125                 /**
 126                  * Adds a prompt form to the popup : a question, followed by a text input.
 127                  * @param questionString {String} The question to ask to the user
 128                  * @param validationCallback {Function} Callback to apply : takes the text input value as unique argument.
 129                  * @param callbackContext {Object} Context for the callback, optional.
 130                  */
 131                 makePromptForm:function(questionString, validationCallback, callbackContext){
 132                         var label = new qx.ui.basic.Label(questionString);
 133                         label.setRich(true);
 134                         label.setTextAlign("center");
 135                         this.add(label, {edge:'north'});
 136                         var textField = new qx.ui.form.TextField();
 137                         textField.setMarginTop(10);
 138                         textField.setMarginBottom(10);
 139                         this.add(textField, {edge:'center'});
 140                         this.addOkCancel();
 141                         if(callbackContext){
 142                                 validationCallback = qx.lang.Function.bind(validationCallback, callbackContext);
 143                         }
 144                         this.okButton.addListener("execute", function(e){
 145                                 var valid = validationCallback(textField.getValue());
 146                                 if(valid) this._closeAndDestroy();
 147                         }, this);
 148                 },
 149                 /**
 150                  * Close this modal window and destroy it.
 151                  */
 152                 _closeAndDestroy : function(){
 153                         this.hide();
 154                         if(!this.getPersistent()){
 155                                 this.destroy();
 156                         }else{
 157                                 if(this.centerScroller) this.centerScroller.removeAll();
 158                         }
 159                 }
 160         }
 161 });