i'm using flash builder 4..i want to ask something..how to binding data to custom list component in flex??...
i already try binding data from webservice to standard datagrid component in flex, and it's work perfectly...this is my code for binding to datagrid..
<mx:DataGrid includeIn="LobbyPage" x="30" y="319" id="dataGrid" creationComplete="dataGrid_creationCompleteHandler(event)" dataProvider="{TakeUserResult4.lastResult}">
<mx:columns>
<mx:DataGridColumn headerText="Username" dataField="Username"/>
<mx:DataGridColumn headerText="Password" dataField="Password"/>
</mx:columns>
</mx:DataGrid>
now i'm stuck with this..i have custom list like i wrote below..
<s:List skinClass="components.DataList4" x="18" y="611" id="listPlayer">
<s:ArrayCollection>
<fx:Object image1="#Embed('/assets/images/test aj/basil.png')" text1="FLAVOR"
text2="Description of the flavor goes here"/>
<fx:Object image1="#Embed('/assets/images/test aj/basil.png')" text1="FLAVOR"
text2="Description of the flavor goes here"/>
<fx:Object image1="#Embed('/assets/images/test aj/basil.png')" text1="FLAVOR"
text2="Description of the flavor goes here"/>
</s:ArrayCollection>
</s:List>
now..how to bind data to "image1","text1","text2" from webservice??
anyone who want to share an experience to this stuff and give me example?thanks in advance..
by the way..sorry for my bad english :)
Give your list a dataProvider (wrap your array collection in the data provider tag) then specify an itemRenderer so the list knows how to render the data.
<s:List id="listPlayer" width="200" height="500">
<s:dataProvider>
<s:ArrayCollection>
<fx:Object image1="#Embed('/assets/images/test aj/basil.png')" text1="FLAVOR"
text2="Description of the flavor goes here"/>
<fx:Object image1="#Embed('/assets/images/test aj/basil.png')" text1="FLAVOR"
text2="Description of the flavor goes here"/>
<fx:Object image1="#Embed('/assets/images/test aj/basil.png')" text1="FLAVOR"
text2="Description of the flavor goes here"/>
</s:ArrayCollection>
</s:dataProvider>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<s:HGroup>
<s:Image source="{data.image1}" />
<s:Label text="{data.text1}" fontWeight="bold"/>
<s:Label text="{data.text2}" />
</s:HGroup>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>
Related
I have a strange problem in Flex. I have a ButtonBar with 7 buttons and always the fifth is invisible. Even when I switch places of buttons always the one which is the fifth is the one I cannot see.
Here is my code:
<s:HGroup x="6" y="6" visible="{entityId > 0}">
<mx:ButtonBar height="20" x="10" horizontalGap="4" itemClick="onButtonBarClickHandler(event)" id="buttonBar">
<mx:dataProvider>
<s:ArrayList>
<fx:Object label="xxx" action="AddItem" icon="{_addIcon}" />
<fx:Object label="zzz" action="DeleteItem" icon="{_deleteIcon}" enabled="{_dg.selectedItem as TemplateFile != null}" />
<fx:Object label="yyy" action="Generate" enabled="{_dg.selectedItem.IsTemplate}" />
<fx:Object label="aaa" action="PublishSharePoint" enabled="{_dg.selectedItem.IsTemplate}" />
<fx:Object label="bbb" action="SetDefault"/>
<fx:Object label="Download document" action="DownloadDocument"/>
<fx:Object label="Show Tags" action="ShowTags"/>
</s:ArrayList>
</mx:dataProvider>
</mx:ButtonBar>
</s:HGroup>
Do you have any idea what is wrong here?
Tried to reproduce it, no success - they are all visible.
My guess is that you have some code that causes it to become invisible.
I'm using Adobe Flex Builder 4.5, and I'd like to create a vertical, scrollable list of panels for an AIR application. How do I do that?
A little something like this:
<fx:Declarations>
<s:ArrayCollection id="dp">
<fx:Object title="Panel A" content="content AAAAA" />
<fx:Object title="Panel B" />
<fx:Object title="Panel C" />
<fx:Object title="Panel D" />
</s:ArrayCollection>
</fx:Declarations>
<s:List dataProvider="{dp}" height="100%">
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<s:Panel title="{data.title}">
<s:Label text="{data.content}" />
</s:Panel>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>
Doesn't matter whether you're in AIR or just Flex.
The checkboxes are updated correctly when I select one or more datagrid rows but when I select a checkbox for the first time the checkbox does not refresh until the pointer moves out of the datagrid row. How can I fix 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">
<s:DataGrid id="dg" x="344" y="48" selectionMode="multipleRows" requestedRowCount="4">
<s:columns>
<s:ArrayList>
<s:GridColumn>
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import spark.components.DataGrid;
override public function prepare(hasBeenRecycled:Boolean):void
{
cb.selected = grid.selectionContainsIndex(rowIndex);
}
]]>
</fx:Script>
<s:CheckBox id="cb" label="" horizontalCenter="0"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
<s:GridColumn dataField="dataField1" headerText="Column 1"></s:GridColumn>
<s:GridColumn dataField="dataField2" headerText="Column 2"></s:GridColumn>
<s:GridColumn dataField="dataField3" headerText="Column 3"></s:GridColumn>
</s:ArrayList>
</s:columns>
<s:typicalItem>
<fx:Object dataField1="Sample Data" dataField2="Sample Data" dataField3="Sample Data"></fx:Object>
</s:typicalItem>
<s:ArrayList>
<fx:Object dataField1="data1" dataField2="data1" dataField3="data1"></fx:Object>
<fx:Object dataField1="data2" dataField2="data2" dataField3="data2"></fx:Object>
<fx:Object dataField1="data3" dataField2="data3" dataField3="data3"></fx:Object>
<fx:Object dataField1="data4" dataField2="data4" dataField3="data4"></fx:Object>
</s:ArrayList>
</s:DataGrid>
</s:Application>
Change this:
<s:CheckBox id="cb" label="" horizontalCenter="0"/>
To:
<s:CheckBox id="cb" label="" horizontalCenter="0" enabled="false"/>
I just recommend you to use enabled property.
I think the dispatched "click event" from both checkbox and gridColumn, then returned function prevented each other.
If enabled property set false, your click event dispathed on only gridColumn then using cb.selected=grid.selectionContainsIndex(rowIndex); correctly occupy if you want to show checkbox enabled, you can use CSS or skinclass
The easiest way is to just use the renders selected state as suggested by RIAStar. However if you are using global skinning doing the custom drawing does not work, use either a skinnable container or as I have just put the checkbox in there but dont make it respond to mouse commands. For the multi selection, as long as your grid is setup to multiple rows or columns you can simply capture the mouse events and force the ctrl key which makes them handle multi select.
<s:GridItemRenderer
mouseDown="mouseDownHandler(event)"
mouseUp="mouseUpHandler(event)"
buttonMode="true"
mouseChildren="false"
useHandCursor="true"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
>
<s:states>
<s:State name="normal"/>
<s:State name="selected"/>
</s:states>
<fx:Script>
<![CDATA[
protected function mouseUpHandler(event:MouseEvent):void {
event.ctrlKey = true;
}
protected function mouseDownHandler(event:MouseEvent):void {
event.ctrlKey = true;
}
]]>
</fx:Script>
<s:CheckBox
id="check"
selected.normal="false"
selected.selected="true"
horizontalCenter="0"
verticalCenter="0"
/>
</s:GridItemRenderer>
I ended up simply doing this:
<s:GridColumn dataField="myBoolean" headerText="Returned" width="55">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:CheckBox id="cb1" selected="{data.myBoolean}" change="{data.myBoolean=cb1.selected}"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
You can just fake the CheckBox by drawing a CheckBox shape in the ItemRenderer and use the states to show the tick.
<s:GridItemRenderer>
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
</s:states>
<!-- checkbox graphics -->
<s:Group width="16" height="16" horizontalCenter="0" verticalCenter="0">
<s:Rect left="0" right="0" top="0" bottom="0">
<s:fill>
<s:SolidColor color="0xffffff" />
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0xa9aeb2" />
</s:stroke>
</s:Rect>
<!-- tick, only shown when selected -->
<s:Rect includeIn="selected" width="8" height="8" horizontalCenter="0" verticalCenter="0">
<s:fill>
<s:SolidColor color="0x90b40c" />
</s:fill>
</s:Rect>
</s:Group>
</s:GridItemRenderer>
This is a simplified graphic for a checkbox, but you can go grab the code from the spark CheckBoxSkin and copy/paste it in the itemrenderer. Just might have to change some state names.
This will not deselect a single row though when you hit the CheckBox of an already selected row, unless you hold the CTRL key down. That's the default behavior of the DataGrid component. I'm afraid you'll have to create your own subclass of DataGrid if you want to prevent that behavior.
Another important thing to know: setting the selected property on the itemrenderers doesn't change the selectIndices of the DataGrid. Hence on the next commitProperties() cycle the value you set in the renderer will be overridden by the DataGrid.
Old answer: (before edit)
The ItemRenderer class (and thus the GridItemRenderer class too) has a selected property.
So you could bind the checkboxes selected property to the itemrenders, like so:
<s:CheckBox selected="{selected}" horizontalCenter="0" />
You'd have to create a separate ItemRenderer class for that to work though instead of an inline one.
If you absolutely want to go the inline way you can always override the selected setter.
<s:GridItemRenderer>
<fx:Script>
<![CDATA[
override public function set selected(value:Boolean):void {
super.selected = cb.selected = value;
}
]]>
</fx:Script>
<s:CheckBox id="cb" horizontalCenter="0"/>
</s:GridItemRenderer>
I have a list that as an arraylist as a dataprovider.It has an inline item renderer thet has image control. The click event doesn't work for the image ctrl.The code looks like this
<s:ArrayList id="allActionsArrList">
<fx:Object click="showList('Portlet')" source="#Embed('images/bpc1.jpg')" />
<fx:Object click="showList('Pages')" source="#Embed('images/Tab.png')" />
<fx:Object click="smsClick()" source="#Embed('images/launchpad_tel.png')" />
<fx:Object click="logoutImg_clickHandler(event)" source="#Embed('images/logoutS.swf')" />
</s:ArrayList>
<s:List id="actionStripList" bottom="0" width="100%" borderColor="black"
borderVisible="true" contentBackgroundAlpha="0" dataProvider="{allActionsArrList}"
useVirtualLayout="false">
<s:layout>
<s:TileLayout/>
</s:layout>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer width="100%" height="40">
<mx:Image buttonMode="true" horizontalCenter="0"
width="40" height="40" source="{data.source}" click="{data.click}"/>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>
Any idea.Thanks in advance!
1.You may do something like this:
<fx:Object clickHandler="{showList}" clickParams="{['Portlet']}" source="#Embed('images/bpc1.jpg')" />
<fx:Object clickHandler="{showList}" clickParams="{['Pages']}" source="#Embed('images/Tab.png')" />
<fx:Object clickHandler="{smsClick}" clickParams="{[]}" source="#Embed('images/launchpad_tel.png')" />
<fx:Object clickHandler="{logoutImg_clickHandler}" clickParams="{[]}" source="#Embed('images/logoutS.swf')"/>
<mx:Image buttonMode="true" horizontalCenter="0" width="40" height="40" source="{data.source}" click="data.clickHandler.apply(this, data.clickParams)"/>
Here you possibly should take care of this object (info)
But I'd used the 2nd variant.
2.Another variant is to define some attribute (id for example) for your Object items. Then you can use switch statement in your inline itemRenderer and call different listeners depending on data.id.
This seems like it should be really simple, but I'm a total newbie to Flex and am getting stuck.
Here's what I have right now, which works:
<s:List id="list"
itemRenderer="spark.skins.spark.DefaultComplexItemRenderer"
horizontalCenter="0"
verticalCenter="0">
<s:layout>
<s:TileLayout requestedColumnCount="3"
requestedRowCount="2"
horizontalGap="0"
verticalGap="0" />
</s:layout>
<s:dataProvider>
<s:ArrayList>
<s:BitmapImage source="#Embed('../images/menus/car_types/truck.png')" />
<s:BitmapImage source="#Embed('../images/menus/car_types/suv.png')" />
<s:BitmapImage source="#Embed('../images/menus/car_types/convertible.png')" />
<s:BitmapImage source="#Embed('../images/menus/car_types/sedan.png')" />
<s:BitmapImage source="#Embed('../images/menus/car_types/surprise.png')" />
</s:ArrayList>
</s:dataProvider>
</s:List>
What I'd like to do is add labels below each tile, associating each image with a string. I want to do something like
<s:List id="list"
itemRenderer="spark.skins.spark.DefaultComplexItemRenderer"
horizontalCenter="0"
verticalCenter="0">
<s:layout>
<s:TileLayout requestedColumnCount="3"
requestedRowCount="2"
horizontalGap="0"
verticalGap="0" />
</s:layout>
<s:dataProvider>
<s:ArrayList>
<s:BitmapImage name="Truck" source="#Embed('../images/menus/car_types/truck.png')" />
<s:BitmapImage name="SUV" source="#Embed('../images/menus/car_types/suv.png')" />
<s:BitmapImage name="Convertible" source="#Embed('../images/menus/car_types/convertible.png')" />
<s:BitmapImage name="Sedan" source="#Embed('../images/menus/car_types/sedan.png')" />
<s:BitmapImage name="Surprise Me!" source="#Embed('../images/menus/car_types/surprise.png')" />
</s:ArrayList>
</s:dataProvider>
</s:List>
but since there is no name property on the BitmapImage object, I get errors.
I guess I need to put each BitmapImage in an Object and also put in a string as a property of the object, but I can't figure out how to do this. This is my best guess, but then I don't know how to specify the property name for the BitmapImage:
<fx:Object label="Truck">
<s:BitmapImage source="#Embed('../images/menus/car_types/truck.png')" />
</fx:Object>
After that, I guess I would make a custom ItemRenderer to read out the properties on each object?
TIA
I think you are mixing your metaphors a bit. You are putting actual UI elements in your dataProvider. In my opinion, the only thing that should be in that dataProvider is raw data. In your case, it is a string and image data. You use an ItemRenderer to apply the view element to the data.
So, just create an Object and forget about there being a BitmapImage in your dataProvider at all. That object has name and source properties.
Then, create a simple itemRenderer that binds the name and the source properties of the data object which is automatically assigned for you.
A little bit like this?
<s:List id="list"
horizontalCenter="0"
verticalCenter="0">
<s:layout>
<s:TileLayout requestedColumnCount="3"
requestedRowCount="2"
horizontalGap="0"
verticalGap="0" />
</s:layout>
<s:dataProvider>
<s:ArrayList>
<fx:Object name="Truck" source="#Embed('../images/menus/car_types/truck.png')" />
<fx:Object name="SUV" source="#Embed('../images/menus/car_types/suv.png')" />
<fx:Object name="Convertible" source="#Embed('../images/menus/car_types/convertible.png')" />
<fx:Object name="Sedan" source="#Embed('../images/menus/car_types/sedan.png')" />
<fx:Object name="Surprise Me!" source="#Embed('../images/menus/car_types/surprise.png')" />
</s:ArrayList>
</s:dataProvider>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<s:HGroup>
<s:Label text="{data.name}" />
<s:BitmapImage source="{data.source}" />
</s:HGroup>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>
Of course, pretty up that ItemRenderer however you see fit, but use data binding to the data property for whatever property you need.
Enjoy :)