【Azure实例】有趣的Silverlight应用：录播简笔画

使用Silverlight技术与Windows Azure平台实现了一个有趣的应用程序：录播简笔画。
这是流牛木马在Azure 入门系列文章中第一个完整的、有实用价值的实例。(其实也是国内第一个哟～o(∩_∩)o)

---

 

 围观地址：

http://y.cloudapp.net

---

 一些有趣的简笔画：

http://y.cloudapp.net/v.aspx?d=3153113638000 某陌生老外的发情之作
http://y.cloudapp.net/v.aspx?d=2162592728297 某陌生老外画的机器人
http://y.cloudapp.net/v.aspx?d=3882205000000 一个美女朋友画的卡通猫猫

【最新作品列表 http://y.cloudapp.net/Gallery.aspx 】

【马上动手试一试 http://y.cloudapp.net/v.aspx 】

---

 简介：

    Stick Love 是基于Silverlight 2.0制作的一款在线应用程序。它的功能简单而有趣：允许你在线绘制简笔画，并能够将作品保存下来，通过一个url与朋友们分享你的杰作。值得一提的是：她支持回放，也就是说，别人在欣赏你的杰作的时候，还能够欣赏到你完成作品的全过程哦！就好像你站在他前面现场画一样！

---

 核心部分截图：

---

 技术分解：

在《Silverlight InkPresenter 实现路径回放的探索》 中，我们探讨了使用Silverlight 的Inkpresenter控件实现路径回放的可行性，并写了一个原型demo。

Stick Love 正是在上次介绍的原型基础上再次开发而完成的作品。在路径回放方面沿用了以前的思想。另外还引入了Azure Service Platform,其画板数据存储、程序托管、后台处理、评论管理等功能都部署在了Azure这个云计算平台之上。

本文主要叙述Stick Love涉及到Azure平台的架构思路。有关路径回放技术请参考《Silverlight InkPresenter 实现路径回放的探索》一文。

1. 考虑存放简笔画数据的实体结构
   在《探索》一文中，我们得出的结论是：保存画板简笔画数据需要两个string变量：一个用来保存“点”的值，另一个用来保存每个“点”的时间。实际应用时，我们还需要增加一个主键在数据库中维持数据。
   根据《【Azure Services Platform Step by Step-第12篇】实现Windows Azure聊天室-使用Table Storage》中提到的有关Azure Storage Table实体的使用方法，我们建立一个叫做StickDrawing的实体。并在实体中增加"Guid"作为主键。（为了缩短参数，我并未使用真正的GUID）
   
   
    public class StickDrawing : Microsoft.Samples.ServiceHosting.StorageClient.TableStorageEntity
       {
           public StickDrawing()
           {
              PartitionKey = "";
              RowKey = (DateTime.MaxValue.Ticks - DateTime.Now.Ticks).ToString();  
   
           }
   
           public string Guid
           {
               get { return PartitionKey; }
               set { PartitionKey = value; }
           }
   
           //两个播放replay的重要参数
           public string inkStringForPlayback { get; set; }
           public string inkStringStartTimes { get; set; }
       }
2. 保存简笔画数据
   同样是按照《【Azure Services Platform Step by Step-第12篇】实现Windows Azure聊天室-使用Table Storage》中提到的方法，我们为StickDrawing实体类建立一个基于ADO.NET Services Client的DataContext。在
   DataContext增加一个IQueryable<StickDrawing>的公共属性供查询使用，增加AddStickDrawing方法供保存数据使用。
   
    public class StickDrawingDataServiceContext: TableStorageDataServiceContext
       {
           public StickDrawingDataServiceContext(StorageAccountInfo accountInfo)
               : base(accountInfo)
           {
           }
   
           //定义公共属性StickDrawings,返回所有数据服务上下文中的StickDrawings类实体。
           public IQueryable<StickDrawing> StickDrawings
           {
               get
               {
   
                   return this.CreateQuery<StickDrawing>("StickDrawings");
               }
   
           }
   
           //增加实体
           public void AddStickDrawing(StickDrawing dm)
           {
   
               this.AddObject("StickDrawings", dm);
               this.SaveChanges();
           }
       }
