利用 JQUERY MOBILE 架構產生跨平台的 APPJQUERY MOBILE + THEMEROLLER + CODIQA +ELECTRICPLUM + WEINRE         divaka / 2012/05/28
專案說明   電動車電池監控平台   Web Based System     需具備管理功能   App     監控資訊用
專案開始了..反正網站都已經做了, 客戶又要求 APP, 不如再花點時間做給它吧 !
APP 開發環境   開發人數:1   開發架構:軟硬整合專案   開發時間:未知 ~ 3個月       專案涉及四個跨國團隊   開發 Device:尚未採購,先用老闆的..
這…
專案 Demo   Web     http://124.9.6.27:8080/sbma/entrance.jsp   APP     http://124.9.6.27:8080/sbma/mobile/index.html
ELECTRICPLUMHTTP://WWW.ELECTRICPLUM.COM/SIMULATOR.ASPX目前用起來最順手的 APP 模擬軟體
可自選 iOS Device
不過..   跟實際 iOS Device 的設備還是不太一樣   iOS Device     Touch Behavior     No Scrollbar     Re-render Component   所以還是搞台 iP...
JQUERY MOBILEHTTP://JQUERYMOBILE.COM/快速開發跨平台手機 APP 的工具
jQuery Mobile 簡介   A unified, HTML5-based user interface system    for all popular mobile device platforms, built on    t...
jQuery Mobile 優點   jQuery 延伸, 學習成本較低   免費, Open-Source, 輕量   可與電腦共用程式碼   不需開發者帳戶即可測試   跨平台   跨 Device (跨瀏覽器解析度)    ...
Responsive Design                    自動根據瀏覽的                    Device 呈現最佳瀏                    覽體驗
jQuery Mobile 缺點   效率較原生 Code 差     維護與效率的   Trade-off   無法操作手機硬體     此部份可靠   phoneGap 等架構補強   必須連上網路   較難商品化     效...
jQuery Mobile 案例   http://www.jqmgallery.com/
jQuery UI Componenthttp://jquerymobile.com/test/
jQuery Mobile 相關資源   官方       Forum       Blog       Resources   Tutorial       jQuery Mobile Tutorial: Creating a R...
JQUERY MOBILELET’S DO IThttp://kuro.tw/blog/2012/02/15/hello-jquery-mobile-jquery-mobile-2
jQuery Mobile Let’s do it   Download jQuery Mobile Library     http://jquerymobile.com/download/   或引入以下程式碼 (CDN)     ...
Step1   產生基本架構 (List-View)     主要是用             data-role 來定義各種樣式    <div data-role="page" id="page-01">      <div data-...
Step2   建立資料清單與標頭    <div data-role="content">      <ul data-role="listview">         <li data-role="list-divider">Overvi...
Step3   建立圓弧群組分類    <div data-role="content">      <ul data-role="listview" data-inset="true">         <li data-role="lis...
Step4   多層清單 (Nested list)     <ul>   是無序清單 , <ol> 是有序清單     <div data-role="content">              <ul data-role="listv...
Step5   加入圖片 (Thumbnails)     在每個        li 的一開始加上一個 <img> , jQuery Mobile     就會自動把它放在最左邊當做縮圖。     <li>             <im...
Step6   加入 Split Button    將   list 內的資料利用 <a> 標籤拆成兩組     data-icon=“gear“ 是內建的 iconSet (參考這)    <li>            <a hre...
Step7           加入超連結 (HyperLink) 到另一頁             Data-transition         是指定動畫方式 (樣式可參考這裡)<li>        <a href="#page-0...
小技巧   覆蓋原本的 CSS     打開   FireFox 查看該元素的 class 直接另寫 CSS     定義   隱藏工具列 & 網址列     請參見以下討論串     http://stackoverflow.com...
THEMEROLLERHTTP://JQUERYUI.COM/THEMEROLLER/快速建立客製化 jQuery Mobile UI Theme
簡介   類似 jQuery UI 的 Mobile 版   自訂 font, corner radius, header, toolbar, content 的 CSS
CODIQAHTTP://WWW.CODIQA.COM/視覺化編輯 jQuery Mobile-based APP
Let’s See
但是..   編輯器 BUG 還很多   自動產生的程式碼有點怪   只用來產生最初的骨架用     原本的   library 只有純 JS code
WEINREHTTP://PEOPLE.APACHE.ORG/~PMUELLR/WEINRE/手機版瀏覽器的 FireBug (追蹤 MobileJavaScript)
DEMO//下載 Libraryhttp://nodejs.org/#download//在目標網頁加入以下 script , 記得換 IP<script src="http://localhost:8080/target/target-scr...
請參考以下文章   [教學]Node.js 安裝教學. node.JS install   使用 Weinre 遠端 Debug 你的手機版網頁    (Mobile Web)
測試工具列表   http://www.mobilexweb.com/emulators
FUTURE WORKPhoneGap 使用 Web Code 操作手機底層硬體
Upcoming SlideShare
Loading in...5
×

