注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

分享,态度 ·~~

—— 十年太长,五年;如果可以回到五年前,你最想对那时候的自己说什么?

 
 
 

日志

 
 

MSDN Blog:打造卓越的磁贴体验(第 1 部分)  

2012-05-18 10:53:05|  分类: Windows 8 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

动态磁贴是吸引用户重返您的应用程序的最佳方式之一。本篇博文将向您介绍应如何使用轮询和本地 API 来更新应用程序的动态磁贴,从而让您直接在 Windows 8 [Start](开始)屏幕上充分展示应用程序的出众之处。您可将应用程序内的最佳内容展现于磁贴的前方或中心位置。应用程序磁贴是应用程序中的核心部分,而且很可能也是用户最常见到的部分,因此请好好利用动态磁贴来吸引用户重返您的应用程序!

在本篇博文中,我将通过一个示例应用程序来向您介绍如何:

  1. 设计磁贴更新
  2. 选择与磁贴内容相匹配的模板
  3. 在应用程序未运行时,使用云中的轮询通知来更新磁贴
  4. 在应用程序运行时,使用包含于 SDK(Windows 8 SDK 应用程序磁贴和徽章示例)中的 NotificationsExtensions 库以更新磁贴。

Contoso Food Trucks 应用程序简介

让我们一起来看一个示例应用程序:Contoso Food Trucks。该应用程序可让用户获取有关移动餐车的信息。我们在 Metro 风格应用程序网站的案例研究一文中所展示的也是该款应用程序。在本篇博文中,我将向您展示如何向该应用程序添加动态磁贴。

MSDN Blog:打造卓越的磁贴体验(第 1 部分) - 乂乂 - 一个人,一支烟  ·~~

您应用程序的最大优势是什么?

请记住:您应用程序的最大优势将有助于您确定磁贴中应包含什么内容,以及应多久更新一次该磁贴。

Contoso Food Trucks 应用程序最大的优势在于能帮助用户查找并跟踪其最喜爱的移动餐车,并发现附近新出现的移动餐车。因此,我将 Food Trucks 磁贴的目标设置为:

  • 介绍某一位置附近的移动餐车
  • 跟踪用户最喜爱的移动餐车

请勿在应用程序磁贴中投放广告。根据 Windows 应用商店的条款,绝大多数磁贴中严禁投放广告。

默认磁贴与磁贴尺寸

每个应用程序都有一个默认的磁贴。默认磁贴就是用户首次安装应用程序时所见到的磁贴。默认磁贴的徽标图像将显示为您应用程序的徽标或其他品牌图像,因此用户可清晰地辨识应用程序。

您可在应用程序清单中定义默认磁贴的徽标图像,Windows 将一直显示该磁贴图像,直至在接收到首个磁贴通知之后对磁贴进行更新为止。当磁贴无通知可显示时,其可恢复至默认图像;例如,在当前磁贴通知过期或用户关闭该应用程序的动态磁贴更新时,磁贴就将恢复至默认图像。

默认磁贴图像同时将定义磁贴所支持的尺寸。磁贴能以两种尺寸呈现:方形或宽形。所有应用程序都必须支持方形磁贴,但是有些应用程序同时可支持宽形磁贴。如果某一应用程序未向默认磁贴提供宽形徽标图像时,则该应用程序磁贴无法将尺寸调整成宽形磁贴,也就是说其无法接收宽形磁贴通知。如果应用程序包含宽形徽标图像,那么 Windows 将在默认情况下显示宽形磁贴。

对于 Contoso Food Trucks 应用程序,我们选择了支持宽形磁贴,这是因为我每天将至少更新该磁贴一次,而且该应用程序所提供内容需要额外的空间。以下是我用于默认磁贴徽标的图像:

MSDN Blog:打造卓越的磁贴体验(第 1 部分) - 乂乂 - 一个人,一支烟  ·~~

方形磁贴和宽形磁贴均可接收通知。在发送通知时,我将始终包含方形版本和宽形版本的通知。这样一来,即使用户将磁贴调整成较小的尺寸,他们仍可看到更新的数据。

有关为应用程序创建默认图像的详细信息,请参阅快速入门:使用 Microsoft Visual Studio 11 Manifest Editor 创建默认磁贴一文。有关磁贴尺寸概念的详细信息,请参阅磁贴与通知概述一文。

设计磁贴更新

介绍附近的移动餐车

我们应用程序的最大优势之一便是其可帮助用户确定应前往那一辆移动餐车。因此,我们需要了解哪些移动餐车分布在用户附近。为确定这一信息,我们的应用程序将让用户设置其默认的午餐位置。当用户设置了该位置后,我们将向用户展示当前位于用户附近的移动餐车。对于该磁贴更新,我选择了一个不带图像的模板。

由于磁贴是通过将应用程序的内容装入一个系统定义的模板之中而得以更新,因此我们的首要任务是选择一个适合我们内容的模板。在浏览了开发中心内的模板目录之后(参见选择磁贴模板一文), 我为宽形磁贴选择了 TileWideText01 模板。而对于方形磁贴,我选择了 TileSquareText03 模板。我之所以选择这两个纯文本模板是因为我只需要在磁贴上更新文本字符串。

在做出最终决定之前,我使用了 Windows 8 SDK 应用程序磁贴和徽章示例来试验不同的模板选项。借助示例,我可在最终选定磁贴之前轻松交换不同的文本字符串和图像。例如,通过在示例中测试模板,我决定需要在方形磁贴中使用移动餐车的简称,以确保文字能够在磁贴中恰当显示。

MSDN Blog:打造卓越的磁贴体验(第 1 部分) - 乂乂 - 一个人,一支烟  ·~~MSDN Blog:打造卓越的磁贴体验(第 1 部分) - 乂乂 - 一个人,一支烟  ·~~

