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
Contributor
Posts: 12
Registered: ‎10-26-2010
My Device: Not Specified

Position icon button?

[ Edited ]

Basically I'm trying to import an image to use as an icon for a button. so far I have this:

 

 

			var homeButton:IconButton = new IconButton();
			homeButton.size = (60,60);
			homeButton.setIcon ("homeButton.png");
			homeButton.x = 0;
			homeButton.y = 0;

 

 

Where homeButton.png is located in the "src" directory.

the problem is, although the project compiles withhout errors, the button is not visible.

 

how do I add the icon to the button?

 

Contributor
Posts: 17
Registered: ‎05-11-2010
My Device: storm 2
My Carrier: verizon

Re: Position icon button?

Try addChild(homeButton);

Contributor
Posts: 12
Registered: ‎10-26-2010
My Device: Not Specified

Re: Position icon button?

[ Edited ]

Thanks, that worked!

However, now it seems to want to stretch the image by about 20px, and 0,0 is not against the left edge.

example

 

			var homeButton:IconButton = new IconButton();
			homeButton.setIcon ("homeButton.png");
			homeButton.setSize (40,40);
			homeButton.x = 0;
			homeButton.y = 0;

 

the image is now 40px by 40 px, but the space is 60px and as you can see it goes a little past.

 

HG9ow do I set it to have the correct dimensions and position?

Developer
Posts: 119
Registered: ‎03-10-2010
My Device: Bold 9000
My Carrier: Rogers

Re: Position icon button?

Hi,

 

I'm not sure if I've got what you mean.

 

You're setting the IconButton size to 40x40, and your image has also 40x40? 

 

When I was testing this class, I didn't see any resize function for the image itself. It was always the same size, and centered in the button.

 

Since your icon is 40x40, try to define a button a little bit larger, like 45x45.

 

Regards

 

 



(*) Kudo-me if you really think I helped you!
My plug: I'm doing a Mobile Experiment, reported on my Blog: Check it out!.
---------------------------
Paulo Garcia
http://www.mobilecreators.com - Twitter: http://twitter.com/mobilecreators
Contributor
Posts: 17
Registered: ‎05-11-2010
My Device: storm 2
My Carrier: verizon

Re: Position icon button?

Use

 

homeButton.height = 40;

homeButton.width = 40;

 

to change the button size.

Contributor
Posts: 12
Registered: ‎10-26-2010
My Device: Not Specified

Re: Position icon button?

That didn't really change anything, but that's not an issue.

Now all I'm trying to do is have the top strip filled out with a home button and a bookmarks button flush to the left side, and a url field to fill up the rest of the space.

 

The textentry field does not show up, and trying to add the event listeners for the buttons makes the browser crash on launch.

 

package
{
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.geom.Rectangle;
	import qnx.ui.text.TextInput;
	import qnx.media.QNXStageWebView;
	import qnx.ui.buttons.IconButton;
	
	import spark.primitives.Rect;
	
	public class Internet extends Sprite
	{
		public function Internet()
		{
			
			var homeButton:IconButton = new IconButton();
				homeButton.setIcon ("homeButton.png");
				homeButton.height = 40;
				homeButton.width = 40;
				homeButton.x = 0;
				homeButton.y = 0;
			
			var bookmarksButton:IconButton = new IconButton();
				bookmarksButton.setIcon ("BookmarksButton.png");
				bookmarksButton.setSize (40,40);
				bookmarksButton.x = 40;
				bookmarksButton.y = 0;
			
			var webEntry:TextInput = new TextInput();
				webEntry.x = 80;
				webEntry.y = 40;
				webEntry.setSize (400,40);
			
			var webView:QNXStageWebView = new QNXStageWebView();
			
			
			var rect:Rectangle = new Rectangle(0, 60, 1024, 540);
			
			
			addChild(homeButton);
			addChild(bookmarksButton);
			addChild(webEntry);
			// Set layout
			webView.stage = stage;
			webView.viewPort = rect;
			webView.autoFit = true;
			
			// Functionality		
			webView.enableCookies = true;
			webView.enableJavascript = true;
			webView.enableScrolling = true;
			
			// ...
			getUrl('http://www.google.com/'); // Home page preset
			
			
			// getUrl method
			function getUrl(url:String):void{
				webView.loadURL(url);
			//homeButton.addEventListener(MouseEvent.CLICK, getUrl('http://www.google.com/'));
			//bookmarksButton.addEventListener(MouseEvent.CLICK, getUrl('https://www.google.com/bookmarks/l'));
			
				stage.nativeWindow.visible = true;
			
			}
		
		}
	}
}

 

