Question

我现在已经使用qooxdoo 3天所以，这只是开始，但很明显我已经有了一些麻烦。

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

您也可以帮我处理我的代码吗？

我想有2个tabview（很好），我想要2个groupbox。问题是我可以显示组框，但“自动缩放”会剪切文本，我无法弄清楚原因。

提前谢谢。

编辑:(解决方案）答案是没有使用embed.Html作为初始需要但使用Label（结果更容易）。我的目标是使用一些HTML代码来表示我的文字形状。因此，一些“翻译”是疯狂的。作为基本.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按照您添加的顺序从左到右/从上到下布置小部件;这在你的示例代码中运行得很好。

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

-std=c++14 -Wall -Wconversion

你只是一个接一个地添加fs1然后添加fs小部件;每个小部件将占用尽可能多的空间（这显然与尽可能多的占用不同）

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

.add

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

documentation列出了可用选项

PS - “flex”并不仅仅意味着“占用所有空间：如果一个小部件的flex为2而另一个小部件的flex为1，则第一个小部件将具有2/3的空间，并且第二个小部件将有1/3

Answer 2

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

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

Hogan.js

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

以下是修改后的代码以生成该屏幕截图

if (window.matchMedia("(orientation: portrait)").matches) {

    $(document).ready(function(){
    // Special  Slider   
        $('.wrap_mSpecial_list .bxslider').bxSlider({  
            minSlides: 1,
            maxSlides: 1, 
            auto:true,
            infiniteLoop: true,
            controls:false 
        }); 
    });
}

if (window.matchMedia("(orientation: landscape)").matches) {

    $(document).ready(function(){

        // Special  Slider   
        $('.wrap_mSpecial_list .bxslider').bxSlider({ 
            minSlides: 2,
            maxSlides: 2, 
            slideWidth: 5000,  
            auto:true,
            controls:false,
            infiniteLoop: true 
        });
    });
}

我冒昧地将你的embedp2变量转换为qx.ui.basic.Label，因为这样可以获得更轻松的结果。如果你将它设置为rich（就像我在这段代码中那样），那么文本就会被包装，你也可以根据需要应用HTML标记。

Qooxdoo布局问题

2 个答案: