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: 587
Registered: ‎04-01-2009
My Device: Z10, PlayBook
My Carrier: NA

How to add a Sprite

This seems pathetically simple, so I'm frustrated that I've been unable to get it to work. All I'm trying to do is to add a Sprite to the screen:

 

 

[SWF(width="1024", height="600", backgroundColor="#cccccc", frameRate="30")]
public class HelloWorld extends Sprite
{
public function HelloWorld()
{
var spriteSmiley Frustratedprite = new Sprite();
sprite.x = 0;
sprite.y = 0;
sprite.width = 100;
sprite.height = 100;
sprite.opaqueBackground = 0xFF0000;
addChild(sprite);
stage.nativeWindow.visible = true;
}
}

 

When the application loads, I get a blank gray screen.

 

It must be something simple...

 

Thanks,
Daniel

 

Developer
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: How to add a Sprite

Hey Daniel,

 

dont get too stressed out! we were there when we started so no worries. from what it looks like you are trying to create a sprite object and its not showing it on screen. I think you'll have better luck using the Shape class instead if you want a block shape. i tried adding a sprite too and it never shows up. best thing u can do is just add objects directly to your program without using a sprite (only use it to make a application that extends Sprite).

 

This doesnt work: nothing shows up:

 

 

package
{
	import flash.display.Sprite;
	
	import qnx.ui.text.Label;
	
	// 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 HelloWorld extends Sprite
	{
		public function HelloWorld()
		{
			var sprite:Sprite = new Sprite();
			var newText:Label = new Label();
			
			newText.text = "Hello";
			
			sprite.x = 0;
			sprite.y = 0;
			sprite.width = 100;
			sprite.height = 100;
			sprite.opaqueBackground = 0xFF0000;
			
			sprite.addChild(newText);
			
			addChild(sprite);
			
			stage.nativeWindow.visible = true;
		}
	}
}

 But this on the other hand works:

 

 

package
{
	import flash.display.Sprite;
	
	import qnx.ui.text.Label;
	
	// 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 HelloWorld extends Sprite
	{
		public function HelloWorld()
		{
			var sprite:Sprite = new Sprite();
			var newText:Label = new Label();
			
			newText.text = "Hello";
			
			sprite.x = 0;
			sprite.y = 0;
			sprite.width = 100;
			sprite.height = 100;
			sprite.opaqueBackground = 0xFF0000;
			
			//sprite.addChild(newText);
			
			//addChild(sprite);
			
			addChild(newText);
			
			stage.nativeWindow.visible = true;
		}
	}
}

 

 

and if you want a box to appear like in your example use the shape class instead of the sprite class like this:

 

 

package
{
	import flash.display.Shape;
	import flash.display.Sprite;
	
	import qnx.ui.text.Label;
	
	// 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 HelloWorld extends Sprite
	{
		public function HelloWorld()
		{
			var shapeObj:Shape = new Shape();
			var newText:Label = new Label();
			
			newText.text = "Hello";
			
			shapeObj.graphics.beginFill(0xFF0000);
			shapeObj.graphics.drawRect(0,0,100,100);
			shapeObj.graphics.endFill();
			
			addChild(shapeObj);
			addChild(newText);
			
			stage.nativeWindow.visible = true;
		}
	}
}

 

good luck with everything!

 

 

J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
Developer
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10
My Carrier: Verizon

Re: How to add a Sprite

Try not setting the width and height of the Sprite.  Those are useless unless you have children in the Sprite.  The width and height will always be 0, no matter what you set it to and that is probably why you're not "seeing" it.  If you need to use that to help draw the Sprite, subclass and use your own attributes like hsize and vsize.

 

Developer
Posts: 587
Registered: ‎04-01-2009
My Device: Z10, PlayBook
My Carrier: NA

Re: How to add a Sprite

Thanks for your reply.  I should have been more specific about what I'm trying to do... I'd like my application to have multiple "screens", and after doing some searching on the forum, people seem to suggest having multiple sprites which you show/hide as needed, one sprite per "screen".

 

But when I tried this, my application would load with nothing visible, and I couldn't figure out why -- thus my question about how to add a sprite and have it show up.

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

Re: How to add a Sprite

Ah.

Well, the way I am doing it (there might be better methods), is that each screen extends the QNX UIComponent.  I add my controls in the constructor (addChild) and I size them too for the most part.  I override the protected draw() function where I place them absolutely or if you are using a layout engine, resize the bounds of the containers.  The draw() function gets called when the UIComponent width or height gets changed.

 

In may root Sprite, I do this:

 

this.main_view.width = stage.stageWidth;

