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