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
New Developer
_salman_
Posts: 14
Registered: ‎11-25-2010
My Device: Not Specified

HelloWorld Example with MX/Spark components

Hi all,


My understanding is that we can choose to use MX/Spark components if we want over QNX components - for example, the Button component.  So what I did was took the basic HelloWorld application which uses the qnx.ui.buttons.Button (and runs correctly on the simulator) and changed it to spark.components.Button.  That is about the only change that I made.  Everything compiles fine but when I deploy it onto the simulator, the Button does not appear at all.


Where am i going wrong?  Is there something I am misunderstanding?


Thanks!

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

Re: HelloWorld Example with MX/Spark components

Additionally, some MX components (and its library) makes for a larger application file size and longer load times.  If you're developing for the PB, I would stay with the QNX controls.

New Developer
_salman_
Posts: 14
Registered: ‎11-25-2010
My Device: Not Specified

Re: HelloWorld Example with MX/Spark components

Thanks for the response John.


I understand what you're saying about the MX/Spark components making the file size large and load times longer.  But I still don't understand why I am unable to use them (i.e. why does my screen appear blank with Spark Buttons...?).  They are supposed to be supported correct?  Additionally, if I setup my project as a MXML project and use the  <s:Button /> component, then I can see the button rendered on the PB simulator... it just seems when I try to do it programmaticly, it does not work.


Any ideas?


Thanks.

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

Re: HelloWorld Example with MX/Spark components

Did you try the mx.Button?

 

You would think that would all work.  Especially those that are porting their application over.

New Developer
_salman_
Posts: 14
Registered: ‎11-25-2010
My Device: Not Specified

Re: HelloWorld Example with MX/Spark components

Hey John,

 

I just tried it with mx.controls.Button and got the exact same thing (i.e. the button does not show up).  I feel like I'm going crazy..... there must be something I'm doing wrong....

 

The gist of the code is as follows:

package
{
	import flash.display.Sprite;

	import mx.controls.Button;
	
	[SWF(width="1024", height="600", backgroundColor="#cccccc", frameRate="30")]
	public class AIRHelloWorld extends Sprite
	{
		public function AIRHelloWorld()
		{
			var closeButton:Button = new Button();
			closeButton.label = "ADSFDSF";
			closeButton.visible = true;
			closeButton.x = 50;
			closeButton.y = 50;
			addChild(closeButton);

			stage.nativeWindow.visible = true;
		}
	}
}

Has anyone had any luck with this at all....?

 

Thanks 

 

New Contributor
guildem
Posts: 3
Registered: ‎12-01-2010
My Device: Not Specified

Re: HelloWorld Example with MX/Spark components

Hi _salman_,

 

Spark and MX components won't work if they're added to a Sprite.

You must create an Application component.

The only way I know to use it is to create a MXML Application file. FB4 helps you to create one.

You have a lot of tutorials if you search "Flex tutorial" or "Spark tutorial" on Google.

 

Good luck,

 

Guildem

Developer
ectar
Posts: 107
Registered: ‎11-20-2009
My Device: Tegra 2 Android tablet and Playbook

Re: HelloWorld Example with MX/Spark components

What I've found that staying only with QNX components is a bit annoying if you building complex UI.

Just becasue tehre is no visual editor in actionscript you have to tinker with x,y,z,top,left...states.... and so on which greatly incresing developement time.

http://riahut.com
Developer
jtegen
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10

Re: HelloWorld Example with MX/Spark components

I agree.  I have not had to do coordinate placing of controls in a Flex/AIR application in many, many years.  I would be happy if it could support HGroup/HBox and VGroup/VBox controls with percentWidth and percentHeight defintion (along with Spacer class).  You know when the simulator supports orientation changes, coordinate placement will have to be all redone instead of just using a layout container.  If anyone know of a lightweight layout manager that works with BB SDK (and dont say the Container class), please let us know.

 

Less productivity means less PB to give out for free :smileywink:

Developer
bradcarvey
Posts: 17
Registered: ‎11-22-2010
My Device: PlayBook

Re: HelloWorld Example with MX/Spark components

From what I have figured out in the week I have been developing for PlayBook, MX and Spark components will not work.  It has nothing to do with large, slow or anything else.  They don't appear to work.  I created some code below that instantiates 3 buttons (qnx, mx and spark).  Only the qnx button shows up in the simulator..  I keep hearing that it's slow but possible.  I have not seen a working example.

 

Under Project preferences/Flex Build Path, I add a SWC folder to get the compiler to rrecognize the mx and spark buttons.  On the Mac  the folder I add, has the following path:

 

/Applications/Adobe Flash Builder 4/sdks/blackberry-table-sdk-0.9.0/frameworks/locale/en_US

 

package

{

import flash.display.Sprite;

 

import mx.controls.Button;

 

import qnx.ui.buttons.Button;

 

import spark.components.Button;

 

[SWF(width="1024", height="600", backgroundColor="#cccccc", frameRate="30")]

 /**

* <p><b>Basic</b> class extends Sprite class</p>

* Class declaration.Ê The class is the main class in an actionscript

* only application.

* <p><b>Date:</b>    11/24/2010</p>

* @seeExample Basic.as

* @author Brad Carvey

*/

public class Basic extends Sprite

{

 /**

* Varible Declarations

*/

public var qnxButton:qnx.ui.buttons.Button;

public var mxButton:mx.controls.Button;

public var sparkButton:spark.components.Button;

 

 /**

* <b>Basic</b> public method

* <p>Constructor method for Class.Ê Call init method toÊ

* initialize the application, then make the application's native 

* window visible.</p>

*/

public function Basic()

{

init();

stage.nativeWindow.visible = true;

}

 

 /**

* <b>init</b> private method

* <p>Initialize the application.</p>

*/

private function init():void

{

qnxButton = new qnx.ui.buttons.Button();

qnxButton.x = 10;

qnxButton.y = 10;

this.addChild(qnxButton);

 

mxButton = new mx.controls.Button();

mxButton.x = 10;

mxButton.y = 110;

this.addChild(mxButton);

 

sparkButton = new spark.components.Button();

sparkButton.x = 10;

sparkButton.y = 210;

this.addChild(sparkButton);

 

}

}

}

 

Brad

 

New Developer
_salman_
Posts: 14
Registered: ‎11-25-2010
My Device: Not Specified

Re: HelloWorld Example with MX/Spark components

Thanks for the responses.


@guildem:  Actually, your response makes a lot of sense... Thanks for restoring my sanity :smileyhappy:  I think you're right about Spark and MX components not working if they're added to a Sprite.  I've also been able to successfully create MXML projects with Spark/MX components, but then of course I don't have access to the QNX components.... With the new release of the 0.9.1 SDK and support of Burrito, do you (or anyone) know if this is now possible?


@ectar & @jtegen:  Completely agree with you guys... Very annoying and not very practical at all.  Any ideas if new SDK and Burrito will help with this...?


@bradcarvey:  Thanks for the sample code but I think guildem's response was correct (i.e. you cannot use MX/Spark components in a Sprite).  They will work if you use them in MXML.