作者：David Walsh
翻譯：Siqi （siqi.zhong@gmail.com
）
原文：Introduction to TweetView
在本系列的第一篇教程dojox.mobile入門
中，我們已經詳細介紹了Dojo Toolkit中dojox.mobile包的基本概念和用法。在本系列接下來的教程中，我們將著手建立我們自己的強大dojox.mobile web應用程式TweetView。本篇教程將協助你熟悉什麼是TweetView，我們想用它來幹什麼，然後我們將開始構建這個行動裝置 App程式的 HTML和CSS布局。
版本：1.6
難度：中級
系列：TweetView
什麼是TweetView？
TweetView是我們將要使用dojox.mobile和一些我們自己定製的Dojo資源建立的應用程式。TweetView不僅僅是一個簡單的dojox.mobile習作，它將是一個功能齊全並且真正有用的web應用程式。我們製作TweetView的目標有：
！建立應用程式前花店時間好好計劃一下是非常重要的
和建立所有基於Dojo的應用程式一樣，一個共有的目標是保持代碼的靈活、可擴充性，同時別忘了合理添加註釋。
TweetView設計
我們將依照下面的模型來建立TweetView。本系列中接下來幾篇教程將逐一介紹每個模型中視圖的實現。
！你也許已經注意到這些模型只展示了iOS主題。我們的教程將專註於實現iOS主題。Android主題的圖片和元素樣只要根據iOS的資源依樣畫葫蘆就可以了。由於dojox.mobile既提供Android主題又提供iOS主題，一旦我們的應用程式完成了，我們將很容易的建立Android的樣式資源。
講解上面所有模型的實現已經超出了本教程的範圍，所以我們將先專註於建立該應用程式的全域HTML/CSS結構，也就是說你所看到的頂部標題列和底部的控制地區。
TweetView HTML結構
第一篇教程提供了一個mobile web應用程式堅實的模板、所需的主題樣式表以及一些SCRIPT標籤。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><br /><html><br /> <head><br /> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/><br /> <meta name="apple-mobile-web-app-capable" content="yes" /><br /> <title>TweetView</title><br /> <link href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/themes/iphone/iphone.css" mce_href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/themes/iphone/iphone.css" rel="stylesheet" /><br /> <mce:script type="text/javascript"><!--<br /> djConfig = {<br /> isDebug: true,<br /> baseUrl: './',<br /> modulePaths: {<br /> tweetview: 'js/tweetview'<br /> },<br /> parseOnLoad: true<br /> };</p><p>// --></mce:script><br /> <mce:script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js.uncompressed.js" mce_src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js.uncompressed.js"></mce:script><br /> <mce:script type="text/javascript"><!--<br /> // 使用輕量級的mobile parser<br /> dojo.require("dojox.mobile.parser");<br /> // 匯入 Dojo mobile<br /> dojo.require("dojox.mobile");<br /> // 如果用戶端不是基於Webkit核心的話道出compat包<br /> dojo.requireIf(!dojo.isWebKit,"dojox.mobile.compat");</p><p>// --></mce:script><br /> </head><br /> <body></p><p> <!-- 這裡將放我們的應用程式代碼 --></p><p> </body><br /></html>
有了基本的應用程式模板，我們接下來將考慮怎麼把三個視圖整合進來（Tweets，Mentions，和Setting），還有每個視圖中底部的導航條。我們先來處理視圖：
<!-- tweets 視圖 --><br /><div id="tweets" dojoType="dojox.mobile.ScrollableView" selected="true"><br /> <h1 dojoType="dojox.mobile.Heading"><br /> <!-- 重新整理按鈕 --><br /> <div dojoType="dojox.mobile.ToolBarButton" class="mblDomButton tweetviewRefresh" style="float:right;" mce_style="float:right;" icon="images/refresh.png"></div><br /> Tweets<br /> </h1><br /> <ul dojoType="dojox.mobile.RoundRectList"><br /> <li dojoType="dojox.mobile.ListItem"><br /> Tweet item here<br /> </li><br /> </ul><br /></div></p><p><!-- mentions視圖 --><br /><div id="mentions" dojoType="dojox.mobile.ScrollableView"><br /> <h1 dojoType="dojox.mobile.Heading"><br /> <!-- the refresh button --><br /> <div dojoType="dojox.mobile.ToolBarButton" class="mblDomButton tweetviewRefresh" style="float:right;" mce_style="float:right;" icon="images/refresh.png"></div><br /> Mentions<br /> </h1><br /> <ul dojoType="dojox.mobile.RoundRectList"><br /> <li dojoType="dojox.mobile.ListItem"><br /> Mention tweet item here<br /> </li><br /> </ul><br /></div></p><p><!-- settings視圖 --><br /><div id="settings" dojoType="dojox.mobile.ScrollableView"><br /> <h1 dojoType="dojox.mobile.Heading">Settings</h1><br /> <h2 dojoType="dojox.mobile.RoundRectCategory">Show</h2><br /> <ul dojoType="dojox.mobile.RoundRectList"><br /> <li dojoType="dojox.mobile.ListItem"><br /> Setting item here<br /> </li><br /> </ul><br /></div>
！注意，我們在每一個視圖裡放了一個樣本列表。每個視圖中最終內容的實現將在將來的教程中介紹。
我們沒有使用dojox.mobile基本的視圖類View，而是選擇了ScrollableView。 ScrollableView頂部有一個固定的標題列，在底部有一個固定的控制條。ScrollableView的中間內容可以被滾動。我們還是用了ToolBarButton來實現一個重新整理按鈕。注意， mblDomButton CSS 類只是dojox.mobile提供的諸多按鈕樣式
之一。現在這個重新整理按鈕還沒有實現任何功能——我們先簡單的把它放在這裡。最後，我們給這個按鈕執行個體添加了名為tweetviewRefresh的CSS類。這個CSS類的內容是：
<mce:style><!--<br />/* vertically center the image */<br />.tweetviewRefresh img {<br /> margin-top:6px;<br />}<br />--></mce:style><style mce_bogus="1">/* vertically center the image */<br />.tweetviewRefresh img {<br /> margin-top:6px;<br />}</style>
這個重新整理按鈕現在在標題列中垂直置中。
安置好這三個視圖之後，我們可以開始使用dojox.mobile.TabBar來建立底部的功能表列，它包含三個dojox.mobile.TabBarButton:
<!-- 底部的TabBar --><br /><ul dojoType="dojox.mobile.TabBar" iconBase="images/iconStrip.png" style="margin-top:-49px;" mce_style="margin-top:-49px;"><br /> <!-- iconPos的四個參數為： top left width height --><br /> <li dojoType="dojox.mobile.TabBarButton" iconPos1="0,0,29,30" iconPos2="29,0,29,30" selected="true" moveTo="tweets">Tweets</li><br /> <li dojoType="dojox.mobile.TabBarButton" iconPos1="0,29,29,30" iconPos2="29,29,29,30" moveTo="mentions">Mentions</li><br /> <li dojoType="dojox.mobile.TabBarButton" iconPos1="0,58,29,30" iconPos2="29,58,29,30" moveTo="settings">Settings</li><br /></ul>
控制按鈕的圖片切片的大小為29×30，普通狀態的圖片在頂層，啟用狀態的圖片在其之下。點擊每個控制按鈕將切換到其對應的視圖。
！dojox.mobile.TabBar和dojox.mobile.TabBarButton是Dojo1.6中的新控制項。dojox.mobile.TabBar有兩種類型：tabBar和segementControl。你可以在這裡
看到他們的區別。同時請注意本例中的TabBar添加了樣式 margin-top：-49px，這使得TabBar可以一直顯示在當前頁面上。
現在我們需要的都準備好了，讓我們回顧一下代碼細節:
同時請注意，我們使用的三個widget並不是dojox.mobile核心內建的：TabBar, TabBarButton和ScrollableView。你可只需要添加下列require語句就可以為你的頁面添加所需的資源。
// 使用輕量的mobile parser<br />dojo.require("dojox.mobile.parser");<br />// 匯入 dojox.mobile<br />dojo.require("dojox.mobile");</p><p>// 匯入額外的 dojox.mobile widgets<br />dojo.require("dojox.mobile.ScrollableView");<br />dojo.require("dojox.mobile.TabBar"); // TabBarButton 在這裡被匯入</p><p>// 如果用戶端不是Webkit核心的話匯入compat包。<br />dojo.requireIf(!dojo.isWebKit,"dojox.mobile.compat");
！這兩個額外的資源非常小並且不需要額外的樣式表。所以我們的應用程式還是很“苗條”的。
現在我們的應用程式的布局已經完成了！你可以看下TweetView大致長什麼樣！
示範
TweetView已經成形！
建立TweetView的基本布局非常簡單：添加一些ScrollingView widgets 和 TabBar。需要指出的是，TweetView應用程式的每一個組件都是dojox.mobile提供的：標題列，工具列，按鈕...這些都已經為你準備好了。
讓我們期待本系列的下一篇教程！下一篇教程中我們將介紹如何建立Tweets和Mentions視圖中的具體內容！
TweetView系列中文教程
Dojo mobile TweetView 系列教程之一 —— dojox.mobile入門
Dojo mobile TweetView 系列教程之二 —— TweetView 啟程
Dojo mobile TweetView 系列教程之三 —— Tweets和Mentions視圖
Dojo mobile TweetView 系列教程之四 —— 建立Setting視圖
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
