教程：基本應用框架

曾少寧發表於2012-06-04
框架

ChocolateChip 使用一些特殊標記程式碼作為所有 Web 應用的框架。其中大多數標籤都是 WAML 特有和專用的。WAML 是 ChocolateChip-UI 用於生成應用的標記語言。ChocolateChip-UI 基於 HTML5 構建應用。因此，應用總是以一個正確的 HTML5 開始。下面是建立一個 Web 應用的最簡單結構：

<!DOCTYPE html>  
<html lang="en" manifest="cache.manifest"> 
<head>  
  <meta charset="utf-8">  
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width"> 
  <meta name="apple-mobile-web-app-capable" content="yes"> <link rel="apple-touch-startup-image" href="startup.png"> 
  <link rel="apple-touch-icon" href="app-icon.png"/> <link rel="shortcut icon" href="favicon.ico"> 
  <title>Title</title> 
  <link rel="stylesheet" href="chui.css"> <style type="text/css"> /* Local Styles Here */

  </style> <script src="chocolatechip.js" type="text/javascript"></script> 
  <script src="chui.js" type="text/javascript"></script> 
  <script type="text/javascript"> 
    /* Local JavaScript Here */ 
    $.ready(function() { });
  </script> 
</head> 
<body> 
  <app> 
     <view id="main" ui-background-style="striped" ui-navigation-status="current"></view>
  </app> 
</body> 
</html>

這些標記程式碼設定了視口後設資料標籤，所以應用能夠自動適應整個螢幕的大小。如果希望使用 cache.manifest 作為離線儲存，那麼您可以保留它，否則可以將它刪除。chui.css 的連結是必需的，它定義了 ChocolateChip-UI 控制元件的預設樣式和動畫效果。ChocolateChip.js 和 ChUI.js 是 ChocolateChip-UI 實現控制元件的互動與功能的指令碼。這個基本框架還包含本地樣式和本地 JavaScript 指令碼。

上面的標記程式碼中包含了 app 和 view 標籤。app 標籤是 Web 應用的根元素。ChocolateChip-UI Web 只有唯一一個 app 標籤，而且它一定是文件 body 標籤的第一個子元素。app 標籤下可以包含任意多個 view。作為應用預設載入檢視的 view 應該設定屬性 ui-navigation-status="current"。這個 view 必須將 id 設定為 #main。其他檢視可以使用這個 id 返回預設檢視。您在根據需要新增其他檢視併為之設定相應的 id。在這段程式碼中，檢視設定了 ui-background-style="striped 屬性，使用預設的垂直條紋背景樣式。

使用上面的標記程式碼建立 Web 應用，您需要執行一些操作。您可以直接在檢視上新增資料，或者新增一個導航欄（navbar）、工具欄（toolbar）或子檢視（subview），實現更多的應用資料互動方式。如果給應用新增子檢視，您還需要加入一個可滾動皮膚（scrollpanel），這樣使用者可以垂直滾動介面，訪問螢幕高度範圍之外的資料。如果您使用如下所示程式碼，那麼 ChocolateChip-UI 會自動實現這種滾動效果。

<view>
<subview>
    <scrollpanel>

    </scrollpanel>
</subview>

移動 Web 應用通常會在頂部新增一個導航欄，也可能在螢幕底部帶有一個工具欄。ChocolateChip-UI 使用對應的標籤、屬性和佈局，很容易實現這些介面功能。注意，subview 標籤設定了 ui-associations 屬性，表示它帶有一個導航欄和一個底部工具欄。ChocolateChip-UI 會根據這些標籤和屬性安排導航欄、子檢視和工具欄，這樣在方向發生變化時，它們仍然能夠恢復到正確的尺寸關係，同時允許使用者通過滾動訪問子檢視內容。將上面的檢視加到模板中，就能夠得到一個實現了基本功能的基礎應用框架。您只需要確定將資料新增到子檢視的方法。作為開發者，您可以選擇通過 Ajax 呼叫、資料查詢或 Web 服務實現。一切由您決定。

<view id="main" ui-background-style="striped" ui-navigation-status="current">
<navbar>
    <h1>Tite</h1>
</navbar>
<subview ui-associations="withNavBar withBottomToolbar">
    <scrollpanel>

    </scrollpanel>
</subview>
<toolbar>
</toolbar>

要學習更多的開發方法，請參考教程 “導航欄與工具欄” 關於子檢視的介紹，以及 ChUI.css 和 WAML 的相關文件。

英文原文：http://chocolatechip-ui.com/tutorials.html#basic_app_shell.html

相關文章