I have a TabbedViewNavigatorApplication with three tabs.
I want to call a function when the current active button tab is clicked again.
How can it be done?
Here is several ways to resolve this task, on of them please see below:
<?xml version="1.0" encoding="utf-8"?>
<s:TabbedViewNavigatorApplication
xmlns:fx="http://ns.adobe.com/mxml/2009"
creationComplete="handler_creationCompleteHandler(event)"
xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="160">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import spark.components.ButtonBarButton;
protected function handler_creationCompleteHandler(event:FlexEvent):void
{
var lastTabbedButtonIdex:uint = this.tabbedNavigator.tabBar.selectedIndex;
this.tabbedNavigator.tabBar.addEventListener(MouseEvent.CLICK, handler_onTabBarClick);
function handler_onTabBarClick(event:MouseEvent):void
{
if(lastTabbedButtonIdex == (event.target as ButtonBarButton).itemIndex)
{
trace("Click on selected button");
}
else
{
trace("Select other button");
}
lastTabbedButtonIdex = (event.target as ButtonBarButton).itemIndex;
}
this.removeEventListener(FlexEvent.CREATION_COMPLETE, handler_creationCompleteHandler);
}
]]>
</fx:Script>
<s:ViewNavigator label="About" width="100%" height="100%" firstView="views.AboutView"/>
<s:ViewNavigator label="Test" width="100%" height="100%" firstView="views.TestView"/>
<s:ViewNavigator label="Feed" width="100%" height="100%" firstView="views.FeedView"/>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
</s:TabbedViewNavigatorApplication>
Related
I have a Flex 4 application that loads a two module. first module is user login module and second one is user balance. when user application start login screen is displayed. when user login this module pass to java and process some validations and return to the flex. in flex if user is valid pass that user name to the second module. in that module using that name again pass user name to java and get balance of that user.
but my code is not working?
am tring this code:-
modules.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:views="views.*">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<views:module2/>
<views:module1>
</views:module1>
</s:Application>
module1.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;
protected function login_resultHandler(event:ResultEvent):void
{
if(har.text=="valid"){
var username:String = "module2.swf?" + "username=" +user.text;
bordercontainerlogin.visible=false;
}else if(har.text=="not-valid")
{
validation.text="! make sure user name & password correct";
}
else
validation.text=har.text
}
protected function user_focusInHandler(event:FocusEvent):void
{
if((user.text=="User name")||(user.text==""))
{
user.text="";
}
}
protected function user_focusOutHandler(event:FocusEvent):void
{
if((user.text=="User name")||(user.text==""))
{
user.text="User name";
}
}
protected function pass_focusInHandler(event:FocusEvent):void
{
pass.displayAsPassword=true;
if((pass.text=="Password")||(pass.text==""))
{
pass.text="";
}
}
protected function pass_focusOutHandler(event:FocusEvent):void
{
if((pass.text=="Password")||(pass.text==""))
{
pass.displayAsPassword=false;
pass.text="Password";
}
}
protected function button1_clickHandler(event:MouseEvent):void
{
if(((user.text=="User name")||(user.text=="")) || ((pass.text=="Password")||(pass.text=="")))
{
if((user.text=="User name")||(user.text==""))
{
//validation.text="! Make sure user name shouidn't be empty";
Alert.show(user.text); }
else if((pass.text=="Password")||(pass.text==""))
{
validation.text="! Make sure Password shouidn't be empty";
}
}
else
{
login.cancel();
login.send();
}
}
protected function button1_mouseOutHandler(event:MouseEvent):void
{
Mouse.cursor=MouseCursor.ARROW;
}
protected function button1_mouseOverHandler(event:MouseEvent):void
{
Mouse.cursor=MouseCursor.BUTTON;
}
]]>
</fx:Script>
<fx:Declarations>
<s:HTTPService id="login" url="http://192.168.1.4:8400/myapp/login" method="POST" result="login_resultHandler(event)">
<s:request xmlns="">
<myname>{user.text}</myname>
<passwd>{pass.text}</passwd>
</s:request>
</s:HTTPService>
</fx:Declarations>
<s:BorderContainer x="0" y="-1" width="100%" height="100%" id="bordercontainerlogin" backgroundColor="#fa0000" backgroundAlpha=".2">
<s:ModuleLoader id="modulerload"/>
<s:Panel width="257" height="205" fontWeight="bold" horizontalCenter="-44" verticalCenter="-56" id="loginpanel" visible="true" title="User Login">
<s:TextInput id="user" y="61" horizontalCenter="-3" text="User name" focusIn="user_focusInHandler(event)" focusOut="user_focusOutHandler(event)"/>
<s:TextInput id="pass" y="99" focusIn="pass_focusInHandler(event)"
focusOut="pass_focusOutHandler(event)" horizontalCenter="-3" text="Password"/>
<s:Button y="137" label="LOGIN" click="button1_clickHandler(event)" horizontalCenter="-4"
mouseOut="button1_mouseOutHandler(event)"
mouseOver="button1_mouseOverHandler(event)"/>
<s:Label id="validation" x="4" y="167" color="#D90D0D"/>
</s:Panel>
<!--<s:ComboBox id="resultData" dataProvider="{reg.lastResult.status}" visible="true" selectedIndex="0"/>-->
<s:TextInput id="har" x="43" y="149" text="{login.lastResult.status}" visible="false" />
</s:BorderContainer>
</s:Module>
module2.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300" creationComplete="module1_creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.rpc.events.ResultEvent;
var username:String;
protected function getbalance_resultHandler(event:ResultEvent):void
{
username= this.loaderInfo.url.toString();
getbalance.cancel();
getbalance.send();
}
protected function module1_creationCompleteHandler(event:FlexEvent):void
{
// TODO Auto-generated method stub
}
]]>
</fx:Script>
<fx:Declarations>
<s:HTTPService id="getbalance" url="http://192.168.1.4:8400/myapp/getbalance" method="POST" result="getbalance_resultHandler(event)">
<s:request xmlns="">
<myname>{username}</myname>
</s:request>
</s:HTTPService>
</fx:Declarations>
<s:Label text="welcome {username}" id="welcomelabel" />
<s:TextInput text="{getbalance.lastResult.status}" id="balance"/>
</s:Module>
Because module2 is creationComplete in this time,So,you can Because module2 is creationComplete in this time,So,you can be in when login_resultHandler load module2
I have an application width a mx:ViewStack component with differents view components under each s:NavigatorContent as it follows.
<mx:ViewStack id="vsOne" resizeToContent="true">
<s:NavigatorContent label="First">
<package:MyFirstComponent id="myFirstComponent"/>
</s:NavigatorContent>
<s:NavigatorContent label="Second">
<package:MySecondComponent id="mySecondComponent"/>
</s:NavigatorContent>
</mx:ViewStack>
And this is package.MyFirstComponent's important part..
<s:Button label="Next" click="somethingToGoForward()"/>
What I've tried:
Calling somethingToGoForward() in the view component and triyng to access to a parent vsOne: Don't work.
Calling parent.somethingToGoForward() (when this method is in the same mxml as the ViewStack): Don't work
How can I change my ViewStack's selectedIndex from anywhere outside the mxml file containing it?
Thanks.
This is an example using simple events:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" initialize="application1_initializeHandler(event)"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function application1_initializeHandler(event:FlexEvent):void
{
viewStack.selectedChild=one;
}
protected function one_changeViewHandler(event:FlexEvent):void
{
viewStack.selectedChild=two;
}
protected function two_changeViewHandler(event:FlexEvent):void
{
viewStack.selectedChild=one;
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:ViewStack id="viewStack" >
<local:ccomp id="one" changeView="one_changeViewHandler(event)" text="LAbel ONE">
</local:ccomp>
<local:ccomp id="two" changeView="two_changeViewHandler(event)" text="LAbel TWO" >
</local:ccomp>
</mx:ViewStack>
</s:Application>
ccomp is a custom component
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
<fx:Metadata>
[Event(name="changeView", type="mx.events.FlexEvent")]
</fx:Metadata>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
private var _text:String;
public function get text():String
{
return _text;
}
[Bindable]
public function set text(value:String):void
{
_text = value;
}
protected function button1_clickHandler(event:MouseEvent):void
{
this.dispatchEvent(new FlexEvent("changeView",true));
}
]]>
</fx:Script>
<fx:Declarations>
</fx:Declarations>
<s:Button label="Change" click="button1_clickHandler(event)">
</s:Button>
<s:Label fontSize="24" text="{text}">
</s:Label>
</mx:HBox>
Davide
How to ask user confirmation before highlighting/navigating to another panel/page?
I have few panels in my screen. Each panel has many controls. I would like to prompt a message box(or alert) with Ok and Cancel buttons, and take confirmation whenever user clicks on another panel.
If user clicks on "Ok" button then navigate to another panel/page.
If user clicks on "Cancel" button then remove the alert and focus to the same Panel.
Currently I have implemented this using panel's focus_out event(focusOutHandler(event:FocusEvent)). I click on the button which is in the another panel, now I got alert, but when i clicked on "OK" in the alert , nothing is happening(button click is event is not fired)
Thanks in advance
From the sounds of it you want to react depending on which button on the alert is clicked?
If that is the case, use the in-built close handler in the Alert class.
The Alert class has a static method show, with the following signature:
public static function show(text:String = "", title:String = "", flags:uint = 0x4, parent:Sprite = null, closeHandler:Function = null, iconClass:Class = null, defaultButtonFlag:uint = 0x4, moduleFactory:IFlexModuleFactory = null):Alert
By adding two flags with the pipe operator in the flags argument
Alert.OK || Alert.CANCEL and then adding your close handler in the closeHandler argument, you can inspect which button was clicked and react accordingly.
Something like this:
Alert:
Alert.show("Alert Title","Would you like to proceed?",Alert.OK || Alert.CANCEL,this,onClose)
onClose Function:
private function onClose(event:CloseEvent)
{
if (eventObj.detail==Alert.OK)
{
//proceed
}
else
{
//cancel operation
}
}
As per your comment on James post here i am posting sample, not sure if you are looking for the same: - Hope below code may give you some idea.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.CloseEvent;
private var storeNextFocusID:String = "first";
private var storePreviousFocusID:String = "first";
private function firstFocus():void
{
first.setFocus();
storePreviousFocusID = first.name;
}
private function showFirstTimeAlert(event:MouseEvent):void
{
if(event.currentTarget.name != storePreviousFocusID)
{
Alert.show("Do you want to change Tab?","Alert",Alert.OK|Alert.CANCEL,null,closeHandler)
storeNextFocusID = event.currentTarget.name;
}
}
private function closeHandler(event:CloseEvent):void
{
if(event.detail == Alert.OK)
{
var focusCont:HGroup = mainContainer.getChildByName(storeNextFocusID) as HGroup;
focusCont.setFocus();
storePreviousFocusID = storeNextFocusID;
} else
{
}
}
]]>
</fx:Script>
<s:VGroup id="mainContainer" x="50" y="50" width="400" height="300" creationComplete="firstFocus()">
<s:HGroup id="first" name="first" width="100%" height="100%" click="showFirstTimeAlert(event)">
<mx:TabNavigator width="100%" height="100%">
<mx:VBox label="left">
<mx:Label text="labelPlacement = 'left'" />
</mx:VBox>
<mx:VBox label="right">
<mx:Label text="labelPlacement = 'right'" />
</mx:VBox>
</mx:TabNavigator>
<s:Panel width="100%" height="100%">
</s:Panel>
</s:HGroup>
<s:HGroup id="second" name="second" width="100%" height="100%" click="showFirstTimeAlert(event)">
<mx:TabNavigator width="100%" height="100%">
<mx:VBox label="top">
<mx:Label text="labelPlacement = 'top'" />
</mx:VBox>
<mx:VBox label="bottom">
<mx:Label text="labelPlacement = 'bottom'" />
</mx:VBox>
</mx:TabNavigator>
<s:Panel width="100%" height="100%">
</s:Panel>
</s:HGroup>
</s:VGroup>
</s:Application>
I have a view like this in my Flex mobile Application:
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="aaa" actionBarVisible="false" creationComplete="view1_creationCompleteHandler(event)">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import valueObjects.Hasta;
import mx.events.FlexEvent;
public var gelen:Hasta= new Hasta();
protected function view1_creationCompleteHandler(event:FlexEvent):void
{
// TODO Auto-generated method stub
gelen=data as Hasta;
}
]]>
</fx:Script>
<s:TabbedViewNavigator width="100%" height="110%">
<s:ViewNavigator id="vn1" label="Hasta bilgileri-Hasta Yatış Bilgileri" width="100%" height="100%" firstView="views.HastabilgileriView" />
<s:ViewNavigator id="vn2" label="Menu-Doktor Bilgileri" width="100%" height="100%" firstView="views.MenuView"/>
</s:TabbedViewNavigator>
And I want to send data(gelen) to tabbedviews (to views.HastabilgileriView/views.MenuView) How can I do that?
try it in this way:
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="aaa" actionBarVisible="false" creationComplete="view1_creationCompleteHandler(event)">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import valueObjects.Hasta;
import mx.events.FlexEvent;
[Bindable]
public var gelen:Hasta= new Hasta();
protected function view1_creationCompleteHandler(event:FlexEvent):void
{
// TODO Auto-generated method stub
gelen=data as Hasta;
}
]]>
</fx:Script>
<s:TabbedViewNavigator width="100%" height="110%">
<s:ViewNavigator id="vn1" label="Hasta bilgileri-Hasta Yatış Bilgileri" width="100%" height="100%" firstView="views.HastabilgileriView" firstViewData="{gelen}" />
<s:ViewNavigator id="vn2" label="Menu-Doktor Bilgileri" width="100%" height="100%" firstView="views.MenuView" firstViewData="{gelen}"/>
</s:TabbedViewNavigator>
To push data between views you can use :
navigator.pushView(views.SomeView, data);
Check out this link and if you want additional information check out the following link. I think these links will provide you with the information required to achieve your task.
My UserInfromation form contains two input fields username,location(city) and one radio button as gender and two buttons add and reset.when I click on add button that data will be added in datagrid at runtime.
I am unable to reproduce how will i do this.
can anyone help me on this with example?
Here is a sample app (with code):
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var ac:ArrayCollection = new ArrayCollection();
protected function addBtn_clickHandler(event:MouseEvent):void
{
var obj:Object = new Object();
obj.userName = userNameTI.text;
obj.location = locationTI.text;
ac.addItem(obj);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:Form width="100%">
<mx:FormItem label="UserName:">
<s:TextInput id="userNameTI"/>
</mx:FormItem>
<mx:FormItem label="Location:">
<s:TextInput id="locationTI"/>
</mx:FormItem>
</mx:Form>
<s:Button id="addBtn" label="Add" click="addBtn_clickHandler(event)"/>
<mx:DataGrid id="dg" width="100%" dataProvider="{ac}"/>
</s:WindowedApplication>
Couple of things are left for you as an exercise :)