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 FastAPI+Celery+RabbitMQ实现分布式图片水印处理系统

Python FastAPI+Celery+RabbitMQ实现分布式图片水印处理系统

《PythonFastAPI+Celery+RabbitMQ实现分布式图片水印处理系统》这篇文章主要为大家详细介绍了PythonFastAPI如何结合Celery以及RabbitMQ实现简单的分布式... 实现思路FastAPI 服务器Celery 任务队列RabbitMQ 作为消息代理定时任务处理完整
阅读更多...
使用C#代码在PDF文档中添加、删除和替换图片

使用C#代码在PDF文档中添加、删除和替换图片

《使用C#代码在PDF文档中添加、删除和替换图片》在当今数字化文档处理场景中,动态操作PDF文档中的图像已成为企业级应用开发的核心需求之一,本文将介绍如何在.NET平台使用C#代码在PDF文档中添加、... 目录引言用C#添加图片到PDF文档用C#删除PDF文档中的图片用C#替换PDF文档中的图片引言在当
阅读更多...
详解C#如何提取PDF文档中的图片

详解C#如何提取PDF文档中的图片

《详解C#如何提取PDF文档中的图片》提取图片可以将这些图像资源进行单独保存,方便后续在不同的项目中使用,下面我们就来看看如何使用C#通过代码从PDF文档中提取图片吧... 当 PDF 文件中包含有价值的图片，如艺术画作、设计素材、报告图表等，提取图片可以将这些图像资源进行单独保存，方便后续在不同的项目中使
阅读更多...
Java实现文件图片的预览和下载功能

Java实现文件图片的预览和下载功能

《Java实现文件图片的预览和下载功能》这篇文章主要为大家详细介绍了如何使用Java实现文件图片的预览和下载功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... Java实现文件（图片）的预览和下载 @ApiOperation("访问文件") @GetMapping("
阅读更多...
PyCharm如何设置新建文件默认为LF换行符

PyCharm如何设置新建文件默认为LF换行符

《PyCharm如何设置新建文件默认为LF换行符》：本文主要介绍PyCharm如何设置新建文件默认为LF换行符问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录PyCharm设置新建文件默认为LF换行符设置换行符修改换行符总结PyCharm设置新建文件默认为LF
阅读更多...
Vue中组件之间传值的六种方式（完整版）

Vue中组件之间传值的六种方式（完整版）

《Vue中组件之间传值的六种方式（完整版）》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值（通过事件形式）方
阅读更多...
Linux上设置Ollama服务配置(常用环境变量)

Linux上设置Ollama服务配置(常用环境变量)

《Linux上设置Ollama服务配置(常用环境变量)》本文主要介绍了Linux上设置Ollama服务配置(常用环境变量),Ollama提供了多种环境变量供配置,如调试模式、模型目录等,下面就来介绍一... 目录在 linux 上设置环境变量配置 OllamPOgxSRJfa手动安装安装特定版本查看日志在
阅读更多...
基于Python开发批量提取Excel图片的小工具

基于Python开发批量提取Excel图片的小工具

《基于Python开发批量提取Excel图片的小工具》这篇文章主要为大家详细介绍了如何使用Python中的openpyxl库开发一个小工具,可以实现批量提取Excel图片,有需要的小伙伴可以参考一下... 目前有一个需求，就是批量读取当前目录下所有文件夹里的Excel文件，去获取出Excel文件中的图片，并
阅读更多...
Java实现数据库图片上传与存储功能

Java实现数据库图片上传与存储功能

《Java实现数据库图片上传与存储功能》在现代的Web开发中,上传图片并将其存储在数据库中是常见的需求之一,本文将介绍如何通过Java实现图片上传,存储到数据库的完整过程,希望对大家有所帮助... 目录1. 项目结构2. 数据库表设计3. 实现图片上传功能3.1 文件上传控制器3.2 图片上传服务4. 实现
阅读更多...
Spring组件初始化扩展点BeanPostProcessor的作用详解

Spring组件初始化扩展点BeanPostProcessor的作用详解

《Spring组件初始化扩展点BeanPostProcessor的作用详解》本文通过实战案例和常见应用场景详细介绍了BeanPostProcessor的使用,并强调了其在Spring扩展中的重要性,感... 目录一、概述二、BeanPostProcessor的作用三、核心方法解析1、postProcessB
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2