Adobe AIR Development

[mdd]

Is qnx.fuse.ui useable?  I cannot make any sense of it, and the documentation is little help (to say the least).

example:

lets try to add a line to a form that has a label on the left side and a (toggle) control on the right side:

					var line1:Container = new Container();
					{
						var layout:RowLayout = new RowLayout();
						{
							layout.type =  RowLayoutType.HORIZONTAL;
							layout.justify = true;
							line1.layout = layout;
						}
						var rdata:RowData = new RowData();
						{
							rdata.hAlign = Align.FILL;
							line1.layoutData = rdata;
						}
						var lbl:Label = new Label();
						{
							fmt = new TextFormat();
							{
								fmt.color = clr;
								fmt.align = TextFormatAlign.LEFT;
							}
							lbl.format = fmt;
							lbl.htmlText = "Whatever:";
							
							rdata = new RowData();
							{
								rdata.hAlign = Align.BEGIN;
								lbl.layoutData = rdata;
							}
						}

						syncCtl = new ToggleSwitch();
						{
							rdata = new RowData();
							{
								rdata.hAlign = Align.END;
								syncCtl.layoutData = rdata;
							}
						}
						
						line1.addChild( lbl );
						line1.addChild( syncCtl );
					}

 but no - the 2 elements are snuggled in the center of the line.

yes, qnx.ui had issues, but at least it (eventually) made sense - this is beyond frustrating.

Regards,

[jtegen]

I found some really odd things with several of the controls in fuse. I have stayed with the original framework until RIM could fully QA the new controls. That will probably not happen for the PlayBook version until BB10 is ported back to the PlayBook later this year. It might be better on the BB10 SDK, but I have not tried those.

[mdd]

well at least I am in good company...

I too, stayed with the original qnx.ui, but finally decided to switch because of problems with them - e.g. ProgressBar not filling if height > 23.  Seems that fuse has exactly the same behaviour, except it only happens if you override the preferredHeight...

sigh

[Smugrik]

I vaguely remember something about RowLayout at BB DevCon Europe, in Julian Dolce's session, not sure if he mentioned this was flawed or legacy or what...

But I remembered that GridLayout is easier to use, actually I switched my app to qnx.fuse on tablet OS 2.0, and I mainly use GridLayout (tried to compile the same code against BB10 and it worked straight away, so I suppose fuse is also better in terms of forward compatibility)

GridLayout also arranges all children in a row if you set its numColums to 0

To achieve the same effect as the two columns row layout, you would create a GridLayout with two columns and do something like:

//Create a GridLayout
var grid : GridLayout = new GridLayout();
grid.numColumns = 2;

var cont : Container = new Container;
cont layout = grid;

// left
var lbl : Label = new Label();
lbl.text = "Some Label";
cont.addChild(lbl);

// right
button = new Button();
cont.addChild(button);

 note if you add more children to the container, they will be added to the 2 columns grid on subsequent lines from left to right and from top to bottom,

to resume

numColumns = 0 means horizontal

numColumns = 1 means vertical

numColumns > 1 is a grid

[mdd]

GridLayout does seem a bit easier, but still doesn't work:

Below, my attempt to add a single line containing a label on the (far) left and a (toggle) control on the far right - instead both appear on the left, overlayed with the control on top.

					var clr:uint = 0x7f7f7f;
					var fmt:TextFormat;
					
					var gdata:GridData = new GridData();
					{
						gdata.hAlign = Align.FILL;
						gdata.vAlign = Align.CENTER;
						gdata.preferredWidth = width;
					}

					var glayout:GridLayout = new GridLayout( 0 );
					{
						glayout.hAlign = Align.FILL;
						glayout.vAlign = Align.CENTER;
						
						glayout.setOptions( SizeOptions.RESIZE_BOTH );
					}

					var line1:Container = new Container();
					{
						line1.layout = glayout;
						line1.layoutData = gdata;

						var lbl:Label = new Label();
						{
							fmt = new TextFormat();
							{
								fmt.color = clr;
								fmt.align = TextFormatAlign.LEFT;
							}
							lbl.format = fmt;
							lbl.htmlText = "whatever:";
						}

						syncCtl = new ToggleSwitch();
						{
							var data:GridData = new GridData();
							{
								data.hAlign = Align.END;
							}
							syncCtl.layoutData = data;
						}
						
						line1.addChild( lbl );
						line1.addChild( syncCtl );
					}

 below, trace output showing the various settings:

 main [object FuseContainerEx] actual: 546 x 536 [ GridLayout: 1, options: 15, hAlign=begin, vAlign=begin, padding: 10,10,10,10 ] [ null ]
    mid [object Container] actual: 0 x 0 [ GridLayout: 1, options: 15, hAlign=center, vAlign=fill ] [ null ]
       instance1498 [object Container] actual: 0 x 0 [ GridLayout: 0, options: 15, hAlign=fill, vAlign=center ] [ gridData: hAlign=fill, vAlign=center, preferred: 491 x Infinity ]
          instance1506 [object Label] actual: 100 x 30 [ null ]
          instance1508 [object ToggleSwitch] actual: 129 x 36 [ gridData: hAlign=end, vAlign=fill ]

 Regards,

[Smugrik]

Have you tried without the GridData? wondering what these do...