Morn组件赋值

发布时间:2015-10-30

        在讲解List之前,我们先介绍一下Morn组件赋值功能

默认属性赋值

界面逻辑开发过程中,经常会涉及到动态更改UI属性,比如:

界面有一个按钮,一个多选框和一个文本,分别命名为myButton,myCheckBox,myLabel

   blob.png

假如你需要更改按钮的label属性为”按钮”,同时让CheckBox变成选中状态,并且还要修改Label组件的内容,传统的做法是先取出来,然后再更改其属性,代码如下:

var myButton:Button = getChildByName("myButton") as Button;
myButton.label = "按钮";
var myCheckBox:CheckBox = getChildByName("myCheckBox") as CheckBox;
myCheckBox.selected = true;
var myLabel:Label = getChildByName("myLabel") as Label;
myLabel.text = "我是label";

在Morn中,只需一行代码即可实现上述功能

this.dataSource = {myButton:"按钮",myCheckBox:true,myLabel:"我是label"};

  格式:容器.dataSource = {组件名:默认属性值,组件名:默认属性名。。。}

是不是非常简单呢。

赋值,简化了逻辑操作,把原来对UI组件获取,设置等操作进行封装,将开发者的焦点集中到对数据操作上,大大简化了UI开发的复杂性和工作量,使用起来非常方便,能大大提高工作效率。

所以,Morn中大部分UI逻辑都变成了赋值操作,就是这么简单。


上述赋值方式为默认属性赋值,只更改组件的默认属性,一个组件只有一个默认属性,比如Button的默认属性是label,CheckBox的默认属性是selected

默认属性对应如下:

Button,LinkButton,RadioButton默认属性均为label
Label,TextInput,TextArea默认属性均为text
ComboBox,Tab,RadioGroup,ViewStack默认属性均为selectedIndex
Clip,FrameClip默认属性均为frame
ProgressBar,Scroll,Slider默认属性均为value
CheckBox为selected,Image为url


自定义赋值

上述默认属性赋值简单好用,但是很多情况下,不仅仅更改组件的默认属性,还会更改其他属性,那么可以通过自定义赋值实现,还是上面例子,更改赋值如下:

this.dataSource = {myButton:{label:"按钮",labelBold:14},
myCheckBox:{selected:true,alpha:0.5}};

上述操作,同时更改了myButton的label和labelBold属性,也同时更改了myCheckBox的selected和alpha属性

格式:容器.dataSource = {组件名:{属性:属性值,属性:属性值},组件名:{属性:属性值,属性:属性值}。。。}


对容器赋值

容器的赋值和非容器赋值不太一样:

       非容器赋值,key对应的组件的属性名。容器赋值,key对应的是子对象的名称

比如页面中有个Box,var定义为box1,Box内部有个Button,name为button1,赋值表达式如下:

box1.dataSource = {button1:{label:"按钮",alpha:0.5}}


格式:容器.dataSource = {子对象名:{属性:属性值,属性:属性值}。。。}

List赋值

因为list是一个列表,list赋值和上面不太一样,list赋值对象为一个Array,而不是object

例如下面list

  blob.png

list.dataSource = [{label1:"我是label1",checkBox1:true},
{label1:"我是label2",checkBox1:true}...];

格式:list.dataSource = [item0赋值,item1赋值,item2赋值。。。]

同时也可以设置list的array属性进行赋值,效果同dataSource。