zoukankan      html  css  js  c++  java
  • 一把锋利的匕首:利用数据绑定语法糖为Flash应用提供富JS接口

        一寸长,一寸强,Silverlight就像一把屠龙长枪,在进行复杂商务型项目时所向披靡。一寸短,一寸险,Flash就像一把锋利的匕首,在进行轻量级开发时游刃有余。本文续《使用铁哥SmartFlash快速开发方案:66行代码搞定抽奖程序!》,使用Flex的数据绑定语法糖开发富接口供JS调用。

        第一步,在主应用中,将需要提供接口的字段都设为可绑定的,例如:

    [Bindable] public var title:String = "大气压力";
    [Bindable] public var titleFontSize:int = 12;
    [Bindable] public var titleY:int = 20;
    [Bindable] public var valueUnit:String = "kpa";
    [Bindable] public var valueFontSize:int = 12;
    [Bindable] public var valueY:int = 470;
    [Bindable] public var meterY:Number = 60;
    [Bindable] public var meterWidth:int = 40;
    [Bindable] public var meterHeight:Number = 400;
    [Bindable] public var scaleUnit:String = "°";
    [Bindable] public var maxLeftScaleValue:int = 115;
    [Bindable] public var minLeftScaleValue:int = 80;
    [Bindable] public var maxRightScaleValue:int = 115;
    [Bindable] public var minRightScaleValue:int = 80;
    [Bindable] public var leftScaleGrids:int = 7;
    [Bindable] public var leftSubScaleGrids:int = 5;
    [Bindable] public var rightScaleGrids:int = 6;
    [Bindable] public var rightSubScaleGrids:int = 4;
    [Bindable] public var leftValue:Number = 100;
    [Bindable] public var scaleValueFontSize:int = 9;
    [Bindable] public var leftUnit:String = "";
    [Bindable] public var rightUnit:String = "";
    [Bindable] public var leftUnitX:int = 0;
    [Bindable] public var leftUnitY:int = 0;
    [Bindable] public var rightUnitX:int = 0;
    [Bindable] public var rightUnitY:int = 0;
    [Bindable] public var unitFontSize:int = 9;
    [Bindable] public var showMaxScaleValue:Boolean = true;
    [Bindable] public var showAnimation:Boolean = true;
    [Bindable] public var animateSeconds:Number = 3;

        注1:从这里就可以看出《使用铁哥SmartFlash快速开发方案:66行代码搞定抽奖程序!》比纯Flash/as3方案优秀的地方了。用纯as3代码,要实现这么多数据绑定不知要多写多少行代码!

        注2:是不是比Silverlight方便啊?

        第二步,在Application类的加载时,把loaderInfo.parameters注入到Application的属性中:

    var params:Object = this.loaderInfo.parameters;
    if(params != null)
    {
        for(var key:String in params)
        {
            if(this.hasOwnProperty(key))
            {
                if(params[key] == "true" && this[key] == false )
                {
                    this[key] = true;
                }
                else if(params[key] == "false" && this[key] == true )
                {
                    this[key] = false;
                }
                else
                {
                    this[key] = params[key];
                }
            }
        }
    }

        这样一来,就可以通过js,设定应用的初始值,如:

                var par = {wmode:"transparent"};
                var config0 =
                {
                    100,              // 控件宽
                    height:400,             // 控件高
                    showAnimation:true,        // 是否显示动画
                    animateSeconds:1.5,        // 动画速度,单位为秒
                    meterY:55,                // 柱子的Y值
                    meterHeight:300,         // 柱高
                    meterWidth:16,           // 柱宽(柱底圆球直径)
                    title:"大气压力",         // 标题
                    titleY:20,                // 标题的纵坐标   
                    titleFontSize:12,        // 标题字体大小
                    valueUnit:"kpa",        // 控件显示值(左值)的单位
                    valueY:370,                // 控件显示值(左值)的纵坐标
                    valueFontSize:12,        // 控件显示值字体大小
                    maxLeftScaleValue:115,    // 左边刻度最大值
                    minLeftScaleValue:80,    // 左边刻度最小值
                    maxRightScaleValue:115,    // 右边刻度最大值
                    minRightScaleValue:80,    // 右边刻度最小值
                    leftScaleGrids:7,        // 左侧刻度的段数
                    leftSubScaleGrids:5,    // 左侧刻度的子段数
                    rightScaleGrids:7,         // 右侧刻度的段数
                    rightSubScaleGrids:5,     // 右侧刻度的子段数
                    scaleValueFontSize:11,     // 刻度值的字体大小
                    scaleUnit:"",            // 刻度单位
                    leftValue:90,             // 根据左侧刻度设定的控件值
                    leftUnit:"",            // 左下角内容
                    rightUnit:"",            // 右下角内容
                    leftUnitX:0,            // 左下角内容的x坐标
                    leftUnitY:0,            // 左下角内容的y坐标
                    rightUnitX:0,            // 右下角内容的x坐标
                    rightUnitY:0,            // 右下角内容的y坐标
                    unitFontSize:9,            // 左下角和右下角内容的字体大小
                    showMaxScaleValue:false    // 是否显示最大刻度值
                };
                swfobject.embedSWF('VMeter.swf', 'demo0', "100", "400", "9.0.0", null, config0, par);

        就这么几行代码,就为Flash应用带来了这么丰富的JS接口!需要说明的是,这种传值方法,有的字符需要转码,如“%”需要转码为“%25”。

        不同的参数可产生不同的效果,下面两个图是同一控件在不同参数下的显示:

    image 

        可加入js回调方法setValue。利用上面的思路,使JS可以动态的控制每个绑定项的值,而在Flash内部,由于数据绑定的关系,可以即时的反映出这些改变!

    ====

        Flex中数据绑定是以语法糖形式出现的,语法简洁明了(《WPF/Silverlight的数据绑定设计的真糟糕》一文中介绍了Flex数据绑定的语法,学习成本几乎是0,想忘都忘不了)。在《几行代码搞定Flash应用的多语言实时切换问题》中演示了用数据绑定轻松解决实时多语言切换的问题。《使用铁哥SmartFlash快速开发方案:66行代码搞定抽奖程序!》中演示了数据绑定在布局和开发自定义控件中的应用,本文介绍了数据绑定在提供富接口中的应用。

        用了2年Flex,感觉它最有价值的就是这个【Bindable】语法糖了。

        伏击、影袭、下毒,锁喉、剔骨、暗影步,盛宴杀戮、刀扇飘忽、手握生死谱,玩匕首比玩长枪来的有感觉!

  • 相关阅读:
    Django--模型层进阶
    Django--模板层
    对自己的博客园主题稍作修改
    集群中Session共享解决方案分析
    【检测工具】keepalived安装及配置
    跨域问题简单分析
    Linux设置静态IP后出现的几种问题
    Linux上安装ElasticSearch及遇到的问题
    Linux上安装JDK1.8,tomcat9,以及mysql8的步骤
    归并排序分析
  • 原文地址:https://www.cnblogs.com/xiaotie/p/2090008.html
Copyright © 2011-2022 走看看