Customize ComboBox in Flash (AS3)
In my work as a flash developer very often I receive from the client just one photoshop file with the design of the application/site that has to be coded. In the last project the designer made the ComboBox in the style of the site. So I couldn't use the default look of the Flash's drop down component.
Here is the code of the document class. At the end of the article you can download the source files.
package lib.document {
import flash.display.MovieClip;
import flash.events.Event;
import flash.text.TextFormat;
import flash.utils.*;
import fl.controls.ComboBox;
import fl.data.DataProvider;
public class App extends MovieClip {
private
var _clip: MovieClip;
function App() {
var tf: TextFormat = new TextFormat();
tf.font = "Arial";
tf.size = 15;
tf.color = 0x747070;
var dp: DataProvider = new DataProvider();
dp.addItem({
label: "London",
data: "item1"
});
dp.addItem({
label: "Paris",
data: "item2"
});
dp.addItem({
label: "Sofia",
data: "item3"
});
dp.addItem({
label: "Praha",
data: "item4"
});
_clip = new ComboBoxClip();
_clip.combo.dataProvider = dp;
_clip.combo.width = 199;
_clip.combo.height = 33;
_clip.combo.textField.setStyle("embedFonts", true);
_clip.combo.textField.setStyle("textFormat", tf);
_clip.combo.textField.setStyle("textPadding", 5);
_clip.combo.dropdown.setStyle("cellRenderer", CustomCellRenderer);
_clip.combo.dropdown.rowHeight = 31;
_clip.combo.addEventListener(Event.CHANGE, onComboChange);
_clip.combo.tabIndex = 1;
_clip.x = _clip.y = 30;
addChild(_clip);
}
private
function onComboChange(e: Event): void {
trace("onComboChange data=" + _clip.combo.selectedItem.data + " label=" + _clip.combo.selectedItem.label);
}
}
}
The CustomCellRenderer class:
package lib.document {
import fl.controls.listClasses.CellRenderer;
import flash.text.TextFormat;
public class CustomCellRenderer extends CellRenderer {
public
function CustomCellRenderer() {
super();
var tf: TextFormat = new TextFormat();
tf.font = "Arial";
tf.size = 15;
tf.color = 0x747070;
setStyle("embedFonts", true);
setStyle("textFormat", tf);
}
override protected
function drawLayout(): void {
super.drawLayout() textField.y += 2;
textField.x += 4;
}
}
}