org.argeo.slc.webapp/src/main/webapp/source/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                 addCloseButton : function(){
  57                         this.closeButton = new qx.ui.form.Button("Close");
  58                         this.closeButton.addListener("execute", this._closeAndDestroy, this);
  59                         this.add(this.closeButton, {edge:'south'});
  60                 },
  61                 addOkCancel : function(){
  62                         var buttonPane = new qx.ui.container.Composite(new qx.ui.layout.HBox(5, 'right'));
  63                         buttonPane.setAlignX("center");
  64                         this.add(buttonPane, {edge:"south"});
  65                         this.okButton = new qx.ui.form.Button("Ok");
  66                         this.cancelButton = new qx.ui.form.Button("Cancel");
  67                         this.cancelButton.addListener("execute", this._closeAndDestroy, this);
  68                         buttonPane.add(this.cancelButton);
  69                         buttonPane.add(this.okButton);
  70                 },
  71                 makePromptForm:function(questionString, validationCallback, callbackContext){
  72                         this.add(new qx.ui.basic.Label(questionString), {edge:'north'});
  73                         var textField = new qx.ui.form.TextField();
  74                         textField.setMarginTop(20);
  75                         this.add(textField, {edge:'center'});
  76                         this.addOkCancel();
  77                         if(callbackContext){
  78                                 validationCallback = qx.lang.Function.bind(validationCallback, callbackContext);
  79                         }
  80                         this.okButton.addListener("execute", function(e){
  81                                 var valid = validationCallback(textField.getValue());
  82                                 if(valid) this._closeAndDestroy();
  83                         }, this);
  84                 },
  85                 _closeAndDestroy : function(){
  86                         this.hide();
  87                         this.destroy();
  88                 }
  89         }
  90 });