Flex4 Spark组件ButtonBar设置图片

2023-12-01 12:58
文章标签 设置 组件 图片 spark flex4 buttonbar

本文主要是介绍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。

相关文章

python实现svg图片转换为png和gif

python实现svg图片转换为png和gif

《python实现svg图片转换为png和gif》这篇文章主要为大家详细介绍了python如何实现将svg图片格式转换为png和gif,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录python实现svg图片转换为png和gifpython实现图片格式之间的相互转换延展：基于Py
阅读更多...
使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取
阅读更多...
Python实现图片分割的多种方法总结

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)
阅读更多...
C#实现将Excel表格转换为图片(JPG/ PNG)

C#实现将Excel表格转换为图片(JPG/ PNG)

《C#实现将Excel表格转换为图片(JPG/PNG)》Excel表格可能会因为不同设备或字体缺失等问题,导致格式错乱或数据显示异常,转换为图片后,能确保数据的排版等保持一致,下面我们看看如何使用C... 目录通过C# 转换Excel工作表到图片通过C# 转换指定单元格区域到图片知识扩展C# 将 Excel
阅读更多...
Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》：本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例，但是返回n
阅读更多...
JS+HTML实现在线图片水印添加工具

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的
阅读更多...
C#TextBox设置提示文本方式(SetHintText)

C#TextBox设置提示文本方式(SetHintText)

《C#TextBox设置提示文本方式(SetHintText)》：本文主要介绍C#TextBox设置提示文本方式(SetHintText),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑... 目录C#TextBox设置提示文本效果展示核心代码总结C#TextBox设置提示文本效果展示核心代
阅读更多...
使用Node.js制作图片上传服务的详细教程

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例
阅读更多...
SpringQuartz定时任务核心组件JobDetail与Trigger配置

SpringQuartz定时任务核心组件JobDetail与Trigger配置

《SpringQuartz定时任务核心组件JobDetail与Trigger配置》Spring框架与Quartz调度器的集成提供了强大而灵活的定时任务解决方案,本文主要介绍了SpringQuartz定... 目录引言一、Spring Quartz基础架构1.1 核心组件概述1.2 Spring集成优势二、J
阅读更多...
Pyserial设置缓冲区大小失败的问题解决

Pyserial设置缓冲区大小失败的问题解决

《Pyserial设置缓冲区大小失败的问题解决》本文主要介绍了Pyserial设置缓冲区大小失败的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录问题描述原因分析解决方案问题描述使用set_buffer_size()设置缓冲区大小后，buf
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2