Using the Container Classes to Lay Out PlayBook Applications

I just put together a tutorial on using the Container classes in the PlayBook SDK. Coming from a Flex background I found the Container classes kind of confusing at first but ultimately a nice elegant solution to the problem of laying objects out on the screen. The tutorial provides an introduction to the Container classes, shows some of the properties that you use to customize them, then walks through a basic example of a header and two sub containers and how to place and align components inside them. Finally it talks about resizing containers.

Here’s a link to the video. The code for the demo is below.

package
{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.MouseEvent;
 
	import qnx.ui.buttons.LabelButton;
	import qnx.ui.core.Container;
	import qnx.ui.core.ContainerFlow;
	import qnx.ui.core.Containment;
	import qnx.ui.core.SizeMode;
	import qnx.ui.core.SizeUnit;
	import qnx.ui.core.Spacer;
	import qnx.ui.data.DataProvider;
	import qnx.ui.listClasses.List;
	import qnx.ui.text.Label;
 
	[SWF(height="600",width="1024")]
	public class ContainerDemo extends Sprite
	{
 
		private var base:Container;
 
		private var left:Container;
 
		private var right:Container;
 
		private var header:Container;
 
		public function ContainerDemo()
		{
			super();
 
			// support autoOrients
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
 
			// Set up the base container with a horizontal flow
			base = new Container();
			base.debugColor = 0xff0000;
			base.margins = Vector.<Number>([10,10,10,10]);
			base.flow = ContainerFlow.HORIZONTAL;
 
			// Set up the left container with a size of
			// 50 percent
			left = new Container();
			left.debugColor = 0x00ff00;
			left.margins = Vector.<Number>([10,10,10,10]);
			left.size = 50;
			left.sizeUnit = SizeUnit.PERCENT;
 
			// Set up the right container with a size of 
			// 50 percent. By default the Container class
			// lays things out with a vertical flow.
			right = new Container();
			right.debugColor = 0x0000ff;
			right.margins = Vector.<Number>([10,10,10,10]);
			right.size = 50;
			right.sizeUnit = SizeUnit.PERCENT;
 
			// Create the header and dock it to the top 
			// of the screen
			header = new Container();
			header.debugColor = 0x00ffff;
			header.margins = Vector.<Number>([10,10,10,10]);
			header.size = 15;
			header.sizeUnit = SizeUnit.PERCENT;
			header.containment = Containment.DOCK_TOP;
			header.flow = ContainerFlow.HORIZONTAL;
 
 
			// Set up the array, data provider, and 
			// list component 
			var arr:Array = new Array({label:"Deschuttes The Abyss"},
				{label:"New Belgium Sahti"},{label:"Russian River Pliney The Elder"},
				{label:"Dogfish Head Bitches Brew"},{label:"Stone Double Bastard Ale"},
				{label:"Elysian Bifröst Winter Ale"},{label:"Odell 90 Shilling"},
				{label:"Lagunitas Undercover Investigation Shut-Down Ale"},
				{label:"Delirium Tremens"},{label:"Alaskan Double Black IPA"},
				{label:"John John Juniper"},{label:"Full Sail Wreck the Halls"},
				{label:"Samuel Adams Winter Lager"});
			var data:DataProvider = new DataProvider(arr);
			var list:List = new List();
				list.dataProvider = data;
				list.containment = Containment.BACKGROUND;
 
			// Create the nav buttons with a width of 33.3 percent
			// and set the sizeMode to both so they take up 100% 
			// of the height of the parent container.
			var nav1:LabelButton = new LabelButton();
				nav1.label = "Home";
				nav1.size = 33.3;
				nav1.sizeUnit = SizeUnit.PERCENT;
				nav1.sizeMode = SizeMode.BOTH;
				nav1.addEventListener(MouseEvent.CLICK,onClick);
 
			var nav2:LabelButton = new LabelButton();
				nav2.label = "Recommended Beers";
				nav2.size = 33.3;
				nav2.sizeUnit = SizeUnit.PERCENT;
				nav2.sizeMode = SizeMode.BOTH;
 
			var nav3:LabelButton = new LabelButton();
				nav3.label = "Rated Beers";
				nav3.size = 33.3;
				nav3.sizeUnit = SizeUnit.PERCENT;
				nav3.sizeMode = SizeMode.BOTH;
 
			var spacer:Spacer = new Spacer();
				spacer.size = 50;
				spacer.sizeUnit = SizeUnit.PERCENT;
 
			var label:Label = new Label();
				label.text = "Pintley For PlayBook!";
 
 
			// The addChild calls
			header.addChild(nav1);
			header.addChild(nav2);
			header.addChild(nav3);
 
			right.addChild(spacer);
			right.addChild(label);
 
			left.addChild(list);
 
			base.addChild(header);
 
			base.addChild(left);
			base.addChild(right);
 
 
			addChild(base);
 
			base.setSize(stage.stageWidth,stage.stageHeight);
		}
 
		protected function onClick(event:MouseEvent):void
		{
			// changes the size of the left/right containers
			// and then calls base.layout() so that all of
			// the base container's children are re-configured
			// and redrawn
			left.size = 25;
			right.size = 75;
			base.layout();
		}
 
	}
}