3. 读取特定的简笔画数据
   有了以上的数据结构，我们就可以做查询了。这里的查询主要有两个：一个是根据主键取得单个实体；二是取得最新的N个实体(在Gallery中展示最新作品)。查询方法就是对StickDrawingDataServiceContext类中的IQueryable<StickDrawing> StickDrawings属性的操作。以下是根据主键取实体的代码。
   
   
     public StickDrawing GetStickDrawing(string pKey)
           {
               StorageAccountInfo accountInfo = StorageAccountInfo.GetAccountInfoFromConfiguration("TableStorageEndpoint");
   
               TableStorage.CreateTablesFromModel(typeof(StickDrawingDataServiceContext), accountInfo);
               StickDrawingDataServiceContext context = new StickDrawingDataServiceContext(accountInfo);
   
             IQueryable<StickDrawing> stickDrawingQ = context.StickDrawings.Where(p => p.Guid == pKey);
   
                 return stickDrawingQ.FirstOrDefault();
         }
4. 通过URL分享简笔画
   有了第三步，“URL分享”这个功能就非常容易了，实现方法也很多。目前我的方法是最原始的：使用QueryString。在QueryString中传入主键，然后在页面程序的Pageload或Silverlight程序的主函数中读取数据就可以了。如果你觉得使用QueryString影响美观，你可以试试URL Rewrite。这一功能在09年3月版本的Azure SDK中首次引入，并在MIX09上发布(《详见MIX09-Windows Azure (March 2009 CTP)里振奋人心的新特性一览 》）过几天流牛木马会写写在Azure中使用URL Rewrite方面的博文。
5. 设计Web Service供Silverlight进行数据交互
   众所周知，Silverlight 2.0中是无法直接与数据交互的(在Silverlight 3.0中有改变，见《Microsoft .NET RIA Services快速上手》)，其与数据层面的操作必须通过WCF或者Web Service来完成。这里我们使用了Web Service的方法。
   例如：
   
   [WebMethod]
           public StickDrawing[] GetStickDrawings(int top)
           {
               StorageAccountInfo accountInfo = StorageAccountInfo.GetAccountInfoFromConfiguration("TableStorageEndpoint");
   
               TableStorage.CreateTablesFromModel(typeof(StickDrawingDataServiceContext), accountInfo);
               StickDrawingDataServiceContext context = new StickDrawingDataServiceContext(accountInfo);
   
               return context.StickDrawings.Take(top).ToArray();
           }
6. 评论功能的设计
   为了增强交互性，我们需要在每一个简笔画作品下面都增加一个独立的留言板。
   怎样设计实体结构设计呢？也不难，我们建一个Comment实体类，其中的PartitionKey与StickDrawing的Guid主键保持一致——这样Comment实体类中的PartitionKey属性就充当了类似传统关系数据库中“外键”的角色。StickDrawing与Comment之间构成一对多的关系。如果这样的话，Comment的PartitionKey就不能单独做主键了——因为它不唯一。没关系，我们还可以使用它的Rowkey来做主键。（说了这么多，如果你对PartitionKey,Rowkey不了解的话，请参考《【Azure Services Platform Step by Step-第9篇】Windows Azure Storage概览 》）
   Comment实体类代码：
   
   
     public class Comment: Microsoft.Samples.ServiceHosting.StorageClient.TableStorageEntity
       {
           public Comment()
           {
              PartitionKey = "000000";  //PartitionKey与StickDrawing类保持一致
              RowKey = (DateTime.MaxValue.Ticks - DateTime.Now.Ticks).ToString();  
   
           }
           public string Name { get; set; } //留言者姓名
           public string Content { get; set; }//留言内容
       }
   
   根据不同的PartitionKey获取针对某简笔画的所有评论：
   
   
   StorageAccountInfo accountInfo = StorageAccountInfo.GetAccountInfoFromConfiguration("TableStorageEndpoint");
               TableStorage.CreateTablesFromModel(typeof(CommentDataServiceContext), accountInfo);
               CommentDataServiceContext context = new CommentDataServiceContext(accountInfo);
               List<Comment> listComments = context.Comments.Where(p => p.PartitionKey == d).ToList();

---

PS: 由于我还打算增加更多的功能，所以暂时不提供完整源代码。相信读者在阅读完上文之后，其实也不再需要完整源代码了。o(∩_∩)o

 

在时机成熟时，我会将Stick Love项目所有源码放在Codeplex上。地址：http://sticklove.codeplex.com/
如果你喜欢Stick Love的话，多多帮忙宣传哦～～多多提意见～～谢谢谢谢～ o(∩_∩)o