Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Adobe AIR Development

Reply
Developer
Developer
Posts: 227
Registered: ‎01-17-2012
My Device: PB
My Carrier: ATT

fuse

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,

Developer
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10
My Carrier: Verizon

Re: fuse

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.
Developer
Developer
Posts: 227
Registered: ‎01-17-2012
My Device: PB
My Carrier: ATT

Re: fuse

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

Developer
Posts: 185
Registered: ‎04-05-2011
My Device: PlayBook
My Carrier: Bouygues Telecom

Re: fuse

[ Edited ]

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

 

Julien
Web: smugrik.org Follow: @Smugrik
PlayBook apps:
OSCream
kiPass
Developer
Developer
Posts: 227
Registered: ‎01-17-2012
My Device: PB
My Carrier: ATT

Re: fuse

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,

Developer
Posts: 185
Registered: ‎04-05-2011
My Device: PlayBook
My Carrier: Bouygues Telecom

Re: fuse

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

Julien
Web: smugrik.org Follow: @Smugrik
PlayBook apps:
OSCream
kiPass