2016-04-29 4 views
2

Ich habe qooxdoo nun für 3 Tage verwendet, so ist es nur der Anfang, aber offensichtlich habe ich schon einige Probleme.Qooxdoo Layout Probleme

Es geht um VBox HBox ... Ich verstehe nicht wirklich, wie es funktioniert. Ich sah die Online-Dokumentation und Foren, aber was immer ich versuchte, ich konnte nicht das gleiche Ergebnis mit meinem Code (außer Kopie-Vergangenheit) erhalten. Hast du also ein paar Tipps?

Kannst du mir auch mit meinem Code helfen?

Ich hätte gerne 2 tabviews (das ist gut), in denen ich 2 groupboxs wollen. Die Sache ist, ich kann die Groupbox anzeigen, aber die "automatische Skalierung" schneidet den Text und ich kann nicht herausfinden, warum.

Vielen Dank im Voraus.

Edit: (Lösung) Die Antwort funktioniert nicht mit einem embed.Html wie gewünscht initaly aber mit einem Label (Ergebnis ist einfacher). Mein Ziel war es, einige HTML-Codes für die Form meines Textes zu verwenden. Daher waren einige 'Übersetzungen' verpflichtend. Da das basic.Label solche Dinge erlaubt, wurde es benutzt.

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

    } 

}); 
+0

Ihre Frage wurde bereits von @johnspackman beantwortet, aber lassen Sie mich Ihnen einige Beiträge vorstellen, die Ihnen helfen könnten, qooxdoo layouts besser zu verstehen: * [intro] (http://blog.muhuk.com/2009/01/30/using) -layouts-in-qooxdoo-Teil-1.html) * [vbox] (http://blog.muhuk.com/2009/02/04/using-layouts-in-qooxdoo-part-2-vbox-layout. html) * [hbox] (http://blog.muhuk.com/2009/02/15/using-layouts-in-qooxdoo-part-3-hbox-layout.html) * [Gitter] (http: // blog.muhuk.com/2009/02/21/using-layouts-in-Qooxdoo-part-4-grid-layout.html) – voger

Antwort

1

Als erstes stellen Sie bitte Ihre Kommentare für die Antwort unter der Antwort.Auf diese Weise wird der Autor der Antwort für Ihren Kommentar und benachrichtigt werden kann mehr Hilfe bieten

In Bezug auf Ihre Frage der automatischen und Leerzeichen wollen Sie nicht unter Ihrem Text.Ich bin nicht sicher, ob ich es richtig verstehe, aber ich denke, Sie so etwas wie dieses Screenshot

enter image description here

In diesem Fall, dass Sie in Ihrem Layout die Box mit Ihrem Text, einem qx.ui.core hinzufügen müssen möchten. Spacer und die Box mit den Tasten. In dieser Reihenfolge. da dies einfache Ergebnisse gab

Hier ist der Code, dass Screen

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

     } 

    }); 

wir die Freiheit, Ihre embedp2 Variable qx.ui.basic.Label zu konvertieren nahm zu produzieren geändert. Wenn Sie es auf "reich" setzen (wie ich in diesem Code habe), dann wird der Text umgebrochen und Sie können auch HTML-Markup anwenden, wenn Sie möchten.

+0

HI, Ihre Antwort ist großartig und gefüllt, was ich gesucht habe. Label ist in Ordnung für mich, solange ich HTML-Code verwenden kann. Daher ist alles perfekt. Danke Ihnen allen für Ihre Hilfe. –

3

HBox und VBox nur die Widgets Layout von links nach rechts/oben nach unten in die Reihenfolge, in der Sie sie hinzufügen; das funktioniert in Ihrem Beispielcode einwandfrei.

Sie können die Layout-Optionen jedes Widget hinzufügen, die Sie in einen Container hinzufügen, die durch das Layout für diesen Container interpretiert werden, so zum Beispiel, wenn Sie diesen Code haben:

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

Sie gerade sind Hinzufügen der fs1 und dann fs Widgets nacheinander; Jedes Widget benötigt mindestens so viel Speicherplatz, wie es benötigt wird (was natürlich nicht dasselbe ist, wie es aufnehmen könnte)

Das zweite Argument zu .add ermöglicht es Ihnen, einige Einstellungen anzugeben, um das zu ändern getan, zum Beispiel:

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

Dies teilt dem VBox Layout des group2, die so viel Raum wie möglich einnehmen fS1.

Die documentation listet die verfügbaren Optionen

PS - „flex“ bedeutet nicht nur „nehmen den ganzen Raum: wenn ein Widget eine Flex 2 und der andere hatte eine flex von 1 hatte, die erste widget hätte 2/3 der platz, und das zweite widget hätte 1/3

+0

Hallo danke für diesen Link und auch für diese Antwort. Gibt es jedoch eine Möglichkeit, es mit "automatisch" zu tun? Ich meine, hier ist die ganze Seite ausgefüllt, aber unter meinem Text sind ein paar Leerzeichen. Kann ich von ihnen reiten? Ich habe mehrere Links gesehen, aber ich habe noch nicht "meine Antwort" gefunden. Vielleicht ist es etwas Einfaches, aber ich weiß es nicht. Ich hätte gerne die "perfekte Box" für meinen Text. –

+0

Ich verstehe nicht, was Sie meinen - bitte können Sie ein schnelles Spielplatz Beispiel [hier] zusammenstellen (http://demo.qooxdoo.org/current/playground/#Hello%20World-ria) – johnspackman

+0

Ok sorry für die Verzögerung . Mein Punkt war: Ich möchte etwas Schönes sehen. Daher ist ein großer schwarzer Raum, wie ich mit Flex haben kann, nicht das, wonach ich suche. Diese Option wird jedoch später für mein Projekt sehr interessant sein. Wie gesagt irgendwo auf der Seite, habe ich die Antwort. Die Verwendung eines Labels ist perfekt geeignet. Die Sache ist mit embed.html die Größe der Form ist blockiert (außer Flex), das war mein Hauptproblem. –