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         /**
  11          *
  12          * @param caption {String} Title of the window
  13          * @param icon {String} Icon of the window
  14          * @param text {String} Default content of the window.
  15          */
  16         construct : function(caption, icon, text){
  17                 this.base(arguments, caption, icon);
  18                 this.set({
  19                         showMaximize : false,
  20                         showMinimize : false,
  21                         width: 200,
  22                         height: 150
  23                 });
  24                 this.setLayout(new qx.ui.layout.Dock());
  25                 this.setModal(true);
  26                 this.center();
  27                 if(text){
  28                         this.addLabel(text);
  29                 }
  30         },
  31
  32         members : {
  33                 /**
  34                  * Display text inside the popup
  35                  * @param text {String} A string content for the popup
  36                  */
  37                 addLabel:function(text){
  38                         this.add(new qx.ui.basic.Label(text), {edge:'center', width:'100%'});
  39                         this.addCloseButton();
  40                 },
  41                 /**
  42                  * Display a component (panel) in the center of the popup
  43                  * @param panel {qx.ui.core.Widget} A gui component (will be set at width 100%).
  44                  */
  45                 addContent: function(panel){
  46                         this.add(panel, {edge:'center', width:'100%'});
  47                         this.addCloseButton();
  48                 },
  49                 /**
  50                  * Automatically attach to the application root, then show.
  51                  */
  52                 attachAndShow:function(){
  53                         org.argeo.ria.components.ViewsManager.getInstance().getApplicationRoot().add(this);
  54                         this.show();
  55                 },
  56                 /**
  57                  * Adds a close button bottom-center aligned to the popup
  58                  */
  59                 addCloseButton : function(){
  60                         this.closeButton = new qx.ui.form.Button("Close");
  61                         this.closeButton.addListener("execute", this._closeAndDestroy, this);
  62                         this.add(this.closeButton, {edge:'south'});
  63                 },
  64                 /**
  65                  * Adds two buttons bottom-center aligned (Ok and Cancel).
  66                  * Ok button has no listener by default, Cancel will close and destroy the popup.
  67                  */
  68                 addOkCancel : function(){
  69                         var buttonPane = new qx.ui.container.Composite(new qx.ui.layout.HBox(5, 'right'));
  70                         buttonPane.setAlignX("center");
  71                         this.add(buttonPane, {edge:"south"});
  72                         this.okButton = new qx.ui.form.Button("Ok");
  73                         this.cancelButton = new qx.ui.form.Button("Cancel");
  74                         this.cancelButton.addListener("execute", this._closeAndDestroy, this);
  75                         buttonPane.add(this.cancelButton);
  76                         buttonPane.add(this.okButton);
  77                 },
  78                 /**
  79                  * Adds a prompt form to the popup : a question, followed by a text input.
  80                  * @param questionString {String} The question to ask to the user
  81                  * @param validationCallback {Function} Callback to apply : takes the text input value as unique argument.
  82                  * @param callbackContext {Object} Context for the callback, optional.
  83                  */
  84                 makePromptForm:function(questionString, validationCallback, callbackContext){
  85                         this.add(new qx.ui.basic.Label(questionString), {edge:'north'});
  86                         var textField = new qx.ui.form.TextField();
  87                         textField.setMarginTop(20);
  88                         this.add(textField, {edge:'center'});
  89                         this.addOkCancel();
  90                         if(callbackContext){
  91                                 validationCallback = qx.lang.Function.bind(validationCallback, callbackContext);
  92                         }
  93                         this.okButton.addListener("execute", function(e){
  94                                 var valid = validationCallback(textField.getValue());
  95                                 if(valid) this._closeAndDestroy();
  96                         }, this);
  97                 },
  98                 /**
  99                  * Close this modal window and destroy it.
 100                  */
 101                 _closeAndDestroy : function(){
 102                         this.hide();
 103                         this.destroy();
 104                 }
 105         }
 106 });