Flex RIA的ArcIMS WebGIS之路（五）自定义组件

WebGIS功能有些啥，与桌面的功能相比WebGIS就简单多了，总的来说就是俩字--好看，图面效果要好，界面要炫，当然也要足够傻瓜。功能嘛，大概就是地图浏览，属性，空间的查询定位，查询结果的统计分析一类的了。WebGIS核心是地图，地图图面怎么才好看，主要就是标注与符号。现在偶们就看看标注，说到标注总的来说就是字体，大小，位置，颜色，角度这些了，说起Web下面的字体选择与C/S相比就逊色多了，不能够像Office那样所见即所得，现在Flex可以解决这个问题啦！，下面就说说怎么通过继承实现Office风格的字体选择下拉框。

    首先我们需要继承一个ComboBox

public class FontChooser extends ComboBox
    {
        public function FontChooser()
        {
            super();
            var fonts:Array = Font.enumerateFonts(true);
            this.dataProvider = fonts;
            this.labelField = "fontName";
            this.addEventListener(  flash.events.Event.CHANGE , SelectChanged);
        }
       
        protected function SelectChanged(e:flash.events.Event):void
        {
            this.setStyle("fontFamily", (this.selectedItem as Font).fontName);
        }
        public function get SelectedFont():Font
        {
            return this.data as Font;
        }
       
    }

然后要做些啥呢，那就是写个Renderer了，用来渲染每一个字体名称

public class FontChooserItemRenderer extends ListItemRenderer
    {
        public function FontChooserItemRenderer()
        {
            super();
        }
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
             super.updateDisplayList(unscaledWidth, unscaledHeight);
             this.setStyle("fontFamily", (this.data as Font).fontName);
             this.toolTip= (this.data as Font).fontName;
        }
    }

最后就是要将渲染器挂上Combobox了，在FontChooser中加上

this.itemRenderer = new ClassFactory(FontChooserItemRenderer);