IconUtility Component for Dynamic Run-Time Icons
I’ve seen a number of emails on the flexcoders mailing list and even a few blog posts that are asking a very specific question: “How do you use run-time loaded images as the icon for buttons, containers, and related components?”. The answer they’ve gotten so far is that you can’t, at least not without creating a lot of custom components. The icon styles built into the Flex framework were only intended for embedded graphics. Although internally they can work with almost any DisplayObject as the icon, the styles and properties themselves are typed as Class. So how can you turn a DisplayObject into a Class?
To be honest, I hit my head against the wall on this one for a handful of evenings. In the end I came up with two workable solutions. Arguably the cleanest way would be to take the run-time loaded graphics, dynamically generate the bytes for a swf which contains that image as a BitmapAsset, and then load the swf to retrieve the generated Class. This would allow you to assign an honest to goodness BitmapAsset Class to the icon property. The problem I had with this method is that it wouldn’t be very easy for developers to use. Even if I created a class to generate the swf from a Loader, there would be some ActionScript involved for the developer to wait for the swf to be loaded and assign the resulting class to the right place. After thinking it through, I decided not to implement this solution. Instead, I found a way to turn the original question on it’s head.
After stepping through the code that handles the icon assignment a few times, I realized the original question, “How can you turn a DisplayObject into a Class?” should really be phrased “How can you reference a Class which displays the right DisplayObject when instantiated?”. This is an easier problem to solve. For my first attempt, I’ve created the IconUtility class. It includes a static method which accepts a url and a component reference, then returns a reference to the IconUtility class itself (which happens to extend BitmapAsset). When the class is instantiated, it will use the information you have passed in to determine which image should be displayed. I’ve decided to release it through my blog for now, since it is still unpolished and a bit of a hack.
<mx:Button id="example" label="Example" icon="{IconUtility.getClass(example, 'http://www.exampledomain.com/image.jpg')}" />
Example: IconAssociations
Download: IconUtility Class (302 kb)
http://blog.benstucki.net/?p=42
分享到:
相关推荐
You still need to run this command to link the vector icons' assets # iOS Only npx pod - install 博览会版本: "react-native-dynamic-vector-icons" : "WrathChaos/react-native-dynamic-vector-icons#expo...
安装npm run install react-dynamic-vector-icons# oryarn add react-dynamic-vector-icons用法import { CheckBoard , DoubleCheck } from 'react-dynamic-vector-icons' ;export default ( ) => ( < div> ...
前端项目-webicons,WebIcons是一组独立于分辨率的社交图标,可在您的网站上使用。
官方离线安装包,亲测可用。使用rpm -ivh [rpm完整包名] 进行安装
前端项目-weather-icons,215 weather themed icons inspired by Font Awesome and ready for Bootstrap
element-icons.woff
react-native-icons ,react-native-icons 是 React Native 简单易用的图标组件。当前支持 4...
谷歌官方提供的icon,里面各种不同的icon,不同分辨率下都有
flat-ui-icons-regular.ttf
react-native-vector-icons的简单使用, index.ios.js文件 等主要代码
官方离线安装包,亲测可用。使用rpm -ivh [rpm完整包名] 进行安装
前端项目-angular-material-icons,AngularJS指令使用具有自定义填充颜色和大小的材料设计图标。
npm install react-bootstrap-icons --save 要么 yarn add react-bootstrap-icons 用法 import React from ' react ' ; import { ArrowRight } from ' react-bootstrap-icons ' ; export default function App () {...
TOON-XP Icons系列图标,美观大方
安卓最新开发图标material-design-icons-3.0.1,里面包含所有现如今的按合作开发图标,各种dpi
Atom-Atom-File-Icons.zip,A collection of custom Atom file-type iconsatom的自定义文件类型图标的集合,atom是一个用web技术构建的开源文本编辑器。
前端项目-simple-icons,PNG and SVG icons for popular brands
uniapp默认的图标库 uniapp默认的图标库 uniapp默认的图标库 uniapp默认的图标库 uniapp默认的图标库
vite-plugin-svg-icons English |用于生成svg精灵图。特征预加载项目运行时会生成所有图标,并且只需要操作一次dom。 高性能的内置缓存,只有在修改文件后才会重新生成。安装(纱线或npm) 节点版本: > = 12.0.0 ...