enyo官方开发入门教程翻译一Layout之Panels

Panels

     enyo.Panels kind用来满足常用的多种应用布局。使用enyo.Panels，control可以使用carousel（旋转木马，一组折叠的panels），在panels之间消失切换的卡片布局或 一个grid网格。

Behavior

任何一个enyo的control都可以放在enyo.Panels内部，方便起见我们把这些control称为panel。在enyo.Panels的一组panel中，只有一个是活动的。可以通过setIndex方法设置活动的panel。每次设置active panel真正的panel布局都会改变，所以新的active panel拥有最高的优先级。如果layout将所有的panel放在一个card stack中，设置active panel会显示active panel并隐藏其他的panel。

enyo.Panels在active状态时支持动画和拖曳。当active panel发生变化时会触发onTransitionStart和onTransitionFinish事件。将animate属性设置为false可以关闭active状态的panel动画。另外panel默认可以拖拽，可以将draggable属性设置为false改变这一默认行为。

例：

enyo.kind({

    name: "App",

    kind: "Panels",

    fit: true,

    components: [

        {name: "MyStartPanel"},

        {name: "MyMiddlePanel"},

        {name: "MyLastPanel"}

    ]

});

 

Layout

enyo.Panels的布局由一个特殊的kind arrangerKind控制。现在panels已经有一些Arranger kind。

为了简化使用enyo.Panels时创建arranger kind的过程，使用插值策略渲染activte 设置的状态。这意味着只有处于活动状态的layout需要指定arrangerKind。更详细的信息请参考API。

一些编排策略结合Panel实例可以达到环绕的效果，这样在最后一个panel前进时会回到第一个panel，在第一个panel后退时会到最后一个panel。要达到这个效果，将enyo.Panels的arrangerKind属性指定值为LeftRightArranger, TopBottomArranger, SpiralArranger, 或 GridArranger，wrap值指定为true。

Responsive Design

Enyo.Panels结合CSS的布局可以自适应不同尺寸的屏幕。怎样改变布局由应用开发者决定，但是当panel的size发生改变时，布局应能做出正确响应。例：

enyo.kind({

    name: "App",

    kind: "Panels",

    fit: true,

    classes: "app-panels",

    arrangerKind: "CollapsingArranger",

    components: [

        {name: "MyStartPanel"},

        {name: "MyMiddlePanel"},

        {name: "MyLastPanel"}

    ]

});

注意，在CollapsingArranger中最后一个panel总是占用可用空间。

CSS：

/* set the width and some basic styling for each panel */

.app-panels > * {

    width: 320px;

    background-color: #EAEAEA;

    box-shadow: -4px -4px 4px rgba(0,0,0,0.3);

}

 

/* on small devices, make each panel fit to the app width */

@media all and (max-width: 800px) {

    .app-panels > * {

        min-width: 100%;

        max-width: 100%;

    }

}

从技术上讲，第二个CSS语句块并不需要实现size效果。因为enyo.Panels的narrowFit属性（默认为true）在屏幕足够狭窄时默认截取800px以使每个panel的大小适应应用的大小。

但是CSS仍然提供了可用的方法使你能够自定义截断宽度。

我们来修改实例默认截取600px。将narrowFit属性设置为false（关闭默认的行为），应用自定义的CSS样式（“app-panels”）定义新的行为。

我么也可以重写静态方法Panels.isScreenNarrow()，将800改为600。框架本身并不使用这个方法，它只为应用能够轻易知道是否允许在小屏幕的环境中。（在enyojs.com的 Flickr sample app有一个如何在导航面板之间应用这个特性的有趣例子。）

定义一个kind：

enyo.kind({

    name: "App",

    kind: "enyo.Panels",

    fit: true,

    narrowFit: false,

    classes: "app-panels",

    arrangerKind: "CollapsingArranger",

    components: [

        {name: "MyStartPanel", content: "start"},

        {name: "MyMiddlePanel", content: "middle"},

        {name: "MyLastPanel", content: "last"}

    ],

    statics: {

        isScreenNarrow: function() {

            return enyo.dom.getWindowWidth() <= 600;

        }

    }

});

CSS样式：

.app-panels > * {

    width: 320px;

    background-color: #EAEAEA;

    box-shadow: -4px -4px 4px rgba(0,0,0,0.3);

}

 

@media all and (max-width: 600px) {

    .app-panels > * {

        min-width: 100%;

        max-width: 100%;

    }

}

 实现效果的截图没有放上来，可以参考原文https://github.com/enyojs/enyo/wiki/Panels，或到enyo开发包的解压目录lib\layout\panels下的examps和samples文件夹下查看更多示例。