I have built a custom component using some containers and a TileList.
Now when I instantiate that component in my main Flex app, I want to get the value of the selected item in the tileList that the user clicks on. In other words, everytime the user clicks an item in the tileList, I want it to assign that selected value to a global application variable in the main flex app.
Any ideas how to do that?
Below is one way that you can listen to the change of TileList.selectedItem. I would recommend against putting this in a global variable, although if you must you could use a pattern like ModelLocator to do so.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical">
<mx:Script>
<![CDATA[
[Bindable] public var selectedItem:Object;
]]>
</mx:Script>
<mx:Binding source="listTile.selectedItem" destination="selectedItem"/>
<mx:Label text="{ selectedItem }"/>
<mx:TileList
id="listTile"
width="400"
height="300"
dataProvider="{ ['A','B','C'] }"/>
</mx:Application>
Related
I have a main mxml file (flex4) and want to pass a parameter (user_name) to a component in a directory called components.
When I run the program, the user_name is NOT being sent from the main to the component file.
(Interestingly, if you make the component visible, you can see the parameter has been passed)
New to flex/actionscript and this parameter passing is (without help) quite a pain to progress.
So, help would be very much appreciated.
TIA.
I have hacked much larger files down to get the following two files:
MAIN
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:components="components.*">
<mx:Button id="editAccount" label="Edit Account" fontSize="16" color="#000000" x="100" y="125" click="AccountForm(event)" />
<components:editAccountForm visible="false" user_name = "username from main" />
<fx:Script>
<![CDATA[
import components.editAccountForm;
import mx.managers.PopUpManager;
private function AccountForm(e:MouseEvent):void
{
var win3:editAccountForm = new editAccountForm();
PopUpManager.addPopUp(win3,this,true);
PopUpManager.centerPopUp(win3);
}
]]>
</fx:Script>
</s:Application>
COMPONENT FILE
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical" title="Edit Account Details" x="50" y="600" >
<mx:Form width="100%" height="100%">
<mx:FormItem label="">
<mx:Label width="300" textAlign="center" text="{user_name}"/>
</mx:FormItem>
<mx:FormItem label="Enter your new Email Address">
<mx:TextInput id="email_address2" width="300" maxChars="128" contentBackgroundColor="#F5DC0C"/>
</mx:FormItem>
</mx:Form>
<mx:HBox width="100%" horizontalAlign="center">
<mx:Button id="close" label="Close" click="PopUpManager.removePopUp(this)" />
</mx:HBox>
<mx:Script>
<![CDATA[
[Bindable]
public var user_name:String = "username from Component";
]]>
</mx:Script>
<mx:Script>
<![CDATA[
import mx.core.IFlexDisplayObject;
import mx.events.CloseEvent;
import mx.managers.PopUpManager;
private function closeWindow(e:CloseEvent):void
{
PopUpManager.removePopUp(e.target as IFlexDisplayObject);
}
]]>
</mx:Script>
</mx:TitleWindow>
If you simply want to get the user_name from the main app into your TitleWindow component, just set win3.user_name = user_name after you instantiate win3. If you are looking to bind it to your newly instantiated win3 (which you would do if user_name were expected to change), then you need to look into the BindUtils helper class.
The typical way of getting data back and forth between an app and a dialog is to set the value after you instantiate your dialog, and then add a listener to your dialog so that your app will get notified if something changed. If you are listening for the Close event, for example, you can get the value from the event like so: (event.currentTarget as EditAccountForm).user_name in your app's event handler.
Another common method is to have your window dispatch a custom event (that your main app added a listener to the dialog for) which contains the new value for user_name.
Hope that helps.
I have a weird issue (weird because it is specific to one component) with applicationComplete in a fairly simple application. All the UI components are declared in MXML. I can access them all in applicationComplete, but not a spark.components.TextArea component, named taStatus here; it is null in the handler.
MXML looks sort of like this (there are lots of other components, but nothing special)
<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="710" minHeight="640" applicationComplete="onApplicationComplete(event)" width="710" height="640">
<mx:TabNavigator left="15" right="15" top="15" bottom="340" paddingTop="0">
<s:NavigatorContent label="General" width="100%" height="100%">
<s:Label x="93" y="71" text="Label" id="lblTest"/>
</s:NavigatorContent>
<s:NavigatorContent label="Status" width="100%" height="100%">
<s:TextArea id="taStatus" width="100%" height="100%" text="Startup." editable="false"/>
</s:NavigatorContent>
</mx:TabNavigator>
<fx:Script source="main.as" />
</s:Application>
Here is the handler in main.as
protected function onApplicationComplete(event: FlexEvent) : void
{
lblTest.text = 'abc789'; // OK
taStatus.text = 'abc789'; // Fail
}
TypeError: Error #1009: Cannot access a property or method of a null object reference. So taStatus is null... What is so special about this TextArea?
Update 2010-06-12 02:53
Moving the NavigatorContent (tab) above all other tabs suddenly makes the TextAreas get instantiated on time. Very strange, because all the components are definitely being created; I can see them.
It's because the TextArea is in a child of the TabNavigator that is not the first child, so by default it is not instantiated until the user opens that tab.
Your options are to either wait until the user opens that tab to do whatver you need to do to set up the TextArea or change the child creation policy on the TabNavigator to create all its children at startup rather than waiting for them to be clicked.
To do that, you need to set the creationPolicy property on the TabNavigator to "all".
I'm trying to capture key events in a mx:Image and I can't get it to work.
<?xml version="1.0" encoding="utf-8" ?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" />
<mx:Canvas width="100%" height="100%">
<mx:Label id="lab" x="50" y="20" text="Nothing"/>
<mx:Image x="50" y="50" source="#Embed('image.png')" keyDown="lab.text='Something';"/>
</mx:Canvas>
</mx:Application>
When I press a key when the mouse is over the image I expect the label text to change to "Something", but nothing happens. I've done all sorts of combination of enabled and putting the keyDown on the canvas and the label as well.
What am I missing?
The issue is one of focus. Key down events are only generated within a component when that component (or one of its descendants) has focus. In order for an Image to receive focus, you must set focusEnabled to true. This, however, requires that the user tab to give the Image focus, since clicking on an Image does not convey focus, much less mousing over it.
If you want to listen for the key down event when the user's mouse is over the Image, you can manually assign focus to the Image when the user moves their mouse over it.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
import mx.managers.IFocusManagerComponent;
private var oldFocus:IFocusManagerComponent;
public function imageMouseOver(event:MouseEvent):void {
oldFocus = focusManager.getFocus();
var newFocus:UIComponent = event.target as UIComponent;
newFocus.setFocus();
}
private function imageMouseOut(event:MouseEvent):void {
if (oldFocus) {
oldFocus.setFocus();
}
}
]]>
</mx:Script>
<mx:Canvas width="100%" height="100%">
<mx:Label id="lab" x="50" y="20" text="Nothing"/>
<mx:Image x="50" y="50" source="#Embed('image.png')" mouseOver="imageMouseOver(event)" mouseOut="imageMouseOut(event)" keyDown="lab.text='Something';" focusEnabled="true"/>
</mx:Canvas>
</mx:Application>
Alternately, you can assign a key down listener to the stage when the user mouses over the Image, and remove it when the user mouses out.
Image derives from (a.k.a "is a") SWFLoader. You need to add listeners to the content of the loader, not the loader itself. See this question for details, Interact with SWF Loader
I'm new to Flex and am using TileList bound to an ArrayCollection. The array collection is empty at load time, and then updates with the results from am HTTPService call. The problem is that the item renderers aren't being rendered as expected, I'm guessing because there was no data when they were first rendered at load time. Here's simplified example:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var myList1:ArrayCollection = new ArrayCollection();
[Bindable]
public var myList2:ArrayCollection = new ArrayCollection([{item:"foo"}, {item:"bar"}]);
public function updateMyList():void
{
myList1.source = [{item:"foo"}, {item:"bar"}];
}
]]>
</mx:Script>
<mx:Button id="myButton" label="Update My List"
click="updateMyList();"/>
<mx:TileList dataProvider="{myList1}"
direction="vertical"
width="800" >
<mx:itemRenderer>
<mx:Component >
<mx:Canvas backgroundColor="yellow" >
<mx:Label text="{data.item}" width="800" />
</mx:Canvas>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
<!-- This one renders as expected -->
<mx:TileList dataProvider="{myList2}"
direction="vertical"
width="800" >
<mx:itemRenderer>
<mx:Component >
<mx:Canvas backgroundColor="yellow" >
<mx:Label text="{data.item}" width="800" />
</mx:Canvas>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
</mx:Application>
You will notice that the second TileList whose bindings has data at load time renders as expected (800px wide), bit the first TileList is rendered is not the correct width and has scrollbars around it.
Could anyone explain why this is happening or even provide some work arounds to avoid this?
Regards,
Chris
It's likely that this section is causing the problems:
public function updateMyList():void
{
myList1.source = [{item:"foo"}, {item:"bar"}];
}
From here:
source of data in the ArrayCollection.
The ArrayCollection object does not
represent any changes that you make
directly to the source array. Always
use the ICollectionView or IList
methods to modify the collection.
This property can be used as the
source for data binding. When this
property is modified, it dispatches
the listChanged event.
So I'd probably change the line to:
myList1= new ArrayCollection([{item:"foo"}, {item:"bar"}]);
http://livedocs.adobe.com/flex/3/langref/mx/controls/TileList.html
Check the API.
Set the columnWidth and rowHeight properties like this,
<mx:TileList dataProvider="{myList1}"
direction="vertical"
width="800" columnWidth="800" rowHeight="25">
There is probably a more "proper" way to do it, but that should get you started.
Hi i have added a control with the help itemrender in my datagrid. but there is a problem that
in time of execution it comes two times at init and creation complete event of that control
which i added in my datagrid column.
Thanks
Atul Yadav
<?xml version="1.0" encoding="utf-8"?>
<mx:DataGridColumn xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:ns1="Component.*" >
<mx:Script>
<![CDATA[
[Bindable]
public var columnID:String="";
[Bindable]
public var ColumnData:String="";
]]>
</mx:Script>
<mx:itemRenderer>
<mx:Component>
<ns1:test >
</ns1:test>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
and my control code:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" xmlns:ns1="View.*" creationComplete="init(event)">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private static var arr:Array;
private function init(e:Event):void{
if(!arr)
arr=new Array();
arr.push(this);
btn_apply.addEventListener(MouseEvent.CLICK,function(e:Event):void{Alert.show(arr.length.toString());});
}
]]>
</mx:Script>
<mx:Button label="Button" id="btn_apply"/>
</mx:VBox>
when i get arr length it gives me just double count.
If I understand correctly the second code snippet is your custom item renderer that is instantiated as <ns1:test> in the first snippet.
The DataGrid control will create instances of your renderer as and when it sees fit - you don't really have any control of how many instances will get created. So while you may have one row in the column the Data Grid is quite likely to have created more than one instance of the renderer component. The result, as you can see, is that creation complete is called more than once and you are getting more items in your static array than you are expecting. When developing item renderers you have to take into account that: you don't control their instantiation and that they are recycled by the framework. The best approach to take is to make them as stateless as possible.