行動WEB APP、HTML5與Android
講授:洪國龍老師
回首頁   WebView網頁瀏覽器元件   行動Web APP：jQuery Mobile介紹   WebView與JavaScript的相互呼叫  

  1. WebView網頁瀏覽器元件

  2. WebView的功能

    • 網頁瀏覽器元件具備完整的網頁顯示功能，它可以顯示網站的網頁，也可以顯示位於手機內的local網頁。

  3. 程式和WebView的執行架構

  4. 設定WebViewClient和WebChromeClient

    • WebViewClient和WebChromeClient是在WebView中運作的物件，它們的功能是負責下載網頁資料， 再利用callback函式的方式通知主程式執行結果。
    或：

  5. 開啟網路限制：

    • 如果WebView元件會使用網路功能，則要開啟網路限制。

  6. 設定Webview的功能

    • 啟用WebView的JavaScript執行功能
  7. 解除不能使用FileUrl及Cross origin requests的限制。

  8. 範例：

    9. [ 回頂端 ]

  9. 行動Web APP：jQuery Mobile介紹

  10. jQuery & jQuery Mobile

    • 針對行動裝置做過優化的一組Javascript與css框架
    • 搭配HTML5
    • IE10以上、Chrome、Firefox等瀏覽器才支援
    • 可用於開發Web App (相對於原生Native App)
    • 使用宣告式定義，開發簡單

  11. jQuery Mobile 首頁

    (https://jquerymobile.com/)

  12. jQuery Mobile的環境設定

  13. jQuery Mobile需要的檔案
    14. jquery-1.11.1.min.js
    jquery.mobile-1.4.5.min.css
    jquery.mobile-1.4.5.min.js

    <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.mobile-1.4.5.min.js"></script>

  14. 使用CDN
    • 將資料存放在網路系統的多個電腦節點，加速資料存取
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

  15. jQuery mobile demos

  16. jQuery mobile的官方教學網頁 http://demos.jquerymobile.com/1.4.5/

  17. jQuery mobile page結構

    18. <!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
    <script src="jquery-1.11.1.min.js"></script>
    <script src="jquery.mobile-1.4.5.min.js"></script>
</head>

<body>

<div data-role="page">

    <div data-role="header"> ... </div>

    <div role="main" class="ui-content"> ... </div>

    <div data-role="footer"> ... </div>
</div>

</body>
</html>

  18. 範例1:單頁結構網頁

    ex1.html

  19. 範例2:多頁結構網頁

    • 加上回前頁的功能: 只要在需要回到前一頁的header內加上data-add-back-btn="true" 即可。

    ex2.html

  20. jQuery mobile ListView

  21. ListView Thumbnails

  22. 練習3:Battersea Dogs

    23. dogs.zip
    ex3.html 

    ex3_1.html 
    [ 回頂端 ]

  23. JavaScript和Android程式碼之間的呼叫

  24. JavaScript和Android程式碼

  25. 網頁中的JavaScript程式碼是由WebView元件負責解譯和執行，Android程式碼則是在自己的UI thread中執行，二者看來互不相干， 可是Android系統卻為二者提供了互通的機制，讓在WebView中執行的JavaScript可以呼叫Android程式中的方法， 而Android程式也可以呼叫WebView中的JavaScript的function。

  26. 從JavaScript呼叫Android程式碼

  27. 在程式碼中啟用WebView的JavaScript執行功能。
  28. 可以建立一個類別的物件或使用Activity本身物件做為程式碼和JavaScript之間的介面。
  29. 建立介面的動作是利用WebView的addJavascriptInterface()方法來完成，它需要二個參數，第一個就是上述類別的物件， 第二個則是指定這個介面在JavaScript中使用的名稱，以下範例是將這個名稱指定為Android。
  30. 要JavaScript呼叫的方法須寫在addJavascriptInterface()方法中第一個參數的類別內，且在此方法前必須加上@JavascriptInterface的標籤。

  31. 從Android呼叫JavaScript的function

  32. 假設我們已經將一個html檔案載入到WebView中執行：
  33. 其中有一個名為funcDoSomething()的JavaScript函式。如果要在Android程式中呼叫這個函式，只要利用WebView的loadUrl()方法，並指javascript:funcDoSomething()即可，如以下程式碼：
  34. 範例：

    35. MainActivity.java

    index.html

    cyut.html

    [ 回頂端 ]