Flex4 Spark组件ButtonBar设置图片

2023-12-01 12:58

本文主要是介绍Flex4 Spark组件ButtonBar设置图片,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

主程序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;
   /* item-renderer:ClassReference("test.renderers.ButtonBarRenderer"); */
   /* skin-class:"test.skin.CustomButtonBarSkin"; */
  }
 </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;
   }
   
   /* Define the skin elements that should not be colorized.
   For toggle button, the graphics are colorized but the label is not. */
   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>

 

运行效果图如下:

 

 

这篇关于Flex4 Spark组件ButtonBar设置图片的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/441241

相关文章

linux hostname设置全过程

《linuxhostname设置全过程》:本文主要介绍linuxhostname设置全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录查询hostname设置步骤其它相关点hostid/etc/hostsEDChina编程A工具license破解注意事项总结以RHE

Python设置Cookie永不超时的详细指南

《Python设置Cookie永不超时的详细指南》Cookie是一种存储在用户浏览器中的小型数据片段,用于记录用户的登录状态、偏好设置等信息,下面小编就来和大家详细讲讲Python如何设置Cookie... 目录一、Cookie的作用与重要性二、Cookie过期的原因三、实现Cookie永不超时的方法(一)

利用Python脚本实现批量将图片转换为WebP格式

《利用Python脚本实现批量将图片转换为WebP格式》Python语言的简洁语法和库支持使其成为图像处理的理想选择,本文将介绍如何利用Python实现批量将图片转换为WebP格式的脚本,WebP作为... 目录简介1. python在图像处理中的应用2. WebP格式的原理和优势2.1 WebP格式与传统

Qt 设置软件版本信息的实现

《Qt设置软件版本信息的实现》本文介绍了Qt项目中设置版本信息的三种常用方法,包括.pro文件和version.rc配置、CMakeLists.txt与version.h.in结合,具有一定的参考... 目录在运行程序期间设置版本信息可以参考VS在 QT 中设置软件版本信息的几种方法方法一:通过 .pro

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,

Python如何去除图片干扰代码示例

《Python如何去除图片干扰代码示例》图片降噪是一个广泛应用于图像处理的技术,可以提高图像质量和相关应用的效果,:本文主要介绍Python如何去除图片干扰的相关资料,文中通过代码介绍的非常详细,... 目录一、噪声去除1. 高斯噪声(像素值正态分布扰动)2. 椒盐噪声(随机黑白像素点)3. 复杂噪声(如伪

Python中图片与PDF识别文本(OCR)的全面指南

《Python中图片与PDF识别文本(OCR)的全面指南》在数据爆炸时代,80%的企业数据以非结构化形式存在,其中PDF和图像是最主要的载体,本文将深入探索Python中OCR技术如何将这些数字纸张转... 目录一、OCR技术核心原理二、python图像识别四大工具库1. Pytesseract - 经典O

PostgreSQL 默认隔离级别的设置

《PostgreSQL默认隔离级别的设置》PostgreSQL的默认事务隔离级别是读已提交,这是其事务处理系统的基础行为模式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录一 默认隔离级别概述1.1 默认设置1.2 各版本一致性二 读已提交的特性2.1 行为特征2.2

一文详解MySQL如何设置自动备份任务

《一文详解MySQL如何设置自动备份任务》设置自动备份任务可以确保你的数据库定期备份,防止数据丢失,下面我们就来详细介绍一下如何使用Bash脚本和Cron任务在Linux系统上设置MySQL数据库的自... 目录1. 编写备份脚本1.1 创建并编辑备份脚本1.2 给予脚本执行权限2. 设置 Cron 任务2

mtu设置多少网速最快? 路由器MTU设置最佳网速的技巧

《mtu设置多少网速最快?路由器MTU设置最佳网速的技巧》mtu设置多少网速最快?想要通过设置路由器mtu获得最佳网速,该怎么设置呢?下面我们就来看看路由器MTU设置最佳网速的技巧... 答:1500 MTU值指的是在网络传输中数据包的最大值,合理的设置MTU 值可以让网络更快!mtu设置可以优化不同的网