企业级Ajax框架!

布局器篇

布局器是EdoJS界面排布的基石,它跟容器紧密配合,排布容器内的子组件,达到理想的界面布局效果。

EdoJS目前一共有4种布局器,如下:

Vertical : 竖向布局器

Horizontal : 横向布局器

Absolute : 定位布局器

ViewStack : 导航布局器

布局器只能被容器使用,一个容器必须使用一个布局器来排布其容纳的子组件们。布局器是静态对象,因此无需实例化。

改变容器的布局器

容器有一个初始默认布局器,一般是:vertical。

要改变一个容器的布局器,我们可以这样做:

ct.set('layout', 'horizontal');

布局器的布局配置属性

布局器对象本身不需要配置布局属性,但是其实从一个布局逻辑的角度来说,必然或有一些布局属性配置。

EdoJS将布局属性分摊在容器和容器内的子组件上,比如:

Edo.create({
    type: 'box',
    height: 100,
    width: 300,
    layout: 'horizontal',    
    horizontalGap: 0,           //横向间距
    verticalAlign: 'center',    //竖向位置
    horizontalAlign: 'right',   //横向位置
    children: [
        {
            type: 'button',
            text: 'button',
            height: '100%'
        },
        {
            type: 'text',
            width: '30%',
            height: '50%'       //子组件上的布局属性
        }
    ],
    render: document.body
});

效果图如下:

这里,horizontalGap、verticalAlign和horizontalAlign设置在容器对象上,这三个属性就是horizontal布局器需要的布局配置属性,horizontal布局器通过这三个属性的值,得知将子组件的横向间距设置为0,并且右下摆放。

子组件的width和height属性是百分比,horizontal布局器同时从每个子组件的宽度和高度得知,他们应该是容器尺寸的百分之多少,从而设置子组件的尺寸外观大小。

每个布局器都有自己独特的布局逻辑,并且需要容器和组件的配合。当您选择使用不同的布局器时,对容器和组件的布局属性要求也不一样。下面我们一一介绍下4种布局器的布局属性和布局效果:

Vertical 竖向布局器

Vertical 是控制竖向排布的布局器。当设置容器的layout为"vertical"时,就应用了此布局器。

容器布局属性:横向定位horizontalAlign(left\center\right), 竖向定位verticalAlign(top\middle\bottom), 横向间距horizontalGap(Number数字),竖向间距verticalGap(Number数字)。

示例代码如下:

Edo.create({
    type: 'box',
    layout: 'vertical',
    width: 200,
    height: 100,
    horizontalAlign: 'center',  //左右居中定位
    verticalAlign: 'bottom',    //上下置底定位
    verticalGap: 10,            //组件竖向间距30
    children: [
        {
            type: 'text'
        },
        {
            type: 'button',
            text: '按钮'
        }
    ],
    render: document.body
});

效果如如下:

Horizontal 横向布局器

容器布局属性:横向定位horizontalAlign(left\center\right), 竖向定位verticalAlign(top\middle\bottom), 横向间距horizontalGap(Number数字),竖向间距verticalGap(Number数字)。跟Vertical竖向布局器是一样的布局属性。

示例代码如下:

Edo.create({
    type: 'box',
    layout: 'horizontal',
    width: 200,
    height: 100,
    horizontalAlign: 'center',  //左右居中定位
    verticalAlign: 'middle',    //上下居中定位
    horizontal: 10,            //组件横向间距30
    children: [
        {
            type: 'text'
        },
        {
            type: 'button',
            text: '按钮'
        }
    ],
    render: document.body
});

效果图如下:

Absolute 定位布局器

Absolute是定位布局器,此布局器的布局属性,作用在子组件上:left,、top、right、bottom。

示例代码如下:

Edo.create({
    type: 'box',
    layout: 'absolute',
    width: 200,
    height: 100,        
    children: [
        {
            type: 'text',
            left: 5,
            top: 5
        },
        {
            type: 'box',                
            left: 30,
            top: 40,
            bottom: 10,
            right: 10
        }
    ],
    render: document.body
});

效果图如下:

ViewStack 导航布局器

Viewstack一个时刻只能显示容器中的某一个组件,而不能全部显示。

有一个作用在容器上的布局属性:selectedIndex,表示当前显示容器内的哪一个索引号的子组件。

此布局器经常用在Tabs切换导航场景中,如下示例:

Edo.build({
    type: 'box', verticalGap: 0, renderTo: '#body',        
    children:[
        {
            type: 'tabbar', selectedIndex: 0,
            onselectionchange: function(e){                    
                ct2.set('selectedIndex', this.selectedIndex);
            },
            children: [{text: 'tab1', type: 'button'},{text: 'tab2', type: 'button'}]
        },
        {
            id: 'ct2', type: 'box', border: [1,0,1,1], layout: 'viewstack', 
            style: 'background-color:white;', width: '100%',
            children: [
                {
                    type: 'button',
                    text: 1
                },
                {
                    type: 'dialog',
                    title: '表单2',                        
                    children:[
                        {
                            type: 'box',
                            width: 100,
                            height: 50
                        }
                    ]
                }
            ]
        }
    ]
});

效果图如下: