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