首頁 > 開發者 > 網站開發

第一個Polymer應用

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

原文連結: Step 1: Creating the app structure
翻譯日期: 2014年7月5日
翻譯人員: 鐵錨

在本節中,將使用一些預先構建好的Polymer元素來建立基本的應用程式結構，包括一個工具列(toolbar)和一些選項卡(tabs).

編輯 index.html 檔案
進入根目錄下面的 starter 目錄中, 使用你喜歡的文字編輯器開啟 index.html 檔案, 檔案的初始內容大致如下所示:

<!doctype html><html><head>  <title>unquote</title>  <meta name="viewport"     content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">  <script src="../components/platform/platform.js">  </script>  <link rel="import"     href="../components/font-roboto/roboto.html">  ...
說明:
  • 本檔案定義了一些基本的風格(styles)並嵌入了 platform.js 指令檔,該指令碼可以提供所有缺少的平台特性。
  • 元素 link rel="import" 是HTML中一種新的引入一個 html 檔案作為資源的方式,稱為 HTML Import.

略過中間的那些樣式新鮮(style),在檔案的底部,你會看到一些新鮮的東西: 
  ...<body unresolved touch-action="auto"></body>  ...
說明:

  • <body>元素的 unresolved 屬性(attribute), 是為了防止 那些在瀏覽器中沒有原生(native)支援的自訂的無樣式元素(FOUC)發生閃爍(flash)而設計的。詳情請參考 Polymer樣式參考文檔。
  • touch-action="auto" 屬性是為了確保在某些瀏覽器中妥善處理觸摸事件。

-------------------------------------------------------------------------------------

接下來我們要在合適的位置添加一些 HTML import link 來引入   <core-header-panel>, <core-toolbar>, 以及 <paper-tabs> 元素： 
  <script     src="../components/platform/platform.js">  <link rel="import"     href="../components/font-roboto/roboto.html">  <!-- 下面是需要添加的元素,如果亂碼,請刪除中文內容,或另存新檔UTF-8編碼 -->  <link rel="import"    href="../components/core-header-panel/core-header-panel.html">  <link rel="import"    href="../components/core-toolbar/core-toolbar.html">  <link rel="import"    href="../components/paper-tabs/paper-tabs.html">
說明: 
  • Polymer 使用 HTML imports技術 來載入組件。HTML imports提供了依賴管理,確保自訂元素及其所有的依賴項都在使用之前被載入進來。
  • 在原教程中,需要添加的代碼使用黑色文字顯示(因為 CSDN的 pre 限制,所以譯文中請讀者自己甄別)。
-------------------------------------------------------------------------------------

要增加一個工具條(toolbar), 可以在 body 標籤內添加下面的代碼: 
  <core-header-panel>    <core-toolbar>    </core-toolbar>    <!-- 主要的頁面內容將會放在這裡 -->   </core-header-panel>
儲存後/部署後重新整理頁面,將看到頂部一個藍色的工具列.
說明:
  •  <core-header-panel> 元素是一個簡單的容器,包含一個header(在本例中是<core-toolbar> 元素) 和一些內容。預設情況下, header 保持在螢幕的頂部,但也可以設定為隨內容滾動。
  •  <core-toolbar> 元素作為容器,可以存放 選項卡(tab)的,功能表按鈕以及其他控制項。
-------------------------------------------------------------------------------------

添加選項卡(tab)
本應用將使用選項卡(tab,有時也稱為標籤)在兩個不同的介面(view,標籤頁,視圖)中切換, 包括一個訊息列表(messages ), 以及一個收藏/關注列表(favorites). <paper-tabs> 元素的實現方式類似於 <select> 元素, 但顯示出來是一些選項卡的集合. 
  <core-header-panel>    <core-toolbar><!-- 添加一些選項卡,paper,紙片,卡片 --><paper-tabs valueattr="name" selected="all" self-end>        <paper-tab name="all">所有</paper-tab>        <paper-tab name="favorites">收藏</paper-tab>      </paper-tabs>    </core-toolbar>    <!-- 主要的頁面內容將會放在這裡 -->   </core-header-panel>
儲存/部署後重新整理頁面,將看到頂部工具列以及兩個選項卡,切換了試試?
說明:
  • 預設情況下, <paper-tabs> 通過索引(index)值來標識選中了哪一個子項目。valueattr="name" 指定它應該根據子項目的 name 屬性來確定選中哪一個。
  • selected="all" 選擇第一個選項卡(tab)作為初始的選項卡(因為第一個的 name="all")。
  • 在這裡,子項目是 <paper-tab> 元素, 當你觸摸時,這些元素改變樣式,並顯示“墨漣漪(ink ripple)”動畫效果。
-------------------------------------------------------------------------------------

在檔案的末尾(body裡面)添加一個 <script> 標籤來處理 tab 切換事件:

  <script>    // 擷取選項卡DOM元素 paper-tabs    var tabs = document.querySelector('paper-tabs');    // 添加事件監聽, 很明顯,你需要chrome瀏覽器來運行    // 這裡每次切換會觸發2次,前一個tab取消選中,以及新tab被選中    tabs.addEventListener('core-select', function(e) {      //      var detail = e["detail"] || {};      var item = detail["item"] || {};      var isSelected = detail["isSelected"];      console.log(        "Tab(\""+ item["innerText"] + "\") changeTo: "+ isSelected +"; [" + tabs.selected + "] isSelected "         );    });  </script>

說明: 

  •  <paper-tab> 元素在您選擇一個tab時會觸發 core-select 事件。你可以像一個內建元素一樣可以和他互動。
  •  現在沒有什麼可切換的,稍後的小節您將完成這一點。
儲存(建議編輯過程中隨時儲存,這是好的編碼習慣)檔案,部署,然後用chrome開啟訪問連結, 比如
http://localhost:8080/polymer-tutorial-master/starter/index.html

圖 第一個Polymer app運行效果.
如果發生了什麼錯誤,可以和 step-1 目錄下的 index.html 檔案進行對比,當然,你也可以直接存取那個檔案試試。
  • index.html
在本節中,通過 HTML imports 來引入一些自訂的元素,並使用它們來建立了一個簡單的 app 布局.
思考:  在 <paper-tabs> 中可以使用其他子項目嗎,試試 <img> 或者 <span> 吧?

下一節
Step 2: 建立你自己的元素

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More