My favorite 5 Slashdot Comments of 2010

I post a lot of stuff on Slashdot.org.  Here are some of my favorites:

1. http://slashdot.org/comments.pl?sid=1827706&cid=33945232

I guess people are worried that our state of the art igloo geometric designs, dogsled aerodymanics and maple syrup chemistry are in danger if poltical decisions are made without the benefit of science. Luckily there are only 78 of us in the whole country. We can probably sort it out in about a fortnight over a few Molson’s beers while watching ice hockey. duane “Who won the damn gold medals at the last Olympics anyways?”

“Question everything, including this!” – http://technoracle.blogspot.com/

2. http://slashdot.org/comments.pl?sid=1788824&cid=33599702

Because there are lots of us who work at Adobe who have been very vocal internally about ensuring that Linux is a first class O/S and released at the same time as the other O/S’s. That is why Linux is getting the 64 bit Flash Player. More and more of us are using Ubuntu and RHEL on the server (our enterprise ESB uses RHEL/(WebSphere || Weblogic || JBoss) as a reference implementation!). Now if we could only talk our bosses into CS5 for Linux…..

3. http://slashdot.org/comments.pl?sid=1694512&cid=32656498

On Flash and having a Choice:

You could say you are also forced to use a browser then. You have a choice. If you want to see certain sites in their entirety, you can choose flash. If you want to experience only the text, use wget. If you want to see something in between, use a browser. your choice. There are still some old guys who don’t even like to load images and only read the alt text. Can’t make everyone happy so giving people choice is the only path we can take.

4. http://slashdot.org/comments.pl?sid=1606598&cid=31724840

130 mb of ram while sitting idle? Then it’s perfect for windoze and osx…. So what are the alternatives for *nix users now? dn grep this: s/$your_beliefs/$common_sense/i;

5. http://slashdot.org/comments.pl?sid=1575150&cid=31404260

you are right. The way Flash (the swf format only, not the whole platform) was written circa 2003, it wasn’t optimized to go to mobile devices. There were some issues and technical hurdles to get around. Some of them were simple (like stopping FP instances that are not in the visible part of the screen) or simply reducing the frame rates of flash applications that are using battery power when they are not in focus). Some required much more thinking such as form fields receiving focus when the tab is hit from an HTML form element above a flash form element). To scale to mobile was a challenge which has been met with the Flash PLayer 10.1. The Google Nexus 1 phone (which I own) does a great job of running the full version of Flash (not Flash Lite). The FP 10.1 has *huge* technical improvements from previous versions Adobe is full on excited about HTML 5 too. There are some really cool possibilities about using HTML 5 features side by side with Flash. Serge Jespers did a great job of showing this on his blog late last week: http://www.webkitchen.be/2010/03/05/the-html5-flash-marriage-geolocation/ [webkitchen.be] The fact is that HTML being updated is not something everyone asked for, but in it’s execution, there are some obvious features that I am glad to see such as the Video element. I do share some concerns about how more advanced API’s get implemented (such as the document.evaluate(); API) for complex XSLT processing but hope the industry will figure it out. DN

