Send data between pages in view stack [closed] - apache-flex

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
My language is not the best, so try to understand me.
I have a login page (that working), if details is correct, i want to go to welcome page, and display the first name and last of the user.
Is ok to access to the label in the another page, and how can i do that
please?
This is my code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
import mx.controls.Alert;
[Bindable] public var user:User;
private function resultHandler(event:ResultEvent):void
{
// Is corroect to that :
welLabel.text ="Hello "+ event.result.firstName +" "+ event.result.lastName + ", Welcome to BSRM";
myApp.selectedChild=welcomePage;
}
private function faultHandler(event:FaultEvent):void
{
myApp.selectedChild=errorPage;
}
]]>
</mx:Script>
<mx:RemoteObject id="ro" destination="loginService" fault="faultHandler(event)">
<mx:method name="Login" result="resultHandler(event)"/>
</mx:RemoteObject>
<mx:VBox label="Login Page" width="325" height="220" x="210" y="157">
<mx:ViewStack id="myApp" height="206" width="100%">
<mx:Canvas label="Login Page" width="100%" height="100%">
<mx:Label text="User Name" fontWeight="bold" x="24" y="44"/>
<mx:Button label="Login" id="login" width="76" x="202" y="124" click="ro.Login(userName.text,password.text)"/>
<mx:TextInput id="userName" x="118" y="42"/>
<mx:Label text="Password" fontWeight="bold" x="31" y="83"/>
<mx:TextInput id="password" width="160" x="118" y="81"/>
<mx:LinkButton x="54.5" y="124" label="Forget my password" click="myApp.selectedChild=forgetPassword;"/>
<mx:LinkButton x="206" y="163" label="New user" click="myApp.selectedChild=registerPage;"/>
</mx:Canvas>
<mx:Canvas id="forgetPassword" label="forgetPassword" width="100%" height="100%">
<mx:Label x="2" y="76" text="your email" fontWeight="bold" textAlign="center"/>
<mx:TextInput x="74" y="74" width="241"/>
<mx:Text x="50.5" y="23" text="Forget My Password" fontWeight="bold" color="#F19114" width="224" height="26" fontSize="18"/>
<mx:Button x="252" y="104" label="Send" color="#F9AD0B"/>
</mx:Canvas>
<mx:Canvas id="welcomePage" label="Welcome Page" width="100%" height="100%">
<mx:Label id="welLabel" x="116" y="81"/>
</mx:Canvas>
<mx:Canvas id="errorPage" label="Error Page" width="100%" height="100%">
<mx:Label text="Invalid user name or password" x="82" y="85"/>
</mx:Canvas>
<mx:Canvas id="registerPage" label="Register Page" width="100%" height="100%">
<mx:TextInput x="140" y="29"/>
<mx:TextInput x="140" y="59"/>
<mx:TextInput x="140" y="89"/>
<mx:TextInput x="140" y="119"/>
<mx:TextInput x="140" y="149"/>
<mx:Label x="50" y="33" text="User name:"/>
<mx:Label x="50" y="61" text="Password :"/>
<mx:Label x="50" y="91" text="User name:"/>
<mx:Label x="50" y="121" text="First name:"/>
<mx:Label x="50" y="151" text="Last name:"/>
<mx:Button x="140" y="176" label="Send"/>
</mx:Canvas>
</mx:ViewStack>
</mx:VBox>
</mx:Application>

Just give the label you want to access an ID:
<mx:Label text="User Name" fontWeight="bold" x="24" y="44" id="lblUName/>
Then you can access it in any other part of your app:
<mx:Label id="welLabel" x="116" y="81" text="{lblUName.text}"/>

Related

error 1009: cannot access method of a null object reference

I am doing a flex blazedDS project via spring and hibernate. I have error 1009 "cannot access property or method of a null object reference" when I switch between canvases of a view stack.
How can I avoid this error any help would be appreciated.
<mx:VBox height="244.55" y="219.45" width="624.01514" x="10">
<mx:LinkBar dataProvider="{myViewStack}" enabled="true" activate="true"/>
<mx:ViewStack id = "myViewStack" width="624" height="212" enabled="true">
<mx:Canvas id="canvas3" label="Financement" enabled="true" enterState="true" >
<mx:Label x="38" y="10" text="Code Fin."/>
<mx:Label x="19" y="36" text="Fond propre" enabled="true"/>
<mx:TextInput x="119" y="34" id="fondprofin"/>
<mx:TextInput x="119" y="8" id="codefin"/>
<mx:Label x="100" y="10" text="*" width="11" color="#E0391E"/>
</mx:Canvas>
<mx:Canvas id="canvas1" label="Investissement" enabled="true" enterState="true" >
</canvas>

