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
Posts: 23
Registered: ‎10-26-2010
My Device: 9650
My Carrier: VZW

Opinions After 24 Hours

For the first 6-8 hours, I hated this SDK. Hate. No free IDE worth anything, inconvenient packaging and installation method, etc. Finally, I just sucked it up and got the FlashBuilder demo.

 

The next 8 hours or so were pure bliss. I've never programmed in ActionScript before, but I got the hang of it quickly coming from Java and the tutorial videos online showed how amazingly simple it was to do P2P video conferencing. I would never in a million years have been able to do that with Java!

 

Then the last hour or two has been disappointing. There is currently no Flash API to access the camera or microphone on PlayBook or on Android devices. Bummer. Additionally, the easy-as-pie to use VideoDisplay objects that can pull video straight off of a NetStream with no additional configuration don't exist in the qnx UI classes. Double bummer.

 

So now I'm trying to figure out how to use the flashbuilder MXML editor to create layouts for PlayBook apps. So far no luck on that front but it's more than likely that it's just a learning-curve issue.

 

Long story short, I wish the high-powered Flash components worked for PlayBook development, and with any luck they eventually will. In the mean time, it's not incredibly different from Java so once we find a way to get rid of this blasted FlashBuilder IDE setup I think it will work quite nicely for all of you Java developers.

Developer
Posts: 137
Registered: ‎10-26-2010
My Device: Bold 9900 + PlayBook
My Carrier: Rogers

Re: Opinions After 24 Hours

[ Edited ]

MXML I'm afraid isn't just learning curve. The Features and Technical Overview document states:

 

Note: You must use Flash Builder to create Adobe® ActionScript® projects. The BlackBerry® Tablet OS currently only supports Flash with ActionScript; MXML components are not currently supported.


As a result of this I've found it nearly impossible to find any information about how to design UIs. Every Air tutorial assumes you're using MXML. Even if they didn't I'm not sure it would help, as we have to use all these QNX UI components. I'd really like there to be some UI samples. This issue is RIM in general and not specific to the PlayBook. All the sample code produces incredibly ugly apps, and it's up to you to figure out how they did the things that look good.

 

In the case of the PlayBook we don't really have any sample code. It appears that the Container object should be used for UI layout, but the API reference with its one sentence descriptions isn't as helpful as I'd like. I could position everything in pixels, but I don't think that's really a good idea for the real world where I have to support rotation, and eventually other screen resolutions.

 

RIM, we've seen the PlayBook demo, we know there are complete apps, would you open source one of them? It'd be great to be able to look through just one complete complex app to really understand the UI and all the UI conventions.

 

I know this is just a beta, so I'll cut RIM some slack on the documentation, but a sample app that's already built is quick and possibly even more useful.

--------
Taylor Byrnes
Developer
Posts: 23
Registered: ‎10-26-2010
My Device: 9650
My Carrier: VZW

Re: Opinions After 24 Hours

It's possible (probable) that the example apps they've shown were built using unreleased SDK versions or functionality. Anyway, worst case scenario you just have to build UI's the same way you did in the smartphone Java SDK right? Add them all programmatically and whatnot if you know what I mean.
Developer
Posts: 85
Registered: ‎10-25-2010
My Device: Not Specified

Re: Opinions After 24 Hours

Hello both of you, very interesting thread Smiley Happy.

I've been developping using Flex for the last 3 years so i can give you some more informations (and AIR for Android apps for the last 6 months). I'm not surprised that you loved it if you came from a Java background, Flex is made for creating applications and it does it right.

 

About the whole AS3/MXML thing.  It is written in the recommandations that you can't use MXML and Flex because they are not optimized yet. That's true, they are not optimized, and they bring more overhead than pure AS3. But you can still use them in your applications. I do use them a lot (even Flex 3 components) and it works great on Android and BlackBerry.I don't know how i would do a full resizable interface without it, can't go back to AS3 again Smiley Tongue. Soon there will be the Flex Hero components (available in beta) that are fully optimized for that task.

Give it a try and look at the performance. Just think that you shouldn't put containers inside containers inside containers too much or it will take too much time to calculate the layout.

 

