每周源代码28 – ASP.NET MVC版iPhone


[原文发表地址] The Weekly Source Code 28 - iPhone with ASP.NET MVC Edition

[原文发表时间]June 9, 2008 11:33 PM

我最近对运用插件和其他工具来扩展应用程序这类越来越有兴趣了。image秉持着我一贯的要求阅读源代码以开发出更好的程序,亲爱的读者们,这里我为你们奉上第28篇“每周源代码”,之后还将源源不断地继续。

今天发布了iPhone 2.0,尽管我一直在尝试找到一个比Northwind更好的方案来展示它,我还是被Aaron的《用ASP.NET MVC玩转iPhone》一文感动到了。我酝酿着要写这样一篇博文已经有至少两个月了,不过现在他自己已经完成了,把我们大家都比下去了。掌声送给Aaron。

我主要是一个ASP.NET的开发者,一直用手机来游览一些信息,并且多年致力于此。差不多两年前,我做了DasBlog和这个网站,并且应用了一个手机版本。如果你通过黑莓或者移动Windows或其他小型设备访问hanselman.com,你会链接到有手机皮肤的同一个站点。我想把iPhone也加进来。

去年Al Pascual为Community Server添加了iPhone支持,通过将iPhone用户重定位到他的RSS feed,比起之前,提供了全新的简洁体验。

Steve Orr针对iPhone发展写了篇很不错的文章,他指出了许多重要的细节,比如viewport meta标签—提示iPhone如何缩放页面。他还写了高级iPhone开发的文章,罗列了更多细节(不算是真正的高级)。

我在想用ASP.NET MVC来做iPhone应用有多简单,结果表明这真是超级简单。首先,Google代码的IUI项目是用来制作iPhone基础应用的一系列Javascript和PNG组合。在Joe Hewitt工作基础上,iui团队所做的十分优秀。Joe写过一篇介绍性博文,解释了一些概念

你可以利用Safari,或者带有用户代理切换器及自定义的Firefox来模拟iPhone

比如,上图的源代码如下。注意其中包含的CSS和JS文件。

   1: <html xmlns="http://www.w3.org/1999/xhtml">
   2:  
   3: <head>
   4:  
   5: <title>iUI Prefs Demo</title>
   6:  
   7: <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
   8:  
   9: <style type="text/css" media="screen">@import "../iui/iui.css";</style>
  10:  
  11: <script type="application/x-javascript" src="../iui/iui.js"></script>
  12:  
  13: </head>
  14:  
  15: <body>
  16:  
  17: <div class="toolbar">
  18:  
  19: <h1 id="pageTitle"></h1>
  20:  
  21: <a id="backButton" class="button" href="#"></a>
  22:  
  23: </div>
  24:  
  25: <form id="settings" title="Settings" class="panel" selected="true">
  26:  
  27: <h2>Playback</h2>
  28:  
  29: <fieldset>
  30:  
  31: <div class="row">
  32:  
  33: <label>Repeat</label>
  34:  
  35: <div class="toggle" onclick=""><span class="thumb"></span><span class="toggleOn">ON</span><span class="toggleOff">OFF</span></div>
  36:  
  37: </div>
  38:  
  39: <div class="row">
  40:  
  41: <label>Shuffle</label>
  42:  
  43: <div class="toggle" onclick="" toggled="true"><span class="thumb"></span><span class="toggleOn">ON</span><span class="toggleOff">OFF</span></div>
  44:  
  45: </div>
  46:  
  47: </fieldset>
  48:  
  49: <h2>User</h2>
  50:  
  51: <fieldset>
  52:  
  53: <div class="row">
  54:  
  55: <label>Name</label>
  56:  
  57: <input type="text" name="userName" value="johnappleseed"/>
  58:  
  59: </div>
  60:  
  61: <div class="row">
  62:  
  63: <label>Password</label>
  64:  
  65: <input type="password" name="password" value="delicious"/>
  66:  
  67: </div>
  68:  
  69: <div class="row">
  70:  
  71: <label>Confirm</label>
  72:  
  73: <input type="password" name="password" value="delicious"/>
  74:  
  75: </div>
  76:  
  77: </fieldset>
  78:  
  79: </form>
  80:  
  81: </body>
  82:  
  83: </html>

注意到那些小小的toggle开关了吗?它们在div句中class="toggle",然后点击事件的处理器就会被连动至Javascript中的代码:

   1: addEventListener("click", function(event)
   2:  
   3: {
   4:  
   5: var div = findParent(event.target, "div");
   6:  
   7: if (div && hasClass(div, "toggle"))
   8:  
   9: {
  10:  
  11: div.setAttribute("toggled", div.getAttribute("toggled") != "true");
  12:  
  13: event.preventDefault(); 
  14:  
  15: }
  16:  
  17: }, true);

基于切换状态,开关也酌情显示:

   1: .toggle {
   2:  
   3: border: 1px solid #888888;
   4:  
   5: -webkit-border-radius: 6px;
   6:  
   7: background: #FFFFFF url(toggle.png) repeat-x;
   8:  
   9: font-size: 19px;
  10:  
  11: font-weight: bold;
  12:  
  13: line-height: 30px;
  14:  
  15: }
  16:  
  17: .toggle[toggled="true"] {
  18:  
  19: border: 1px solid #143fae;
  20:  
  21: background: #194fdb url(toggleOn.png) repeat-x;
  22:  
  23: }

上面的iPhone HTML页面有多个form,明确控制div,让所有的东西比起WebForms更适合MVC。Aaron在博客中阐述了他是如何把IUI加入他的内容文件夹的,有一点麻烦的就是IUI默认HTML是从Ajax调用中返回,而不是JSON。

Aaron的视图就是之后的局部视图,为IUI的内置Ajax调用而准备,所以产品目录页看上去就像这样。注意这里的标记都是独立的。

   1: <ul id="products" title="Products">
   2: <%  foreach (Product p in ViewData.Model) { %>
   3:     <li><%= Html.ActionLink(p.ProductName, "Index", "Products", new { id = p.ProductID }) %></li>
   4: <% } %>
   5: </ul>

又酷又简单。


Comments (0)

Skip to main content