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
AmonRaHR
Posts: 20
Registered: ‎06-12-2012
My Device: BlackBerry 10 Dev Alpha
Accepted Solution

Native UI action bar in Flex Mobile Application

hi all,

 

i manage to port sample WeatherGuesser from FDT to Mobile AS Application and it works.

But How to port that into Flex Mobile application.

 

I'd like to use native look of action bar, back and all of that.

 

is there any chance to accomplish that.

 

Thanks,

 

Vedran

BB10 Air Developer
Please use plain text.
Developer
jtegen
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10

Re: Native UI action bar in Flex Mobile Application

Any QNX control has to be wrapped into a Flex control to be included in MXML. It works fine as an AS3 control.
Please use plain text.
Contributor
AmonRaHR
Posts: 20
Registered: ‎06-12-2012
My Device: BlackBerry 10 Dev Alpha

Re: Native UI action bar in Flex Mobile Application

Thanks
BB10 Air Developer
Please use plain text.
Contributor
AwesomeDev
Posts: 39
Registered: ‎04-23-2011
My Device: N/A

Re: Native UI action bar in Flex Mobile Application

Hi Jtegen

How do you wrap a QNX control into a flex control? thanks

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

Re: Native UI action bar in Flex Mobile Application

I have never done it, because I stay with AS3 which is a little more portable, but I've been told is to add the QNX control into a MXML UIComponent.
Please use plain text.
Contributor
AmonRaHR
Posts: 20
Registered: ‎06-12-2012
My Device: BlackBerry 10 Dev Alpha

Re: Native UI action bar in Flex Mobile Application

Like This: 

 

<fx:Script>
<![CDATA[

import qnx.fuse.ui.progress.ActivityIndicator;

private var myActivity:ActivityIndicator = new ActivityIndicator();

private function init():void {
myActivity.width = 150;
activity.addChild(myActivity);
myActivity.animate(true);

}


]]>
</fx:Script>


<mx:UIComponent id="activity" top="50" left="150"/>

 

BB10 Air Developer
Please use plain text.
Developer
agaripian
Posts: 133
Registered: ‎12-02-2010
My Device: Z10 & Dev Alpha C

Re: Native UI action bar in Flex Mobile Application

Were you able to configure the Action Bar to like the Native BB10 navigation bar/ buttons etc?
I would like to do this using the Flex Mobile Application as well - I need to use MXML components with QNX.. I cant seem to add MXML components to the Weather Guesser sample witch is strictly an actions sctript mobile project.

---------------------------------------------------------------------
Developer of Stocks for Blackberry 10
Please use plain text.
Contributor
AmonRaHR
Posts: 20
Registered: ‎06-12-2012
My Device: BlackBerry 10 Dev Alpha

Re: Native UI action bar in Flex Mobile Application

You can do it like this: 

 

imports and variables:

import qnx.fuse.ui.actionbar.ActionBar;
import qnx.fuse.ui.core.Action;
import qnx.fuse.ui.core.TabAction;
import qnx.fuse.ui.events.ActionEvent;
import qnx.fuse.ui.core.MultiSelectAction;

import mx.core.UIComponent; // Create Action Bar private var appActionBar:ActionBar = new ActionBar();

 

then on creationComplete call some function for me is init():

 

//Set component
var ab:UIComponent = new UIComponent();
ab.left = ab.right = ab.bottom = 0;
ab.height=140;
				
// Add event listeners
appActionBar.addEventListener(ActionEvent.ACTION_SELECTED, ActionSelected );
				
// ActionPar Preferences
appActionBar.removeAll();
appActionBar.reserveActionSpace(true);
appActionBar.showTabsFirstOnBar( false );
appActionBar.enableBackButtonDrag = true;
				
// Populate action bar
appActionBar.backButton = new Action( 'Back', null, {id:'back'} );
//appActionBar.addAction(new MultiSelectAction("MultiSelect", new Assets.BTT_LOGIN(), {id:'brisi'} ) );
appActionBar.addAction( new Action( 'Login' , new Assets.BTT_LOGIN(), {id:'login'} ));
appActionBar.addAction( new Action( 'SingUp', new Assets.BTT_SIGNUP, {id:'singup'} ));
appActionBar.addAction( new Action( 'Account', new Assets.BTT_SIGNUP, {id:'account'} ));
appActionBar.addAction( new Action( 'Information', new Assets.BTT_INFO, {id:'info'} ));
				
//Add ActionBar on component AND place on stage.
ab.addChild(appActionBar);
this.addElement(ab);

 you need some function to handle clicks (see event listener above):

			private function ActionSelected(e:ActionEvent):void {
				/***
				 * by Vedran Tomičić 
				 * Rijeka, 26.10.2012
				 * 
				 * Ova funkcija služi za hvatanje akcija kada se tapne po action Bar-u
				 * Koristimo Switch funkciju.
				 * 
				 * 
				 * */
				if(e.action.data!=null) {
					switch(e.action.data.id){
						case "back": {
							navigator.popView();
							break;
						}
						case "login": {
							navigator.pushView(Login);
							break;
						}
						case "singup": {
							navigator.pushView(SignUp);
							break;
						}
						case "account": {
							navigator.pushView(Account);
							break;
						}
						case "info": {
							navigator.pushView(Info);
							break;
						}
					}
				}
			}	

 thats it, you will have action bar on your mxml file.

backButton drag not work here but tab button drag works ok .

 

BB10 Air Developer
Please use plain text.
Developer
agaripian
Posts: 133
Registered: ‎12-02-2010
My Device: Z10 & Dev Alpha C

Re: Native UI action bar in Flex Mobile Application

Wow I can't thank you enough!! Thats a great start for me!

 

I still could not get get the BackButtonDrag working. You indicated that wont work in your post.. Do you have any examples on how you got this working?

 

appActionBar.enableBackButtonDrag = true;  Flash Builder cant find (enableBackButtonDrag on ActionBar) 

 

Also there isnt much documentation on this!

 

Thanks again for all the help!!

---------------------------------------------------------------------
Developer of Stocks for Blackberry 10
Please use plain text.
Developer
jtegen
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10

Re: Native UI action bar in Flex Mobile Application

I tried setting that to true myself and saw no changes. I'm not even certain what it is suppose to do. Maybe after the next SDK update, that might do what ever it is suppose to do.
Please use plain text.