日期:2014-05-16 浏览次数:21324 次
Rachel Appel
通过 Visual Studio 在 Windows 上进行开发时,使用内置项目模板是一个不错的起点。 如果您初次接触 Windows 应用商店(或任何 Microsoft 堆栈)开发,可以将模板作为学习工具。 在本文中,我将基于 Hub 项目模板介绍 Hub 控件。 您将会了解有关适用于 HTML 和 XAML 应用程序的 Hub 项目和控件的所有重要内容。
值得一提的是,通过 Hub 项目,您可以使用新型用户体验向用户提供大量内容。 这是因为 Hub 项目将应用程序的内容分解为多个被称为 HubSection 的部分,使得用户不会因看到大量数据而感到难以应付。 我认为在所有 Windows 应用商店应用程序模板当中,Hub 项目从美观角度来看是最吸引人的,尽管这只是我个人的观点。 内容布局划分为多个易于把握的不同部分。 您可以在该中心醒目的“hero”节展示最喜爱的内容,而将其余内容项分组放置,以方便访问。
当然,使用模板并不是必需的 — 可以从创建一个空白项目开始。 不过,对于许多开发人员来说,对模板进行自定义并进行扩展要容易得多,因为代码已为您设置好。
Visual Studio 2013 包含用于 HTML 和 XAML 的 Hub 项目模板。 使用该模板创建新 HTML 项目时,您会看到一些熟悉的项目文件夹,如 css、images 和 js 文件夹。 除惯用的文件夹外,还有 Hub 特定文件夹:pages\hub、pages\item 和 pages\section。 正如您可能期望的那样,其中每个文件夹都包含对应于它们在应用程序中的用途的文件。 项目根中包含用于包清单的文件以及作为应用程序起点的 default.html,后者加载 default.js 并执行与应用程序和生命周期管理相关的功能。 Default.html 不仅包含对 \js\default.js 文件的引用,而且包含对 \js\data.js(包含示例数据)和 \js\navigator.js(执行导航)的引用。 关于导航的简要介绍,请参见我在 2013 年 8 月撰写的专栏文章“在 Windows 应用商店应用程序中导航的基础知识”(位于 msdn.microsoft.com/magazine/dn342878)。 简言之,Hub 项目模板与其他模板一样,是发布炫目新型应用程序的一种快速方法。
当然,Hub 项目的核心是 Hub 控件。 default.html 是使用 Windows JavaScript 库 (WinJS) 生成应用程序时的项目起点,一旦加载,它就会立即导航到 hub.html 文件。 Hub.html 包含 Hub 控件并位于 \pages\hub 目录中。 Hub 控件可用来创建由并不枯燥的几组方块组成的现代布局。 Hub 控件与异步数据提取相结合,以有序而新颖的方式展示大量数据或不同组的数据。
Hub 模板可实现中心导航或分层导航模式。 这意味着,用户可从起点(即中心页面)导航到包含特定节所有成员的页面,或者,用户可以从中心页面导航到单个项。 该模板还包含从节页面到项页面的导航。 虽然该模板仅包含第 3 节及其组和项之间的导航代码(请参见图 1),但您可以使用 ListView 或 Repeater 控件,针对其他节执行相同类型的导航(如果这对于您的应用程序来说有意义)。