dido dodi dido dodi - 7 months ago 18
Javascript Question

Qooxdoo Layout issues

I have been using qooxdoo now for 3 days so, it s just the begining but obviously I do already have some troubles.

It is about VBox HBox... I don t really understaind how it is working. I saw the online documentation and forums but whatever I tried I wasn t able to obtain the same result with my code (except copy-past). Hence, do you have some tips ?

Also may you help me with my code ?

I would like to have 2 tabviews (that is good) in which I want 2 groupboxs. The thing is I can display the groupbox but the "auto scaling" cut the text and I can t figure out why.

Thank you in advance.

Edit : (solution)
The answer is not working with a embed.Html as wanted initaly but with a Label (result is easier). My goal was to use some html codes for the shape of my text. Hence some 'translations' were madatory. As the basic.Label allows this kind of thing, it had been used.

Here my code :

Application.js

qx.Class.define("Q.Application",
{
extend : qx.application.Standalone,
members :
{
main : function()
{
this.base(arguments);
if (qx.core.Environment.get("qx.debug"))
{
qx.log.appender.Native;
qx.log.appender.Console;
}
var main = new Q.Windows();
main.open();
}
}
});


Windows.js :

qx.Class.define("Q.Windows",
{
extend : qx.ui.window.Window,

construct : function()
{

this.base(arguments, "windows");
this.setWidth(600);
this.setHeight(700);
this.setResizable(true);
var layout = new qx.ui.layout.Grow();
this.setLayout(layout);

// ############################ CREATION SHAPE PAGE ########################


var tabView = new qx.ui.tabview.TabView();
this.add(tabView);



// ############################ Page UN ########################
// ############################ Page UN ########################

var page1 = new qx.ui.tabview.Page("History", "");
page1.setLayout(new qx.ui.layout.Grow());
tabView.add(page1);
// ############################ Backgroung page ########################
var group1 = new qx.ui.groupbox.GroupBox(this.tr(""));
group1.setLayout(new qx.ui.layout.Grow());

// ############################ Introduction #########################

var htmlp1 = "<p align =\"justify\"> For more than 50 years hadron electromagnetic form factors are considered fundamental quantities for non point-like particles. They parametrize the internal structure of hadrons. </p><br> <p> <img src=\"images/proton_neutron.jpg\" width=\"140\" height=\"90\" border=\"0\" alt=\"CNRS\" style=\"margin: 0px 15px 15px 0px; float: left;\" /> <br>
<strong>Nucleons</strong>
<br> <p align=\"justify\">This database collects all data and their references in the scattering (space-like) and in the annihilation (time-like) region, as they were published in the original articles. Experiments and theoretical developments are ongoing. Space-like measurements are based on unpolarized (Rosenbluth separation) and polarized (Akhiezer-Rekalo method) electron elastic scattering off protons and, for neutron, on electron scattering off light nuclei. In the time-like region the reactions e⁺e⁻→ pp̄ (accompanied or not by initial state radiation) and pp̄ → e⁺e⁻ allow to extract form factors relying on a precise angular distribution.</p> ";
var embedp1 = new qx.ui.embed.Html(htmlp1);
group1.add(embedp1);

// ############################ Nucleon #########################
page1.add(group1);



// ############################ Page DEUX ########################
// ############################ Page DEUX ########################

var page2 = new qx.ui.tabview.Page("Computation", "");
page2.setLayout(new qx.ui.layout.Grow());
tabView.add(page2);

// ############################ Backgroung page ########################


var group2 = new qx.ui.groupbox.GroupBox(this.tr(""));
group2.setLayout(new qx.ui.layout.VBox(10));

// ############################ Objectif #########################

var fs1 = new qx.ui.groupbox.GroupBox(this.tr(""));
fs1.setLayout(new qx.ui.layout.Grow());
var htmlp2 ="This is a qooxdoo application skeleton which is used as a template. The 'create-application.py' script (usually under tool/bin/create-application.py)will use this and expand it into a self-contained qooxdoo application which can then be further extended. Please refer to the script and other documentationfor further information."
var embedp2 = new qx.ui.embed.Html(htmlp2);

fs1.add(embedp2);
group2.add(fs1);


// ############################ Simul #########################


var fs = new qx.ui.groupbox.GroupBox(this.tr("Choice"));
fs.setLayout(new qx.ui.layout.Grow());

//Setup of the checkboxes

var mainLayout = new qx.ui.layout.Grid(0,0);
mainLayout.setSpacing(10);

var container = new qx.ui.container.Composite(mainLayout);
container.setPadding(20);

var slp = new qx.ui.form.CheckBox("Space Like Protons");
var tlp = new qx.ui.form.CheckBox("Time Like Protons");
var sln = new qx.ui.form.CheckBox("Space Like Neutrons");
var tln = new qx.ui.form.CheckBox("Time Like Neutrons");
container.add(slp,{row:2,column:1});
container.add(tlp,{row:2,column:2});
container.add(sln,{row:1,column:1});
container.add(tln,{row:1,column:2});

var btOk = new qx.ui.form.Button("OK");
var checkBoxes = [ slp, tlp, sln, tln ];
container.add(btOk,{row:3,column:2});


fs.add(container);

group2.add(fs);

// Creation of the function linked to the button OK

btOk.addListener("execute", function(e) {
var cbs = checkBoxes;
var count = 0;
var str = "";

for (var i=0; i<cbs.length; i++)
{
if (cbs[i].getValue())
{
count++;
str += (cbs[i].getLabel() + ", ");
}
}

if (count > 0)
{
str = str.substring(0, str.length-2);
alert("You want" + str);
}
else
{
alert("No choice");
}
});


page2.add(group2);

}

});

