项目当中用到自定义ComboBox 的皮肤,因为需要显示不止一列的内容,所以打算自定义它的下拉列表。还好flex4当中自定义皮肤非常方便,你只要copy spark.skins.spark.ComboBoxSkin中的内容,稍作修改即可。
主程序:
<?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/mx" minWidth="955" minHeight="600" xmlns:view="com.view.*"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <fx:Script> <![CDATA[ import mx.collections.ArrayList; [Bindable]public var dataProvider:ArrayList = new ArrayList([{name:"kenny",phone:123,email:"dd"}, {name:"kenny2",phone:123,email:"dd"}, {name:"kenny3",phone:123,email:"dd"}, {name:"kenny4",phone:123,email:"dd"}, {name:"kenny5",phone:123,email:"dd"}, {name:"kenny6",phone:123,email:"dd"}, {name:"kenny7",phone:123,email:"dd"}, {name:"kenny8",phone:123,email:"dd"}, {name:"kenny9",phone:123,email:"dd"}, {name:"kenny10",phone:123,email:"dd"}, {name:"kenny11",phone:123,email:"dd"}, {name:"kenny12",phone:123,email:"dd"}, {name:"kenny13",phone:123,email:"dd"}, {name:"kenny14",phone:123,email:"dd"}]); private function myLabelFunction(item:Object):String { return item ? item.name + " " + item.phone : ""; } ]]> </fx:Script> <view:CustomComboBox dataProvider="{dataProvider}" labelFunction="myLabelFunction"/> </s:Application>
自定义ComboBox:
<?xml version="1.0" encoding="utf-8"?> <s:ComboBox xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" skinClass="com.skin.CustomComboBoxSkin"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <fx:Script> <![CDATA[ import mx.collections.IList; import mx.controls.DataGrid; import mx.controls.dataGridClasses.DataGridColumn; import mx.core.IVisualElement; import mx.events.ListEvent; import spark.events.RendererExistenceEvent; private var _dataProvider:IList; private var dataProviderChanged:Boolean; [SkinPart(required="true")] public var dataGrid:DataGrid; override protected function partAdded(partName:String, instance:Object):void { super.partAdded(partName,instance); if(instance == dataGrid) { dataGrid.addEventListener(ListEvent.ITEM_CLICK,onClickHandler); dataProviderChanged = true; invalidateProperties(); } } private function dataGroup_rendererAddHandler(event:RendererExistenceEvent):void { var renderer:IVisualElement = event.renderer; if (!renderer) return; renderer.addEventListener(MouseEvent.MOUSE_DOWN, item_mouseDownHandler); } private function onClickHandler(event:ListEvent):void { selectedItem = dataGrid.selectedItem; closeDropDown(true); } override public function get dataProvider():IList { return this._dataProvider; } override public function set dataProvider(value:IList):void { this._dataProvider = value; dataProviderChanged = true; invalidateProperties(); } override protected function commitProperties():void { super.commitProperties(); if(dataProviderChanged && dataGrid) { dataProviderChanged = false; dataGrid.dataProvider = dataProvider; dataGrid.validateNow(); } } ]]> </fx:Script> </s:ComboBox>
skin 文件:
<?xml version="1.0" encoding="utf-8"?> <!-- ADOBE SYSTEMS INCORPORATED Copyright 2008 Adobe Systems Incorporated All Rights Reserved. NOTICE: Adobe permits you to use, modify, and distribute this file in accordance with the terms of the license agreement accompanying it. --> <!--- The default skin class for the Spark ComboBox component. The skin for the anchor button for a ComboBox component is defined by the ComboBoxButtonSkin class. The skin for the text input is defined by the ComboBoxTextInputSkin class. @see spark.components.ComboBox @see spark.skins.spark.ComboBoxButtonSkin @langversion 3.0 @playerversion Flash 10 @playerversion AIR 1.5 @productversion Flex 4 --> <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled=".5" xmlns:mx="library://ns.adobe.com/flex/mx"> <!-- host component --> <fx:Metadata> <![CDATA[ /** * @copy spark.skins.spark.ApplicationSkin#hostComponent */ [HostComponent("spark.components.ComboBox")] ]]> </fx:Metadata> <fx:Script fb:purpose="styling"> <![CDATA[ private var paddingChanged:Boolean; private var cornerRadiusChanged:Boolean; private var cornerRadius:Number = 0; /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */ static private const contentFill:Array = ["bgFill"]; /** * @private */ override public function get contentItems():Array {return contentFill}; /** * @private */ override protected function commitProperties():void { super.commitProperties(); if (paddingChanged && textInput) { // Push padding styles into the textDisplay var padding:Number; padding = getStyle("paddingLeft"); if (textInput.getStyle("paddingLeft") != padding) textInput.setStyle("paddingLeft", padding); padding = getStyle("paddingTop"); if (textInput.getStyle("paddingTop") != padding) textInput.setStyle("paddingTop", padding); padding = getStyle("paddingRight"); if (textInput.getStyle("paddingRight") != padding) textInput.setStyle("paddingRight", padding); padding = getStyle("paddingBottom"); if (textInput.getStyle("paddingBottom") != padding) textInput.setStyle("paddingBottom", padding); paddingChanged = false; } if (cornerRadiusChanged) { cornerRadiusChanged = false; var cr:Number = getStyle("cornerRadius"); if (openButton) openButton.setStyle("cornerRadius", cr); if (textInput) textInput.setStyle("cornerRadius", cr); } } /** * @private */ override public function styleChanged(styleProp:String):void { var allStyles:Boolean = !styleProp || styleProp == "styleName"; super.styleChanged(styleProp); if (allStyles || styleProp.indexOf("padding") == 0) { paddingChanged = true; invalidateProperties(); } if (allStyles || styleProp == "cornerRadius") { cornerRadiusChanged = true; invalidateProperties(); } } ]]> </fx:Script> <s:states> <s:State name="normal" /> <s:State name="open" /> <s:State name="disabled" /> </s:states> <!--- The PopUpAnchor control that opens the drop-down list. <p>In a custom skin class that uses transitions, set the <code>itemDestructionPolicy</code> property to <code>none</code>.</p> --> <s:PopUpAnchor id="popUp" displayPopUp.normal="false" displayPopUp.open="true" includeIn="open" left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto" popUpPosition="below" popUpWidthMatchesAnchorWidth="true"> <!--- This includes borders, background colors, scrollers, and filters. @copy spark.components.supportClasses.DropDownListBase#dropDown --> <s:Group id="dropDown" maxHeight="134" minHeight="22" > <!-- drop shadow --> <!--- @private --> <s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.45" distance="7" angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/> <!-- border --> <!--- @private --> <s:Rect id="border" left="0" right="0" top="0" bottom="0"> <s:stroke> <!--- @private --> <s:SolidColorStroke id="borderStroke" weight="1"/> </s:stroke> </s:Rect> <!-- fill --> <!--- Defines the appearance of drop-down list's background fill. --> <s:Rect id="background" left="1" right="1" top="1" bottom="1" > <s:fill> <!--- @private The color of the drop down's background fill. The default color is 0xFFFFFF. --> <s:SolidColor id="bgFill" color="0xFFFFFF" /> </s:fill> </s:Rect> <mx:DataGrid id="dataGrid" rowCount="6" left="0" top="0" bottom="0" right="0" hasFocusableChildren="true"> <mx:columns> <mx:DataGridColumn dataField="name" headerText="Name"/> <mx:DataGridColumn dataField="phone" headerText="Phone"/> <mx:DataGridColumn dataField="email" headerText="Email"/> </mx:columns> </mx:DataGrid> </s:Group> </s:PopUpAnchor> <!--- The default skin is ComboBoxButtonSkin. @copy spark.components.supportClasses.DropDownListBase#openButton @see spark.skins.spark.ComboBoxButtonSkin --> <s:Button id="openButton" width="19" right="0" top="0" bottom="0" focusEnabled="false" skinClass="spark.skins.spark.ComboBoxButtonSkin" /> <!--- @copy spark.components.ComboBox#textInput --> <s:TextInput id="textInput" left="0" right="18" top="0" bottom="0" skinClass="spark.skins.spark.ComboBoxTextInputSkin"/> </s:SparkSkin>
当然这只是一个简单的例子,而且你可以看到在皮肤文件中的dataGrid的column都是硬编码,在实际项目总你需要根据定义来生成这些column。
相关推荐
这是一个我自定义的combobox,目的是换皮肤,而且是全换。实现方式也不难,主要由static,Dialog,Listbox组合在一起实现的。滚动条的换肤是最难的,自己写需要花上一点时间。但是网上的有现成的嘛,所以借来用用。...
一个自定义的combobox,目的是换皮肤,而且是全换。实现方式也不难,主要由static,Dialog,Listbox组合在一起实现的。滚动条的换肤是最难的,自己写需要花上一点时间。但是网上的有现成的嘛,所以借来用用。希望对...
textbox:可以用“cls”属性添加自定义样式; numberbox:允许用户使用意大利货币格式; combo:添加“multivalue”属性,允许用户决定如何提交多个值; combobox:添加“reversed”属性; combobox:添加...
window:可以自定义显示样式了; window:新增“border”属性允许用户设置不同的边框样式; navpanel:新增“href”属性用以从远程服务器加载显示内容; combotree:“setValue”和“setValues”方法增加“id”和...
panel:添加“header”属性,允许用户自定义面板标题栏; menubutton:添加“hasDownArrow”属性。 New Plugin(新组件) datalist:该组件是展示列表数据的组件,用户可以对列表数据进行分组、单选、多选等各种...
ComboBox 下拉列表框 Checkbox 复选框 RadioButton 单选框 GroupBox 分组控件 Label 标签 ListBox 列表框 PictureBox 图片框 DateTimePicker 日期时间控件 ProgressBar 进度条 NumericUpDown 数字输入框 ...
17.4.4 由用户选择的皮肤 440 17.5 构建更复杂的模板 442 17.5.1 嵌套的模板 443 17.5.2 修改滚动条 445 17.5.3 控件模板示例 450 17.6 可视化状态 451 17.7 小结 452 第18章 自定义元素 453 18.1 理解WPF中的自定义...
17.4.4 由用户选择的皮肤 440 17.5 构建更复杂的模板 442 17.5.1 嵌套的模板 443 17.5.2 修改滚动条 445 17.5.3 控件模板示例 450 17.6 可视化状态 451 17.7 小结 452 第18章 自定义元素 453 18.1 理解WPF中的自定义...
15.4.4 由用户选择的皮肤 385 15.5 构建更复杂的模板 387 15.5.1 多部分模板 387 15.5.2 ItemsControl控件中的 控件模板 388 15.5.3 修改滚动条 390 15.5.4 创建自定义窗口 394 15.5.5 SimpleStyle示例项目 ...
15.4.4 由用户选择的皮肤 385 15.5 构建更复杂的模板 387 15.5.1 多部分模板 387 15.5.2 ItemsControl控件中的 控件模板 388 15.5.3 修改滚动条 390 15.5.4 创建自定义窗口 394 15.5.5 SimpleStyle示例项目 398 ...
代码里用了备份dll的方法,因此在自定义的函数中可以直接调用在内存中备份的dll代码,而不需要再把函数头部改来改去。 IOCP反弹远控客户端模型,外加上线服务端,全部代码注释! 如题。这个是IOCP远程控制软件的...
代码里用了备份dll的方法,因此在自定义的函数中可以直接调用在内存中备份的dll代码,而不需要再把函数头部改来改去。 IOCP反弹远控客户端模型,外加上线服务端,全部代码注释! 如题。这个是IOCP远程控制软件的...
代码里用了备份dll的方法,因此在自定义的函数中可以直接调用在内存中备份的dll代码,而不需要再把函数头部改来改去。 IOCP反弹远控客户端模型,外加上线服务端,全部代码注释! 如题。这个是IOCP远程控制软件的...
代码里用了备份dll的方法,因此在自定义的函数中可以直接调用在内存中备份的dll代码,而不需要再把函数头部改来改去。 IOCP反弹远控客户端模型,外加上线服务端,全部代码注释! 如题。这个是IOCP远程控制软件的...
代码里用了备份dll的方法,因此在自定义的函数中可以直接调用在内存中备份的dll代码,而不需要再把函数头部改来改去。 IOCP反弹远控客户端模型,外加上线服务端,全部代码注释! 如题。这个是IOCP远程控制软件的...
代码里用了备份dll的方法,因此在自定义的函数中可以直接调用在内存中备份的dll代码,而不需要再把函数头部改来改去。 IOCP反弹远控客户端模型,外加上线服务端,全部代码注释! 如题。这个是IOCP远程控制软件的...
1,barsetup10.exe Office 97 的工具栏(267KB) 2,ac35vb6.zip 界面控件,支持键盘、 MouseOvers 和定制图相等功能(950KB) 3,activeskin.zip 皮肤效果控件,给您的应用程序加上漂亮的皮肤(2524KB) ...
1,barsetup10.exe Office 97 的工具栏(267KB) 2,ac35vb6.zip 界面控件,支持键盘、 MouseOvers 和定制图相等功能(950KB) 3,activeskin.zip 皮肤效果控件,给您的应用程序加上漂亮的皮肤(2524KB) ...