About the Microphone / Camera API, they exist. I don't know if BB implemented them (anyway, for now you only have the simulator so you can't really test i). But they exist and they can already be used in AIR for Android (which is AIR 2.5). Have a look at the classes CameraUI, CameraRoll and Microphone, they are part of the 2.5 AIR SDK. If you want to try them outside the simulator, you can do a simple AIR application for desktop (compiler with AIR 2.5, not the BB SDK) and test it with your webcam / microphone, it will work the same on a device.

 

So you can enjoy all the tutorials out there Smiley Happy. If you are french, visit my blog: http://www.flex-tutorial.fr Smiley Happy

 

Fabien

Hope this helps,
Fabien

--
1. If you liked my post or found it useful please click on the white star and provide a Kudo!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!
Developer
Posts: 165
Registered: ‎10-26-2010
My Device: BlackBerry® PlayBook™
My Carrier: .

Re: Opinions After 24 Hours

[ Edited ]

I highly agree and have had the same experience while looking for AIR examples over the past couple of years. Flex has been more prominently featured from the beginning. When I first started with AIR 1.0, I had opened Flash Professional maybe five times, and the only thing I had built was a calculator application using the default Flash UI Components - BUT it was the right tool for the job.

 

Flash and ActionScript applications can essentially be thought of as full Flash websites. Any tutorials you can find for programming a website, portfolio, widget or game in Flash, as long as it is ActionScript 3, will apply to non-Flex AIR creation for UI and more.

 

Looking through the QNX package's AS Docs, there does seem to be classes that can be used for layout much like Flex's containers. They are in qnx.ui.core. Looking quickly over the descriptions, properties and methods, the following should be the equivalent of (or at least similar to) a Flex VGroup.

 

 

package  
{
	import flash.display.DisplayObject;
	import flash.events.Event;
	import qnx.ui.core.*;
	
	/**
	 * ...
	 * @author Chris Price
	 * @version 0.1
	 */
	public class SC_VerticalGroup extends Container
	{	
		/*
		 * Container extends flash.display.DisplayObject, so you can use
		 * all of the methods and public properties of 
		 * DisplayObject -- x, y, alpha, etc.
		 * 
		 * */
		
		private var _items:Array = [];
		
		public function SC_VerticalGroup() 
		{
			//instatiate the superclass (qnx.ui.core.Container) so
			//we have something to work with
			super();
			
			//Event listener for the change event to detect when changes
			//are made to the containter (namely when children are added).
			//It calls the layout method of qnx.ui.core.Container to 
			//reposition the children of the container
			addEventListener(Event.CHANGE, arrangeItems);
			
			//THIS IS THE IMPORTANT PART!!!
			//These properties are already present in the qnx.ui.core.Container
			//class, which is instatiated by the above call to super(); so 
			//they do not have to be declared again. Basically, we're setting 
			//our own default values to create the type of container needed
			//these variables won't need to be reset from qnx.ui.core.Container's
			//defaults every time an SC_VerticalGroup is needed though, you can
			//change them as needed because all of the public properties of 
			//Container are inherited.
			
			flow = ContainerFlow.VERTICAL;
			
			padding = 0;
			
		}
		
		//layout() can't handle the CHANGE event, so it has to be wrapped in
		//another function to catch the event
		private function arrangeItems(e:Event):void 
		{
			layout();
		}
		
		//we're defining addItem to use in place of addChild so
		//that we can run addChild and some other functions when
		//something is added to the container
		public function addItem(object:DisplayObject):void
		{
			object.name = "object" + new Date();
			addChild(object);
			
			//send a reference of the object to our _items Array
			_items.push(object.name);
			
			//dispatch a change event so that the listener will trigger
			//the arrangeItems function to put the new item where it should go.
			//This would be similar to Flex's invalidateLayout()
			dispatchEvent(new Event(Event.CHANGE));
		}
		
		//we're defining addItemAt to use in place of addChildAt so
		//that we can run addChildAt and some other functions when
		//something is added to the container
		public function addItemAt(object:DisplayObject, index:uint=0):void
		{
			object.name = "object" + new Date();
			addChildAt(object, index);
			
			//send the name of our object of the object to our
			//_items Array. The object can be called up later 
			//if it's created on the fly by using 
			//getChildByName(items[i].name);
			_items.push(object.name);
			
			//dispatch a change event so that the listener will trigger
			//the arrangeItems function to put the new item where it should go.
			//This would be similar to Flex's invalidateLayout()
			dispatchEvent(new Event(Event.CHANGE));
		}
		
		//Similar functions for removeChild and removeChildAt
		
		public function removeItem(object:DisplayObject):void
		{
			//remove its name from _items
			var k:int = _items.indexOf(object.name);
			if ( k != -1 ) { _items.splice(k); }
			
			//Finally, remove the item...
			removeChild(object);

			//dispatch a change event so that the listener will trigger
			//the arrangeItems function to reflow the items.
			//This would be similar to Flex's invalidateLayout()
			dispatchEvent(new Event(Event.CHANGE));
		}
		
		public function removeItemAt(index:uint=0):void
		{
			//remove its name from _items
			var m:int = _items.indexOf(getChildAt(index).name);
			if ( m != -1 ) { _items.splice(m); }
			
			//Finally, remove the item...
			removeChildAt(index);
			
			//clear m for garbage collection
			m = 0;
			
			//dispatch a change event so that the listener will trigger
			//the arrangeItems function to reflow the items.
			//This would be similar to Flex's invalidateLayout()
			dispatchEvent(new Event(Event.CHANGE));
		}		
		
		//This function is not tested at all
		public function nuke():void
		{
			var isEmpty:Boolean = false;
			
			var c:int = numChildren - 1; //for zero-indexed Array
			
			removeEventListener(Event.CHANGE, arrangeItems);
			
			while (c >= 0 && !isEmpty) { 
				
				removeChildAt(0);
                                
                                //update c since we removed an item
                                c = numChildren - 1;

				//You could also maybe do a c-- or c-=1
				//instead of calling numChildren again above 

                                //More of a failsafe than anything else
				if (c  <= 0) { isEmpty = true; break; }
			}
			
			isEmpty = false;
			
			stage.removeChild(this);
			
		}
		
		public function get items():Array { return _items; } //READ-ONLY
	}

}

 

 

