- 浏览: 98300 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
chensong215:
无法获取到ProgressEvent中的bytesTotal
自定义DownloadProgressBar -
qq2464785999:
非常感谢。
测试后,发现要用相对路径的话,好像要这么写
va ...
Flex写XML文件
Flex4 Spark组件ButtonBar设置图片 (2012-02-23 16:51:11)转载▼标签: 杂谈 分类: flex
主程序ButtonBarTest源代码如下:
<?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" >
<fx:Declarations>
<!--ButtonBar 数据源-->
<s:ArrayCollection id="arr">
<fx:Object label="Button" icon="{buttonIcon}" />
<fx:Object label="ButtonBar" icon="{buttonBarIcon}" />
<fx:Object label="CheckBox" icon="{checkBoxIcon}" />
<fx:Object label="ColorPicker" icon="{colorPickerIcon}" />
</s:ArrayCollection>
</fx:Declarations>
<fx:Script>
<![CDATA[
[Bindable]
[Embed(source="assets/test/buttonbar/Button.png")]
private var buttonIcon:Class;
[Bindable]
[Embed(source="assets/test/buttonbar/ButtonBar.png")]
private var buttonBarIcon:Class;
[Bindable]
[Embed(source="assets/test/buttonbar/CheckBox.png")]
private var checkBoxIcon:Class;
[Bindable]
[Embed(source="assets/test/buttonbar/ColorPicker.png")]
private var colorPickerIcon:Class;
]]>
</fx:Script>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
#buttonBar{
font-size: 18;
}
</fx:Style>
<!-- The data provider has an "icon" property. -->
<s:ButtonBar id="buttonBar"
skinClass="test.skin.CustomButtonBarSkin"
dataProvider="{arr}"
height="64" width="100%"
/>
</s:Application>
自定义ButtonBarSkin CustomButtonBarSkin源代码如下:
<?xml version="1.0" encoding="utf-8"?>
<s:Skin name="CustomButtonBarSkin"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
alpha.disabled="0.5">
<!-- states -->
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<fx:Metadata>
<![CDATA[
[HostComponent("spark.components.ButtonBar")]
]]>
</fx:Metadata>
<fx:Declarations>
<fx:Component id="middleButton">
<s:ButtonBarButton skinClass="test.skin.CustomButtonBarButtonSkin" />
</fx:Component>
</fx:Declarations>
<s:DataGroup id="dataGroup" width="100%" height="100%">
<s:layout>
<s:ButtonBarHorizontalLayout gap="-1"/>
</s:layout>
</s:DataGroup>
</s:Skin>
自定义ButtonBarButtonSkin CustomButtonBarButtonSkin源代码如下:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/28/displaying-icons-in-a-spark-buttonbar-control-in-flex-4/ -->
<s:SparkSkin name="CustomButtonBarButtonSkin"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
minWidth="21" minHeight="21"
alpha.disabledStates="0.5">
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" stateGroups="overStates" />
<s:State name="down" stateGroups="downStates" />
<s:State name="disabled" stateGroups="disabledStates" />
<s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
<s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
<s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
<s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
</s:states>
<!-- host component -->
<fx:Metadata>
<![CDATA[
[HostComponent("spark.components.ButtonBarButton")]
]]>
</fx:Metadata>
<fx:Script>
<![CDATA[
import spark.components.ButtonBar;
import mx.events.FlexEvent;
import spark.components.ButtonBarButton;
protected function gr_creationComplete(evt:FlexEvent):void {
var dataObj:Object = hostComponent.data;
img.source = dataObj.icon;
hostComponent.toolTip = dataObj.label;
}
static private const exclusions:Array = ["labelDisplay"];
override public function get colorizeExclusions():Array {return exclusions;}
]]>
</fx:Script>
<!-- layer 1: shadow -->
<s:Rect left="0" right="0" bottom="-1" height="1">
<s:fill>
<s:SolidColor color="0x000000"
color.downStates="0xFFFFFF"
alpha="0.07"
alpha.downStates="0.5" />
</s:fill>
</s:Rect>
<!-- layer 2: fill -->
<s:Rect left="1" right="1" top="1" bottom="1">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF"
color.selectedUpStates="0xBBBDBD"
color.overStates="0xBBBDBD"
color.downStates="0xAAAAAA"
alpha="0.85"
alpha.overAndSelected="1" />
<s:GradientEntry color="0xD8D8D8"
color.selectedUpStates="0x9FA0A1"
color.over="0x9FA0A1"
color.overAndSelected="0x8E8F90"
color.downStates="0x929496"
alpha="0.85"
alpha.overAndSelected="1" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 3: fill lowlight -->
<s:Rect left="1" right="1" bottom="1" height="9">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x000000" alpha="0.0099" />
<s:GradientEntry color="0x000000" alpha="0.0627" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 4: fill highlight -->
<s:Rect left="1" right="1" top="1" height="9">
<s:fill>
<s:SolidColor color="0xFFFFFF"
alpha="0.33"
alpha.selectedUpStates="0.22"
alpha.overStates="0.22"
alpha.downStates="0.12" />
</s:fill>
</s:Rect>
<!-- layer 5: highlight stroke (all states except down) -->
<s:Rect left="1" right="1" top="1" bottom="1"
excludeFrom="downStates">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0xFFFFFF"
alpha.overStates="0.22"
alpha.selectedUpStates="0.33" />
<s:GradientEntry color="0xD8D8D8"
alpha.overStates="0.22"
alpha.selectedUpStates="0.33" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 6: highlight stroke (down state only) -->
<s:Rect left="1" top="1" bottom="1" width="1"
includeIn="downStates, selectedUpStates, overAndSelected">
<s:fill>
<s:SolidColor color="0x000000" alpha="0.07" />
</s:fill>
</s:Rect>
<s:Rect right="1" top="1" bottom="1" width="1"
includeIn="downStates, selectedUpStates, overAndSelected">
<s:fill>
<s:SolidColor color="0x000000" alpha="0.07" />
</s:fill>
</s:Rect>
<s:Rect left="1" top="1" right="1" height="1"
includeIn="downStates, selectedUpStates, overAndSelected">
<s:fill>
<s:SolidColor color="0x000000" alpha="0.25" />
</s:fill>
</s:Rect>
<s:Rect left="1" top="2" right="1" height="1"
includeIn="downStates, selectedUpStates, overAndSelected">
<s:fill>
<s:SolidColor color="0x000000" alpha="0.09" />
</s:fill>
</s:Rect>
<!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
<s:Rect left="0" right="0" top="0" bottom="0"
width="69" height="20">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0x000000"
alpha="0.5625"
alpha.down="0.6375"
alpha.selectedStates="0.6375" />
<s:GradientEntry color="0x000000"
alpha="0.75"
alpha.down="0.85"
alpha.selectedStates="0.85" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 8: icon -->
<s:Graphic id="gr"
creationComplete="gr_creationComplete(event);"
horizontalCenter="0" verticalCenter="0">
<s:BitmapImage id="img" />
</s:Graphic>
<!--layer 9: label-->
<s:Label id="labelDisplay"
textAlign="center"
verticalAlign="middle"
maxDisplayedLines="1"
horizontalCenter="0" verticalCenter="{gr.height}"
left="10" right="10" top="2" bottom="2">
</s:Label>
</s:SparkSkin>
主程序ButtonBarTest源代码如下:
<?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" >
<fx:Declarations>
<!--ButtonBar 数据源-->
<s:ArrayCollection id="arr">
<fx:Object label="Button" icon="{buttonIcon}" />
<fx:Object label="ButtonBar" icon="{buttonBarIcon}" />
<fx:Object label="CheckBox" icon="{checkBoxIcon}" />
<fx:Object label="ColorPicker" icon="{colorPickerIcon}" />
</s:ArrayCollection>
</fx:Declarations>
<fx:Script>
<![CDATA[
[Bindable]
[Embed(source="assets/test/buttonbar/Button.png")]
private var buttonIcon:Class;
[Bindable]
[Embed(source="assets/test/buttonbar/ButtonBar.png")]
private var buttonBarIcon:Class;
[Bindable]
[Embed(source="assets/test/buttonbar/CheckBox.png")]
private var checkBoxIcon:Class;
[Bindable]
[Embed(source="assets/test/buttonbar/ColorPicker.png")]
private var colorPickerIcon:Class;
]]>
</fx:Script>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
#buttonBar{
font-size: 18;
}
</fx:Style>
<!-- The data provider has an "icon" property. -->
<s:ButtonBar id="buttonBar"
skinClass="test.skin.CustomButtonBarSkin"
dataProvider="{arr}"
height="64" width="100%"
/>
</s:Application>
自定义ButtonBarSkin CustomButtonBarSkin源代码如下:
<?xml version="1.0" encoding="utf-8"?>
<s:Skin name="CustomButtonBarSkin"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
alpha.disabled="0.5">
<!-- states -->
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<fx:Metadata>
<![CDATA[
[HostComponent("spark.components.ButtonBar")]
]]>
</fx:Metadata>
<fx:Declarations>
<fx:Component id="middleButton">
<s:ButtonBarButton skinClass="test.skin.CustomButtonBarButtonSkin" />
</fx:Component>
</fx:Declarations>
<s:DataGroup id="dataGroup" width="100%" height="100%">
<s:layout>
<s:ButtonBarHorizontalLayout gap="-1"/>
</s:layout>
</s:DataGroup>
</s:Skin>
自定义ButtonBarButtonSkin CustomButtonBarButtonSkin源代码如下:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/28/displaying-icons-in-a-spark-buttonbar-control-in-flex-4/ -->
<s:SparkSkin name="CustomButtonBarButtonSkin"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
minWidth="21" minHeight="21"
alpha.disabledStates="0.5">
<!-- states -->
<s:states>
<s:State name="up" />
<s:State name="over" stateGroups="overStates" />
<s:State name="down" stateGroups="downStates" />
<s:State name="disabled" stateGroups="disabledStates" />
<s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
<s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
<s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
<s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
</s:states>
<!-- host component -->
<fx:Metadata>
<![CDATA[
[HostComponent("spark.components.ButtonBarButton")]
]]>
</fx:Metadata>
<fx:Script>
<![CDATA[
import spark.components.ButtonBar;
import mx.events.FlexEvent;
import spark.components.ButtonBarButton;
protected function gr_creationComplete(evt:FlexEvent):void {
var dataObj:Object = hostComponent.data;
img.source = dataObj.icon;
hostComponent.toolTip = dataObj.label;
}
static private const exclusions:Array = ["labelDisplay"];
override public function get colorizeExclusions():Array {return exclusions;}
]]>
</fx:Script>
<!-- layer 1: shadow -->
<s:Rect left="0" right="0" bottom="-1" height="1">
<s:fill>
<s:SolidColor color="0x000000"
color.downStates="0xFFFFFF"
alpha="0.07"
alpha.downStates="0.5" />
</s:fill>
</s:Rect>
<!-- layer 2: fill -->
<s:Rect left="1" right="1" top="1" bottom="1">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF"
color.selectedUpStates="0xBBBDBD"
color.overStates="0xBBBDBD"
color.downStates="0xAAAAAA"
alpha="0.85"
alpha.overAndSelected="1" />
<s:GradientEntry color="0xD8D8D8"
color.selectedUpStates="0x9FA0A1"
color.over="0x9FA0A1"
color.overAndSelected="0x8E8F90"
color.downStates="0x929496"
alpha="0.85"
alpha.overAndSelected="1" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 3: fill lowlight -->
<s:Rect left="1" right="1" bottom="1" height="9">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0x000000" alpha="0.0099" />
<s:GradientEntry color="0x000000" alpha="0.0627" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 4: fill highlight -->
<s:Rect left="1" right="1" top="1" height="9">
<s:fill>
<s:SolidColor color="0xFFFFFF"
alpha="0.33"
alpha.selectedUpStates="0.22"
alpha.overStates="0.22"
alpha.downStates="0.12" />
</s:fill>
</s:Rect>
<!-- layer 5: highlight stroke (all states except down) -->
<s:Rect left="1" right="1" top="1" bottom="1"
excludeFrom="downStates">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0xFFFFFF"
alpha.overStates="0.22"
alpha.selectedUpStates="0.33" />
<s:GradientEntry color="0xD8D8D8"
alpha.overStates="0.22"
alpha.selectedUpStates="0.33" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 6: highlight stroke (down state only) -->
<s:Rect left="1" top="1" bottom="1" width="1"
includeIn="downStates, selectedUpStates, overAndSelected">
<s:fill>
<s:SolidColor color="0x000000" alpha="0.07" />
</s:fill>
</s:Rect>
<s:Rect right="1" top="1" bottom="1" width="1"
includeIn="downStates, selectedUpStates, overAndSelected">
<s:fill>
<s:SolidColor color="0x000000" alpha="0.07" />
</s:fill>
</s:Rect>
<s:Rect left="1" top="1" right="1" height="1"
includeIn="downStates, selectedUpStates, overAndSelected">
<s:fill>
<s:SolidColor color="0x000000" alpha="0.25" />
</s:fill>
</s:Rect>
<s:Rect left="1" top="2" right="1" height="1"
includeIn="downStates, selectedUpStates, overAndSelected">
<s:fill>
<s:SolidColor color="0x000000" alpha="0.09" />
</s:fill>
</s:Rect>
<!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
<s:Rect left="0" right="0" top="0" bottom="0"
width="69" height="20">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0x000000"
alpha="0.5625"
alpha.down="0.6375"
alpha.selectedStates="0.6375" />
<s:GradientEntry color="0x000000"
alpha="0.75"
alpha.down="0.85"
alpha.selectedStates="0.85" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!-- layer 8: icon -->
<s:Graphic id="gr"
creationComplete="gr_creationComplete(event);"
horizontalCenter="0" verticalCenter="0">
<s:BitmapImage id="img" />
</s:Graphic>
<!--layer 9: label-->
<s:Label id="labelDisplay"
textAlign="center"
verticalAlign="middle"
maxDisplayedLines="1"
horizontalCenter="0" verticalCenter="{gr.height}"
left="10" right="10" top="2" bottom="2">
</s:Label>
</s:SparkSkin>
发表评论
-
flex 自定义多个命名空间以及标签名
2013-01-22 15:21 1276flex 自定义多个命名空 ... -
FLEX中使用AS动态创建DataGrid
2013-01-09 16:24 888FLEX中使用AS动态创建DataGrid 2010年2月6日 ... -
flex与flash之间相互调用
2012-12-12 12:39 614http://www.cnblogs.com/kaixuan/ ... -
Flex与Flex创建的swf通信
2012-12-12 10:16 710加载子SWF的Flex程序代码 <?xml vers ... -
[AS3]加载视频(FLV)文件
2012-12-06 15:11 849[AS3]加载视频(FLV)文件 分类: FLEX/CS3-- ... -
通过FileReference打开本地图片崩溃的解决方法
2012-12-06 14:02 707通过FileReference打开本地图片崩溃的解决方法 最近 ... -
使用FileReference的load()方法加载本地图片
2012-12-06 13:56 9011、要想使用FileReference的load()方法和da ... -
[AS3]Bitmap序列化(将BitmapData保存为原生Binary/ByteArray)
2012-12-06 13:48 750[AS3]Bitmap序列化(将BitmapData保存为原生 ... -
as3 画五角星算法
2012-12-05 16:49 2601as3 画五角星算法 阅读:10次 时间:2012-03- ... -
flex嵌入完整html
2012-11-29 11:18 803有时候我们需要在Flex应用中嵌入HTML代码,根据嵌入HTM ... -
flex4 textArea的htmlText属性
2012-11-29 11:13 3101它现在包含Text布局框架(Text Layout Frame ... -
Tooltip应用
2012-11-29 11:11 708创建ToolTip: var errorToolTip:To ... -
数据绑定显示问题
2012-10-27 12:11 641数据绑定实时变化。 XMLListCollection 可以变 ... -
待解决问题
2012-09-18 23:48 6971.仪表盘 2.渐变填充的使用 3.发光效果的完美运用 能在一 ... -
as3加载外部图片的两种方式
2012-09-09 11:46 991package net.burchin.loading { ... -
公式as3
2012-09-06 18:13 0as3 1人收藏此文章, 我要收藏 发表于1年前(2011-0 ... -
Flex中多线程的实现
2012-09-06 10:49 3472破阵子_如是我闻 如是我闻。一时佛在舍卫国,祗树给孤独园.. ... -
自定义column renderer
2012-08-09 15:07 906<?xml version="1.0" ... -
drowshadowFilter
2012-08-09 15:05 651DropShadowFilter 类,在Flash中为各种对象 ... -
123123
2012-08-08 17:16 0http://www.oschina.net/code/sni ...
相关推荐
NULL 博文链接:https://chenhailong.iteye.com/blog/1915623
为了方便使用,将Spark组件单独剥离出来,使用方案如下:(只限于spark组件) 引入: add silvergreen-spark-2.0.swc to libs 使用(SWC方案): 在IDE(如:Flash Builder)里面,增加一个编译参数: -theme ../...
关于Button 的使用,还有一些第方控件,有兴趣者可以拿来研究研究...
内含Janus.Windows.UI.v4.dll、Janus.Windows.TimeLine.v4.dll、Janus.Windows.Schedule.v4.dll、Janus.Windows.Ribbon.v4.dll、Janus.Windows....Windows.CalendarCombo.v4.dll、Janus.Windows.ButtonBar.v4.dll...
DevPower-buttonbar.zip
此资源介绍的相关内容有:按钮组件 RaisedButton、FlatButton、OutlineButton、IconButton、ButtonBar以及自定义按钮组件 FloatingActionButton实现类似闲鱼App底部导航凸起按钮。 适合新手学习移动端开发,也适合老...
本文实例讲述了Android编程实现将ButtonBar放在屏幕底部的方法。分享给大家供大家参考,具体如下: 前面一篇《Android编程实现将tab选项卡放在屏幕底部的方法》提到ButtonBar的方式写底部button,试了试,看起来外观...
bsfd皮肤资源修改bsfd皮肤资源修改bsfd皮肤资源修改
角度按钮栏 Hey there.. this is nothing, but a simple button bar that charms your data It simply contains two attribute. one is 'source' and another one is 'options'.'source' is array of data, that can...
整套janus动态链接库dll:Janus Windows ButtonBar v3 dll Janus Windows Common v3 dll Janus Windows UI v3 dll
在 Flutter 里有很多的 Button,包括了:MaterialButton、RaisedButton、FloatingActionButton、FlatButton、IconButton、ButtonBar、DropdownButton 等。 一般常用的 Button 是 MaterialButton、IconButton、...
在ButtonBar中的脚本,需要使用\n来打上回车 4>下面是一个登陆自动处理例子: >>> "# " cd /home/L >>> "# " cd myproject >>> "# " make rebuild 上面例子的意思是,登陆后,定位到自己的开发工程目录,然后执行...
自己研究总结的方法,包括所缺的控件,一般不会缺少的
style TextAppearance_AppCompat_Display4 style TextAppearance_AppCompat_Headline style TextAppearance_AppCompat_Inverse style TextAppearance_AppCompat_Large style TextAppearance_AppCompat_Large_Inverse...
有点类似IPhone里的布局了,呵呵~(其实后来发现这个应该不是用TAB做的,而是ButtonBar做出来的吧,或者是他重写了TAB?总之不是简单地将TAB放置底端了)。 要放置底端,那么Android自带的例程是不可以做到的(例程...
? ? ? 圯 咣曹 苒 鄄苘 苘 捋圯 苘懿圻 卟圹圹圹鄄 苘懿圹坜圹曹苘 懿圹? 苘苘槽圯哌圹苘 哌卟圹圹圹圹 槽?圹圹鄄咣圹坜圹哌槽圹?...圹圹哌咣圹蒇圹 卟鄄苘 ... (TM) similar to the Windows Explorer....