系统通过发送通知而创建磁贴更新。通知就是一个填充了磁贴架构的 XML 代码段。您可使用 TileUpdateManager.getTemplateContent() 函数或使用 NotificationsExtension 库(我将在本篇博文的第二部分探讨该方法)来创建 XML 代码。通知将显示呈现通知时所使用的磁贴模板,以及根据模板布局而需要显示于磁贴上的文字和图像。

为了创建出可较早显示于移动餐车应用程序的磁贴更新,我采用了这一磁贴 XML:

磁贴 XML

<?xml version="1.0" encoding="utf-8" ?>
<tile>
  <visual>
    <binding template="TileWideText01">
      <text id="1">Food Trucks Near You</text>
      <text id="2">Nom Nom Barbecue Truck</text>
      <text id="3">Sushi Truck</text>
      <text id="4">Macaroni Makin' Wagon</text>
    </binding>
    <binding template="TileSquareText03">
      <text id="1">Near You</text>
      <text id="2">Nom Nom</text>
      <text id="3">Sushi Truck</text>
    </binding>  
  </visual>
</tile>

本 XML 中包含两个 <绑定> 元素,其中一个用于宽形磁贴,另一用于方形磁贴。由于我们的应用程序可支持宽形磁贴,因此我将在所有磁贴通知中始终提供宽形和方形磁贴模板绑定。无论用户将磁贴设置成何种尺寸,这一做法都将让磁贴始终显示通知更新内容。方形磁贴将仅显示两辆餐车的名称,这是因为第三项名称无法装入较小的方形模板之中。

最喜爱的移动餐车

我希望用户能在我们的应用程序中了解其最喜爱的移动餐车位于何处。而我同时希望用户也能从磁贴中获取这一信息。因此,我将这些信息调整成数行文字。我同时设置了代表每辆餐车的图像,从而让我们的磁贴看上去更加有趣。

由于磁贴是通过将应用程序的内容装入系统定义的模板之中而得以更新,因此我们的首要任务是选择一个适当的模板。在浏览了开发中心内的模板目录之后(参见选择磁贴模板一文),我为宽形磁贴选择了 TileWideImageAndText02 磁贴模板,该模板可支持一个图像和两个短文本字符串。而对于方形磁贴,我选择了 TileSquarePeekImageAndText04 模板来让磁贴显示图像和文字。相比常规磁贴区域的限制,取数模板可让我提供更多内容。Windows 将为取数模板提供动画效果,以在方形磁贴中显示我在模板中输入的图像和文字,因此方形磁贴的顶框内容和底框内容将在磁贴中交替显示。取数磁贴的内容将在磁贴空间内上下滚动,以显示所提供的完整内容。

MSDN Blog:打造卓越的磁贴体验(第 1 部分) - 乂乂 - 一个人,一支烟  ·~~ MSDN Blog:打造卓越的磁贴体验(第 1 部分) - 乂乂 - 一个人,一支烟  ·~~

磁贴 XML

<?xml version="1.0" encoding="utf-8" ?>
<tile>
  <visual>
    <binding template="TileWideImageAndText02">
      <image id="1" src="http://www.contoso.com/foodtrucks/nomnombbq.png"/>
      <text id="1">Nom Nom Barbecue Truck</text>
      <text id="1">Washer Ave and 3rd until 3</text>
    </binding>
    <binding template="TileSquarePeekImageAndText04">
      <image id="1" src=" http://www.contoso.com/foodtrucks/nomnombbq-square.png"/>
      <text id="1">Nom Nom @ Washer Ave and 3rd until 3</text>
    </binding>
  </visual>
</tile>

像以前一样,我通过使用被定义为 XML 负载的通知而确定所寻求的磁贴。而这个磁贴与我首个磁贴之间的差异在于我在此通知中使用了图像。通知中的图像并未包含于 XML 负载之中,而只是从负载中被引用至其他位置。图像既可显示于 Web 服务之中(如此处所显示的),也可显示于本地计算机之中。如果 Windows 接收了通知,那么其将在向用户显示该通知时从 Web 服务下载图像。有关如何在磁贴中包含图像的详细信息,请参阅开发中心内如何向磁贴模板添加图像一文。

图像内容尺寸在存储容量大小和像素大小方面均有一定的限制要求。如果图像过大,磁贴通知将无法显示,因此用户需使用符合这些限制要求的图像。同时请注意,磁贴仅支持 JPG 和 PNG 格式的图像。有关在磁贴中包含图像的详细信息,请参阅开发中心内磁贴图像尺寸一文。

更多内容将陆续提供

现在我们已经了解了所希望获得的磁贴将是什么模样,接下来我们需要确定何时更新磁贴。在本篇博文的第二部分中,我们将向您介绍如何为 Contoso Food Trucks 应用程序添加轮询和本地磁贴更新。我将向您展示如何从您的应用程序中为磁贴更新启动轮询,为您提供可用于构建进行轮询的 Web 服务的示例 ASP.NET 和 PHP,并与您一同探讨如何为应用程序添加次级磁贴,以及如何使用 NotificationsExtension 库来更新磁贴。希望到目前为止,本篇博文有助于启发您思考应如何借助动态磁贴而让自己的应用程序在海量应用程序中脱颖而出!

-- Windows 项目经理 Kevin Michael Woley

特别感谢 Tyler Donahue 和 Nazia Zaman 在本篇博文起草过程中所提供的大力帮助。

【from http://blogs.msdn.com/b/windowsappdev_cn/archive/2012/04/20/10295998.aspx
【本文链接:
http://zwkufo.blog.163.com/blog/static/2588251201241810535208/

  评论这张
 
阅读(1062)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017