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
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.
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've got a Tilelist and I'm using an ItemRenderer, which is a Button.
I don't understand how to reference what was clicked. So, if the first tile (which is the first Obect) is clicked, how do I know that that particular one was clicked.
<mx:ArrayCollection id="myAC">
<mx:Array>
<mx:Object id="first" label="1" />
<mx:Object label="2" />
<mx:Object label="3" />
<mx:Object label="4" />
</mx:Array>
</mx:ArrayCollection>
ItemRenderer:
<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml"
click="Alert.show( 'This was Clicked')">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
]]>
</mx:Script>
</mx:Button>
Thank you.
-Laxmidi
MouseEvent.target will give you the item was was clicked
If you want to access the element in your dataPRovider, you can use the data property in your itemRenderer. Something like this:
<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml"
click="Alert.show( data['label'] + ' was Clicked')"
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)