Discussion:
Layout Issues
(too old to reply)
Aoda
2016-04-29 09:00:29 UTC
Permalink
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.
Tobias Oetiker
2016-04-29 11:51:01 UTC
Permalink
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
Post by Aoda
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.
Application.js
qx.Class.define("Q.Application",
{
extend : qx.application.Standalone,
{
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();
}
}
});
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;
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
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
--
Tobi Oetiker, OETIKER+PARTNER AG, Aarweg 15 CH-4600 Olten, Switzerland
www.oetiker.ch ***@oetiker.ch +41 62 775 9902
Aoda
2016-04-29 12:11:28 UTC
Permalink
Hi,

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

Thank you.



--
View this message in context: http://qooxdoo.678.n2.nabble.com/Layout-Issues-tp7588314p7588316.html
Sent from the qooxdoo mailing list archive at Nabble.com.

Loading...