I have this ItemRenderer
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="false">
<s:HGroup verticalAlign="middle">
<s:Button label="{data.Nome} ({data.Rating})" width="150" height="35"/>
<s:Button label="{data.Estado}" width="150" height="30"/>
</s:HGroup>
</s:ItemRenderer>
I'd like to see the properties of data object when typing . since its a custom object. How can I see them?
data is suppose to be a User class object.
Try this
<fx:Script>
<![CDATA[
import yourPackage.User;
[Bindable]
private var user:User;
override public function set data(value:Object):void{
super.data = value;
user = data as User;
}
]]>
</fx:Script>
<s:HGroup verticalAlign="middle">
<s:Button label="{user.Nome} ({user.Rating})" width="150" height="35"/>
<s:Button label="{user.Estado}" width="150" height="30"/>
</s:HGroup>
Either as Юрий Борыс said or you could also cast data as User:
<s:Button label="{User(data).Nome} ({User(data).Rating})" width="150" height="35"/>
HIH
Related
I created a subclass of Event Class. I used the subclass in an itemrenderer, no error observed. But once I declared the itemrenderer to the List in the Main application, errors appears in the itemrenderer claiming "Type was not found or was not a compile-time constant: CustomDeleteEvent" and "Incorrect number of arguments: Expected no more than 1"
Please give me some advice. Thanks in advance.
In subclass :
package widgets.GetMap
{
import flash.events.Event;
public class CustomDeleteEvent extends Event
{
public static const DELETE_ITEM:String = "DELETE_ITEM";
public var deletedItem:String;
public function CustomDeleteEvent(type:String, deletedItem:String)
{
super(type);
this.deletedItem = deletedItem;
}
}
}
In ItemRenderer :
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer name="CustomItemRen"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true"
minHeight="24">
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
</s:states>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.CloseEvent;
import spark.components.List;
protected function deleteHandler():void
{
var deleteItem:String = itemIndex.toString();
var tryevent:CustomDeleteEvent;
owner.dispatchEvent(tryevent,deleteItem);
Object(owner).dataProvider.removeItemAt(itemIndex);
}
]]>
</fx:Script>
<s:HGroup width="100%" height="100%"
verticalAlign="middle"
paddingLeft="2" paddingRight="2"
paddingTop="2" paddingBottom="2">
<s:Label id="lbl" text="{data.toString()}" width="100%" color="#30FF00"/>
<s:Button id="btn" includeIn="hovered,selected" y="-16" width="35" height="22" label="X"
accentColor="#FFFFFF" color="#FF0000" fontFamily="Verdana" fontSize="12"
fontWeight="bold" mouseDown="deleteHandler();" toolTip="Delete item"/>
</s:HGroup>
</s:ItemRenderer>
In the main application:
<s:Application name="Spark_List_itemRenderer_hovered_test"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Style source="test.css"/>
<s:List id="lst"
itemRenderer="CustomItemRen"
width="300"
horizontalCenter="0" verticalCenter="0">
<s:layout>
<s:VerticalLayout gap="0"
horizontalAlign="justify"
requestedRowCount="8" />
</s:layout>
<s:dataProvider>
<s:ArrayList>
<fx:Object label="Application" />
<fx:Object label="Label" />
<fx:Object label="List" />
</s:ArrayList>
</s:dataProvider>
</s:List>
</s:Application>
In this line, you didn't initialize the event object ("tryEvent" like new CustomDeleteEvent())..
and also in your "CustomDeleteEvent"..there is "type" parameter, which is not in "tryEvent" object...
var tryevent:CustomDeleteEvent;
owner.dispatchEvent(tryevent,deleteItem);
Use below code for dispatch the event....
owner.dispatchEvent(new CustomDeleteEvent(CustomDeleteEvent.DELETE_ITEM, deleteItem));
hope this will help you....
I have an arrayCollection with 3 columns as such:
Col1 Col2 Col3
a 1 X
b 2 Y
c 3 Z
d 4 W
I want to tranpose this set of data and display it in Flex DataGrid.
I have got till here with my function below, the grid is showing (a,b,c,d etc) as columns but the rows are not filled. For example the first column should show "a" as header and "1" in the 1st row and "X" in the 2nd row.
Can someone help me with this.
This is my function.
public function createColumns(myArrayColl:ArrayCollection):void{
var advancedDataGridColumn:AdvancedDataGridColumn;
var i:int;
var columnsArray:Array = new Array();
for(i=0;i< myArrayColl.length;i++){
advancedDataGridColumn=new AdvancedDataGridColumn();
advancedDataGridColumn.headerText= getFormattedPeriod(myArrayColl[i].Col1.toString());
advancedDataGridColumn.dataField=myArrayColl[i].Col2.toString();
advancedDataGridColumn.dataField=myArrayColl[i].Col2.toString();
advancedDataGridColumn.dataField=myArrayColl[i].Col3.toString();
columnsArray.push(advancedDataGridColumn);
}
adg1.columns = columnsArray;
adg1.invalidateDisplayList();
}
I had the same problem and solved using Spark DataGroup with a Horizontal Layout:
<?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">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable] private var array : ArrayCollection = new ArrayCollection([
{Col1:"a",Col2:"1",Col3:"X"},
{Col1:"b",Col2:"2",Col3:"Y"},
{Col1:"c",Col2:"3",Col3:"Z"},
{Col1:"d",Col2:"4",Col3:"W"},
]);
]]>
</fx:Script>
<s:HGroup x="225" y="49">
<!--the VGroup below it's a kind of a 'vertical header'. If you, like use it.-->
<s:VGroup width="50" id="vHeader">
<s:Label text="Col 1" fontWeight="bold"/>
<s:Label text="Col 2"/>
<s:Label text="Col 3"/>
</s:VGroup>
<!--the DataGroup with Horizontal layout and a itemRenderer using a VGroup-->
<s:DataGroup id="dataGroup" clipAndEnableScrolling="true"
dataProvider="{array}" width="100">
<s:layout>
<s:HorizontalLayout gap="1" useVirtualLayout="true"/>
</s:layout>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer width="49">
<fx:Script>
<![CDATA[
]]>
</fx:Script>
<s:VGroup>
<s:Label text="{data.Col1}" fontWeight="bold"/>
<s:Label text="{data.Col2}"/>
<s:Label text="{data.Col3}"/>
</s:VGroup>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:DataGroup>
</s:HGroup>
<!--the HSCrollBar positioned above the dataGroup-->
<s:HScrollBar x="276" y="27" width="100" pageSize="50" stepSize="50"
viewport="{dataGroup}"/>
</s:Application>
I got a new project. and some part of it, Flex was exist.
<mx: Application xmlns:mx=...>
<mx:script>
import...
function A() {
}
</mx:script>
<mx:linkBar...>
<mxViewStack ...>
<mx:Canvas id="1st" ...> **[HERE]** </mx:Canvas>
<mx:canvas id="2nd" ...> ... </mx:Canvas>
<mx:canvas id="3rd" ...> ... </mx:Canvas>
** When Viewstack calls Canvas sequentially, A() has to work.
Is it possible to use function A() in **HERE**]?
Or please let me know the possible function or tag which can be used.
Below example may help you: -
<?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[
private function A():void
{
//Your code
}
private function viewStackHandler():void
{
//Method One
if(viewStackID.selectedIndex == 0)
{
A();
}
else if(viewStackID.selectedIndex == 1)
{
A();
}
else
{
A();
}
//OR Method Second
//call only A()
}
]]>
</fx:Script>
<mx:VBox width="100%" height="100%">
<mx:HBox width="100%" height="20">
<s:Button label="One" click="{viewStackID.selectedIndex = 0}"/>
<s:Button label="Two" click="{viewStackID.selectedIndex = 1}"/>
<s:Button label="Three" click="{viewStackID.selectedIndex = 2}"/>
</mx:HBox>
<mx:ViewStack width="500" height="400" id="viewStackID" change="viewStackHandler()">
<mx:Canvas id="canval1" borderColor="#FF0000" width="100%" height="100%">
<s:Button label="One"/>
</mx:Canvas>
<mx:Canvas id="canval2" borderColor="#00FF00" width="100%" height="100%">
<s:Button label="Two"/>
</mx:Canvas>
<mx:Canvas id="canval3" borderColor="#0000FF" width="100%" height="100%">
<s:Button label="Three"/>
</mx:Canvas>
</mx:ViewStack>
</mx:VBox>
</s:Application>
You can use the add attribute which is dispatched when the Canvas is added to the ViewStack
<mx:Canvas id="1st" add="A()"></mx:Canvas>
For my flex project I am making, I'm trying to change the background of my website change to the image I have clicked on. The background in my main page I have set like this:
<s:BorderContainer id="backgroundContainer" width="100%" height="100%" backgroundImage="#Embed('assets/background.png')" borderAlpha="0">
<s:layout>
<s:VerticalLayout horizontalAlign="center"/>
</s:layout>
<mx:LinkBar styleName="mainnav" width="600" dataProvider="content" horizontalCenter="0" paddingLeft="20" paddingTop="125"/>
<s:Image top="5" bottom="5" horizontalCenter="50" source="assets/nav.png"/>
<mx:ViewStack id="content">
<mx:HBox id="home"
label="Home">
<component:home/>
</mx:HBox>
<mx:HBox id="bio"
label="Bio">
<component:bio/>
</mx:HBox>
<mx:HBox id="portfolio"
label="Portfolio">
<component:portfolio/>
</mx:HBox>
<mx:HBox id="contact"
label="Contact">
<component:contact/>
</mx:HBox>
</mx:ViewStack>
</s:BorderContainer>
Now from inside my component, I am trying to set the the background of the image you click on.
<fx:Script>
<![CDATA[
import mx.core.Application;
public function changeBackground(event:MouseEvent):void
{
Application.application.backgroundContainer.setStyle('backgroundImage', img1.source);
}
]]>
</fx:Script>
I call this function when you click on an image.
<mx:Image id="img1" source="assets/placeholder.jpg" click="changeBackground(event)"/>
But it doesn't work.
So I was wondering how this should be done?
Thank you,
Thomas
you can use BitmapFill and declare all your backgrounds first. Also, be sure your changeBackground function is public in your main application since it will be called from a component.
<?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" xmlns:component="component.*">
<fx:Script>
<![CDATA[
public function changeBackground(bitmapFillObj:BitmapFill):void
{
backgroundContainer.backgroundFill = bitmapFillObj;
}
]]>
</fx:Script>
<fx:Declarations>
<s:BitmapFill id="_bg1" source="#Embed('assets/bg1.jpg')"/>
<s:BitmapFill id="_bg2" source="#Embed('assets/bg2.jpg')"/>
</fx:Declarations>
<s:BorderContainer id="backgroundContainer" width="100%" height="100%" backgroundImage="#Embed('assets/bg1.jpg')" borderAlpha="0">
<component:home/>
</s:BorderContainer>
</s:WindowedApplication>
And now your component
<fx:Script>
<![CDATA[
import mx.core.FlexGlobals;
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:Button label="click to show bg 1" click="FlexGlobals.topLevelApplication.changeBackground(FlexGlobals.topLevelApplication._bg1)"/>
<s:Button label="click to show bg 2" click="FlexGlobals.topLevelApplication.changeBackground(FlexGlobals.topLevelApplication._bg2)"/>
Your just have to adapt the code to your project, clicking on your images instead of buttons. Good luck!
In Flex 3, it used to be possible to bind a component property within an itemRenderer via outerDocument. So for instance, if there was a image inside an itemRenderer that was only displayed on a given condition of the parent, something like this would work perfectly:
<mx:itemRenderer>
<mx:Component>
<mx:Label text="{data}"/>
<mx:Image id="img" visible="{outerDocument.ShowImage}" includeInLayout="{outerDocument.ShowImage}"/>
</mx:Component>
</mx:itemRenderer>
where the outer document (not the list, but the mxml the list is in) contained something like
[Bindable]
public function get ShowImage():void
{
return showImage;
}
public function set ShowImage(val:Boolean):void
{
showImage = val;
}
I've tried to do the same thing in Flex 4.5 using Spark item renderers using parentDocument, but it doesn't seem to be aware to the binding. When I do this in Flex 4.5, the itemRenderer doesn't seem to be aware when the parentDocument ShowImage changes.
Has anyone seen this issue and is able to offer a solution?
EDIT: Add Spark Source
As requested here is my spark source:
MyItemRenderer.mxml
<s:ItemRenderer 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:Label id="myLabel" text="{data}/>
<s:Image src="something.png" visible="{parentDocument.ShowImage}" includeInLayout="{parentDocument.ShowImage}"/>
</s:ItemRenderer>
RendererContainer.mxml
<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
private var showImage:Boolean = false;
[Bindable]
public function set ShowImage(val:Boolean):void
{
showImage = val;
}
public function get ShowImage():Boolean
{
return showImage;
}
]]>
</fx:Script>
<!-- Content Group -->
<s:List id="lstCell" width="100%" height="100%" itemRenderer="MyItemRenderer">
</s:List>
</s:Panel>
Ok so there is a checkbox in a wrapper outside of RendererContainer.mxml that dispatches a custom event that is handled by changing a Bindable Boolean. The change in that var then changes the ShowImage property on my RendererContainer component. I would expect that the binding would then be picked up by MyItemRenderer but it doesnt seem to be working.
So my outer wrapper would access ShowImage like this
<comp:RendererContainer id="myId" ShowImage="{myCheckbox.selected}"/>
I think this should do the trick for you, YourTypeHere would be the class of the containing
object, make sure the ShowImage property is public and bindable.
<mx:itemRenderer>
<mx:Component>
<mx:Script>
<![CDATA[
import YourTypeHere;
]]>
</mx:Script>
<mx:Label text="{data}"/>
<mx:Image id="img"
visible="{YourTypeHere(this.parent.ShowImage)}"
includeInLayout="{YourTypeHere(this.parent.ShowImage)}"/>
</mx:Component>
</mx:itemRenderer>
P.s. please don't name properties with a starting uppercase letter, including getters, consider naming it showImage and your private var to something like _showImage instead :D
Your getter seems to have return type as void. Change that to Boolean
[Bindable]
public function get ShowImage():Boolean
{
return showImage;
}
public function set ShowImage(val:Boolean):void
{
showImage = val;
}
This will help.
<s:Image src="something.png" visible="{RendererContainer(ListSkin(parentDocument).parentDocument).ShowImage}" includeInLayout="{RendererContainer(ListSkin(parentDocument).parentDocument).ShowImage}"/>
Following works perfectly fine:
<?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;
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Panel 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[
private var showImage:Boolean = false;
[Bindable]
public function set ShowImage(val:Boolean):void
{
showImage = val;
}
public function get ShowImage():Boolean
{
return showImage;
}
]]>
</fx:Script>
<s:CheckBox label="Select" change="{ShowImage = !ShowImage}"/>
<!-- Content Group -->
<s:List id="lstCell" width="100%" height="100%" dataProvider="{new ArrayCollection(['A','B'])}">
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<s:Label id="myLabel" text="{data}"/>
<s:Button label="something.png" visible="{outerDocument.ShowImage}" includeInLayout="{outerDocument.ShowImage}"/>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>
</s:Panel>
</s:WindowedApplication>