jQuery Mobile

2,746

Published on

前端讀書會分享之內容

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,746
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
32
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery Mobile

  1. 1. 利用 JQUERY MOBILE 架構產生跨平台的 APPJQUERY MOBILE + THEMEROLLER + CODIQA +ELECTRICPLUM + WEINRE divaka / 2012/05/28
  2. 2. 專案說明 電動車電池監控平台 Web Based System  需具備管理功能 App  監控資訊用
  3. 3. 專案開始了..反正網站都已經做了, 客戶又要求 APP, 不如再花點時間做給它吧 !
  4. 4. APP 開發環境 開發人數:1 開發架構:軟硬整合專案 開發時間:未知 ~ 3個月  專案涉及四個跨國團隊 開發 Device:尚未採購,先用老闆的..
  5. 5. 這…
  6. 6. 專案 Demo Web  http://124.9.6.27:8080/sbma/entrance.jsp APP  http://124.9.6.27:8080/sbma/mobile/index.html
  7. 7. ELECTRICPLUMHTTP://WWW.ELECTRICPLUM.COM/SIMULATOR.ASPX目前用起來最順手的 APP 模擬軟體
  8. 8. 可自選 iOS Device
  9. 9. 不過.. 跟實際 iOS Device 的設備還是不太一樣 iOS Device  Touch Behavior  No Scrollbar  Re-render Component 所以還是搞台 iPad, iPhone 來比較實際一點..
  10. 10. JQUERY MOBILEHTTP://JQUERYMOBILE.COM/快速開發跨平台手機 APP 的工具
  11. 11. jQuery Mobile 簡介 A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.
  12. 12. jQuery Mobile 優點 jQuery 延伸, 學習成本較低 免費, Open-Source, 輕量 可與電腦共用程式碼 不需開發者帳戶即可測試 跨平台 跨 Device (跨瀏覽器解析度)  Responsive Design
  13. 13. Responsive Design 自動根據瀏覽的 Device 呈現最佳瀏 覽體驗
  14. 14. jQuery Mobile 缺點 效率較原生 Code 差  維護與效率的 Trade-off 無法操作手機硬體  此部份可靠 phoneGap 等架構補強 必須連上網路 較難商品化  效適用於內容型 App
  15. 15. jQuery Mobile 案例 http://www.jqmgallery.com/
  16. 16. jQuery UI Componenthttp://jquerymobile.com/test/
  17. 17. jQuery Mobile 相關資源 官方  Forum  Blog  Resources Tutorial  jQuery Mobile Tutorial: Creating a Restaurant Picker Web App  http://msdn.microsoft.com/zh-tw/hh875190 文章  使用 jQuery Mobile 与 HTML5 开发 Web App ——开发原则 簡報  jQuery Mobile  Mobile Web & HTML5 Performance Optimization
  18. 18. JQUERY MOBILELET’S DO IThttp://kuro.tw/blog/2012/02/15/hello-jquery-mobile-jquery-mobile-2
  19. 19. jQuery Mobile Let’s do it Download jQuery Mobile Library  http://jquerymobile.com/download/ 或引入以下程式碼 (CDN)  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile- 1.0.1.min.css" />  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>  <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> Download Basic Project (dropbox)  https://www.dropbox.com/home/front_end_study/20 12_05_28%20(%E4%B8%80)/divaka
  20. 20. Step1 產生基本架構 (List-View)  主要是用 data-role 來定義各種樣式 <div data-role="page" id="page-01"> <div data-role="header"> <h1>My Title</h1> </div><!-- /header --> <div data-role="content"> </div><!-- /content --> <div data-role="footer"> <h4>Footer content</h4> </div><!-- /footer --> </div><!-- /page -->
  21. 21. Step2 建立資料清單與標頭 <div data-role="content"> <ul data-role="listview"> <li data-role="list-divider">Overview</li> <li>ITEM</li> <li>ITEM</li> <li>ITEM</li> <li>ITEM</li> <li>ITEM</li> </ul> </div><!-- /content -->
  22. 22. Step3 建立圓弧群組分類 <div data-role="content"> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">Overview</li> <li>ITEM</li> <li>ITEM</li> <li>ITEM</li> <li>ITEM</li> <li>ITEM</li> </ul> </div><!-- /content -->
  23. 23. Step4 多層清單 (Nested list)  <ul> 是無序清單 , <ol> 是有序清單 <div data-role="content"> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">Overview</li> <li>ITEM A <ol> <li>A-1</li> <li>A-2</li> <li>A-3</li> </ol> </li> </ul> </div><!-- /content -->
  24. 24. Step5 加入圖片 (Thumbnails)  在每個 li 的一開始加上一個 <img> , jQuery Mobile 就會自動把它放在最左邊當做縮圖。 <li> <img src="icon/ADOBE - Photoshop_48x48-32.png" /> <h1>Photoshop</h1> <p>Description</p> </li>
  25. 25. Step6 加入 Split Button 將 list 內的資料利用 <a> 標籤拆成兩組  data-icon=“gear“ 是內建的 iconSet (參考這) <li> <a href="#" oncilck=“#">ITEM A</a> <a href="#" data-icon="gear"></a> </li>
  26. 26. Step7  加入超連結 (HyperLink) 到另一頁  Data-transition 是指定動畫方式 (樣式可參考這裡)<li> <a href="#page-02">page2</a></li><div data-role="page" id="page-02"> <div data-role="content"> <ul data-role="listview" data-inset="true" id="another"> <li data-role="list-divider">another View</li> <li><a href=“page-01" data-transition="slidedown"> view2 </a> </li> </ul> </div><!-- /content --></div>
  27. 27. 小技巧 覆蓋原本的 CSS  打開 FireFox 查看該元素的 class 直接另寫 CSS 定義 隱藏工具列 & 網址列  請參見以下討論串  http://stackoverflow.com/questions/9798158/how- does-jquery-mobile-hide-mobile-safaris- addressbar
  28. 28. THEMEROLLERHTTP://JQUERYUI.COM/THEMEROLLER/快速建立客製化 jQuery Mobile UI Theme
  29. 29. 簡介 類似 jQuery UI 的 Mobile 版 自訂 font, corner radius, header, toolbar, content 的 CSS
  30. 30. CODIQAHTTP://WWW.CODIQA.COM/視覺化編輯 jQuery Mobile-based APP
  31. 31. Let’s See
  32. 32. 但是.. 編輯器 BUG 還很多 自動產生的程式碼有點怪 只用來產生最初的骨架用  原本的 library 只有純 JS code
  33. 33. WEINREHTTP://PEOPLE.APACHE.ORG/~PMUELLR/WEINRE/手機版瀏覽器的 FireBug (追蹤 MobileJavaScript)
  34. 34. DEMO//下載 Libraryhttp://nodejs.org/#download//在目標網頁加入以下 script , 記得換 IP<script src="http://localhost:8080/target/target-script-min.js#anonymous" ></script>//執行 weinre servercmd > node weinre//開啟以下 IP,再點開要 debug 的 Browser APPhttp://localhost:8080/client/#anonymous//會看到以下畫面,代表連線成功http://kuro.tw/sites/default/files/images/weinre-6.png
  35. 35. 請參考以下文章 [教學]Node.js 安裝教學. node.JS install 使用 Weinre 遠端 Debug 你的手機版網頁 (Mobile Web)
  36. 36. 測試工具列表 http://www.mobilexweb.com/emulators
  37. 37. FUTURE WORKPhoneGap 使用 Web Code 操作手機底層硬體
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×