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
JRab
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: ToggleSwitch in Flex

man i am having the toughest time working with the FlexGlobals.topLevelApplication.currentState. it doesnt get any states unless i set them in the main application and then i have to do the same thing in the view components. even then when i set the FlexGlobals.topLevelApplication.currentState to something, its not properly setting the currentState value of the view. which leads me to beleive the currentState value is just the view's currentState and not the topLevelApplication's currentState.

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
JRab
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: ToggleSwitch in Flex

 


jtegen wrote:

@jrab: You should change your avatar to an iron man icon.  You probably have a secret lab that you have all these machines coming up with sample code to share with everyone.  So "jrab" is not a single person, it is a hord of robotic arms coding for you.  It is all very clear now.


 

OT: took your advice haha. icon compliments of a pretty cool designer:

 

http://www.svengraph.net/

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
JohnPinkerton
Posts: 350
Registered: ‎01-21-2011
My Device: Curve 8900 (Personal) / Bold 9650 (Work)

Re: ToggleSwitch in Flex

[ Edited ]

I'm using your method here for my Swipe Down. The topLevelApplication.currentState function is being done from the HeaderMenu component.

 

Edit: Your new avatar is awesome by the way!

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

Re: ToggleSwitch in Flex

hey johnp,

 

ahh ok and when you click on a nav option, you change the state of the view and it changes the screen right? i think there is a way of doing this without using hte FlexGlobals... route. you only stick to one [App]Home.mxml file? or do you have other mxml files you work with?

 

p.s. thanks for the compliment!

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
JohnPinkerton
Posts: 350
Registered: ‎01-21-2011
My Device: Curve 8900 (Personal) / Bold 9650 (Work)

Re: ToggleSwitch in Flex

I only have the Main.mxml and the functions change states within that file.

 

It works, my other thought was to send an event listener and have it change states but I couldn't get that to work. So then during my reading I found the FlexGlobals and use it to change states/call functions from Main.mxml.

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

Re: ToggleSwitch in Flex

hey JohnP,

 

ok so i think the biggest problem right now is the FlexGlobal...currentState being inconsistent. so i took the example of the code i posted using mseth's original code and modified a little more. this time incorporating a Singleton class for the header menu. so before we were not able to pass any variables between your application and the component. but now we are able to do so because of the Singleton implementation. A singleton is basically a single instance of a class being shared throughout your program. so its basically a huge static class. in as3 its not a true singleton, but you can treat it as such.

 

First here is the code. I tried using a Main.mxml like you have but i coudlnt get it to work. Whenever i create a new Flex Mobile Project, it only lets me use views. so i used views but maybe you can translate it into what you need.

 

FlexTest.mxml (Main application file):

 

 

<?xml version="1.0" encoding="utf-8"?>
<s:MobileApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.FlexTestHome" creationComplete="creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import mx.effects.Fade;
import mx.events.EffectEvent;
import mx.events.FlexEvent;
import mx.events.ResizeEvent;
import mx.managers.PopUpManager;

import qnx.events.QNXApplicationEvent;
import qnx.system.QNXApplication;

private var headerTimer:Timer = new Timer(5000,1);

[Bindable] public var headerMenu:HeaderMenu;
[Bindable] private var headerMenuDisplayed:Boolean = false;

protected function creationCompleteHandler(event:FlexEvent):void
{
QNXApplication.qnxApplication.addEventListener(QNXApplicationEvent.SWIPE_DOWN, onApplicationSwipeDown);

/**
* MAKE SURE that you only use the .getInstance() method to add access to it from any view
* because using the = new HeaderMenu() will create inconsitency and errors when
* dealing with singletons
*/
headerMenu = HeaderMenu.getInstance();

headerMenu.addEventListener(MouseEvent.CLICK, onHeaderMenuClick);

headerTimer.addEventListener(TimerEvent.TIMER, onHeaderMenuTimerEvent);
}

protected function onApplicationSwipeDown(event:QNXApplicationEvent) : void
{
showHeaderMenuPopup();
}

