If you use Combo boxes to display options in some cases you may want to display options that are containing more than a few words. Maybe you want to know how a user arrived on your flex application and you want him to select from some complex options, but in the same time you don’t want to let it auto resize because it will mess your design… so one option is to use tool tips for the combo box options.
This can be done very easily changing the default item renderer of the combo box. This can be accomplished directly in the MXML code when defining your combo box control using itemRenderer attribute.
<mx:ComboBox x="165" y="36" width="125" dataProvider="{loremIpsum}" itemRenderer="mx.controls.Label"/>
Bellow is a application that shows the differences between a regular combo box and a one with tooltips.
The entire code is here:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="200"> <mx:Label x="10" y="10" text="Normal"/> <mx:ComboBox x="10" y="36" width="125" dataProvider="{loremIpsum}"/> <mx:Label x="165" y="10" text="With tooltip"/> <mx:ComboBox x="165" y="36" width="125" dataProvider="{loremIpsum}" itemRenderer="mx.controls.Label"/> <mx:Script> <![CDATA[ [Bindable] private var loremIpsum:Array = [ {label: "Lorem ipsum dolor sit amet, consectetuer " + "adipiscing elit. Nam libero sapien, viverra " + "sit amet, feugiat sed, vestibulum at, arcu. " + "Phasellus condimentum tellus ut mi molestie " + "cursus"}, {label: "Vivamus bibendum. In pretium eros. " + "Pellentesque elementum, elit quis porta " + "malesuada, nunc augue imperdiet orci, eu " + "ultrices orci ligula vel nisl"}, {label: "Donec facilisis"}, {label: "Duis sodales"}, {label: "Fusce luctus, leo euismod pulvinar fringilla, " + "enim dui pharetra sem, ac facilisis diam " + "ante non leo"}, {label: "Quisque justo ipsum, varius id, faucibus et, " + "blandit ac, diam"} ] ]]> </mx:Script> </mx:Application>
This is the beauty and power of the flex framework… you can do great things with just a few lines of coding.
Popularity: 47%
Tags: ActionScript, combobox, MXML, tooltip
This post was written by Andrei Ionescu
Views: 2483
Articles
