Qooxdoo Layout issues

Question

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 1

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

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.

Answer 2

HBox and VBox just lay out the widgets from left to right/top to bottom in the order you add them; that's working just fine in your example code.

You can add layout options to each widget that you add to a container that are interpreted by the layout for that container, so for example where you have this code:

group2.add(fs1); group2.add(fs);

you're just adding the fs1 and then fs widgets one after the other; each widget will take up as much space as it needs as a minimum (which is obviously not the same as taking up as much as it could)

The second argument to .add allows you to specify some settings to change how this is done, for example:

group2.add(fs1, { flex: 1 }); group2.add(fs);

This tells the group2's VBox layout that fs1 is to take up as much room as possible.

The documentation lists the available options

PS - "flex" doesn't just mean "take up all the space: if one widget had a flex of 2 and the other had a flex of 1, the first widget would have 2/3 the space, and the second widget would have 1/3