“Any technology can be used for good or for evil. The only question is how you decide to use your coding time in between “
– Gandalf

gotoAndSki() – 2011 Edition





One of the best conferences I attended and spoken at in 2010 was gotoAndSki() Norway. It’s quite normal if you haven’t heard of. I mean it was quite small and the location was rather remote. So, why do I think it was so good? First of all, the guys behind this event are amazing; I met them at the first Flex Camp in Oslo back in 2009 and I enjoyed their company during the event and afterward, while doing some late night A/B testing of different types of beer 😀 (Does FlashMagazine.com and Jens Christian ring a bell?).

Second, conferences have always been about people and connecting people. Of course a good track of sessions and speakers makes the back bone of any good conference, but without the social network there will be always something missing.

And this is exactly where Jens and his buddies excelled this year. They had a great idea to organize a three day conference and put the sessions in the evening/night and the social activities during the day. This way all the attendees had a chance to really talk and know each other better while doing ski, trekking, eating Norwegian food, and yes, drinking beer.

People think that going out and drink lot of beer after the last session it is the best way to make acquaintance. I don’t say it is a bad method. I’m just saying it isn’t necessary the best method for a bunch of developers. I mean just imagine you’ve always been a geek and loved to code during high-school/university and you haven’t party that much. Naturally, you decided to become a software engineer and here comes your first conference. Surprise, surprise if you want to bond with the attendees you have to be a beer master :D. Is this cognitive dissonance or what? Apologize for my rant 😀

Jens idea was to have the conference organized each year in a different country. So, I’m proud to announce on my blog that the 2011 edition – organized by Fernando Colaco – will take place in Switzerland, January 27-29. There are only 100 tickets, so if you want to experiment something different in a beautiful country hurry up and register here.

I just checked the sessions and I have to say I can’t wait to attend them – you can learn about making games, working with Arduino, developing for TV, Flash accessibility and much more.

In the end I want to take my hat off to Jens and Fernando for putting together an event like no other, at least here in Europe. And I’m curious where it will go next year!

PS. Fernando sent me a message telling me that actually they decided to have a summer edition and a winter edition in the same countries each year. What can I tell? They broke my heart; I had a vision about organizing one edition in the Carpathian mountains maybe with the help of my fellow evangelist, Ryan Stewart.

360Flex Denver

360Flex Denver360Flex is officially coming to Denver this year! I’m stoked because Denver is the second or third best city in the country. It’s going to be April 10th – 13th. Right now there are some good deals on tickets (if you buy before January 7th) so get them while they’re hot. It’s going to be a fun year for Flex with all of the devices coming to market and with people having had a chance to play with Flex “Hero” and Flash Builder “Burrito” (plus Flash Catalyst “Panini”) so this could be the best 360Flex in a while.

While you’re registering, you might as well think about speaking. They’ve opened the call for papers as well. See you there!

Motorola teasing a new tablet



2011 is going to be an interesting year! Apple has undoubtedly done an excellent job with the iPad but it has it’s obvious flaws. While they are currently the market leader in tablets the game is changing rapidly. With CES just a few weeks away big brands are starting to tease some of their announcements. (Man… I wish I could be at CES this year! So much cool stuff coming!) Motorola created this interesting teaser that doesn’t really say anything and yet says so much…

BTW… I’m doing a little bit of research on tablets and tablet applications. If you have a few minutes I would really appreciate it if you took the time to fill out this short survey.

Research: What’s your favorite tablet app and why?



The holidays are always a good time to do a little bit of research and since tablets are obviously going to be the next hot thing I thought about doing some research on tablet apps. I need your help though.

What I’d like to find out is what your favorite tablet apps are and why. I’d also like to hear from you if you currently do not own a tablet. To make this as easy as possible I created a Google Docs form. It would be a great help if you could take a few minutes to share your thoughts. Thanks in advance!

Adobe Evangelists Blogroll preview

Today I’m officially announcing my new mobile application called Adobe Evangelists Blogroll. This is a simple RSS reader type of application that aggregates blog feeds from my fellow Adobe Evangelists. I’ve developed it with a preview release of Flex Hero SDK and it works on all Android devices that can handle AIR runtime. The app is available in Android […]