I am pretty new to flex and was trying to understand how the entire Flex works
Scenario :
I started with creating a single MXML file where there will be a textbox and a button. If the button is clicked a popup will be displayed with the value of the textbox(this worked perfectly). The second thing that came to my mind is how to show the same data in some other page. SO, if i click on the button. It should load another page and display the data that was written in the textbox
My Code till now is this :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
public function open(event:MouseEvent):void{
Alert.show("I am opening a page");
Alert.show(txt_inp.text + " is written here");
}
]]>
</mx:Script>
<mx:TextInput id="txt_inp" />
<mx:Button id="openBttn" label="Click Me" click="open(event)" />
</mx:Application>
And Name.xml(The Second page is )
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="setYelp()">
<mx:Script>
<![CDATA[
public var helloYou:HelloYou;
public function yelpHandler():void{
yelp.text = "Ayush"
}
public function setYelp():void {
helloYou.openBttn.addEventListener(MouseEvent.CLICK,yelpHandler);
}
]]>
</mx:Script>
<mx:Label id="yelp" text="yelp">
</mx:Label>
</mx:Application>
I referred to some of the previously asked questions like this and tried following it, but couldn't really understand.
Also, in my flex builder I had two more options of MXML > MXML Module and MXML Component. Should I use them here, if not, when should I use it?
Why are you using multiple page? usually a Flex application is a single application with multiple views and sharing data is way easier in this situation.
If you want to pass information between different pages you can use cookies (see for example Accessing browser cookies from Flex)
Another flex solution is this http://custardbelly.com/blog/blog-posts/2010/11/15/flex-hero-persistant-data-in-mobileapplication/
The last thing that I can think about is using the javascript bridge to access the localstorage (o sqlite) of your browser and store information there.
But again why save information between requests and not simply create a single application that changes its views ?
1st solution
Use ViewStack component to integrate your 1st mxml and 2nd mxml.
This is what #wezzy said "single application with multiple views".
This is the most easily way to share values, if you can integrate to one mxml.
like this
<mx:ViewStack id="viewstack" width="100%" height="100%" selectedIndex="0" >
<!-- Input Page is here -->
<mx:Canvas id="view1" width="100%" height="100%">
<mx:TextInput id="txtName" width="150" maxChars="40" />
<mx:Button label="Go to NextPage" click="viewstack.selectedChild=view2;"/>
</mx:Canvas>
<!-- Result Page -->
<mx:Canvas id="view2" width="100%" height="100%">
<mx:TextInput text="{txtName.text}" width="150" editable="false" />
<mx:Button label="Back to PrevPage" click="viewstack.selectedChild=view1;"/>
</mx:Canvas>
</mx:ViewStack>
2nd solution
Use SharedObject(or DB) to save and load values.
3rd solution
Use singleton variables to share the values between classes.
Please see this answer of mine.
Flex - Problems in accessing static variable on another mxml page
Related
I have a Home.mxml file with home_src.as included in a fx:Script tag. Now suppose that I want to retrieve the value of a <mx:TextInput.../> tag located in Home.mxml, from another .as file (for example login_src.as).
I tried mx.core.Application.application.[file.mxml].[property] but doesn't work (I obtain an error like this: property not found on ).
I don't know if it is possible without including the .as file who wants access to the .mxml property, but I want to find out because I have a canvas.mxml page (with some text and combo tag) that contains a tabNavigator with two other .mxml pages; in the actionscript of these two tabs I need the value of canvas.mxml input and combo tag.
Is there a way to do this without including tab1 or tab2.as into my canvas.mxml?
A button click opens a popup for data insertion:
home.as
..
var insertPop:InsertPopUp = InsertPopUp(PopUpManager.createPopUp((this.parentApplication as DisplayObject), InsertPopUp, true));
PopUpManager.centerPopUp(insertPop);
..
InsertPopUp.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()" close="close()">
<mx:Script source="InsertPopUp_src.as"/>
<mx:Label id="lblage" text="Age:"/>
<mx:TextInput id="txtAge" editable="true"/> // I want this data
<mx:TabNavigator id="insertTab" width="100%" height="85%">
<mx:VBox id="vbx1" width="100%" height="100%" label="Car Data">
<mx:ModuleLoader id="mdlCatData" url="modules/Cat.swf" height="100%" width="100%" />
</mx:VBox>
<mx:VBox id="vbx2" width="100%" height="100%" label="Van Data">
<mx:ModuleLoader id="mdlDogData" url="modules/Dog.swf" height="100%" width="100%"/>
</mx:VBox>
</mx:TabNavigator>
</mx:TitleWindow>
Then I have:
Cat.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init();">
<mx:Script source="CatData_src.as" />
// other forms..
</mx:Module>
and:
Dog.mxml
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init();">
<mx:Script source="DogData_src.as" />
// other forms..
</mx:Module>
I want to retrieve data of the txtAge textInput and use it in both CatData_src.as and DogData_src.as; how can I get that data without resorting to a script include?
I made this "graphic configuration" because some data are common to Cat and Dog.. (obviously is just an example).
mxml is not anything special in the world of AS3, it seems different but it's really not as it is compiled later into AS3 code. Any object declared in mxml tag with an id is just a property of the as3 class that will be generated (using the same name as the mxml file).
If that mxml class is supposed to be unique (not 2 instances of it) you can access your property using static methods.
Example:
mxml main class named: MyMain.mxml
declare static variable (in fx:script) of type MyMain: static public var instance:MyMain;
in addedToStage listener (or similar) set your variable: instance = this
from anywhere access your instance and property: MyMain.instance.mytextimput
If working with multiple instances of mxml class then get reference of the instance and use it just like any other AS3 object.
I'm fairly new to Flex and am having an issue where I have a main Flex program (let's called it "Parent.swf") attempting to load another Flex application (Child.swf) via the SWFLoader class/component.
Environment is Flex 4.6 on FlashDevelop.
The call appears to work correctly (i.e. no IO or sandbox errors are returned), only that it seems to reload the "Parent.swf" into the SWFLoader instead of the "Child.swf".
For example, I have the Parent.swf containing:
<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"
initialize="doStartup()"
width="1024" height="768">
...
<fx:Script>
<![CDATA[
private function doStartup():void
{
trace("STARTING UP!");
}
....
]]>
</fx:Script>
<mx:VBox top="10" left="10" width="100%" horizontalAlign="center">
<mx:Label text="I'M A LOADER!" />
</mx:VBox>
<mx:VBox top="10" left="10" width="100%" horizontalAlign="center">
<mx:SWFLoader
id="pluginLoader"
source="plugins/Child.swf"
autoLoad="true"
height="400" width="400"
complete="onPluginLoaded(event);"
ioError="onPluginLoadError(event);"
securityError="onPluginSecurityError(event);"
httpStatus="onHttpStatus(event);"
init="onInit(event);"
open="onOpen(event);"
progress="onProgress(event);"
unload="onUnload(event);"
/>
</mx:VBox>
....
The child swf contains:
....
<mx:Label text="I'M A PLUGIN!" />
....
The trace above (i.e. "STARTING UP!") is repeated on the load of Child.swf, followed by another attempt to load Child.swf which fails because the working directory for the call is now in the "plugins" directory.
So it seems to know the file exists and load it, but somehow swaps in Parent.swf over the top of it.
Note that if I execute Child.swf directly, I'm able to verify that it is what I expect it to be (i.e. a flex app with a single label saying "I'M A PLUGIN!").
I've also tried various other approaches such as instantiating a SWFLoader via code but the same issue occurs. I even tried to switch to Modules but had the same behaviour there too.
It fails whether run locally or run via a web server.
Does anyone have any idea how this could occur? Is there some way that the main.mxml of Parent.swf is overriding Child.swf?
(Sorry for the essay)
I need the full code to discovery. But I can suggest two ideas:
Check your onPluginLoaded function, it can be called by Parent instead of the Child
Check if you don't have any class or object name repeated that can generated a cross-reference. For example, both Parent and Child use MyScrollbarClass. As this class was firstly loaded by Parent, it will create a new name when load in Child, like MyScrollbarClass_1
mxml file must be named differently in loaded applications
Im working with flashbuilder 4.6 and have a simple app underway that uses a listcomponent pulling data from an XML service (external URL) that is setup with data/services functionality within flashbuilder.
right now I have a relatively simple list that just displays the 'name' of the xml items:
<s:List id="list1" x="0" y="108" width="320" height="355" change="list1_changeHandler(event)"
creationComplete="list1_creationCompleteHandler(event)" labelField="Itemname">
<s:AsyncListView list="{getDataResult.lastResult}"/>
</s:List>
... I have another xml node / data element that is a full URL (http:// ... .jpg) to a thumbnail image, I'd like to have that image aligned to the left of the 'name' element.
I tried using someting like the following, but no luck. the information I've found online hasnt really helped much with understanding itemrenderers (which is what I think I need to use).
<s:List id="list1" x="0" y="108" width="320" height="355" change="list1_changeHandler(event)"
creationComplete="list1_creationCompleteHandler(event)" labelField="Itemname">
<s:AsyncListView list="{getDataResult.lastResult}"/>
<mx:itemRenderer>
<mx:Component>
<mx:Label text="Itemname"/>
<mx:Image source="ItemImageURL"/>
</mx:Component>
</mx:itemRenderer>
</s:List>
is there some way to do this WITHOUT itemrenderers? or is that the only way to go? was my attempt close at all to the proper way to implement a thumbnail image in the list component? Thanks for any help someone can provide here.
The code you provided mixes Spark and MX Components in such a way that I would expect compiler errors. For starters, you have these issues:
The mx:itemRenderer is the syntax used to define a property on a component. So, it is used to define the value for the itemRender property on the s:List component. This will cause a compiler error because the namespaces are different. You should specify s:itemRenderer instead.
The mx:Component is used to define a new in-line component. However, your namespace is wrong. With Flex 4.6 you should specify the fx namespace, not the mx namespace.
There are two components listed as children to the mx:Component tag, where their should only be 1. The solution in the MX world to this would be to wrap it the label and image in a container. In the Spark world, the itemRenderer must extend the ItemRenderer class.
For the text and source you are specifying string literals; not variables in your data element.
You have the right idea; but the wrong execution. Read this information on creating itemRenderers.
I would rework your code like this:
<s:List id="list1" x="0" y="108" width="320" height="355" change="list1_changeHandler(event)"
creationComplete="list1_creationCompleteHandler(event)" >
<s:AsyncListView list="{getDataResult.lastResult}"/>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer dataChange="onDataChange()">
<fx:Script>
<![CDATA[
protected function onDataChange():void{
labelDisplay.text =data.Itemname
imageDisplay.source = data.ItemImageURL
}
]]>
</fx:Script>
<s:HGroup>
<s:Label id="labelDisplay" />
<s:Image id="imageDisplay" />
</s:HGroup>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>
This is untested code I wrote the browser; but it should demonstrate the correct approach. The namespaces are correct. There is a single component defined as the itemRenderer and it extends the ItemRenderer class. The displayed items should update when the itemRenderer data changes, such as when you scroll in the list. And the two items are positioned so that they do not display on top of each other.
This will be a really easy one for someone i'm sure. I just need to know the event that will allow me to call a funciton every time the pop up window is opened.
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="400"
height="120" title="Change Offer/Event Name" showCloseButton="true" close="PopUpManager.removePopUp(this)"
horizontalScrollPolicy="off" verticalScrollPolicy="off" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.CloseEvent;
import mx.managers.PopUpManager;
private function init():void{
txtNewName.text = parentApplication.cmbOfferName.selectedItem.TEMPLATENAME;
}
]]>
</mx:Script>
<mx:Canvas width="374" height="74" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:TextInput id="txtNewName" x="72" y="16" width="240"/>
<mx:Label x="6" y="18" text="New Name"/>
<mx:Button x="317" y="16" label="Ok" width="47" click="checkName()"/>
</mx:Canvas>
I have the init() function called in creationComplete which will bring in the value the first time the window is opened but I need it to call the function every time the popup is opened. I have tried, activate, creationComplete, addedToStage, which all dont work.
Oh just to note as well, I cant just set the text input's text property to be bindable to the combobox as I will potentially be selecting from multiple comboboxes depending on what canvas i am viewing.
Thanks in Advance
I managed to solve it myself. I did in fact use 'addedToStage' in the TitleWindow Component. The only problem with using addedToStage is that I was trying to populate a textinput in the popup window so this had not been rendered yet. To get round this I simply added a bindable variable which I added the selected combobox value to and added the variable as the dataprovider for the text field on the textInput.
I know already so many questions have been asked here on this error #2025 topic.
But, in my case, it is happening when trying to use a .swc file in a flex project.
I am trying to use one of my library project into another flex project by adding using "Add swc" file.
I have successfully added it in my new project as a .swc file.
But, when I try to use it new project by clicking on the application in browser, it shows me this runtime error. Below is my new project's main file.
NewSample.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:swclib="*"
layout="absolute">
<swclib:Main width="100%" height="100%"/>
</mx:Application>
StackTrace:
ArgumentError: Error #2025: The supplied DisplayObject must be a child
of the caller. at
flash.display::DisplayObjectContainer/getChildIndex() at
mx.managers::SystemManager/getChildIndex()[C:\autobuild\3.x\frameworks\projects\framework\src\mx\managers\SystemManager.as:1772]
at
mx.managers::SystemManager/mouseDownHandler()[C:\autobuild\3.x\frameworks\projects\framework\src\mx\managers\SystemManager.as:3615]
I am unable to identify what caused the error ?
EDIT : This is the main application file of the .swc library file.
Main.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:parsley="http://www.spicefactory.org/parsley"
minWidth="955" minHeight="600"
xmlns:custom="components.*"
horizontalScrollPolicy="off"
layout="vertical"
verticalScrollPolicy="off" xmlns:models="models.*" xmlns:views="views.*">
<views:Header width="100%" height="50"/>
<mx:HDividedBox id="hdv" width="100%" height="100%">
<views:ABC width="15%" height="100%"/>
<views:DEF width="65%" height="100%"/>
<views:XYZ width="20%" height="100%"/>
</mx:HDividedBox>
<parsley:ContextBuilder config="Conf"/>
</mx:Application>
Do you really need Application? Application should be only the upper one and main class.
Possible solutions:
Use another container (for example Canvas).
Compile your Main.mxml application into swf and then load it with Loader class.
I'd prefer to use 1st variant.
I bet you are not checking if the (you think child) object is actually a child of the (you think parent) object
Put an if there like:
if(parentObj.getChildren().indexOf(childObj) >= 0) {
parentObj.removeChild(childObj);
} else {
//whatever error logging you do goes here
}