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: 327
Registered: ‎12-13-2010
My Device: Bold 9900/Z10 Special Edition
My Carrier: Rogers
Accepted Solution

Loading image when using URL request

I've got a request for help, for anyone who might be able to *cough*JRab*cough*


....I want to show a small Loading gif when my app is in the middle of sending a URLrequest, so it looks like my app is doing something while the request is happening....because when the app loads it takes a couple seconds to get this done, and also when updating the displayed content..


Any help??

CEO/Lead Developer - Tensioncore™ Design Studios
http://tncr.ws/ - ShortenThis!™ for Blackberry Playbook | ShortenThis!™ for BlackBerry® 10
The Periodical Toe A highly informative Table of Elements
DrawThis! A fun drawing app for the BlackBerry® PlayBook™!
http://www.tensioncore.com/ - Tensioncore™ Web Hosting
Developer
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: Loading image when using URL request

hey tensioncore,

 

LOL! just a coincidence Smiley Happy

 

there is a class called ActivityIndicator that can help you out here:

 

http://www.blackberry.com/developers/docs/airapi/1.0.0/qnx/ui/progress/ActivityIndicator.html

 

Basically when you start the URLRequest, you can set the .animite(true) (after adding the activity indicator instance to the stage) and it will start animating the indicator. once you get the IOErrorEvent or the Event.COMPLETE event, can both remove the indicator from the stage and do the .animate(false).

 

its a pretty cool feature and i use it for my Sync system in the all whenever i upload stuff. hope that helps. 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: 327
Registered: ‎12-13-2010
My Device: Bold 9900/Z10 Special Edition
My Carrier: Rogers

Re: Loading image when using URL request

so does that class sort of work like an if statement? Can I just put an image in that? And it will play when animate = true?
CEO/Lead Developer - Tensioncore™ Design Studios
http://tncr.ws/ - ShortenThis!™ for Blackberry Playbook | ShortenThis!™ for BlackBerry® 10
The Periodical Toe A highly informative Table of Elements
DrawThis! A fun drawing app for the BlackBerry® PlayBook™!
http://www.tensioncore.com/ - Tensioncore™ Web Hosting
Developer
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: Loading image when using URL request

hey tensioncore,

 

the ActivityIndicator as everything preloaded including the image that it animates. if you want a custom image, you will have to do the setSkin() method. but i havent done that yet. below is a sample code to test out the feature. There is no need for an IF ELSE statement. the code for it is nice and clean and definitely in my top 5 QNX api list hah

 

ActivityTest.as:

 

 

package
{
	import flash.display.Bitmap;
	import flash.display.Loader;
	import flash.display.LoaderInfo;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.ErrorEvent;
	import flash.events.Event;
	import flash.events.IOErrorEvent;
	import flash.events.MouseEvent;
	import flash.net.URLRequest;
	
	import qnx.ui.buttons.LabelButton;
	import qnx.ui.display.Image;
	import qnx.ui.progress.ActivityIndicator;
	
	[SWF(width="1024",height="600",backgroundColor="#e8e8e8",frameRate="30")]
	public class ActivityTest extends Sprite
	{
		private var _loader:Loader;
		private var _urlRequest:URLRequest;
		private var _image:Image;
		
		private var _btn:LabelButton;
		
		private var _activityIndicator:ActivityIndicator;
		
		public function ActivityTest()
		{
			super();
			
			// support autoOrients
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			
			/**
			 * Set up the image placeholder
			 */
			
			_image = new Image();
			_image.setPosition(10,10);
			
			addChild(_image);
			
			/**
			 * Set up the activity indicator
			 * Make sure to do setSize so it gets created
			 */
			
			_activityIndicator = new ActivityIndicator();
			_activityIndicator.setSize(100,100);
			_activityIndicator.setPosition((stage.stageWidth / 2) - (_activityIndicator.width / 2), (stage.stageHeight / 2) - (_activityIndicator.height / 2));
			
			/**
			 * Sample loader getting google's homepage image
			 */
			
			_loader = new Loader();
			_urlRequest = new URLRequest("http://www.google.com/images/logos/ps_logo2.png");
			
			_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
			_loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, onError);
			
			/**
			 * Button that starts things
			 */
			
			_btn = new LabelButton();
			
			_btn.label = "Load Image";
			_btn.setSize(150,52);
			_btn.setPosition(10,150);
			
			addChild(_btn);
			
			_btn.addEventListener(MouseEvent.CLICK, onClick);
			
			
		}
		
		private function onClick(e:MouseEvent):void
		{
			/**
			 * Start the animation and show the indicator on screen
			 */
			_activityIndicator.animate(true);
			
			addChild(_activityIndicator);
			
			/**
			 * Begin the image loading
			 */
			
			_loader.load(_urlRequest);
			
			_btn.enabled = false;
		}
		
		private function onComplete(e:Event):void
		{
			/**
			 * Stop the animation after image loaded successfully
			 * and get rid of it
			 */
			_activityIndicator.animate(false);
			
			removeChild(_activityIndicator);
			
			/**
			 * set the image to the downloaded image
			 */
			
			var bitmap:Bitmap = Bitmap(LoaderInfo(e.target).content);
			
			_image.setImage(bitmap);
		}
		
		private function onError(e:ErrorEvent):void
		{
			/**
			 * If there was an error. stop the indicator
			 */
			_activityIndicator.animate(false);
			
			removeChild(_activityIndicator);
			
			
			trace("error: " + e);
		}
	}
}

 

 