How do I fix this?

 

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

Re: Position icon button?

[ Edited ]

The solution is in the Container class. It allows you to layout groups of UI components. I'd make a menu bar out of a container with its layout set to horizontal. I'd set both buttons to dock left, then the URL bar to 100%, which will fill the remaining space. I'd then put that menu container inside a global container. Set the menu container to dock to the top, and then you can have the web view fill out the rest. Unfortunately the Container isn't as well documented as it should be, but hopefully that's enough to get you going in the right direction.

--------
Taylor Byrnes
Contributor
Posts: 12
Registered: ‎10-26-2010
My Device: Not Specified

Re: Position icon button?

Thanks, I'll try that. 

But how do I get the buttons and text field to make the webWIndow load a specific page?

Contributor
Posts: 12
Registered: ‎10-26-2010
My Device: Not Specified

Re: Position icon button?

[ Edited ]

I've been trying to get the buttons to load a specific page, but it makes the program crash with error 1009 (1063 after I added the addChilds)

 

package
{
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.geom.Rectangle;
	import qnx.media.QNXStageWebView;
	import qnx.ui.buttons.IconButton;
	import qnx.ui.core.Container;
	import qnx.ui.text.TextInput;
	
	import spark.primitives.Rect;
	
	public class Internet extends Sprite
	{
		public function Internet()
		{
			
			var container:Container = new Container();
			container.height = 60;
			container.x = (-70);
			container.width = 1024;
			container.flow = 'HORIZONTAL';
				var homeButton:IconButton = new IconButton();
					homeButton.setIcon ("homeButton.png");
					homeButton.setSize (40,40);
					homeButton.addChild (getUrl());
					homeButton.addEventListener(MouseEvent.CLICK, getUrl('www.google.com'));
					
				var bookmarksButton:IconButton = new IconButton();
					bookmarksButton.setIcon ("BookmarksButton.png");
					bookmarksButton.setSize (40,40);
					bookmarksButton.x = 44;
					bookmarksButton.addChild (getUrl());
					bookmarksButton.addEventListener(MouseEvent.CLICK, getUrl('www.google.com/bookmarks'));
					
				var webEntry:TextInput = new TextInput();
					webEntry.setSize (548,38);
					webEntry.x = 88;
			container.addChild(bookmarksButton);
			container.addChild(homeButton);	
			container.addChild(webEntry);
			addChild (container);
			
			
			var webView:QNXStageWebView = new QNXStageWebView();
			
			
			var rect:Rectangle = new Rectangle(0, 60, 1024, 540);
			
			
			// Set layout
			webView.stage = stage;
			webView.viewPort = rect;
			webView.autoFit = true;
			
			// Functionality		
			webView.enableCookies = true;
			webView.enableJavascript = true;
			webView.enableScrolling = true;
			
			// ...
			getUrl('http://www.google.com/'); // Home page preset
			
			
			// getUrl method
			 function getUrl(url:String):void{
				webView.loadURL(url);
			
				stage.nativeWindow.visible = true;
			
			}
			
		}
	}
}

 

 

New Developer
Posts: 14
Registered: ‎09-15-2010
My Device: 9700 Bold

Re: Position icon button?

Has anyone worked out any of the attributes/functions for the Container class ?