... and here's the HelloWorld app using the new SC_VerticalGroup class - notice that I never set X and Y for the 2 sprites -- they are arranged automatically when you test the app:

 

 

package
{
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import qnx.ui.buttons.Button;
	import qnx.ui.buttons.LabelButton;
        import SC_VerticalGroup;

	// The following metadata specifies the size and properties of the canvas that
	// this application should occupy on the BlackBerry PlayBook screen.
	[SWF(width="1024", height="600", backgroundColor="#cccccc", frameRate="30")]
	
	public class AIRHelloWorld extends Sprite
	{
		private var vgroup:SC_VerticalGroup;
		
		//We'll pretend these are items for vgroup and will draw them as colored rectangles
		private var sprite1:Sprite;
		private var sprite2:Sprite;
		
		public function AIRHelloWorld()
		{
			var helloButton:LabelButton = new LabelButton();
			helloButton.label = "Hello World!";
			helloButton.x = (stage.stageWidth - helloButton.width)/2;
			helloButton.y = (stage.stageHeight - helloButton.height)/2;
			
			var myFormat:TextFormat = new TextFormat();
			myFormat.color = 0xAA0000;
			myFormat.size = 24;
			myFormat.italic = true;
			myFormat.align = "center";
			
			var text:TextField = new TextField();
			text.text = "Close";
			text.setTextFormat(myFormat);
			
			var closeButton:Button = new Button();		
			closeButton.addChild(text);
			closeButton.addEventListener(MouseEvent.CLICK, closeWindow);
			closeButton.x = (stage.stageWidth - closeButton.width)/2;
			closeButton.y = helloButton.y - helloButton.height;
			
			addChild(helloButton);
			addChild(closeButton);
			
			stage.nativeWindow.visible = true;
			
			vgroup = new SC_VerticalGroup();
			vgroup.setPosition(0, 0);
			vgroup.setSize(200, 400); //if the size isn't large enough, it won't arrange the items within
			addChild(vgroup);
			
			sprite1 = new Sprite();
			sprite1.graphics.beginFill(0xFF0000, 1);
			sprite1.graphics.drawRect(0, 0, 200, 100);
			sprite1.graphics.endFill();
			vgroup.addItem(sprite1);
			
			sprite2 = new Sprite();
			sprite2.graphics.beginFill(0x00FF00, 1);
			sprite2.graphics.drawRect(0, 0, 200, 100);
			sprite2.graphics.endFill();
			vgroup.addItem(sprite2);
				
		}
		
		private function closeWindow(event:MouseEvent):void
		{
			stage.nativeWindow.close();
		}
	
	}
}

 

 

