CheckGroupBox issue

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

CheckGroupBox issue

Peter Schneider
Hi there,

I'm facing an issue with the CheckGroupBox regarding the visual enabling /
disabling.

-------------------------------
Observation:
-------------------------------
  When I create a CheckGroupBox with some content that has no
  "visual bindings"[*] the behavior is O.K.
  However if I add some "visual binding" onto some sub-widgets the main
  check box does not disable all "levels" of its container.

  [*] By "visual bindings" I mean: I connect a sub-widget's 'enabled' property
      to a model property (here 'val_1') like this:
      <code>
        controller.addTarget(widget, "enabled", "val_1");
      </code>
      ...to visualize that an "unchecked" parent option makes the sub-options
      selection useless.


The playground code below shows the issue ("shorten URL" did not work :/ )


-------------------------------
Playground Example Description:
-------------------------------
  The data<->UI bindings are done like:
  <code>
    controller.addTarget(widget, "value", "val_1_2", true);
  <code>
  the UI<->UI bindings ("visual bindings") are done like:
  <code>
    controller.addTarget(widget, "enabled", "val_1");
  <code>
  If one sets the state of the 'val_1' model property to <false> the
  GroupBox's check box works as expected.
  Also, if one removes all "visual bindings", the GroupBox's check box works
  as expected, too.

----------------------------------------------------------------------------
<code>
----------------------------------------------------------------------------

qx.Class.define("demobrowser.demo.widget.GroupBox",
{
  extend : qx.application.Standalone,
  members :
  {
    main: function ()
    {
      this.base(arguments);
      // Main playground layout
      var container = new qx.ui.container.Composite(new qx.ui.layout.Basic());
      this.getRoot().add(container, {left: 20,top: 20});

      // Group box with grid layout to mimic 20 pixel 'indention' per level
      box = new qx.ui.groupbox.CheckGroupBox( this.tr("Enabled") );
      box.setLayout(new qx.ui.layout.Grid(3, 3));
      box.getLayout().setColumnWidth(0, 20);
      box.getLayout().setColumnWidth(1, 20);
      box.getLayout().setColumnFlex(2, 1);
      container.add(box);

      // Model & Controller
      var model = qx.data.marshal.Json.createModel({
          val_1  : true, // <= Set to false and the GroupBox 'Enabled' works
          val_1_1: true,
          val_1_2: 21,
          val_1_3: true,
          val_2  : false,
          val_2_2: false
        }, true);
      var controller = new qx.data.controller.Object(model);

      // UI
      var M = {alignY: "middle"}, // MIDDLE vertical alignment helper
          S = {width: 50},        // SMALL width helper
          _row = -1,              // {Integer} row number
          label1,                 // {qx.ui.basic.Label}
          label2,                 // {qx.ui.basic.Label}
          widget,                 // {qx.ui.core.Widget}
          hbox;                   // {qx.ui.container.Composite} with HBox
                                  //                             layout

      _row++;
      widget = new qx.ui.form.CheckBox("First level checkbox (1)");
      box.add(widget, {row: _row, column: 0, colSpan: 3});
      controller.addTarget(widget, "value", "val_1", true);

      _row++;
      widget = new qx.ui.form.CheckBox("Second level checkbox (1.1)");
      box.add(widget, {row: _row, column: 1, colSpan: 2});
      controller.addTarget(widget, "value", "val_1_1", true);
      controller.addTarget(widget, "enabled", "val_1");

      /*
       * Not needed to show the issue
       *
      _row++;
      label1 = new qx.ui.basic.Label("count");
      widget = new qx.ui.form.Spinner().set(S);
      label2 = new qx.ui.basic.Label(" foos (1.2)");
      hbox = new qx.ui.container.Composite( new qx.ui.layout.HBox(5).set(M) );
      hbox.add(label1);
      hbox.add(widget);
      hbox.add(label2);
      box.add(hbox, {row: _row, column: 1, colSpan: 2});
      controller.addTarget(widget, "value", "val_1_2", true);
      controller.addTarget(label1, "enabled", "val_1");
      controller.addTarget(widget, "enabled", "val_1");
      controller.addTarget(label2, "enabled", "val_1");
      */

      _row++;
      widget = new qx.ui.form.CheckBox("Second level checkbox (1.3)");
      box.add(widget, {row: _row, column: 1, colSpan: 2});
      controller.addTarget(widget, "value", "val_1_3", true);
      controller.addTarget(widget, "enabled", "val_1");

      _row++;
      widget = new qx.ui.form.CheckBox("First level checkbox (2)");
      box.add(widget, {row: _row, column: 0, colSpan: 3});
      controller.addTarget(widget, "value", "val_2", true);

      _row++;
      widget = new qx.ui.form.CheckBox("Second level checkbox (2.2)");
      box.add(widget, {row: _row, column: 1, colSpan: 2});
      controller.addTarget(widget, "value", "val_2_2", true);
      controller.addTarget(widget, "enabled", "val_2");
    }
  }
});
----------------------------------------------------------------------------
</code>
----------------------------------------------------------------------------


