[问八系列] Windows 8 开发 : 分离检视型应用程序 Part 1 - 清单 (List)

Posted petewell

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[问八系列] Windows 8 开发 : 分离检视型应用程序 Part 1 - 清单 (List)相关的知识,希望对你有一定的参考价值。

在 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, description: groupDescription ,
         key: "group3", title: "Group Title: 3", subtitle: "Group Subtitle: 3", backgroundImage: mediumGray, description: groupDescription ,
         key: "group4", title: "Group Title: 4", subtitle: "Group Subtitle: 4", backgroundImage: lightGray, description: groupDescription ,
         key: "group5", title: "Group Title: 5", subtitle: "Group Subtitle: 5", backgroundImage: mediumGray, description: groupDescription ,
         key: "group6", title: "Group Title: 6", subtitle: "Group Subtitle: 6", backgroundImage: darkGray, 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", description: itemDescription, content: itemContent, backgroundImage: darkGray ,
         group: sampleGroups[0], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: mediumGray ,
         group: sampleGroups[0], title: "Item Title: 4", subtitle: "Item Subtitle: 4", description: itemDescription, content: itemContent, backgroundImage: darkGray ,
         group: sampleGroups[0], title: "Item Title: 5", subtitle: "Item Subtitle: 5", description: itemDescription, content: itemContent, backgroundImage: mediumGray ,

         group: sampleGroups[1], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: darkGray ,
         group: sampleGroups[1], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: mediumGray ,
         group: sampleGroups[1], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: lightGray ,

         group: sampleGroups[2], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: mediumGray ,
         group: sampleGroups[2], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: lightGray ,
         group: sampleGroups[2], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: darkGray ,
         group: sampleGroups[2], title: "Item Title: 4", subtitle: "Item Subtitle: 4", description: itemDescription, content: itemContent, backgroundImage: lightGray ,
         group: sampleGroups[2], title: "Item Title: 5", subtitle: "Item Subtitle: 5", description: itemDescription, content: itemContent, backgroundImage: mediumGray ,
         group: sampleGroups[2], title: "Item Title: 6", subtitle: "Item Subtitle: 6", description: itemDescription, content: itemContent, backgroundImage: darkGray ,
         group: sampleGroups[2], title: "Item Title: 7", subtitle: "Item Subtitle: 7", description: itemDescription, content: itemContent, backgroundImage: mediumGray ,

         group: sampleGroups[3], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: darkGray ,
         group: sampleGroups[3], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: lightGray ,
         group: sampleGroups[3], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: darkGray ,
         group: sampleGroups[3], title: "Item Title: 4", subtitle: "Item Subtitle: 4", description: itemDescription, content: itemContent, backgroundImage: lightGray ,
         group: sampleGroups[3], title: "Item Title: 5", subtitle: "Item Subtitle: 5", description: itemDescription, content: itemContent, backgroundImage: mediumGray ,
         group: sampleGroups[3], title: "Item Title: 6", subtitle: "Item Subtitle: 6", description: itemDescription, content: itemContent, backgroundImage: lightGray ,

         group: sampleGroups[4], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: lightGray ,
         group: sampleGroups[4], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: darkGray ,
         group: sampleGroups[4], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: lightGray ,
         group: sampleGroups[4], title: "Item Title: 4", subtitle: "Item Subtitle: 4", description: itemDescription, content: itemContent, backgroundImage: mediumGray ,

         group: sampleGroups[5], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: lightGray ,
         group: sampleGroups[5], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: darkGray ,
         group: sampleGroups[5], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: mediumGray ,
         group: sampleGroups[5], title: "Item Title: 4", subtitle: "Item Subtitle: 4", description: itemDescription, content: itemContent, backgroundImage: darkGray ,
         group: sampleGroups[5], title: "Item Title: 5", subtitle: "Item Subtitle: 5", description: itemDescription, content: itemContent, backgroundImage: lightGray ,
         group: sampleGroups[5], title: "Item Title: 6", subtitle: "Item Subtitle: 6", description: itemDescription, content: itemContent, backgroundImage: mediumGray ,
         group: sampleGroups[5], title: "Item Title: 7", subtitle: "Item Subtitle: 7", description: itemDescription, content: itemContent, backgroundImage: darkGray ,
         group: sampleGroups[5], title: "Item Title: 8", subtitle: "Item Subtitle: 8", description: itemDescription, content: itemContent, backgroundImage: lightGray 
    ];

你可以先跑一次初始的样板看看:

技术图片

这里所显示的,就是在 sampleGroups 变量中所定义的数据,连同图示,标题,说明,使用的颜色等都包装在里面了,而点进去以后:

技术图片

有注意到了吗?这里面的内容都是来自于 sampleItems 这个变量,连同图示,标题,颜色,内容等都在里面,只是因为是 sample item,所以很多文字都是共用的,所以我们可以很简单的来改一下这个范例,首先,我们先把原本的 sampleGroups 和 sampleItems 删掉,然后加入自己的数据:


var blogs =
    [
         key: "regionbbs", title: "小朱? 的技术随手写", subtitle: "", backgroundImage: lightGray, description: "欢迎引用本博客中的文章,但请务必注明出处。未注明出处或恶意盗文或盗连者,除列入黑名单外,并保留法律追诉权。" ,
         key: "clark", title: "昏睡领域", subtitle: "", backgroundImage: lightGray, description: "Clark的心得笔记" ,
         key: "chou", title: ".NET菜鸟自救会", subtitle: "", backgroundImage: lightGray, description: "小欧说 : 努力工作,用心学习" ,
         key: "unclebill", title: "比尔盖报", subtitle: "", backgroundImage: lightGray, description: "光怪陆离资讯业" ,
         key: "billchung", title: ".Net 海角点部落", subtitle: "", backgroundImage: lightGray, description: "茂伯谯程序" ,
         key: "alonstar", title: "流星的随笔记事~☆", subtitle: "", backgroundImage: lightGray, description: "学习努力的成长" ,
         key: "hatelove", title: "In 91", subtitle: "", backgroundImage: lightGray, description: "" ,
         key: "ricochen", title: "RiCo技术农场", subtitle: "", backgroundImage: lightGray, 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);
);

然后执行,你会看到这样的结果:

技术图片

如果要套图片的话,可以修改 backgroundImage 指定图档的路径,它的效果会是:

技术图片

接下来,我们需要它按下去后会连结到指定的 blog 下载 RSS,以浏览博客的内容,我们需要一些数据来取代原本的 sampleItems,而我们的数据来源可以用 XML HTTP 抓取 RSS 的方式来做,不过在这一步之前,我们有些东西要先熟悉一下。

(To Be Contunued…)

原文:大专栏  [问八系列] Windows 8 开发 (4): 分离检视型应用程序 Part 1 - 清单 (List)


以上是关于[问八系列] Windows 8 开发 : 分离检视型应用程序 Part 1 - 清单 (List)的主要内容,如果未能解决你的问题,请参考以下文章

Windows10 IoT开发系列配置篇

HLS图像处理系列——肤色检測

淘宝关于前后端分离的系列文章,一些系列的深思。

iOS 自我检測

前后端分离的Web系统开发 Springboot Vue系列教程- Springboot项目的创建

windows下mysql-8.0.13主从同步配置方案(读写分离)