使用 Famo.us 创建高性能移动 UI（6）使用 Famo.us 视图和 widget
|
- UID
- 1066743
|
使用 Famo.us 创建高性能移动 UI（6）使用 Famo.us 视图和 widget
使用 Famo.us 视图和 widget组合使用 Famo.us 视图和 widget 会让移动应用程序 UI 的创建变得更直接。
Famo.us 中的事件通过使用各种事件，Famo.us 组件可以用松散耦合的方式与其他组件进行通信。通过创建 EventHandler 实例，可以发出和接收各种事件。视图通常有内置的进入和发出事件处理程序。pipe() 方法将事件推送到另一个事件处理程序，subscribe() 方法从另一个事件处理程序处获得事件。
表面（以及通常的可呈现对象）和视图可以组合到 widget 中。视图可以在托管的可呈现对象之间包含复杂的协调和交互逻辑。通过使用 Famo.us 中所支持的事件机制，视图可以接收、处理和发出事件。Widget 本身可以呈现节点，可将这些节点添加到 context 的场景图中作为叶对象。Famo.us 附带了一组随时可用的视图和 widget：
- Scrollview 控制一组可呈现对象（沿 x 或 y 方向）的连续列表并且允许通过触摸或使用鼠标来滚动浏览该列表 — 通常是通过一系列的表面。
- HeaderFooterLayout 管理三个可呈现对象：一个指定大小的页面和页脚，以及一个大小可变的内容区域。该视图用于布局示例的移动 UI。
- EdgeSwapper 是一个容器，可管理多个可呈现对象的显示工作，方法是从父对象的边缘将可呈现对象滑入。示例移动 UI 使用该视图显示两个可滚动列表。
- ScrollContainer 这个视图中包含一个 Scrollview 和一个托管的 Surface，后者用于剪辑 ScrollView 的显示内容。示例移动 UI 在 HeaderFooterLayout 的内容区域中使用 ScrollContainer 来显示文章或视频的列表。
示例移动 UI 使用这些 widget：
- NavigationBar 是一个微型应用程序-视图，它管理标题表面以及两个可点击表面（代表导航栏的 "back" 和 "more" 按钮）的显示工作。该 widget 发出 back 和 more 事件。
- TabBar 管理 widget 栏的水平或垂直布局。（默认是一个切换按钮。选择一个托管的 widget 时，会使用一个 select 事件发出其相应的 ID。
- ToggleButton 是一个按钮，状态为 on 或 off，拥有显示两个托管的表面。
使用可用的视图和 widget，移动 UI 变成了图 13 中所示的场景图。
图 13. 移动应用程序 UI 的场景图  虽然 context仍位于树的根部，但无法再轻松分辨出 modifier 和树的叶对象。每个组合的 Famo.us 视图都封装了组件的管理细节，提供预期的用户交互和行为 — 并且无需您再进行编码工作。
要创建移动 UI，可编写代码建立场景图；然后 Famo.us 引擎会处理它并以 rAF 速率更新 DOM：
- 创建文章列表 — 一个 Famo.us ScrollContainer 包含一个 Scrollview 来管理 Surface 列表（列表中的各个单元），每个文章一个单元：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| function createArticlesList() {
artListSVC = new ScrollContainer({
scrollview: {direction: Utility.Direction.Y}
});
var lines = [];
artListSVC.sequenceFrom(lines);
for (var i in articles) {
var surf = new Surface({
content: '<div class="a-title">' + articles.title +
'</div><div class="a-desc">' + articles.desc + '</div>',
size: [undefined, 100],
properties: {
itemType: 'article',
listIndex: i,
textAlign: 'left',
color: 'black'
}
});
surf.artIdx = i;
surf.pipe(eh);
lines.push(surf);
}
}
function createWebSurface() {
wb = new Surface(
);
}
|
注意突出显示的 content 属性，它被设为用于呈现列表中某个单元的 HTML，以及相关联的 CSS 类。
itemType 和 listIndex 是两个自定义属性，用于确定在 click 事件处理程序中选择的实际数据条目。
- 创建视频列表。（代码此处未显示，与步骤 1 中的代码类似）。
- 创建一个 Surface 来显示所选中的文章：
1
2
3
4
5
| function createWebSurface() {
wb = new Surface(
);
}
|
- 创建一个 Surface 来显示所选中的视频：
1
2
3
4
5
6
7
8
9
| function createVideoSurface() {
vs = new VideoSurface(
{
size: [undefined,undefined],
autoplay: true
}
);
}
|
- 创建 NavigationBar widget 并将其添加到页眉中：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| function addHeader() {
nb = new NavigationBar({
size: [undefined, 75],
content: 'dW Famo.us',
moreContent: '',
backContent: '',
properties: {
lineHeight: '75px'
}
});
layout.header.add(nb);
eh.subscribe(nb);
eh.on('back', function() {
rc.setOptions({
inTransition: false,
outTransition: true
});
if (backTarget !== undefined)
rc.show(backTarget);
setNavbarBack(false, undefined);
});
}
|
- 创建 EdgeSwapper 视图并将其添加到内容区域。该控制器将文章列表、视频列表、一个文章的显示或一个视频的显示交换到布局中：
1
2
3
4
5
6
7
8
9
| function addContent() {
rc = new EdgeSwapper({
overlap: false,
outTransition: false,
size:[undefined, undefined]
});
layout.content.add(rc);
}
|
- 创建选项卡栏并将其添加到页脚：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| function addFooter() {
var tb = new TabBar({
});
layout.footer.add(tb);
tb.defineSection(0,{content: 'Articles', onClasses: ['tabbuton'], offClasses: ['tabbutoff']});
tb.defineSection(1,{content: 'Videos', onClasses: ['tabbuton'], offClasses:['tabbutoff']});
tb.select(0);
eh.subscribe(tb);
eh.on('select', function(but) {
rc.setOptions({
inTransition: false,
outTransition: false
});
switch (but.id) {
case 0:
rc.show(artListSVC);
break;
case 1:
rc.show(vidListSVC);
break;
}
setNavbarBack(false, undefined);
});
}
|
CSS tabbuton 类确定按钮 on 状态的风格，tubbutoff 确定 off 状态的风格。如果触摸了按钮 0，select 事件的事件处理程序显示文章列表，如果触摸了按钮 1，则显示视频列表。 - 在内容区域中显示文章列表。为 click 事件添加一个事件处理程序，在 Scrollview 内通过选择操作可发出该事件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| function init() {
rc.show(artListSVC);
eh.on('click', function(obj) {
rc.setOptions(
{
inTransition: true,
outTransition: false
});
var surfaceProps = obj.origin.getProperties();
if (surfaceProps.itemType === 'article') {
wb.setContent('<iframe width="100%" height="100%" src="' +
articles[surfaceProps.listIndex].url + '"></iframe>');
rc.show(wb);
setNavbarBack(true, artListSVC);
}
else
{ // video
vs.setContent(videos[surfaceProps.listIndex].url);
rc.show(vs);
setNavbarBack(true, vidListSVC);
}
});
}
|
在 IBM Bluemix 上使用 Cloudant 和 Famo.us 应用程序 UI 模板自动创建移动应用程序可以随时将最终的示例转变成一个应用程序 UI 模板。查看 " "，了解如何在云中更好地完成工作，并探索使用 Cloudant 和 famo.us 以可扩展的数据驱动方式生成移动应用程序 UI。您将在 IBM DevOps Services 中编写 Famo.us 应用程序模板的代码，在 Cloudant 中自定义数据和外观，然后在 IBM Bluemix™ 上部署该应用程序。
内存中的场景图现已指定，并且所需的事件处理程序都已连接，准备让 Famo.us 引擎进行处理了。
检查此示例中所创建的 Famo.us 场景图（参见 ）。您可轻松地修改它，以选择和显示其他信息 — 只需更改数据源并修改风格。甚至可以通过参数自动执行此类修改。从本质上讲，您可以为一般的 ”浏览一个列表并选择显示某个条目 “类别的移动应用程序创建一个 UI 应用程序模板。可逐步构建一个完整的此类应用程序模板集合，以覆盖各类可能的应用程序领域。 |
|
|
|
|
|
