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.
Related
In flex 4.0 this code works:
<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" width="500" height="600">
<fx:Script>
<![CDATA[
import componentCanvas;
import mx.containers.TitleWindow;
import mx.controls.Alert;
public function createChild():void{
var c:componentCanvas = new componentCanvas;
c.x = 20;
c.y=20;
toInclude.addChild(c);
}
]]>
</fx:Script>
<mx:Button click="createChild()"/>
<mx:Canvas id="toInclude"/>
--componentCanvas --
<mx:Canvas 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 componentCanvas;
import mx.containers.TitleWindow;
import mx.controls.Alert;
import mx.managers.PopUpManager;
import popAll;
public function oh():void{
Alert.show("From titleWindow");
}
public function open():void{
var pop:popAll = popAll(PopUpManager.createPopUp(this, popAll, true));
}
]]>
</fx:Script>
<mx:Label text="Canvas" x="100" y="100"/>
<mx:Button click="open()"/>
-- popAll --
<s:TitleWindow 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" x="40" y="40" close="closePopUp()">
<fx:Script>
<![CDATA[
import mx.managers.PopUpManager;
public function closePopUp():void{
super.parentDocument.oh();
PopUpManager.removePopUp(this);
}
]]>
</fx:Script>
<mx:Button click="closePopUp()"/>
When I call parentDocument in titleWindow in flex 4 all is fine.
The same code in 4.5 did not work.
Is there a way to do this in Flex 4.5?
Calling parentDocument and using public functions across all the files is definitely not the best practice! Instead, you should really look into the Event Life Cycle in Flex and how to use it. In my opinion, public methods should really be created when you want to expose a particular functionality of your component to it's users.
Basically, you should dispatch an event from the popAll class and listen to it within it's instance created in componentCanvas. So, to solve this issue, your code should be :
popAll:
<s:TitleWindow 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" x="40" y="40" close="closePopUp()">
<fx:Script>
<![CDATA[
import mx.managers.PopUpManager;
public function closePopUp():void{
this.dispatchEvent(new Event("closePopup"));
PopUpManager.removePopUp(this);
}
]]>
</fx:Script>
<mx:Button click="closePopUp()"/>
</s:TitleWindow>
and componentCanvas:
<mx:Canvas 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.managers.PopUpManager;
private var pop:popAll;
public function oh():void{
Alert.show("From titleWindow");
}
public function open():void{
pop = popAll(PopUpManager.createPopUp(this, popAll, true));
pop.addEventListener("closePopup", onClosePopupRequested);
}
protected function onClosePopupRequested(event:Event):void
{
pop.removeEventListener("closePopup", onClosePopupRequested);
oh();
}
]]>
</fx:Script>
<mx:Label text="Canvas" x="100" y="100"/>
<mx:Button click="open()"/>
</mx:Canvas>
As per the code above, I am dispatching a new Event called as closePopup from the popAll class and listening to it where I am creating it's instance. And then once the event is caught, I am removing the event handler and then calling your oh() method from within the event handler.
I would make a few more recommendations on your code:
Re-consider your naming convention of classes and methods, and please look into camel case naming convention
Avoid using too many public methods, instead use events to communicate between files/components. This would enable you to create loosely coupled components.
If you are moving to Flex 4.5, I would recommend you to use spark components instead of mx components. In my experience, they do have more versatility.
Look into creating constants for literals.
Hope this helps. Cheers.
In flex application how to get the ID of specific display component using mouse event. For example if I want to get the ID of a button it should be displayed when I click the button
do it with event.currentTarget.id like this :
<?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:Script>
<![CDATA[
import mx.controls.Alert;
protected function niceButton_clickHandler(event:MouseEvent):void
{
Alert.show(" the button id is: "+event.currentTarget.id)
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:HGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">
<s:Button id="niceButton" label="click me" click="niceButton_clickHandler(event)" />
</s:HGroup>
</s:Application>
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>
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
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 :)