flex 4 tabbar - disable tab

is there a common way to disable a tab of a spark tabbar component in flex 4? with the mx tabnavigator component you can just disable the content corresponding to the tab and the tab is also disabled then. but doing this with the spark tab bar component disables just the content not the tab.
here is my simple example:
<mx:TabNavigator x="122" y="155" width="200" height="200">
<s:NavigatorContent label="Tab 1" width="100%" height="100%">
<s:Label text="Label1"/>
</s:NavigatorContent>
<s:NavigatorContent label="Tab 2" width="100%" height="100%" enabled="false">
<s:Label text="Label2"/>
</s:NavigatorContent>
<s:NavigatorContent label="Tab 3" width="100%" height="100%">
</s:NavigatorContent>
</mx:TabNavigator>
<s:TabBar x="368.7" y="100.35" dataProvider="{viewstack1}" />
<mx:ViewStack x="364" y="133" id="viewstack1" width="200" height="200">
<s:NavigatorContent label="Tab 1" width="100%" height="100%">
<s:Label text="Label1"/>
</s:NavigatorContent>
<s:NavigatorContent label="Tab 2" width="100%" height="100%" enabled="false">
<s:Label text="Label2"/>
</s:NavigatorContent>
<s:NavigatorContent label="Tab 3" width="100%" height="100%">
<s:Label text="Label3" x="1" y="0"/>
</s:NavigatorContent>
</mx:ViewStack>
many thx,
florian
Addendum:
Literally two minutes after I got back to actually working, I found an "elegant" solution using a skin.
If you apply a custom skinClass to your tab bar you can bind the tab.enabled property just like you'd expect/want.
<fx:Script>
<![CDATA[
[Bindable] private var tab2IsReady:Boolean = false;
private function checkCriteria():void{
tab2IsReady = someOtherThing.isFinished;//Boolean
}
]]>
</fx:Script>
<s:TabBar id="theTabBar"
dataProvider="{viewStack}"
skinClass="skins.CustomTabBarSkin"/>
<mx:ViewStack id="viewStack">
<s:NavigatorContent label="Tab index 0">
<!-- Your first tab's content -->
</s:NavigatorContent>
<s:NavigatorContent label="Tab index 1" enabled="{tab2IsReady}">
<!-- Your second tab's content -->
</s:NavigatorContent>
</mx:ViewStack>
When you type "skinClass" use the auto complete to generate (in FlashBuilder ~4.5+???) the custom skin (named whatever you want).
The code will appear like below (I left out the Script tag).
<?xml version="1.0" encoding="utf-8"?>
<!-- skins/CustomTabBarSkin.mxml
...
Adobe's copyright & doc comments
...
-->
<s:Skin
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
alpha.disabled="0.5">
<fx:Metadata>
<![CDATA[
/**
* #copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.TabBar")]
]]>
</fx:Metadata>
<!-- optional Script tag here -->
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<!--- #copy spark.components.SkinnableDataContainer#dataGroup -->
<s:DataGroup id="dataGroup" width="100%" height="100%">
<s:layout>
<s:ButtonBarHorizontalLayout gap="-1"/>
</s:layout>
<s:itemRenderer>
<fx:Component>
<s:ButtonBarButton skinClass="spark.skins.spark.TabBarButtonSkin" />
</fx:Component>
</s:itemRenderer>
</s:DataGroup>
</s:Skin>
<!-- End skins/CustomTabBarSkin.mxml -->
Change:
<fx:Component>
<s:ButtonBarButton skinClass="spark.skins.spark.TabBarButtonSkin" />
</fx:Component>
To:
<fx:Component>
<s:ButtonBarButton skinClass="spark.skins.spark.TabBarButtonSkin"
enabled="{data.enabled}" />
</fx:Component>
Then any <s:NavigatorContent/> in the ViewStack with its enabled property set or bound will do exactly what you expect
(be enabled when true, & disabled when false).
One solution to try would be to use mx:VBox components instead of s:NavigatorContent.
From http://blog.flexexamples.com/2007/08/25/enabling-and-disabling-specific-tabs-in-a-tabbar-control/ :
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/25/enabling-and-disabling-specific-tabs-in-a-tabbar-control/ -->
<mx:Application name="TabBar_enabled_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:ApplicationControlBar dock="true">
<mx:CheckBox id="tabBarEnabled"
label="TabBar.enabled"
selected="true"
width="25%" />
<mx:CheckBox id="tab1Enabled"
label="Tab1.enabled"
selected="true"
width="25%" />
<mx:CheckBox id="tab2Enabled"
label="Tab2.enabled"
selected="true"
width="25%" />
<mx:CheckBox id="tab3Enabled"
label="Tab3.enabled"
selected="true"
width="25%" />
</mx:ApplicationControlBar>
<mx:VBox verticalGap="0">
<mx:TabBar id="tabBar"
width="400"
dataProvider="{viewStack}"
enabled="{tabBarEnabled.selected}" />
<mx:ViewStack id="viewStack" width="400" height="100">
<mx:VBox id="tab1"
label="Tab1"
backgroundColor="haloGreen"
enabled="{tab1Enabled.selected}">
<mx:Label text="Label 1" />
</mx:VBox>
<mx:VBox id="tab2"
label="Tab2"
backgroundColor="haloBlue"
enabled="{tab2Enabled.selected}">
<mx:Label text="Label 2" />
</mx:VBox>
<mx:VBox id="tab3"
label="Tab3"
backgroundColor="haloOrange"
enabled="{tab3Enabled.selected}">
<mx:Label text="Label 3" />
</mx:VBox>
</mx:ViewStack>
</mx:VBox>
</mx:Application>
For those who want an working answer for Flex 4.5 (probably Flex 4 also). I finally figured out a solution. It feels like a hack to me, but Adobe's not answering the call and it's working for me. Here's a simplified example.
<!-- component that has the the TabBar in it... -->
<fx:Script>
<![CDATA[
//imports here
import mx.core.UIComponent;
//imports
private function setTabEnabled(index:int,enabled:Boolean):void{
var theTab:UIComponent = theTabBar.dataGroup.getElementAt(index) as UIComponent;
if(theTab){theTab.enabled = enabled;}
}
]]>
</fx:Script>
<s:TabBar id="theTabBar"
dataProvider="{viewStack}"/>
<mx:ViewStack id="viewStack">
<s:NavigatorContent label="0th Tab">
<!-- ...Content -->
</s:NavigatorContent>
<s:NavigatorContent label="1st Tab">
<!-- ...Content -->
</s:NavigatorContent>
<s:NavigatorContent label="2nd Tab">
<!-- ...Content -->
</s:NavigatorContent>
</mx:ViewStack>
<!-- rest of the component that has the the TabBar in it... -->
Then you just call setTabEnabled(theTabIndex,trueFalse) in an event handler related to whatever decides why the tab is, or isn't, enabled.
I should extend the TabBar to support this, but I've already spent enough time trying to figure it out.
Happy Coding =D

Flex + custom component + design-time + binding

I'm trying to create simple custom component with two labels with this MXML:
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="250" height="30">
<mx:String id="result" />
<mx:Label x="5" y="7" id="titleLabel" text="{label}" width="120"/>
<mx:Label x="125" y="7" id="resultLabel" text="{result}" width="120" textAlign="right" color="#A41D00"/>
</mx:Canvas>
It is working well at runtime, bud I have troubles making it working at design-time. How can I make databinding work at the design time? If it is impossible, how should I code the label text assignements?
Try with text={data.label} and text={data.result} instead of mere label and result.
You won't see the actual data at design time. I'm not exactly sure what you're going for but here's how you might code the Labels
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
<mx:Script>
<![CDATA[
private var str : String = "Hello world";
]]>
</mx:Script>
<mx:Label x="5" y="7" id="titleLabel" text="{str}" width="120"/>
<mx:Label x="125" y="7" id="resultLabel" text="{titleLabel.text}" width="120" textAlign="right" color="#A41D00"/>
</mx:Application>

Flex - Typed ArrayCollection as Horizontallist's dataprovider

I have an ArrayCollection of objects.
I'm passing this array to a horizontallist as a dataprovider and I'm using a custom itemRenderer.
When executing the application, the horizontallist is displaying
[object CustomClass][object CustomClass][object CustomClass][object CustomClass]
I've tried casting each object in the itemrenderer as following:
<mx:Label text="{(data as CustomClass).label1}"/>
But it's not working...
Thanks for any help you can provide.
Regards,
BS_C3
Edit - 09 March 2010
Let's go for some more code =)
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Component id="Item">
<mx:VBox width="180">
<mx:HBox width="100%">
<mx:Spacer width="100%"/>
<mx:Button label="x"/>
</mx:HBox>
<mx:Image id="thumbnail"/>
<mx:Label width="100%" horizontalCenter="0" text="Collection"/>
<mx:HBox width="100%">
<mx:Label width="100" text="GIA"/>
<mx:Label text="{data.charg_st}"/>
</mx:HBox>
<mx:HBox width="100%">
<mx:Label width="100" text="Finger Size"/>
<mx:Label text="xxxxxx"/>
</mx:HBox>
<mx:HBox width="100%">
<mx:Label width="100" text="Carat"/>
<mx:Label text="{data.carats}"/>
</mx:HBox>
<mx:HBox width="100%">
<mx:Label width="100" text="Color"/>
<mx:Label text="{data.color}"/>
</mx:HBox>
<mx:HBox width="100%">
<mx:Label width="100" text="Clarity"/>
<mx:Label text="{data.clarity}"/>
</mx:HBox>
<mx:HBox width="100%">
<mx:Label width="100" text="Shop"/>
<mx:Label text="{data.lgort_fp}"/>
</mx:HBox>
<mx:HBox width="100%">
<mx:Label width="100" text="Resizing"/>
<mx:Label text="{data.resizing}"/>
</mx:HBox>
<mx:HBox width="100%">
<mx:Label width="100" text="Price Excl. VAT"/>
<mx:Label text="{data.net_price_fp}"/>
</mx:HBox>
</mx:VBox>
</mx:Component>
<mx:HorizontalList
dataProvider="{GlobalData.instance.tray}"
columnCount="4"
rowCount="1"
horizontalScrollPolicy="off"
itemRenderer="{Item}"
/>
</mx:Canvas>
FYI, the horizonalList dataprovider is an ArrayCollection of objects.
Now, the horizontallist is displaying empty items... with the correct width...
The arraycollection is not empty (I'm using an alert on the click event on an item, and I do retrieve the expected data).
Hope this will help >_<
Regards,
BS_C3
Have you tried
<mx:Label text="{data.label1}"/>
? (label1 being a property of your objects)
Use the labelField field within your list, see here
<mx:List dataProvider="{myDataProvider}" labelField="label1"/>
Try declaring your custom class as a variable somewhere in your component. Once you declare an instance of the class, Flex might have more success identifying the properties of the class.
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
private var myClass:CustomClass;
]]>
</mx:Script>
<mx:Component id="Item">
<mx:VBox width="180">
...
thelost had it right with his code too. You should be able to use
<mx:Label text="{data.label1}"/>
to access your class's properties in your itemRenderer.
Edit: I'm sure you've done this, but also double check that you've set the dataProvider in your HorizontalList to a [Bindable] declaration of your CustomClass.
I managed to resolve my issue.
When I removed the width property of the itemrenderer's vbox, all data appeared in the horizontalList.
Why? I wouldn't know why but it seems like it was positionning the data somewhere out of the visible scope of the horizontallist (huh??).
The thing is that everything is working now. And for the final code, there you have:
HorizontalList:
<mx:HorizontalList id="hlist"
dataProvider="{TrayData.instance.itemsCollection}"
columnCount="{TrayData.instance.hlistColumns}"
rowCount="1"
itemRenderer="components.TrayItem"
horizontalScrollPolicy="off"
horizontalCenter="0" verticalCenter="0"
borderStyle="none"
horizontalScrollPosition="{TrayData.instance.hsPosition}"
/>
ItemRenderer:
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:HBox width="100%">
<mx:Spacer width="100%"/>
<mx:Button label="x"/>
</mx:HBox>
<mx:HBox width="100%">
<mx:Spacer width="15%"/>
<mx:VBox width="70%">
<mx:Image id="thumbnail" horizontalAlign="center"/>
<mx:Label width="100%" textAlign="center" text="Collection"/>
<mx:HBox width="100%">
<mx:VBox id="labelBox" width="100">
<mx:Label width="100" text="GIA"/>
<mx:Label width="100" text="Finger Size"/>
<mx:Label width="100" text="Carat"/>
<mx:Label width="100" text="Color"/>
<mx:Label width="100" text="Clarity"/>
<mx:Label width="100" text="Shop"/>
<mx:Label width="100" text="Resizing"/>
<mx:Label width="100" text="Price"/>
</mx:VBox>
<mx:VBox id="dataBox" width="100%" horizontalAlign="left">
<mx:Label text="{data.resizingCode + ' ' + data.charg_st}"/>
<mx:Label text="{data.fingerSize}"/>
<mx:Label text="{((new Number(data.carats))/100).toString()}"/>
<mx:Label text="{data.color}"/>
<mx:Label text="{data.clarity}"/>
<mx:Label text="{data.lgort_fp}"/>
<mx:Label text="{data.net_price_fp}"/>
</mx:VBox>
</mx:HBox>
<mx:Button label="Order" enabled="{data.product_type == 'C'}" width="50%"/>
</mx:VBox>
<mx:Spacer width="15%"/>
</mx:HBox>
</mx:VBox>
Regards,
BS_C3

Flex: Call function from included component

This is similar to my previous posting. But this time I want to call a function that exists on the main mxml page.
This is my main mxml page:
main.mxml
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*">
<mx:Script>
<![CDATA[
public function changeText(currentText:String):void{
switch (currentText){
case "changeText":
lblOne.text = "More Text";
}
}
]]>
</mx:Script>
<mx:HBox x="137.5" y="10" width="100%" height="100%">
<ns1:menu id="buttons"> </ns1:menu>
</mx:HBox>
<mx:Canvas x="137" y="88" width="408.5" height="200">
<mx:HBox x="0" y="10" width="388.5" height="190">
<mx:Panel width="388" height="179" layout="absolute">
<mx:Label x="10" y="10" text="Some Text" visible="{buttons.showLabel}" id="lblOne"/>
</mx:Panel>
</mx:HBox>
</mx:Canvas>
</mx:Application>
Here is my included page:
menu.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
<mx:Script>
<![CDATA[
[Bindable] public var showLabel:Boolean = true;
]]>
</mx:Script>
<mx:MenuBar width="380" height="58"></mx:MenuBar>
<mx:Button x="10" y="10" width="80" label="Show" id="btnOne" click="this.showLabel=true;" />
<mx:Button x="94" y="10" width="80" label="Hide" id="btnTwo" click="this.showLabel=false;"/>
<mx:Button x="181" y="10" width="80" label="Run Function" id="btnThree" click="{changeText('changeText')}"/>
</mx:Canvas>
How do I call the changeText function from the button on menu.mxml?
Add this to menu:
<mx:Metadata>
[Event(name="buttonClicked", type="flash.events.Event")]
</mx:Metadata>
<mx:Button x="10" y="10" width="80" label="Show" id="btnOne" click="this.showLabel=true;dispatchEvent(new Event("buttonClicked"));"/>
Change main to:
<ns1:menu id="buttons" buttonClicked="changeText("Your Text");">
I couldn't tell where current text is coming from but if it is from menu you may have to build your own custom flex event or create a common variable for the two parts to access. The first is usually preferred.
P.S. The event metadata thing could also be achieved by adding the event listener when the creation of the application completes. You would add to main:
buttons.addEventListener("buttonClicked",changeText("Your Text"));
there is a simpler way, just use parentDocument.
Change this:
<mx:Button x="181" y="10" width="80" label="Run Function" id="btnThree" click="{changeText('changeText')}"/>
to:
<mx:Button x="181" y="10" width="80" label="Run Function" id="btnThree" click="{parentDocument*.changeText('changeText')}"/>**

Resources