Answer

First of all please put your comments for the answer below the answer. This way the author of the answer will get notified for your comment and will be able to provide more help.

Regarding your question of more automatic and spaces you don't want below your text. I am not sure if I understand it right but I guess you want something like this screenshot

enter image description here

In this case you need to add in your layout the box with your text, a qx.ui.core.Spacer and the box with the buttons. In this order.

Here is your code modified to produce that screenshoot

    qx.Class.define("q.Windows",
    {
        extend: qx.ui.window.Window,

        construct: function (){

            this.base(arguments, "windows");
            this.setWidth(600);
            this.setHeight(700);
            this.setResizable(true);
            var layout = new qx.ui.layout.Grow();
            this.setLayout(layout);

// ############################ CREATION SHAPE PAGE ########################


            var tabView = new qx.ui.tabview.TabView();
            this.add(tabView);


// ############################ Page UN ########################
// ############################ Page UN ########################

            var page1 = new qx.ui.tabview.Page("History", "");
            page1.setLayout(new qx.ui.layout.Grow());
            tabView.add(page1);
// ############################ Backgroung page ########################
            var group1 = new qx.ui.groupbox.GroupBox(this.tr(""));
            group1.setLayout(new qx.ui.layout.Grow());

// ############################ Introduction #########################

            var htmlp1 = '<p align ="justify"> For more than 50 years hadron electromagnetic form factors are considered fundamental quantities for non point-like particles. They parametrize the internal structure of hadrons. </p><br> <p> <img src="images/proton_neutron.jpg" width="140" height="90" border="0" alt="CNRS" style="margin: 0px 15px 15px 0px; float: left;" /> <br>' +
                '<strong> Nucleons </strong>' +
                '<br><p align ="justify">This database collects all data and their references in the scattering (space-like) and in the annihilation (time-like) region, as they were published in the original articles. Experiments and theoretical developments are ongoing. Space-like measurements are based on unpolarized (Rosenbluth separation) and polarized (Akhiezer-Rekalo method) electron elastic scattering off protons and, for neutron, on electron scattering off light nuclei. In the time-like region the reactions e⁺e⁻→ pp̄ (accompanied or not by initial state radiation) and pp̄ → e⁺e⁻ allow to extract form factors relying on a precise angular distribution.</p>';
            var embedp1 = new qx.ui.embed.Html(htmlp1);
            group1.add(embedp1);

// ############################ Nucleon #########################
            page1.add(group1);


// ############################ Page DEUX ########################
// ############################ Page DEUX ########################

            var page2 = new qx.ui.tabview.Page("Computation", "");
            page2.setLayout(new qx.ui.layout.Grow());
            tabView.add(page2);

// ############################ Backgroung page ########################


            var group2 = new qx.ui.groupbox.GroupBox(this.tr(""));
            group2.setLayout(new qx.ui.layout.VBox(10));

// ############################ Objectif #########################

            var fs1 = new qx.ui.groupbox.GroupBox(this.tr(""));
            fs1.setLayout(new qx.ui.layout.Grow());
            var label = new qx.ui.basic.Label();
            label.setValue("This is a qooxdoo application skeleton which is used as a template. The 'create-application.py' script (usually under tool/bin/create-application.py)will use this and expand it into a self-contained qooxdoo application which can then be further extended. Please refer to the script and other documentationfor further information.");
            label.setRich(true);
            // var embedp2 = new qx.ui.embed.Html(htmlp2);

            fs1.add(label);
            group2.add(fs1);
            var spacer = new qx.ui.core.Spacer();
            group2.add(spacer, {flex: 1});


// ############################ Simul #########################


            var fs = new qx.ui.groupbox.GroupBox(this.tr("Choice"));
            fs.setLayout(new qx.ui.layout.Grow());

//Setup of the checkboxes

            var mainLayout = new qx.ui.layout.Grid(0, 0);
            mainLayout.setSpacing(10);

            var container = new qx.ui.container.Composite(mainLayout);
            container.setPadding(20);

            var slp = new qx.ui.form.CheckBox("Space Like Protons");
            var tlp = new qx.ui.form.CheckBox("Time Like Protons");
            var sln = new qx.ui.form.CheckBox("Space Like Neutrons");
            var tln = new qx.ui.form.CheckBox("Time Like Neutrons");
            container.add(slp, {row: 2, column: 1});
            container.add(tlp, {row: 2, column: 2});
            container.add(sln, {row: 1, column: 1});
            container.add(tln, {row: 1, column: 2});

            var btOk = new qx.ui.form.Button("OK");
            var checkBoxes = [slp, tlp, sln, tln];
            container.add(btOk, {row: 3, column: 2});


            fs.add(container);

            group2.add(fs);

// Creation of the function linked to the button OK

            btOk.addListener("execute", function (e){
                var cbs = checkBoxes;
                var count = 0;
                var str = "";

                for (var i = 0; i < cbs.length; i++) {
                    if (cbs[i].getValue()) {
                        count++;
                        str += (cbs[i].getLabel() + ", ");
                    }
                }

                if (count > 0) {
                    str = str.substring(0, str.length - 2);
                    alert("You want" + str);
                }
                else {
                    alert("No choice");
                }
            });


            page2.add(group2);

        }

    });

I took the liberty to convert your embedp2 variable to qx.ui.basic.Label since this gave easier results. If you set it to rich (as I have in this code) then the text is wraped and you can also apply HTML markup if you wish.