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.
Related
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>
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 :)
I've found a very annoying problem with the itemRenderers in a DataGroup in flex 4, when I mouseout of the itemRenderer is returns to its default state. Here's an example:
<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:BorderContainer>
<s:DataGroup>
<s:layout>
<s:VerticalLayout gap="1"/>
</s:layout>
<s:dataProvider>
<s:ArrayCollection>
<fx:Object title="One" />
<fx:Object title="Two" />
<fx:Object title="Three" />
</s:ArrayCollection>
</s:dataProvider>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<s:states>
<s:State name="expanded" />
<s:State name="collapsed" />
</s:states>
<fx:Script>
<![CDATA[
private function expandCollapse():void
{
currentState = (currentState == "collapsed") ? "expanded" : "collapsed";
}
]]>
</fx:Script>
<s:VGroup>
<mx:Button click="expandCollapse();" label="Click me to hide the number" />
<s:SkinnableContainer>
<s:VGroup height="0" height.expanded="NaN">
<s:Label text="{data.title}" />
</s:VGroup>
</s:SkinnableContainer>
</s:VGroup>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:DataGroup>
</s:BorderContainer>
</s:Application>
When the user clicks on the button the VGroup is collapsed as expected, but then if a user moves their mouse out of the item renderer it then collapses, i.e. returns to its default state.
Is this a bug or am I missing something here?
Cheers,
Chris
It turns out that ItemRenderer already has some of its own states. This example works as expected if we use a DataRenderer instead of an ItemRenderer.
I have a list item with buttons in it like so:
<mx:List contentBackgroundAlpha="0" baseColor="0x333333" leading="10" id="weekButtonList" width="260" borderVisible="false" dataProvider="{_data.mappoints.week.#number}" itemClick="onWeekClick(event);" >
<mx:itemRenderer >
<mx:Component>
<mx:Button buttonMode="true" width="260" height="50" label="Week {data}" />
</mx:Component>
</mx:itemRenderer>
</mx:List>
No matter what I do, these buttons have a vertical gap inbetween them. I have tried everything from setting the "vertical-gap" property to negative and positive numbers as well as changing the padding-bottom and padding-top on them. I want the buttons to be right up against eachother vertically. I have also tried "button-height" and padding on the List component...still nothing. How do I control this?
If you can build the project in flex4 rather than 3.x the following solution would apply:
in your application file:
<?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/halo" minWidth="1024" minHeight="768">
<s:List contentBackgroundAlpha="0" baseColor="0x333333" id="weekButtonList" width="260" borderVisible="false" itemRenderer="ListButton">
<s:layout>
<s:VerticalLayout gap="0">
</s:VerticalLayout>
</s:layout>
<s:dataProvider>
<s:ArrayList>
<fx:Array>
<fx:Object label="No Gap" />
<fx:Object label="No Gap" />
<fx:Object label="No Gap" />
<fx:Object label="No Gap" />
<fx:Object label="No Gap" />
<fx:Object label="No Gap" />
<fx:Object label="No Gap" />
<fx:Object label="Still No Gap" />
</fx:Array>
</s:ArrayList>
</s:dataProvider>
</s:List>
in ListButton.mxml
<?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/halo" width="100%" height="100%">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Button label="{data.label}" />
If flex 4 is an option I highly recommend making the switch.
Try setting the button paddingTop and paddingBottom to 0
To add to greg's answer, some layouts use verticalGap and horizontalGap where applicable.
<s:List>
<s:layout>
<s:TileLayout verticalGap="-2" />
</s:layout>
</s:List>
I think the default is 0 (zero)