Qooxdoo 布局问题

Question

我现在已经使用 qooxdoo 3 天了，这只是开始，但显然我已经遇到了一些麻烦。

它是关于 VBox HBox 的...我不太明白它是如何工作的。我看到了在线文档和论坛，但无论我尝试什么，我都无法用我的代码获得相同的结果（复制过去除外）。因此，您有什么建议吗？

你也可以帮我写代码吗？

我想要 2 个标签视图（这很好），其中我想要 2 个组框。问题是我可以显示组框，但是 "auto scaling" 剪切了文本，我不知道为什么。

提前致谢。

编辑：（解决方案）答案不是最初使用 embed.Html 而是使用标签（结果更容易）。我的目标是为我的文本形状使用一些 html 代码。因此，有些 'translations' 是强制性的。由于basic.Label允许这种事情，它已经被使用了。

这是我的代码：

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

HBox 和 VBox 只是按照您添加它们的顺序从左到 right/top 到底部布置小部件；这在您的示例代码中工作得很好。

您可以为添加到容器的每个小部件添加布局选项，这些选项由该容器的布局解释，例如您有以下代码：

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

您只是一个接一个地添加 fs1 和 fs 小部件；每个小部件将占用尽可能多的 space 作为它需要的最小值（这显然与尽可能多地占用不同）

.add 的第二个参数允许您指定一些设置来更改其完成方式，例如：

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

这告诉 group2 的 VBox 布局 fs1 将占用尽可能多的空间。

documentation 列出了可用的选项

PS - "flex" 不仅仅意味着“占据所有 space：如果一个小部件的弹性为 2 而另一个的弹性为 1，则第一个小部件将有 2/3 space，第二个小部件将有 1/3

Answer 2

首先请将您对答案的评论写在答案下方。这样，答案的作者将收到您的评论通知，并能够提供更多帮助。

关于你的问题，你不想在你的文本下面有更多的自动和空格。我不确定我是否理解正确，但我想你想要这样的截图

在这种情况下，您需要在布局中添加文本框、qx.ui.core.Spacer 和按钮框。按照这个顺序。

这是为生成该屏幕截图而修改的代码

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

        }

    });

我冒昧地将您的 embedp2 变量转换为 qx.ui.basic.Label，因为这样可以得到更简单的结果。如果你将它设置为 rich（正如我在这段代码中所做的那样），那么文本将被换行，你也可以根据需要应用 HTML 标记。

Qooxdoo 布局问题

Qooxdoo Layout issues

javascript

layout

qooxdoo