FLEX利用CSS传递数据

From: http://www.kingnare.com/auzn/article.asp?id=90

FLEX利用CSS传递数据

发现可以利用CSS来传递数据,莫不是我火星了?

点击查看DEMO

下面说一下思路:

将需要的数据写入到CSS样式表中,编译成SWF文件,供FLEX程序调用。例如,下面是给一个Canvas定义样式:

程序代码 程序代码

/* CSS file */
.MyCanvasStyle {
    borderStyle: "solid";
    borderColor: #FF6600;
    backgroundColor: #FF6600;
    backgroundAlpha: 0.2;
    /* 自定义属性 */
    textInTheCSS: "Hello, World!";
    imageURLInTheCSS: "Apple_03.png";
    imageInTheCSS: Embed("Apple_03.png");
}

前四个属性是正常的样式设置,后面三个就是自定义的了。
textInTheCSS是示例中使用的文本
imageURLInTheCSS是示例中要加载的图片路径
imageInTheCSS是示例中嵌入的图片对象

接下来在主程序中加入一个Canvas实例:

引用内容 引用内容

<mx:Canvas id="styleCanvas" styleName="MyCanvasStyle">
</mx:Canvas>

指定其styleName为自定义样式名"MyCanvasStyle"

接着再加入一个按钮,注册点击事件:

引用内容 引用内容
private function clickEvent(event:MouseEvent):void
            {
                var styleI:IEventDispatcher = StyleManager.loadStyleDeclarations("Style.swf");
                styleI.addEventListener(StyleEvent.ERROR, loadError);
                styleI.addEventListener(StyleEvent.COMPLETE, loadComplete);
            }

激活此事件后,注册样式监听并开始加载样式
当样式文件加载成功后调用事件:

引用内容 引用内容

private function loadComplete(event:StyleEvent):void
            {
                infoLabel.text = styleCanvas.getStyle("textInTheCSS");
                styleImg.source = styleCanvas.getStyle("imageInTheCSS");
                styleImg0.source = styleCanvas.getStyle("imageURLInTheCSS");
            }


上面事件处理中,通过getStyle来获得此实例的样式数据。

详细请见:

源代码

个人认为当更换样式时如果不方便再开一个线程访问服务端得到样式的其他配置数据(例如使用AS动态控制样式),就可以用这个来传递一些和样式有关的数据。

测试环境:FLEX 2 (Hotfix 2), flashplayer version:9.0.47.0, IE 6.0

Share

0 条评论

留下评论