[新闻资讯] [业界动态] 一个轻量级的强大的组件库--as移动开发者

资讯类型: 翻译
来源页面: http://madskool.wordpress.com/2011/05/11/using-madcomponents-with-minimalcomps-or-flobile-libraries/
资讯原标题: Using MadComponents with MinimalComps or Flobile libraries
资讯原作者: Daniel Freeman
翻译词数: 300 词
我的评论:MadComponents 功能比较强大，方便使用。
对这篇文你有啥看法，跟贴说说吧！欢迎口水和板砖，哈哈。欢迎大家和我们一同分享更多资讯。
在最近的MadComponent(0.3)更新中，添加了 divided list，search bar，activity indicator以及 navigation bar。
在这下载最新版本的源码还有文档。
http://code.google.com/p/mad-components/downloads/list
Flex(Flash Builder)在这用svn库这获得一些例子。http://code.google.com/p/mad-components/source/checkout
Flash用户可以按照下面的教程来使用MadComponents做一些移动设备上的应用。
http://madskool.wordpress.com/2011/04/24/getting-started-with-madcomponents-in-flash/

MadComponents并不是as移动开发者的唯一选择。它相对来说比较新，除它之外还有Keith Peter’s 的MinimalComps
http://www.minimalcomps.com/，Derek Grigg’s的 skinning libraryhttp://dgrigg.com/blog/2010/04/28/Alpha-Release-of-Skinnable-Minimal-Components/还有Todd Anderson’s 的as3Flobilehttp://custardbelly.com/blog/?p=173。这几个都比较受用。(但这些组件主要还是用于桌面应用而不是移动开发)。

但是如果你要是用Madcomponents的话，你就觉得真是爽呆了。因为在用Madcomponents时能够用其他的组件库里的组件来布局。
这个是拿Minimal comp与derek Grigg`s的组件扩举的例子。

package {
        import com.bit101.components.*;
        import com.dgrigg.skins.*;
        import com.danielfreeman.madcomponents.*;

        import flash.display.Sprite;
        import flash.display.StageAlign;
        import flash.display.StageScaleMode;

        public class MadDemo extends Sprite {

                protected static const LAYOUT:XML = <vertical xmlns:minimal="com.bit101.components">
                                                        <minimal:PushButton label="push me" alignH="fill" height="32" skinClass="com.dgrigg.skins::ButtonImageSkin"/>
                                                </vertical>;

                protected static const USES:Array = [PushButton,ButtonImageSkin,Knob];

                public function MadDemo() {
                        stage.scaleMode = StageScaleMode.NO_SCALE;
                        stage.align = StageAlign.TOP_LEFT;

                        UI.create(this, LAYOUT);
                }
        }
}

注意USES这个变量，我不清楚为什么如果这个组件没有被引用，你就需要在一个空语句中引用它。 可能这是Flash Builder的bug？
举另一个例子。用Flobile的picker组件。

package {
        import com.custardbelly.as3flobile.controls.label.Label;
        import com.custardbelly.as3flobile.controls.picker.Picker;
        import com.custardbelly.as3flobile.controls.picker.PickerColumn;
        import com.danielfreeman.madcomponents.*;

        import flash.display.Sprite;
        import flash.display.StageAlign;
        import flash.display.StageScaleMode;
        import flash.text.engine.ElementFormat;
        import flash.utils.getQualifiedClassName;

        public class MadPickerUI extends Sprite {

                protected static const LAYOUT:XML = <vertical xmlns:flobile="com.custardbelly.as3flobile.controls.picker">
                                                        <flobile:Picker id="picker" itemHeight="50" alignH="fill"/>
                                                        <image />
                                                        <label id="day"/>
                                                        <label id="month"/>
                                                        <label id="year"/>
                                                </vertical>;

                protected var _picker:Picker;
                protected var _day:UILabel;
                protected var _month:UILabel;
                protected var _year:UILabel;

                public function MadPickerUI() {
                        stage.scaleMode = StageScaleMode.NO_SCALE;
                        stage.align = StageAlign.TOP_LEFT;

                        UI.create(this, LAYOUT);

                        _day = UILabel(UI.findViewById("day"));
                        _month = UILabel(UI.findViewById("month"));
                        _year = UILabel(UI.findViewById("year"));

                        var dataProvider:Vector.<PickerColumn> = new Vector.<PickerColumn>();
                        dataProvider.push( getPickerColumnMonths() );
                        dataProvider.push( getPickerColumnDays( 50 ) );
                        dataProvider.push( getPickerColumnYears( 80 ) );

                        _picker = Picker(UI.findViewById("picker"));
                        _picker.selectionChange.add( pickerSelectionDidChange );
                        _picker.dataProvider = dataProvider;
                }

                protected function getPickerColumnDays( width:Number = Number.NaN ):PickerColumn {
                        var column:PickerColumn = new PickerColumn(); //null, getQualifiedClassName(CustomPickerColumnItemRenderer));
                        for( var i:int = 0; i < 31; i++ ) {
                                column.data.push( {label:( i + 1 ).toString()} );
                        }
                        column.width = width;
                        return column;
                }

                protected function getPickerColumnMonths( width:Number = Number.NaN ):PickerColumn {
                        var column:PickerColumn = new PickerColumn(); //null, getQualifiedClassName(CustomPickerColumnItemRenderer));
                        column.data = [{label:"January"}, {label:"February"}, {label:"March"}, {label:"April"}, {label:"May"}, {label:"June"}, {label:"July"},
                                {label:"August"}, {label:"September"}, {label:"October"}, {label:"November"}, {label:"December"}];
                        column.width = width;
                        return column;
                }

                protected function getPickerColumnYears( width:Number = Number.NaN ):PickerColumn {
                        var column:PickerColumn = new PickerColumn(); //null, getQualifiedClassName(CustomPickerColumnItemRenderer));
                        var i:int = 50;
                        while( --i > -1 ) {
                                column.data.push( {label:(1973 + i).toString()} );
                        }
                        column.width = width;
                        return column;
                }

                protected function pickerSelectionDidChange( column:PickerColumn, index:int ):void {
                        var columnIndex:int = _picker.dataProvider.indexOf( column );
                        if (columnIndex==0) {
                                _day.text = column.data[index].label;
                        }
                        else if (columnIndex==1) {
                                _month.text = column.data[index].label;
                        }
                        else {
                                _year.text = column.data[index].label;
                        }
                }
        }
}