hello i have this buttonbar:
<s:ButtonBar id="channelsBtnBar" requireSelection="true" width="100%" horizontalCenter="0"
skinClass="skins.TvButtonBarSkin"
change="channelsBtnBar_changeHandler(event)">
<s:dataProvider>
<s:ArrayList>
<fx:Object icon="#Embed('assets/ch1.png')"/>
<fx:Object icon="#Embed('assets/ch2.png')"/>
<fx:Object icon="#Embed('assets/ch3.png')"/>
<fx:Object icon="#Embed('assets/ch4.png')"/>
<fx:Object icon="#Embed('assets/ch5.png')"/>
<fx:Object icon="#Embed('assets/ch6.png')"/>
<fx:Object icon="#Embed('assets/ch7.png')"/>
<fx:Object icon="#Embed('assets/ch8.png')"/>
<fx:Object icon="#Embed('assets/ch9.png')"/>
</s:ArrayList>
</s:dataProvider>
</s:ButtonBar>
how can i have in creationcomplete of the parent component any of the items selected? is this possible without setting requireSelection to false and selectedItem to -1?
Swap the property requireSelection to "true" on first click!
Use selectedIndex property of ButtonBar.
if you want to select any item use selectedIndex="2" where as 2 is your selected index of ButtonBar.
If you do not want to select any thing use selectedIndex="-1".
Hope this may help....
Related
I have one array of about 10 items and an array collection of about 200 items. The array collection will contain the first 10 items somewhere in there.
I would like to filter the array collection and order it to only show the items in the first array and in the order the first array lists them in.
<s:ArrayCollection id="baseballCardCollection" >
<fx:Object name="Bill"/>
<fx:Object name="Jill"/>
<fx:Object name="Phil"/>
<fx:Object name="Luke"/>
<fx:Object name="Duke"/>
<fx:Object name="Zach"/>
<fx:Object name="John"/>
<fx:Object name="Don"/>
<fx:Object name="Ron"/>
<fx:Object name="Anne"/>
<fx:Object name="Mark"/>
<fx:Object name="Clark"/>
</s:ArrayCollection>
Filter and sort in order by:
<fx:Array>
<fx:String>Zach</fx:String>
<fx:String>Anne</fx:String>
<fx:String>John</fx:String>
<fx:String>Mark</fx:String>
<fx:String>Luke</fx:String>
</fx:Array>
Goal:
<s:ArrayCollection id="baseballCardCollection" >
<fx:Object name="Zach"/>
<fx:Object name="Anne"/>
<fx:Object name="John"/>
<fx:Object name="Mark"/>
<fx:Object name="Luke"/>
</s:ArrayCollection>
You need to apply filter function for arraycollection then put your logic into filter function. Item will be available in arraycollection if filter function return TRUE else item will removed from arraycollection but still avaliable in ArrayCollection.source property ie baseballCardCollection.source
<fx:Script>
<![CDATA[
import mx.collections.Sort;
import mx.collections.SortField;
import mx.events.FlexEvent;
protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
{
fitlerByPersonArray();
sortItemsByName();
}
private function fitlerByPersonArray():void {
baseballCardCollection.filterFunction = filterByPersonAndAddOrder;
baseballCardCollection.refresh()
}
private function sortItemsByName():void{
var srt:Sort = new Sort();
var orderField:SortField = new SortField("order");
orderField.numeric = true;
srt.fields = [orderField]; //Order by
baseballCardCollection.sort = srt;
baseballCardCollection.refresh();
}
private function filterByPersonAndAddOrder(item:Object):Boolean
{
var index:int = personArray.indexOf(item.name);
if(index > -1 ){
item.order = index; //Create new property called Order then sort with the help of order property
return true;
}
return false;
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<s:ArrayCollection id="baseballCardCollection" >
<fx:Object name="Bill"/>
<fx:Object name="Jill"/>
<fx:Object name="Phil"/>
<fx:Object name="Luke"/>
<fx:Object name="Duke"/>
<fx:Object name="Zach"/>
<fx:Object name="John"/>
<fx:Object name="Don"/>
<fx:Object name="Ron"/>
<fx:Object name="Anne"/>
<fx:Object name="Mark"/>
<fx:Object name="Clark"/>
</s:ArrayCollection>
<fx:Array id="personArray">
<fx:String>Zach</fx:String>
<fx:String>Anne</fx:String>
<fx:String>John</fx:String>
<fx:String>Mark</fx:String>
<fx:String>Luke</fx:String>
</fx:Array>
</fx:Declarations>
<s:List dataProvider="{baseballCardCollection}" labelField="name" width="200" height="400">
</s:List>
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 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.
I have a buttonbar that has 3 buttons. I'm trying to set a tooltip for each of the buttons, but not sure where. The ButtonBar itself has a skin, which in turn includes a skin for each of the buttons.
<s:ButtonBar id="bb" selectedIndex="0" skinClass="skins.bbSkin">
<s:dataProvider>
<s:ArrayList>
<fx:Object label="item1" />
<fx:Object label="item2" />
<fx:Object label="item3" />
</s:ArrayList>
</s:dataProvider>
</s:ButtonBar>
The skin for the buttonbar is skins.bbSkin
The skin inside it for each button is skins.bbbSkin
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:ButtonBar id="bb" selectedIndex="0" toolTipField="tooltip">
<mx:dataProvider>
<mx:Array>
<mx:Object label="item1" tooltip='hello1'/>
<mx:Object label="item2" tooltip='hello2'/>
<mx:Object label="item3" tooltip='hello3'/>
</mx:Array>
</mx:dataProvider>
</mx:ButtonBar>
</mx:Application>
If you want to display a toolTip with the spark ButtonBar you have to manage with the skinClass.
Have a look here :
https://sensaran.wordpress.com/2010/07/19/setting-tooltip-for-spark-buttonbar