private function showHeaderMenuPopup() : void
{
if (!headerMenuDisplayed)
{
headerMenu.x = 0;
headerMenu.y = 0;

PopUpManager.addPopUp(headerMenu,this, false);

headerPopupEffectIn.end();
headerPopupEffectIn.play();

headerMenuDisplayed = true;
}

headerTimer.reset();
headerTimer.start();
}

private function onHeaderMenuTimerEvent(event:TimerEvent) : void
{
hideHeaderMenuPopup();

headerTimer.stop();
}

private function onHeaderMenuClick(event:MouseEvent) : void
{
hideHeaderMenuPopup();
}

private function hideHeaderMenuPopup() : void
{
headerPopupEffectOut.end();
headerPopupEffectOut.play();
headerPopupEffectOut.addEventListener(EffectEvent.EFFECT_END, headerMenuHidden);
}

private function headerMenuHidden(event:EffectEvent) : void
{
PopUpManager.removePopUp(headerMenu);
headerPopupEffectIn.removeEventListener(EffectEvent.EFFECT_END, headerMenuHidden);
headerMenuDisplayed = false;
}

]]>
</fx:Script>
<fx:Declarations>
<s:Parallel id="headerPopupEffectIn" target="{headerMenu}">
<s:Move duration="250" yFrom="-75" xTo="0" yTo="0" easer="{sineEaser}" />
</s:Parallel>
<s:Parallel id="headerPopupEffectOut" target="{headerMenu}">
<s:Move duration="250" yFrom="0" xTo="0" yTo="-75" easer="{sineEaser}" />
</s:Parallel>
<s:Sine id="sineEaser" easeInFraction="0.2" />
</fx:Declarations>
</s:MobileApplication>

 

 

FlexTestHome.mxml (initial view):

 

 

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
title="About" creationComplete="init()" xmlns:mx="library://ns.adobe.com/flex/mx" currentState="About">
<fx:Script>
<![CDATA[
import qnx.ui.buttons.ToggleSwitch;

private var toggleSwitch:ToggleSwitch;
private var headerMenu:HeaderMenu;

private function init():void
{

/**
* MAKE SURE that you only use the .getInstance() method to add access to it from any view
* because using the = new HeaderMenu() will create inconsitency and errors when
* dealing with singletons
*/

headerMenu = HeaderMenu.getInstance();

/** add the listener to know that a button was click so we can react to it */
headerMenu.addEventListener(Event.SELECT, onNavigationSelect);

toggleSwitch = new ToggleSwitch();
toggleSwitch.setSize(300,60);
toggleSwitch.selectedLabel = "Refresh";
toggleSwitch.defaultLabel = "About";
toggleSwitch.addEventListener(Event.SELECT, onToggle);

toggleSwitchContainer.addChild(toggleSwitch);
}

private function onToggle(e:Event):void
{
if (e.currentTarget.selected)
{
currentState = ToggleSwitch(e.currentTarget).selectedLabel;
}
else
{
currentState = ToggleSwitch(e.currentTarget).defaultLabel;
}

/**
* Change the state title on screen
*/

this.title = currentState;
}

private function onNavigationSelect(e:Event):void
{
/** set the current state using the getter method of the HeaderMenu singleton */

currentState = e.currentTarget.state;

/**
* Toggle the toggle to the new state
*/

if (e.currentTarget.state == toggleSwitch.selectedLabel)
{
toggleSwitch.selected = true;
}
else
{
toggleSwitch.selected = false;
}

/**
* Change the state title on screen
*/

this.title = currentState;
}

]]>
</fx:Script>

<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:states>
<s:State name="Refresh" />
<s:State name="About" />
</s:states>
<mx:UIComponent id="toggleSwitchContainer" x="10" y="10" includeIn="Refresh, About" />
</s:View>

 

 

HeaderMenu.mxml:

 

 

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" borderVisible="false"
xmlns:s="library://ns.adobe.com/flex/spark" width="1024" height="75" xmlns:mx="library://ns.adobe.com/flex/mx" >

