Layout Issues

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

Layout Issues

Aoda
This post was updated on .
Hi all !

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.

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);

    }

});

Reply | Threaded
Open this post in threaded view
|

Re: Layout Issues

oetiker
Hi Aoda,

might I tempt you to post your question http://stackoverflow.com/
and tag it with the 'qooxdoo' ? In that way more people will profit
from the answer and we get some extra exposure from this ...

thanks
tobi

Today Aoda wrote:

>
> Hi all !
>
> 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.
>
> 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=\&quot;images/proton_neutron.jpg\&quot;
> width=\&quot;140\&quot; height=\&quot;90\&quot; border=\&quot;0\&quot;
> alt=\&quot;CNRS\&quot; style=\&quot;margin: 0px 15px 15px 0px; float:
> left;\&quot; /> <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()  + &quot;, &quot;);
>        }
>      }
>
>      if (count > 0)
>      {
>        str = str.substring(0, str.length-2);
>        alert("You want" + str);
>      }
>      else
>      {
>        alert("No choice");
>      }
>      });
>
>
>      page2.add(group2);
>
>     }
>
> });
>
>
>
>
>
> --
> View this message in context: http://qooxdoo.678.n2.nabble.com/Layout-Issues-tp7588314.html
> Sent from the qooxdoo mailing list archive at Nabble.com.
>
> ------------------------------------------------------------------------------
> Find and fix application performance issues faster with Applications Manager
> Applications Manager provides deep performance insights into multiple tiers of
> your business applications. It resolves application problems quickly and
> reduces your MTTR. Get your free trial!
> https://ad.doubleclick.net/ddm/clk/302982198;130105516;z
> _______________________________________________
> qooxdoo-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>
--
Tobi Oetiker, OETIKER+PARTNER AG, Aarweg 15 CH-4600 Olten, Switzerland
www.oetiker.ch [hidden email] +41 62 775 9902

------------------------------------------------------------------------------
Find and fix application performance issues faster with Applications Manager
Applications Manager provides deep performance insights into multiple tiers of
your business applications. It resolves application problems quickly and
reduces your MTTR. Get your free trial!
https://ad.doubleclick.net/ddm/clk/302982198;130105516;z
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Layout Issues

Aoda
Hi,

Yes of course. It will be better for everyone I think.

Thank you.