I haven't tested the code extensively; only this example, and I admit it is very simplistic, but other items would be very similar. Hopefully it shows you how to stitch together some of the provided components to create a UI or a UI framework.

 

For UI animation, they have put together some tween classes, but their underlying framework is Tweener, and Tweener is included in the qnx-screen package (caurina.transitions.*). Lee Brimelow has a Tweener tutorial or two on his site - http://gotoandlearn.com

 

Chris

Developer
Posts: 439
Registered: ‎10-25-2010
My Device: Not Specified

Re: Opinions After 24 Hours

[ Edited ]

Use Flash!?

 

Seriously, the best workflow by far for a pure actionscript project, is to have basically an Assets.fla, this contains all your visual items, buttions layouts, spinners etc etc. Usually I'll have a big container for each "View".

 

You can then export these, and import them into your Actionscript project as dumb sprites/movieclips, and then wire them up there, adding your event listeners and injecting content.

 

This way you get the beauty of designing in Flash IDE, using the native drawing tools, timeline animations, easy alignment, it's dead simple to whip up some nice UI's.

 

Your code then has to take care of listening for stageResize events, and flowing all your UI elements appropriately. Contraty to the comment above, this is pretty easy.

 

Just have a main listener for stageResize which updates your model, model broadcasts event, all your views listen for and respond to that event. Voila, resizable liquid layout. If you design it like this from the start, it adds very little overhead.

Developer
Posts: 85
Registered: ‎10-25-2010
My Device: Not Specified

Re: Opinions After 24 Hours

Depends on what kind of application you want to build. If you are into enteprise applications, you don't really care about flash drawing tools, you just want a fluid UI with you components. If you do games, you would rather use Flash, yes

 

Fabien

Hope this helps,
Fabien

--
1. If you liked my post or found it useful please click on the white star and provide a Kudo!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!
Regular Contributor
Posts: 86
Registered: ‎10-25-2010
My Device: Not Specified

Re: Opinions After 24 Hours

Microphone and Camera API's work on AIR for Android.

 

PlayBook will most likely support these API's as well, but as for this release they are not implemented. See the release note's known issues section - http://docs.blackberry.com/en/developers/deliverables/21880/Known_issues_1360895_11.jsp

blog: http://renaun.com
twitter: @renaun
Developer
Posts: 23
Registered: ‎10-26-2010
My Device: 9650
My Carrier: VZW

Re: Opinions After 24 Hours

Thanks for the heads-up about the android camera/mic classes and the layout advice. If I could hope to get a bit more information on discovered qnx UI classes, is there a current equivalent to the VideoDisplay object or easy way to generate such functionality? Video chat is a key piece of functionality for the PlayBook app that I'm hoping to earn my free PlayBook with Smiley Happy.
Developer
Posts: 439
Registered: ‎10-25-2010
My Device: Not Specified

Re: Opinions After 24 Hours

[ Edited ]

Ya, obviously if you need advanced components then you would not use a pure actionscript project Smiley Tongue Rolling your own list control, viewstack or image control is pretty simple, but if you need advanced datagrids, tree controls or that sort of thing then look to Flex.

 

Not just games though, any application that does not require Flex components will benefit from this approach, makes it extremely easy to perform small tweaks/customizations and is very flexible.