<fx:Script>
<![CDATA[

/** create the required static _instance for the singleton */
private static var _instance:HeaderMenu;

/** create a variable that will store the selected button's state */
private static var _state:String;

/**
* Using this method getInstance() it will allow us
* to use a single instance of this class
* so we can keep the data between all the views
* and states in your application consistent
*/

public static function getInstance():HeaderMenu
{
if (!_instance)
{
/** set the _instance to this classes constructor */
_instance = new HeaderMenu();
}

return _instance;
}

/**
* When a user clicks a button, this function will be called
*/

protected function btn_clickHandler(event:MouseEvent):void
{
/** depending on which button they pressed, we will set the "state" to it */
if (event.currentTarget.id == "btn_refresh")
{
_state = "Refresh";
}
else
{
_state = "About";
}

/**
* now we will dispatch the Event.SELECT event so anyone
* who is listening can pick up on it.
*/

this.dispatchEvent(new Event(Event.SELECT));
}

/**
* using this getter method, we are able to retrieve the chosen state
* from any view that is listening for the event
*/

public function get state():String
{
return _state;
}
]]>
</fx:Script>

<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:backgroundFill>
<s:SolidColor alpha="0.9" color="#000000" />
</s:backgroundFill>
<s:layout>
<s:HorizontalLayout horizontalAlign="right" verticalAlign="middle" paddingTop="5" paddingBottom="5" paddingRight="5" paddingLeft="5" gap="5"/>
</s:layout>
<s:Button id="btn_refresh" label="Refresh" height="60" fontSize="18" click="btn_clickHandler(event)"/>
<s:Label text="APPLICATION NAME" fontSize="32" styleName="FeedItemTitle" textAlign="center" width="100%" height="100%" verticalAlign="middle" />
<s:Button id="btn_about" label="About" height="60" fontSize="18" click="btn_clickHandler(event)"/>
</s:BorderContainer>

 

 

Ok so there was a bunch of modifications. There are comments to walk you through it but i'll go over some of it here.

 

FlexTest.mxml (main application file):

 

This one relatively stayed the same with no modifications to it. The only thing i changed was i took out the line:

 

 

headerMenu = new HeaderMenu();

and changed it to:

 

headerMenu = HeaderMenu.getInstance();

 

This will allow you to use a single instance of your HeaderMenu.

 

FlexTestHome.mxml:

 

This one is where i did all the listening for the navigation change. Based on what hte user clicks on, it will react and change its currentState. Notice how the FlexGlobals...currentState is no longer used. Everytime a user clicks on the navigation button, its consitent and we can react to it.

 

HeaderMenu.mxml:

 

This is where the money is. I added two variables both static. that way they stay the same through out. Remember to never use the new HeaderMenu() constructor anywhere else besides this class. because otherwise you will be creating multiple instances with inconsistent data. always use the getInstance() method when adding the header menu access to any views.

 

I set this up with two states, "Refresh" and "About". Based on which button the user presses, it will update the current state of the view listening for button press. And oh yah, we arent listening for the MouseEvent.CLICK from the headerMenu object as you will notice. instead we are listening for the Event.SELECT event. this event is dispatched manually when a user makes a click of a button in the nav bar. you are able to access the .state getter function that gets the private _state string because its public.

 

i hope that makes sense! i ran  the code and it worked on my end as expected. but if you run into any problems please ask away and i'll try to explain it. and for the sake of keeping your project functioning as is, i recommend creating a new mobile project called "FlexTest" where you can see this working. then import it into your current project and make it work.

 

hope that helps you out. 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
JohnPinkerton
Posts: 350
Registered: ‎01-21-2011
My Device: Curve 8900 (Personal) / Bold 9650 (Work)

Re: ToggleSwitch in Flex

JRab, took me a bit to digest the code but I seem to have it working!

 

Appreciate your assistance this. Above and beyond! I've got v1 in the pipe for approval now, and will have to start doing some reading up!

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

Re: ToggleSwitch in Flex

hey johnp,

 

just glad i could help you out!

 

congrats on your submission into app world and wish you the best of luck with it! i'll be joining you shortly :smileyhappy:

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