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。

相关文章

Vue和React受控组件的区别小结

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一：直接修改事件参数写法二：通过ref引用 DOMVu
阅读更多...
Java实现将HTML文件与字符串转换为图片

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现：html 转图片完整代码场景 1：转换本地 HTML 文件为图片场景 2：转换 H
阅读更多...
Java实现在Word文档中添加文本水印和图片水印的操作指南

Java实现在Word文档中添加文本水印和图片水印的操作指南

《Java实现在Word文档中添加文本水印和图片水印的操作指南》在当今数字时代,文档的自动化处理与安全防护变得尤为重要,无论是为了保护版权、推广品牌,还是为了在文档中加入特定的标识,为Word文档添加... 目录引言Spire.Doc for Java：高效Word文档处理的利器代码实战：使用Java为Wo
阅读更多...
基于C#实现PDF转图片的详细教程

基于C#实现PDF转图片的详细教程

《基于C#实现PDF转图片的详细教程》在数字化办公场景中,PDF文件的可视化处理需求日益增长,本文将围绕Spire.PDFfor.NET这一工具,详解如何通过C#将PDF转换为JPG、PNG等主流图片... 目录引言一、组件部署二、快速入门：PDF 转图片的核心 C# 代码三、分辨率设置 - 清晰度的决定因
阅读更多...
Python从Word文档中提取图片并生成PPT的操作代码

Python从Word文档中提取图片并生成PPT的操作代码

《Python从Word文档中提取图片并生成PPT的操作代码》在日常办公场景中,我们经常需要从Word文档中提取图片,并将这些图片整理到PowerPoint幻灯片中,手动完成这一任务既耗时又容易出错,... 目录引言背景与需求解决方案概述代码解析代码核心逻辑说明总结引言在日常办公场景中，我们经常需要从 W
阅读更多...
使用Python实现无损放大图片功能

使用Python实现无损放大图片功能

《使用Python实现无损放大图片功能》本文介绍了如何使用Python的Pillow库进行无损图片放大,区分了JPEG和PNG格式在放大过程中的特点,并给出了示例代码,JPEG格式可能受压缩影响,需先... 目录一、什么是无损放大？二、实现方法步骤1：读取图片步骤2：无损放大图片步骤3：保存图片三、示php
阅读更多...
MySQL设置密码复杂度策略的完整步骤(附代码示例)

MySQL设置密码复杂度策略的完整步骤(附代码示例)

《MySQL设置密码复杂度策略的完整步骤(附代码示例)》MySQL密码策略还可能包括密码复杂度的检查,如是否要求密码包含大写字母、小写字母、数字和特殊字符等,：本文主要介绍MySQL设置密码复杂度... 目录前言1. 使用 validate_password 插件1.1 启用 validate_passwo
阅读更多...
Java使用Thumbnailator库实现图片处理与压缩功能

Java使用Thumbnailator库实现图片处理与压缩功能

《Java使用Thumbnailator库实现图片处理与压缩功能》Thumbnailator是高性能Java图像处理库,支持缩放、旋转、水印添加、裁剪及格式转换,提供易用API和性能优化,适合Web应... 目录1. 图片处理库Thumbnailator介绍2. 基本和指定大小图片缩放功能2.1 图片缩放的
阅读更多...
python设置环境变量路径实现过程

python设置环境变量路径实现过程

《python设置环境变量路径实现过程》本文介绍设置Python路径的多种方法：临时设置（Windows用`set`,Linux/macOS用`export`）、永久设置（系统属性或shell配置文件... 目录设置python路径的方法临时设置环境变量（适用于当前会话）永久设置环境变量（Windows系统
阅读更多...
Go语言编译环境设置教程

Go语言编译环境设置教程

《Go语言编译环境设置教程》Go语言支持高并发（goroutine）、自动垃圾回收,编译为跨平台二进制文件,云原生兼容且社区活跃,开发便捷,内置测试与vet工具辅助检测错误,依赖模块化管理,提升开发效... 目录Go语言优势下载 Go  配置编译环境配置 GOPROXYIDE 设置（VS Code）一些基本
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2