this.main_view.height = stage.stageHeight;

this.pref_view.width = stage.stageWidth;

this.pref_view.height = stage.stageHeight;

this.pref_view.x = stage.stageWidth; // off to the right

 

Then I use Tweener to move the views over to the left.

 

You could probably addChild/removeChild on the views to have just one current, but I wanted a better transition between the views.  This method does not work well if you have multiple views off your primary view, but I guess you could add the view that will be moved to, position it to the right of the current view and then use Tweener to transition.  Simple class could manager this easily.

Highlighted
Developer
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: How to add a Sprite

hey dbigham,

 

i think what you read was using a class that extended the sprite class as a new page. so you would have one main application class say Page1 load up other classes (pages) by using the addChild() method. here's an example:

 

so take for instance you call your first and main application class Page1:

 

 

package
{
	//Remember to import all of the classes that you
	//are using
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	
	import qnx.ui.buttons.LabelButton;
	
	// 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="#FFF000", frameRate="30")]
	public class Page1 extends Sprite
	{
		private var page2:Page2; //Declare the "second page"
		
		public function Page1()
		{
			//initiate new object here to use later
			page2 = new Page2();
			
			var labButton:LabelButton = new LabelButton();
			
			labButton.label = "Click";
			labButton.setPosition(10,50);
			labButton.addEventListener(MouseEvent.CLICK,dothis);
			
			addChild(labButton);
			stage.nativeWindow.visible = true;
		}
		//change the event to MouseEvent since that is what you
		//are listening for
		public function dothis(event:MouseEvent):void {
			
			addChild(page2); //make "second page" visible 			
		}   
	}
}

 

 

When this application is loaded up it loads a button that you can click on. once you click the button it adds the Page2 class to the top of the application and therefore simulates a new page. Here is the code for the Page2 class:

 

 

package
{
	import flash.display.Sprite;
	
	import qnx.ui.buttons.LabelButton;
	
	public class Page2 extends Sprite
	{
		public function Page2()
		{
			var label:LabelButton = new LabelButton();
			label.label = "Welcome to Second Page";
			addChild(label);


} } }

 

Notice how both of these classes extend the Sprite class. And inside of both of these classes you have other objects that show up (buttons, shapes, text, etc). The Sprite class just houses other display objects. Once the Page2 class is added via the addChild() method it will show a new button on the screen. in essence you are just adding a new layer of information to the screen. you can remove this "page" but using the removeChild() method and go back to your original view. Hope this helps!

 

J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
New Developer
Posts: 38
Registered: ‎12-01-2010
My Device: Playbook

Re: How to add a Sprite

To me, this is where the Flex Mobile framework shines, with the Views and ViewNavigator features.  Makes it extremely easy to add and move between screens within an application.  This functionality runs great so far for me in the Playbook simulator and on Android devices.

 

Don

Don Kerr
Manager, Space City Adobe User Group
Houston, Tx
www.spacecityaug.com
Developer
Posts: 587
Registered: ‎04-01-2009
My Device: Z10, PlayBook
My Carrier: NA

Re: How to add a Sprite

JRab: Yes, you have copied & pasted the example from one of the threads I was following. I was attempting to use this approach in my code, but couldn't get it to work.

 

After further investigation, I discovered that an error was being thrown from within my first screen, and so execution was being stopped at that point and the screen was never being displayed.

 

Annoyingly, the uncaught error wasn't resulting in any kind of dialog box. So:

 

 

Why am I not seeing dialog boxes when there is an uncaught error?
I'm compiling the app using mxmlc and I'm running the application
via the blackberry-airpackager command line.

 

 

Developer
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: How to add a Sprite

[ Edited ]

hey dbigham,

 

let's try this. if you already created a Page1 project delete it and remove its content. Now i am going to assume you are running flash builder 4.0.1. Create a new flex project and name it Page1 and hit next 2 times in the menus that come up. Once you get to the library listing page don't hit finish yet. Scroll down to where it says Page1.mxml and rename that to Page1.as. The screen is going to look like this:

 

 

(Link: http://docs.blackberry.com/en/developers/deliverables/21877/FB4_create_Flex_project_1356205_11.jpg )

 

I think what happened is you are writing an ActionScript file with the extension of MXML and its not compiling properly. Now you can hit finish.

 

Once you have your project loaded up copy and paste the above codes and run through the debugger steps as you would normally and see what happens. Good Luck!

J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman
Developer
Posts: 587
Registered: ‎04-01-2009
My Device: Z10, PlayBook
My Carrier: NA

Re: How to add a Sprite

I'm not using Flash Builder, since I don't own it... I'm just using the command line.