Qooxdoo dialogs

Question

I want to have some dialogs in Qooxdoo applications, but I don't know how to define them for some situations.

In Qooxdoo demos (it was widget - window example, function getModalWindow2), I seen that window can be defined like a simple JS function, returning its widget. Is there better way to make dialogs in Qooxdoo?

As I understood, I can define class for dialog window and set some class properties for this class. So, how to add some dialogs with complex forms in application?

For example, it may be a tree of user directory on the server. And selected element of tree must be stored somewhere in object for the dialog class after user will press "Ok" button and this dialog will be closed.

score 1 · Accepted Answer · answered Sep 15 '11 at 13:07

Now I found answer to my own question (in the Russian blog about Qooxdoo, here I will translate the answer).

So, there are separate classes in separate files for main application and the dialog.

In dialog, we are adding the qx.event.type.Data for result output through this event.

So, for example we are having the Qooxdoo application, that is named "custom", like in documentation.

In Application.js we are putting this code to work with class:

    // Adding dialog window
    this.__uiWindow = new custom.UserDialog();
    this.__uiWindow.moveTo(320, 30);
    this.__uiWindow.open();

    // Adding the listener for pressing "Ok"
    this.__uiWindow.addListener("changeUserData", function (e) {
        this.debug(e.getData());
    });

e.getData() is giving the resulting information.

Then we must create file named UserDialog.js for the class, containing event and form:

    qx.Class.define("custom.UserDialog", {
        extend: qx.ui.window.Window,
        events: {
            "changeUserData": "qx.event.type.Data"
        },
        construct: function () {
            this.base(arguments, this.tr("User info"));

            // Layout
            var layout = new qx.ui.layout.Basic();
            this.setLayout(layout);
            this.setModal(true);

            this.__form = new qx.ui.form.Form();

            // User id field
            var usrId = new qx.ui.form.TextField();
            this.__form.add(usrId, this.tr("ID"), null, "Id");

            // User password field
            var usrPassword = new qx.ui.form.PasswordField();
            usrPassword.setRequired(true);
            this.__form.add(usrPassword, this.tr("Password"), null, "Password");

            // Adding form controller and model
            var controller = new qx.data.controller.Form(null, this.__form);
            this.__model = controller.createModel();

            // Save button
            var okbutton = new qx.ui.form.Button(this.tr("Ok"));
            this.__form.addButton(okbutton);
            okbutton.addListener("execute", function () {
                if (this.__form.validate()) {
                    var usrData = qx.util.Serializer.toJson(this.__model);
                    this.fireDataEvent("changeUserData", usrData);
                    this.close();
                };
            }, this);

            // Cancel button
            var cancelbutton = new qx.ui.form.Button(this.tr("Cancel"));
            this.__form.addButton(cancelbutton);
            cancelbutton.addListener("execute", function () {
                this.close();
            }, this);

            var renderer = new qx.ui.form.renderer.Single(this.__form);
            this.add(renderer);
        }
    });

Good answer! The only thing I would change is the serialization of the data before firing the event. There is no technical need for that so why not hand over the model itself as a reference and serialize it in the application, if needed? — Martin Wittemann, Sep 20 '11 at 06:09

Qooxdoo dialogs

1 Answers1