[问八系列] Windows 8 开发 (4): 分离检视型应用程序 Part 1 -
在 Visual Studio 11 里面的 Windows 8-style application 共有五种类型,其中我们已经用过 Blank Application 和 Navigation Application 两种了,今天我们来玩玩第三种:Split Application。 在 Visual Studio 11 里面的 Windows 8-style application 共有五种类型,其中我们已经用过 Blank Application 和 Navigation Application 两种了,今天我们来玩玩第三种:Split Application。 Split Application 基本上它很像是 Master/Detail 型的应用程序,只是它会使用 List 和 Detail 分开的检视方式,在微软 MSDN Windows 8-style Application Developer Center 所使用的 Windows Team Blogs 的范例应用程序,使用的就是 Split Application 类型,它一开始会有 List 的页面,看起来就像这样:
点进去以后,会到列表和第一篇文章的页面:
你会发现,内页的部分是呈现 Splite View 的方式,这对一个使用平板电脑的使用者来说,可以很方便的阅读清单的内容,而且它也没有很复杂的画面配置,简单的风格也是 Windows 8-style Application 所强调的,让使用者将心思集中在 content,而不是分神去熟悉一些 controls 或配置,才能使用 content。 至于 JavaScript 的处理上,在 Split Application 中,首先要处理的是 ListView 这一块,开发人员需要先将数据注入到 ListView 中,因此数据从哪来就很重要,在应用程序的范本中,我们已经有一个叫做 data.js 的命令档,它里面就定义了一组数据,包含群组和项目: // Each of these sample groups must have a unique key to be displayed // separately. var sampleGroups = [ { key: "group1",title: "Group Title: 1",subtitle: "Group Subtitle: 1",backgroundImage: darkGray,description: groupDescription },{ key: "group2",title: "Group Title: 2",subtitle: "Group Subtitle: 2",backgroundImage: lightGray,{ key: "group3",title: "Group Title: 3",subtitle: "Group Subtitle: 3",backgroundImage: mediumGray,{ key: "group4",title: "Group Title: 4",subtitle: "Group Subtitle: 4",{ key: "group5",title: "Group Title: 5",subtitle: "Group Subtitle: 5",{ key: "group6",title: "Group Title: 6",subtitle: "Group Subtitle: 6",description: groupDescription } ]; // Each of these sample items should have a reference to a particular // group. var sampleItems = [ { group: sampleGroups[0],title: "Item Title: 1",subtitle: "Item Subtitle: 1",description: itemDescription,content: itemContent,backgroundImage: lightGray },{ group: sampleGroups[0],title: "Item Title: 2",subtitle: "Item Subtitle: 2",backgroundImage: darkGray },title: "Item Title: 3",subtitle: "Item Subtitle: 3",backgroundImage: mediumGray },title: "Item Title: 4",subtitle: "Item Subtitle: 4",title: "Item Title: 5",subtitle: "Item Subtitle: 5",{ group: sampleGroups[1],{ group: sampleGroups[2],title: "Item Title: 6",subtitle: "Item Subtitle: 6",title: "Item Title: 7",subtitle: "Item Subtitle: 7",{ group: sampleGroups[3],{ group: sampleGroups[4],{ group: sampleGroups[5],title: "Item Title: 8",subtitle: "Item Subtitle: 8",backgroundImage: lightGray } ]; 你可以先跑一次初始的样板看看:
这里所显示的,就是在 sampleGroups 变量中所定义的数据,连同图示,标题,说明,使用的颜色等都包装在里面了,而点进去以后:
有注意到了吗?这里面的内容都是来自于 sampleItems 这个变量,连同图示,标题,颜色,内容等都在里面,只是因为是 sample item,所以很多文字都是共用的,所以我们可以很简单的来改一下这个范例,首先,我们先把原本的 sampleGroups 和 sampleItems 删掉,然后加入自己的数据: var blogs = [ { key: "regionbbs",title: "小朱? 的技术随手写",subtitle: "",description: "欢迎引用本博客中的文章,但请务必注明出处。未注明出处或恶意盗文或盗连者,除列入黑名单外,并保留法律追诉权。" },{ key: "clark",title: "昏睡领域",description: "Clark的心得笔记" },{ key: "chou",title: ".NET菜鸟自救会",description: "小欧说 : 努力工作,用心学习" },{ key: "unclebill",title: "比尔盖报",description: "光怪陆离资讯业" },{ key: "billchung",title: ".Net 海角点部落",description: "茂伯谯程序" },{ key: "alonstar",title: "流星的随笔记事~☆",description: "学习努力的成长" },{ key: "hatelove",title: "In 91",description: "" },{ key: "ricochen",title: "RiCo技术农场",description: "说技术也没那么有技术" } ];
然后,修改下面 groupKeySelector() ,groupDataSelector() 以及下方的 forEach(),对应我们的数据来源,否则会出现错误: function groupKeySelector(item) { return item.key; } function groupDataSelector(item) { return item; } // This function returns a WinJS.Binding.List containing only the items // that belong to the provided group. function getItemsFromGroup(group) { return list.createFiltered(function (item) { return item.group.key === group.key; }); } var list = new WinJS.Binding.List(); var groupedItems = list.createGrouped(groupKeySelector,groupDataSelector); // TODO: Replace the data with your real data. // You can add data from asynchronous sources whenever it becomes available. blogs.forEach(function (item) { list.push(item); }); 然后执行,你会看到这样的结果: (编辑:ASP站长网) |