Handle "toggle" command, clean modal layout, handle separators in submenus.

[gpl/argeo-slc.git] / org.argeo.slc.webapp / src / main / webapp / source / class / org / argeo / ria / components / Modal.js

diff --git a/org.argeo.slc.webapp/src/main/webapp/source/class/org/argeo/ria/components/Modal.js b/org.argeo.slc.webapp/src/main/webapp/source/class/org/argeo/ria/components/Modal.js
index 6906599434bb14086dd73644d4ecdf19c5998746..b69c1580f36b749be49051da2d3defbf32d3ee0a 100644 (file)
--- a/org.argeo.slc.webapp/src/main/webapp/source/class/org/argeo/ria/components/Modal.js
+++ b/org.argeo.slc.webapp/src/main/webapp/source/class/org/argeo/ria/components/Modal.js
@@ -1,18 +1,20 @@
-/* ************************************************************************\r
-\r
-  Copyright: 2008 Argeo\r
-\r
-   License: \r
-\r
-   Authors: Charles du Jeu\r
-\r
-************************************************************************ */\r
+/**\r
+ * Generic modal popup window.\r
+ * It is layed out with a dock layout. When adding components to it, they are added as "center".\r
+ * @author Charles du Jeu\r
+ */\r
 qx.Class.define("org.argeo.ria.components.Modal",\r
 {\r
        extend : qx.ui.window.Window,\r
   \r
+       /**\r
+        * \r
+        * @param caption {String} Title of the window\r
+        * @param icon {String} Icon of the window\r
+        * @param text {String} Default content of the window.\r
+        */\r
        construct : function(caption, icon, text){\r
-               this.base(arguments);\r
+               this.base(arguments, caption, icon);\r
                this.set({\r
                        showMaximize : false,\r
                        showMinimize : false,\r
@@ -20,12 +22,6 @@ qx.Class.define("org.argeo.ria.components.Modal",
                        height: 150\r
                });\r
                this.setLayout(new qx.ui.layout.Dock());\r
-               var closeButton = new qx.ui.form.Button("Close");\r
-               closeButton.addListener("execute", function(e){\r
-                       this.hide();\r
-                       this.destroy();\r
-               }, this);\r
-               this.add(closeButton, {edge:'south'});\r
                this.setModal(true);\r
                this.center();\r
                if(text){\r
@@ -34,15 +30,61 @@ qx.Class.define("org.argeo.ria.components.Modal",
        },\r
        \r
        members : {\r
+               /**\r
+                * Display text inside the popup\r
+                * @param text {String} A string content for the popup\r
+                */\r
                addLabel:function(text){\r
                        this.add(new qx.ui.basic.Label(text), {edge:'center', width:'100%'});           \r
+                       this.addCloseButton();\r
                },\r
+               /**\r
+                * Display a component (panel) in the center of the popup\r
+                * @param panel {qx.ui.core.Widget} A gui component (will be set at width 100%).\r
+                */\r
                addContent: function(panel){\r
                        this.add(panel, {edge:'center', width:'100%'});\r
+                       this.addCloseButton();\r
                },\r
+               /**\r
+                * Automatically attach to the application root, then show.\r
+                */\r
                attachAndShow:function(){\r
                        org.argeo.ria.components.ViewsManager.getInstance().getApplicationRoot().add(this);                     \r
                        this.show();\r
+               },\r
+               addCloseButton : function(){\r
+                       this.closeButton = new qx.ui.form.Button("Close");\r
+                       this.closeButton.addListener("execute", this._closeAndDestroy, this);\r
+                       this.add(this.closeButton, {edge:'south'});                     \r
+               },\r
+               addOkCancel : function(){\r
+                       var buttonPane = new qx.ui.container.Composite(new qx.ui.layout.HBox(5, 'right'));\r
+                       buttonPane.setAlignX("center");\r
+                       this.add(buttonPane, {edge:"south"});\r
+                       this.okButton = new qx.ui.form.Button("Ok");\r
+                       this.cancelButton = new qx.ui.form.Button("Cancel");\r
+                       this.cancelButton.addListener("execute", this._closeAndDestroy, this);\r
+                       buttonPane.add(this.cancelButton);\r
+                       buttonPane.add(this.okButton);\r
+               },\r
+               makePromptForm:function(questionString, validationCallback, callbackContext){\r
+                       this.add(new qx.ui.basic.Label(questionString), {edge:'north'});\r
+                       var textField = new qx.ui.form.TextField();\r
+                       textField.setMarginTop(20);\r
+                       this.add(textField, {edge:'center'});\r
+                       this.addOkCancel();\r
+                       if(callbackContext){\r
+                               validationCallback = qx.lang.Function.bind(validationCallback, callbackContext);\r
+                       }\r
+                       this.okButton.addListener("execute", function(e){\r
+                               var valid = validationCallback(textField.getValue());\r
+                               if(valid) this._closeAndDestroy();\r
+                       }, this);\r
+               },\r
+               _closeAndDestroy : function(){\r
+                       this.hide();\r
+                       this.destroy();                 \r
                }\r
        }\r
 });
\ No newline at end of file