There are comments throughout. Basically this application downloads googles image after you click load image. and then while its downloading, it will display the activity indicator and get rid of it when it finishes / results in an error.

 

hope that clears a few things up. 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: 1,269
Registered: ‎12-29-2010
My Device: PlayBook, Z10 LE, Dev Alpha C

Re: Loading image when using URL request

In case the ActivityIndicator class doesn't do what you want, there is also an MIT licensed animated GIF player out there:

 

http://code.google.com/p/as3gif/

 

Haven't used it so can't vouch for it.

Developer
Posts: 327
Registered: ‎12-13-2010
My Device: Bold 9900/Z10 Special Edition
My Carrier: Rogers

Re: Loading image when using URL request

[ Edited ]

Hey thanks for all the code, but it was largely unnecessary since I have all of the code set up I just basically dropped the few lines I needed into my code, however this will be a great help to anyone who might need code setup like this!


Now as for defining the skin of the activity indicator, I can't find any reference in the API ref, it just says that it exists....and it actually has a class called ActivityIndicatorSkin();


EDIT: So I added _activityIndicator.setSkin('loader.gif'); and added the loader.gif of my own to the project and it crashed the entire app!
ALSO before adding the loader in the first place, it was hanging the app when opening everytime..
CEO/Lead Developer - Tensioncore™ Design Studios
http://tncr.ws/ - ShortenThis!™ for Blackberry Playbook | ShortenThis!™ for BlackBerry® 10
The Periodical Toe A highly informative Table of Elements
DrawThis! A fun drawing app for the BlackBerry® PlayBook™!
http://www.tensioncore.com/ - Tensioncore™ Web Hosting
Developer
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: Loading image when using URL request

[ Edited ]

hey nick,

 

dont sweat it, its good practice on my part haha. as for skinning it, saying its difficult to find documentation for it is an understatement lol. there is not a shred of documentation on this which leads me to beleive they never intended on us skinning it. maybe im just making excuses for myself cuz i cant wrap my head around it hah

 

but if i were to disect it, it looks like an animated swf. and since all of their images are somehow embedded, im going to guess its an embedded swf (saw a few examples of that around the net - never really got into it). due to the lack of documention, your best bet will be to roll your own version of this rather than beating your head over how the API works (you can always use Flash Builders code hinting but that'd take time too).

 

the easiest approach to me is to create a circular image. then rotate it constantly just like it does now and make it stop when you are done processing. this can be done via a few code snippets you can find on these forums from a week or two ago.

 

the second approach would be the one that UberschallSamsara pointed out (animated gif). hope that sheds some light. good luck!

 

Edit: In reply to your edit, the QNX skin system is pretty specific. if you dont get it just rite it makes sure you notice it via its nasty errors !

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: 327
Registered: ‎12-13-2010
My Device: Bold 9900/Z10 Special Edition
My Carrier: Rogers

Re: Loading image when using URL request

[ Edited ]
You might be right on this one!
I got huge amounts of errors thrown in my debugging too, I just went over the debug info, and according to Burrito, the class for Skinning has errors in it!! THATS a bugggg!

I'm just going to show a pre-made gif of mine in the same place as that code...simple fix.

CEO/Lead Developer - Tensioncore™ Design Studios
http://tncr.ws/ - ShortenThis!™ for Blackberry Playbook | ShortenThis!™ for BlackBerry® 10
The Periodical Toe A highly informative Table of Elements
DrawThis! A fun drawing app for the BlackBerry® PlayBook™!
http://www.tensioncore.com/ - Tensioncore™ Web Hosting
New Contributor
Posts: 2
Registered: ‎03-16-2011
My Device: Tour
My Carrier: Optus

Re: Loading image when using URL request

to bring this one back to life...

I'm trying to do the same thing; where I want to show an animated gif of my own creating, as the activity indicator...did you have any luck with this tensioncore? thanks!

 

md

Developer
Posts: 327
Registered: ‎12-13-2010
My Device: Bold 9900/Z10 Special Edition
My Carrier: Rogers

Re: Loading image when using URL request

[ Edited ]

With the default activity indicator it was very pixelated and ugly, I'm not sure if it will be exactly the same on the actualy device and I'm just going to wait until I get my PB.

 

As for the great resource towards the animated gif AS function, I haven't tried it as I am intending to have a very lightweight app, and it wont actually use the animated loading image for more than a second ever, and therefor it wont utilize it enough to include....although maybe in the future I'll try it out.

CEO/Lead Developer - Tensioncore™ Design Studios
http://tncr.ws/ - ShortenThis!™ for Blackberry Playbook | ShortenThis!™ for BlackBerry® 10
The Periodical Toe A highly informative Table of Elements
DrawThis! A fun drawing app for the BlackBerry® PlayBook™!
http://www.tensioncore.com/ - Tensioncore™ Web Hosting