Regards,
  Peter (still not "weekend-ing"...)

--

** Unsere Veranstaltungen:

Post-Expo in Stockholm, Halle A - Stand A10.05, 23.-25.09.2014
3. Innovationsforum Telematik in Bocholt, 16.10.2014
BWVL-Tagung in K�ln, 12.-13.11.2014



------------------------------------------------------------------------------
Want excitement?
Manually upgrade your production database.
When you want reliability, choose Perforce
Perforce version control. Predictably reliable.
http://pubads.g.doubleclick.net/gampad/clk?id=157508191&iu=/4140/ostg.clktrk
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: CheckGroupBox issue (bump)

Peter Schneider
Hi again,

after my holiday ...still no response :(

Anyway, I've reduced the example so that it should be easy to see, that the
CheckComboBox has a inconsistent 'disabled' state behavior when some 'enable'
sub-logic is applied to child widgets.

You can see it on this playground example:

  http://tinyurl.com/o67dok8   ...by clicking the *Enabled* checkbox ;)

If the 'sublogic' is 'true, only the "First level" widgets are affected.
<code>
  var sublogic = true; // <= THIS CHANGES BEHAVIOUR :(
</code>
...by setting 'sublogic' false, no further controller-bindings to the 'enabled'
property is done (the code should be easy to understand anyway).

I've tried a regular ComboBox too, with the same result.

Regards,
  Peter


Am 9/12/2014 um 6:00 PM schrieb Peter Schneider:

> Hi there,
>
> I'm facing an issue with the CheckGroupBox regarding the visual enabling /
> disabling.
>
> -------------------------------
> Observation:
> -------------------------------
>   When I create a CheckGroupBox with some content that has no
>   "visual bindings"[*] the behavior is O.K.
>   However if I add some "visual binding" onto some sub-widgets the main
>   check box does not disable all "levels" of its container.
>
>   [*] By "visual bindings" I mean: I connect a sub-widget's 'enabled' property
>       to a model property (here 'val_1') like this:
>       <code>
>         controller.addTarget(widget, "enabled", "val_1");
>       </code>
>       ...to visualize that an "unchecked" parent option makes the sub-options
>       selection useless.
>
>
> The playground code below shows the issue ("shorten URL" did not work :/ )
>
>
> -------------------------------
> Playground Example Description:
> -------------------------------
>   The data<->UI bindings are done like:
>   <code>
>     controller.addTarget(widget, "value", "val_1_2", true);
>   <code>
>   the UI<->UI bindings ("visual bindings") are done like:
>   <code>
>     controller.addTarget(widget, "enabled", "val_1");
>   <code>
>   If one sets the state of the 'val_1' model property to <false> the
>   GroupBox's check box works as expected.
>   Also, if one removes all "visual bindings", the GroupBox's check box works
>   as expected, too.
>
> ----------------------------------------------------------------------------
> <code>
> ----------------------------------------------------------------------------
>
> qx.Class.define("demobrowser.demo.widget.GroupBox",
> {
>   extend : qx.application.Standalone,
>   members :
>   {
>     main: function ()
>     {
>       this.base(arguments);
>       // Main playground layout
>       var container = new qx.ui.container.Composite(new qx.ui.layout.Basic());
>       this.getRoot().add(container, {left: 20,top: 20});
>
>       // Group box with grid layout to mimic 20 pixel 'indention' per level
>       box = new qx.ui.groupbox.CheckGroupBox( this.tr("Enabled") );
>       box.setLayout(new qx.ui.layout.Grid(3, 3));
>       box.getLayout().setColumnWidth(0, 20);
>       box.getLayout().setColumnWidth(1, 20);
>       box.getLayout().setColumnFlex(2, 1);
>       container.add(box);
>
>       // Model & Controller
>       var model = qx.data.marshal.Json.createModel({
>           val_1  : true, // <= Set to false and the GroupBox 'Enabled' works
>           val_1_1: true,
>           val_1_2: 21,
>           val_1_3: true,
>           val_2  : false,
>           val_2_2: false
>         }, true);
>       var controller = new qx.data.controller.Object(model);
>
>       // UI
>       var M = {alignY: "middle"}, // MIDDLE vertical alignment helper
>           S = {width: 50},        // SMALL width helper
>           _row = -1,              // {Integer} row number
>           label1,                 // {qx.ui.basic.Label}
>           label2,                 // {qx.ui.basic.Label}
>           widget,                 // {qx.ui.core.Widget}
>           hbox;                   // {qx.ui.container.Composite} with HBox
>                                   //                             layout
>
>       _row++;
>       widget = new qx.ui.form.CheckBox("First level checkbox (1)");
>       box.add(widget, {row: _row, column: 0, colSpan: 3});
>       controller.addTarget(widget, "value", "val_1", true);
>
>       _row++;
>       widget = new qx.ui.form.CheckBox("Second level checkbox (1.1)");
>       box.add(widget, {row: _row, column: 1, colSpan: 2});
>       controller.addTarget(widget, "value", "val_1_1", true);
>       controller.addTarget(widget, "enabled", "val_1");
>
>       /*
>        * Not needed to show the issue
>        *
>       _row++;
>       label1 = new qx.ui.basic.Label("count");
>       widget = new qx.ui.form.Spinner().set(S);
>       label2 = new qx.ui.basic.Label(" foos (1.2)");
>       hbox = new qx.ui.container.Composite( new qx.ui.layout.HBox(5).set(M) );
>       hbox.add(label1);
>       hbox.add(widget);
>       hbox.add(label2);
>       box.add(hbox, {row: _row, column: 1, colSpan: 2});
>       controller.addTarget(widget, "value", "val_1_2", true);
>       controller.addTarget(label1, "enabled", "val_1");
>       controller.addTarget(widget, "enabled", "val_1");
>       controller.addTarget(label2, "enabled", "val_1");
>       */
>
>       _row++;
>       widget = new qx.ui.form.CheckBox("Second level checkbox (1.3)");
>       box.add(widget, {row: _row, column: 1, colSpan: 2});
>       controller.addTarget(widget, "value", "val_1_3", true);
>       controller.addTarget(widget, "enabled", "val_1");
>
>       _row++;
>       widget = new qx.ui.form.CheckBox("First level checkbox (2)");
>       box.add(widget, {row: _row, column: 0, colSpan: 3});
>       controller.addTarget(widget, "value", "val_2", true);
>
>       _row++;
>       widget = new qx.ui.form.CheckBox("Second level checkbox (2.2)");
>       box.add(widget, {row: _row, column: 1, colSpan: 2});
>       controller.addTarget(widget, "value", "val_2_2", true);
>       controller.addTarget(widget, "enabled", "val_2");
>     }
>   }
> });
> ----------------------------------------------------------------------------
> </code>
> ----------------------------------------------------------------------------
>
>
> Regards,
>   Peter (still not "weekend-ing"...)

--

** Unsere Veranstaltungen 2015

Logimat Stuttgart 10.2.-12.2.2015
transport logistic München 5.5.-8.5.2015
MöLo Kassel 18.6.-20.6.2015
Postexpo Paris 29.9.-1.10.2015

** NEU: Unser BLOG

telematics-magazine.com

------------------------------------------------------------------------------
Download BIRT iHub F-Type - The Free Enterprise-Grade BIRT Server
from Actuate! Instantly Supercharge Your Business Reports and Dashboards
with Interactivity, Sharing, Native Excel Exports, App Integration & more
Get technology previously reserved for billion-dollar corporations, FREE
http://pubads.g.doubleclick.net/gampad/clk?id=157005751&iu=/4140/ostg.clktrk
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel