Cara manggil web view facebook di android stuido

Di seri tutorial ini, kita akan mengembangkan aplikasi native Android dimana user interface dibuat dengan menggunakan jQuery Mobile Framework. Untuk tujuan ini, kami akan memperkenalkan model untuk mewakili UI sreenc dalam aplikasi native Android yang menggunakan jQuery Mobile page element, khususnya, container dan halaman konten. Meskipun kode tutorial ini dikembangkan untuk kontak manajemen, konsep-konsep dasar dari model generik dan dapat diterapkan untuk aplikasi di mana UI cocok untuk membangun melalui HTML dan JavaScript.

Sebagai bagian dari model, kita membahas mengintegrasikan JavaScript dengan kode Java back-end dan menggambarkan mengakses Java metode dari JavaScript dan, sebaliknya, mengakses JavaScript HTML dari Java.

Ringkasan dari aspek-aspek utama dari model akan dibuat adalah sebagai berikut:

• Halaman HTML berisi satu container halaman dengan satu atau lebih konten halaman mana halaman konten masing-masing mewakili satu atau lebih UI screen.
• Mengakses Java dari JavaScript didasarkan pada JavaScript mengikat objek Java, dimungkinkan melalui addJavascriptInterface() metode dalam kelas android.webkit.WebView.
• Mengakses JavaScript HTML dari Java bisa melalui loadUrl() metode dalam kelas android.webkit.WebView. Metode yang dapat digunakan untuk memanggil fungsi JavaScript atau untuk memuat halaman HTML.
• Kode Java back-end yang bekerja sebagai layanan untuk kode JavaScript di UI. Kode JavaScript memanggil metode Java untuk request activity tertentu dan menentukan callback fungsi JavaScript untuk menerima hasil kembali. Dalam kasus tertentu, kode JavaScript memanggil metode Java untuk mengendalikan navigasi, yang digambarkan berikutnya.
• Navigasi layar dikelola oleh kode JavaScript menurut aturan berikut.
• Transisi dari satu konten halaman lain dalam halaman container yang sama dilakukan oleh kode JavaScript.
• Transisi dari satu wadah halaman lain dilakukan oleh kode Java yang menggunakan WebView.loadUrl(). Container halaman untuk menampilkan passing ke kode Java dari JavaScript sebagai parameter.
• Ketika melewati sebuah objek dari JavaScript berfungsi untuk metode Java, atau sebaliknya, JSON objek representasi digunakan.

Aspek-aspek tambahan tutorial adalah sebagai berikut.

• Elemen UI untuk aplikasi tutorial yang dibangun dengan jQuery Mobile list view, list divider dan collapsible block. Kami menggunakan jQuery Mobile Versi 1.0 Alpha 3. (Alpha 4 rilis baru saja dibuat dengan berbagai perbaikan bug. Lihat pengumuman.)
• Menurut Android API, non-UI thread apapun yang memanggil WebView.loadUrl() harus menggunakan sebuah objek android.os.Handler untuk mengakses contoh WebView. Kami menjelaskan bagaimana kita menggenapi persyaratan bahwa dalam aplikasi kami tutorial.
• Kami menggunakan Android kontak API untuk membaca dan memanipulasi kontak di perangkat Android. Berbagai tabel database yang menyimpan elemen dasar kontak dijelaskan, seperti telepon, alamat, email, dll. Kami menjelaskan cara untuk query tabel yang menggunakan Android API.
• Kita membahas bagaimana mengembangkan proyek dalam Eclipse IDE dengan tool-tool pengembangan Android plugin. File-file konfigurasi proyek dijelaskan dan petunjuk langkah demi langkah yang diberikan untuk mengimpor proyek kode sumber ke dalam Eclipse development enviroment.

Organisasi dari Tutorial

Seri tutorial ini telah diselenggarakan sebagai berikut. Dalam bagian 1, 'Screen Flow' kami memperkenalkan layar dalam aplikasi dan menggambarkan transisi antara layar tersebut. Bagian 'jQuery Mobile Page Scructure' memberikan gambaran tentang elemen halaman dalam Jquery Mobiile Framework dan menjelaskan bagaimana layar dalam aplikasi ini dibangun dengan menggunakan element-element itu. Dalam ' Mengintegrasikan HTML/JavaScript berbasis UI dengan Android Java Back-end', kita meninjau konsep-konsep dasar dalam mengintegrasikan UI, terdiri dari HTML dan JavaScript, dengan kelas Java back-end yang mengimplementasi business functioanality. Subbagian di sini adalah 'Mengakses Java dari JavaScript', 'Mengakses HTML/JavaScript dari Java' dan 'Parameter Data jenis dalam Method Call'. Dalam 'Aplikasi Startup', kita mulai review kode untuk daerah-daerah tertentu fungsional dari aplikasi. Dalam setiap bagian, kami menjelaskan urutan event yang berlangsung antara UI dan Java back-end untuk melakukan aktivitas tertentu.

Kita mulai bagian 2 dari tutorial dengan bagian bernama 'Buat akun', yang menjelaskan bagaimana untuk membuat sebuah akun untuk bergaul dengan kontak baru dibuat. Dalam 'Ada kontak', kami menjelaskan mengedit dan menghapus kontak yang ada. Bagian 3 dari tutorial dimulai dengan 'Menambahkan kontak', yang menjelaskan bagaimana untuk menambahkan kontak baru. Dalam 'Membaca kontak Via ContactUtility Class', kita membahas bagaimana menggunakan Android Java API untuk mengakses dan memanipulasi kontak di perangkat Android.

Dalam Bagian 4, tutorial terakhir, 'Menulis operasi untuk kontak' menjelaskan menghapus dan menyimpan kontak menggunakan Android Java API. Bagian ini, serta 'Membaca kontak Via ContactUtility Class' (Bagian 3), menjelaskan bagaimana menggunakan Jackson JSON prosesor untuk mengkonversi bolak-balik antara objek data Java dan JSON string diformat representasi objek tersebut. Dalam 'Proyek dan Supporting file konfigurasi', kita membahas berkas konfigurasi untuk proyek. Bagian 'Aplikasi Launch ikon' menjelaskan bagaimana kami generate ikon launch untuk aplikasi tutorial menurut pedoman desain ikon Android. Dalam 'Android aplikasi pengembangan lingkungan asli', kami menggambarkan lingkungan pengembangan untuk aplikasi dan menjelaskan langkah-langkah individu untuk mengimpor proyek ke Eclipse IDE. Akhirnya, 'Kesimpulan' memberikan kesimpulan untuk tutorial ini.

Screen Flow

Dalam aplikasi kita, setiap kontak harus dikaitkan dengan akun. Biasanya, account yang pengidentifikasi untuk pengguna di layanan online seperti 'gmail'. Untuk aplikasi demo ini, kita akan membuat akun yang akan memiliki semua kontak yang dibuat oleh aplikasi. Untuk kesederhanaan, akun tersebut akan tidak terkait dengan layanan online. Kontak yang berasal dari akun lain akan tetap ditampilkan melalui aplikasi, namun, mereka tidak dapat diedit atau dihapus. (Pembatasan ini disengaja untuk menghindari kerusakan akibat kecelakaan pada kontak di perangkat Android sebenarnya.) Ketika aplikasi dimulai, memeriksa jika akun telah dibuat untuk aplikasi. Ketika menjalankan untuk pertama kalinya, account tidak ada, oleh karena itu, pengguna ditampilkan 'Buat akun' layar (gambar 1 di bawah ini).

Setelah account dibuat, layar awal untuk ditampilkan bila aplikasi dimulai adalah 'Daftar kontak' layar. Layar 'Daftar kontak' memberikan daftar semua kontak dalam perangkat (gambar 2 di bawah ini).

Jika pengguna mengklik tombol add, layar 'Empty Contact' ditampilkan. Di layar itu, pengguna dapat ketik informasi kontak baru dan menyimpan kontak. Setelah kontak disimpan, layar 'Contact List' ditampilkan dengan kontak baru ditambahkan. Pada 'Empty Contact' layar pengguna dapat membatalkan memasuki kontak baru. Dalam kasus layar 'Contact List' ditampilkan tanpa menyimpan kontak. Layar 'Empty Contact' ditunjukkan dalam gambar 3, kiri, di bawah ini.

Pada 'Contact List', pengguna dapat juga memilih kontak yang ada dan lihat rinciannya pada layar 'Existing Contact', seperti yang ditunjukkan dalam gambar 3, tepat di atas. Di sini, pengguna dapat mengedit kontak dan menyimpan perubahan, yang kembali user ke 'Contact List' layar dengan informasi kontak yang diperbarui. Pada 'Existing contact', jika Batal dipilih, pengguna dibawa kembali ke 'Contact List' dan tidak ada perubahan yang dibuat untuk informasi kontak. 'Existing Contact' layar identik dengan 'Empty Contact' kecuali bahwa rincian kontak yang diisi dengan informasi kontak yang sudah ada.

Pada 'Existing Contact', pengguna dapat juga menekan tombol Delete untuk menghapus kontak. Kapan Hapus tombol ditekan, 'Confirm Delete' layar ditampilkan, 4 angka di bawah ini. Pada 'Confirm Delete', jika Delete ditekan kontak akan dihapus dan pengguna dibawa kembali ke layar 'Contact List'. Pada 'Contact Liszt' jika Batal ditekan, tidak ada tindakan yang diambil dan pengguna dibawa kembali ke 'Existing Contact' layar.

Di layar transisi yang memerlukan sejumlah pengolahan data, aplikasi menampilkan layar 'Progress' ketika pengguna berdiri oleh (gambar 5 di bawah ini). Layar progress selalu ditampilkan sebelum salah satu 'Create Account', 'Contact List', 'Empty List' dan 'Existing Contact' layar ditampilkan.

Merangkum diskusi di atas, gambar berikut menunjukkan aliran layar di aplikasi kita.

jQuery Mobile Page Structure

Mari kita bahas bagaimana layar pada aplikasi kami akan diwakili menggunakan elemen halaman Mobile jQuery. (Untuk pembahasan rinci pada bagaimana halaman yang dibangun dalam Jquery Mobile Framework, lihat bagian dalam referensi dokumentasi bernama anatomi dari sebuah halaman.) Sebuah file HTML dalam Jquery Mobile Framework terdiri dari satu wadah halaman dengan satu atau lebih konten halaman dalam container. Halaman wadah yang memiliki data-role="page" atribut sedangkan konten halaman memiliki data-role="content" atribut. Konten halaman dapat opsional memiliki header dan footer. Dalam contoh di bawah ini, ada dua halaman konten dengan header dan footer dan satu halaman konten tanpa header atau footer.

<div data-role="page">
 
  <div data-role="header">...</div> 
  <div id="contentWithHeaderAndFooter1" data-role="content">...</div> 
  <div data-role="footer">...</div>
  
  <div data-role="header">...</div>
  <div id="contentWithHeaderAndFooter2" data-role="content">...</div> 
  <div data-role="footer">...</div>
	
  <div id="contentWithNoHeaderAndFooter" data-role="content">...</div>   
</div>

Dalam halaman kontainer, hal ini dimaksudkan untuk menampilkan isi hanya satu halaman pada satu waktu. Idenya adalah untuk kelompok Logis terkait layar bersama-sama dalam satu container halaman dan menetapkan masing-masing sebagai halaman konten. Misalnya, laman konten tersebut dapat berbagi kode JavaScript yang umum. Contoh lain adalah salah satu dimana halaman konten utama dikelompokkan bersama-sama dengan beberapa halaman konten lain yang mewakili dialog yang terkait dengan konten utama.

Dalam aplikasi ini tutorial, masing-masing 'Create Account' (gambar 1), 'Contact List' (gambar 2) dan layar Progress (gambar 5) diwakili sebagai halaman konten dalam halaman kontainer yang disimpan di halaman fisik ListPage.html. Demikian pula, halaman fisik DetailPage.html memiliki halaman container dengan tiga halaman konten di dalamnya; salah satu konten halaman yang digunakan untuk mewakili 'Empty Contact' dan 'Existing Contact' layar (gambar 3), halaman konten lain mewakili 'Confirm Delete' layar (gambar 4), dan konten halaman ketiga mewakili layar progress. Gambar berikut meringkas diskusi ini.

Menampilkan/menyembunyikan konten halaman dilakukan pemrograman. Ini akan ditampilkan selama review kode di bawah ini.

Mengintegrasikan HTML/JavaScript berbasis UI dengan Android Java Back-end

Dalam tutorial ini, kami sedang mengembangkan sebuah aplikasi Android native dimana UI dilaksanakan dengan jQuery Mobile Framework yang terdiri dari perpustakaan JavaScript dan CSS. Jquery Mobile Framework bertujuan untuk membantu mengembangkan aplikasi dengan experience yang sama di seluruh platform mobile yang berbeda, perangkat dan browser web mobile. Dengan demikian, tidak memiliki mekanisme integrasi tertentu, misalnya sebuah plug-in, dengan Android secara default. Untuk alasan ini, integrasi jQuery Mobile dengan Android harus dikembangakan secara custom.

Sebelum memulai review dari halaman HTML dan JavaScript, serta kode Java tutorial ini, masuk akal untuk melihat tiga aspek utama dari integrasi yang:

1. Mengakses Java dari JavaScript
2. Mengakses HTML/JavaScript dari Java
3. Jenis Data parameter dalam metode panggilan antara Java-JavaScript

Mengakses Java dari JavaScript

Android menyediakan cara yang umum untuk mengekspos Android Java objek dalam kode JavaScript yang menggunakan addJavascriptInterface (objek objek, String interfaceName) metode dalam kelas android.webkit.WebView. Pada dasarnya, metode ini memungkinkan menerapkan metode umum objek Java dari kode JavaScript yang berjalan di WebView. Perhatikan bahwa WebView adalah jenis khusus android.view.View dibangun pada WebKit dan memungkinkan menampilkan halaman web terdiri dari HTML dan JavaScript. Apakah mereka tinggal melalui Internet atau dikemas bersama Android native aplikasi, halaman web yang direferensikan melalui URL untuk WebView untuk mencari dan menampilkan mereka. (Pembaca tertarik disebut dokumentasi API asli untuk informasi lebih lanjut tentang View dan WebView.)

Gambar di bawah menunjukkan bagaimana sebuah objek Java diakses oleh kode JavaScript yang berjalan di mana halaman HTML adalah bagian dari paket aplikasi Android WebView. Objek Java terkena kode JavaScript sebagai objek JavaScript.

Contoh daftar di bawah ini menunjukkan bagaimana untuk mengekspos objek Java, instance kelas ContactsActivity, sebagai objek JavaScript. Dalam Activity.onCreate(), kita pertama menginisialisasi WebView instance. Kemudian, ContactsActivity objek register itu sendiri sebagai objek JavaScript di bawah nama contactSupport. Kelas ContactsActivity memiliki berbagai metode umum, misalnya deleteContact().

import android.webkit.WebView;
import android.app.Activity;
...
public class ContactsActivity extends Activity {
  WebView webView;
  ...
  public void onCreate(Bundle savedInstanceState) {
    ...
    webView = new WebView(this);
    ...
    webView.addJavascriptInterface(this, <B>"contactSupport"</B>); 
    ...
  }
  public void <B>deleteContact</B>(String contactId, String displayPage){
    ...
  }

Snipet kode di bawah ini menunjukkan contoh mengakses objek ContactsActivity dari kode JavaScript. Ini yang sederhana seperti memanggil metode umum objek menggunakan terdaftar nama objek.

<script>
  ...
  function someJavaScriptFunction(){
    ..
    <B>contactSupport.deleteContact</B>(contactIdVar.val(),'ListPage.html');
  }
  ...
</script>

Mengakses HTML/JavaScript dari Java

Dalam aplikasi tutorial ini, kita akan menggunakan metode loadUrl (String url) di WebView kelas untuk dua tujuan yang berbeda: (1) load halaman HTML baru di WebView dan (2) memanggil metode JavaScript pada halaman HTML saat ini dimuat di WebView. Menempatkan mereka dalam perspektif dengan jQuery Mobile container dan halaman konten, kami mematuhi peraturan berikut.

• Transisi dari satu konten halaman lain dalam halaman container yang sama dilakukan oleh kode JavaScript.
• Transisi dari satu wadah halaman lain dilakukan oleh kode Java yang menggunakan WebView.loadUrl (String url). Container halaman untuk menampilkan dilewatkan ke kode Java dari JavaScript sebagai callback parameter.

Selain loading halaman HTML baru, metode WebView.loadUrl (String url) juga digunakan untuk memanggil metode JavaScript pada halaman HTML saat ini dimuat. Metode JavaScript untuk di invoke passing ke Java sebagai callback parameter dari kode JavaScript. Untuk setiap metode JavaScript yang memanggil metode Jawa, diagram di bawah ini meringkas interaksi antara Java dan JavaScript.

• Setelah pengguna stimulus atau pemuatan halaman HTML, kode JavaScript pertama menampilkan Progress screen.
• Kemudian, kode JavaScript melakukan beberapa pengolahan data, bergantung pada cakupan tertentu, dan memanggil metode Java. Metode Java adalah melewati parameter proses (opsional) dan fungsi JavaScript untuk memanggil kembali atau halaman HTML untuk memuat, setelah metode Java selesai mengolah business logic.
• Metode Java melengkapi pengolahan dengan logika bisnis dan kemudian panggilan kembali fungsi JavaScript atau load halaman HTML seperti yang diminta.

Sekarang mari kita lihat bagaimana kode Java menerapkan interaksi mereka.

Loading halaman HTML melalui WebView

Daftar di bawah ini memberikan contoh dari metode Java, kode deleteContact(). Fungsi yang dipanggil oleh JavaScript dengan id dari kontak yang akan dihapus dan nama halaman HTML yang harus ditampilkan setelah kontak dihapus. (Id dari kontak adalah pengidentifikasi unik untuk kontak di kontak database perangkat Android).

import android.webkit.WebView;
import android.app.Activity;
import android.os.Handler;
...
public class ContactsActivity extends Activity {
  WebView webView;
  private Handler handler = null;
  ...
  public void onCreate(Bundle savedInstanceState) {
    ...
    webView = new WebView(this);
    ...
    handler = new Handler();
    ...
  }
  
  public void deleteContact(String contactId, String displayPage){   
    ContactUtility.deleteContact(contactId,...);    	
    loadPage(displayPage);
  }  
  
  public void loadPage(String in){
    final String url = "file:///android_asset/www/" + in;
    loadURL(url);
  }  
  
  private void loadURL(final String in){
    handler.post(new Runnable() {
      public void run() {
        webView.loadUrl(in);
      }
    });
  }

Pertama, mari kita lihat bagaimana kita menggunakan android.os.Handler. Referensi Android untuk android.view.View menyatakan bahwa:

"... Anda harus selalu berada di UI thread saat memanggil metode apapun pada setiap view. Jika Anda melakukan pekerjaan pada thread lain dan ingin memperbarui state view dari thread tersebut, Anda harus menggunakan Handler."

Apa ini berarti bagi kita adalah bahwa metode deleteContact() tidak dapat langsung memanggil WebView.loadUrl(). Hal ini karena dua alasan. Pertama, contoh WebView dibuat dalam metode onCreate(). Kedua, ketika metode deleteContact() yang dipanggil oleh JavaScript, thread yang mengeksekusi metode berbeda daripada yang itu dieksekusi metode onCreate() ContactsActivity. Hal ini terbukti dari referensi Android untuk WebView.addJavascriptInterface() metode mana dikatakan "... Obyek Java yang terikat (JavaScript) berjalan di thread lain dan tidak dalam thread itu."

Ini dimana android.os.Handler berguna. Dari referensi Android, objek yang Handler memungkinkan kita untuk mengeksekusi aksi (WebView.loadUrl() dalam kasus ini) di thread tertentu yang terkait dengan objek Handler. Dalam metode onCreate(), kita menginisialisasi objek WebView maupun Handler dan karena itu kedua objek tersebut terkait dengan thread yang sama.

Dengan konsep Handler dalam pikiran, daftar di atas sekarang harus mudah untuk memahami.

• Di deleteContact(), kami menghapus kontak pertama (kelas ContactUtility akan dibahas nanti).
• Kemudian, kita memanggil metode loadPage() yang hanya menempatkan awalan di depan nama halaman HTML untuk ditampilkan, mengubah nama halaman untuk URL file:// berbasis.
• Akhirnya, kita memanggil metode loadURL() untuk memiliki objek Handler memanggil WebView.

Menerapkan metode JavaScript melalui WebView

Setelah meninjau contoh dimana kode Java ditampilkan halaman HTML setelah permintaan pengolahan, mari kita lihat contoh lain mana kode Java memanggil metode JavaScript setelah memproses permintaan, untuk passing hasilnya kembali.

public class ContactsActivity extends Activity {
  ...  
  public void <B>getAllContacts</B>(String callback, String accountCallback){    	
    final String accountCallbackFunction = "javascript:" + accountCallback + "()";

    if(accountName == null){
      loadURL(accountCallbackFunction);
        return;
    }
	
    final String json = ContactUtility.getAllContactDisplaysJSON(getContentResolver());
    final String callbackFunction = "javascript:" + callback + "('" + json + "')";
	
    loadURL(callbackFunction); 	
  }

Metode getAllContacts() menghasilkan daftar semua kontak dalam JSON format dan passing kembali hasilnya ke callback fungsi JavaScript tertentu. Metode dilewatkan dua nama fungsi callback JavaScript. Yang pertama harus digunakan untuk passing daftar kontak. Kedua digunakan hanya setelah instalasi awal mana account untuk aplikasi tutorial belum dibuat. Menerapkan fungsi JavaScript yang kedua harus memandu pengguna untuk membuat account.

Kode JavaScript daftar menerapkan ContactsActivity.getAllContacts() metode yang diberikan di bawah ini.

<script>
  $(document).ready(function () {	
    ...
    contactSupport.<B>getAllContacts</B>('setContactsList','showAccount');
  });
</script>

Fungsi setContactsList() adalah salah satu yang mengambil daftar kontak dalam JSON format, mem-parse, dan menampilkan layar 'Contact List' pada gambar 2 diatas. Fungsi showAccount() menampilkan layar 'Create Account' dalam gambar 1 tanpa pengolahan data apapun. Kami akan memberikan review dari fungsi-fungsi kemudian.

Jenis Data parameter dalam metode panggilan

Dalam aplikasi ini, kami hanya menggunakan tipe data String selama panggilan fungsi bolak-balik antara JavaScript dan Java. Primitif lainnya, seperti Integer, yang berlalu sebagai String dan dilemparkan ke jenis yang tepat nanti. Jenis objek kompleks juga serial untuk JSON String diformat dan kemudian diurai kembali ke objek di akhir menerima.

Di sisi Java, kami menggunakan Jackson JSON prosesor untuk konversi bolak-balik antara objek data Java dan representasi string JSON diformat objek tersebut. JavaScript sisi, mem-parsing JSON diformat string, kita menggunakan metode jQuery.parseJSON(). Di sisi lain, menghasilkan JSON string yang diformat dalam JavaScript dilakukan programmatically. Seperti yang kita lebih lanjut meninjau kode di bawah ini, bidang fungsional mereka akan dijelaskan secara lebih rinci.

Aplikasi Startup

Kelas ContactsActivity adalah android.app.Activity dan masuk ke aplikasi kita tutorial. Untuk lebih lanjut tentang Android Activity kelas lihat http://developer.android.com/guide/topics/fundamentals.html. Kelas ContactsActivity juga merupakan antarmuka pendukungnya Android untuk digunakan oleh kode JavaScript dalam halaman HTML yang mewakili UI.

Ketika aplikasi kami tutorial beban, metode ContactsActivity.onCreate() dipanggil.

package com.jquerymobile.demo.contact;

public class ContactsActivity extends Activity {
  WebView webView;
  private Handler handler = null;
  private String accountType = null;
  private String accountName = null;
  ...

  public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
	  
      // Initialize the WebView
      webView = new WebView(this);
     
      setContentView(webView);
	  
      // Enable JavaScript
      webView.getSettings().setJavaScriptEnabled(true);      
	  
      // Check existence of account for this application
      accountType = "com.jquerymobile.demo.contact";
      Account[] accounts = AccountManager.get(this).getAccountsByType(accountType);
      if(accounts.length != 0){
        accountName = accounts[0].name;
      }
      handler = new Handler();
	  
      // Bind this object as a JavaScript object
      webView.addJavascriptInterface(this, "contactSupport");        
	  
      // Load index.html
      loadPage("index.html");
  }
  ...
}

Langkah penting dalam onCreate() metode adalah sebagai berikut:

• Kami menginisialisasi WebView instance dan memungkinkan untuk menjalankan JavaScript.
• Setiap kontak yang dibuat oleh aplikasi kita harus dikaitkan dengan android.accounts.Account. Kami akan menggunakan account khusus untuk aplikasi kita. Jenis aplikasi adalah com.jquerymobile.demo.contact, dinamai setelah aplikasi package. Menggunakan android.accounts.AccountManager kelas, kita mencari jika ada akun oleh jenis itu. Jika demikian, kami menginisialisasi bidang accountName untuk nama itu.
• Kami menginisialisasi bidang Handler.
• Contoh ContactsActivity terikat JavaScript sebagai objek di bawah nama contactSupport.
• Akhirnya, kami memuat file index.html pada WebView. Ini adalah satu-satunya file HTML dengan nama hardcoded dalam kode Java kami. Nama semua file HTML yang dilewatkan ke metode ContactsActivity sebagai parameter.

Daftar selama index.html diberikan di bawah ini. Apakah semua file tersebut adalah untuk memanggil, dalam jQuery $(document).ready() fungsi, metode ContactsActivity.loadPage() passing 'ListPage.html' sebagai parameter. Sebagai akibatnya, WebView load ListPage.html.

index.html

<html>
  <head>
    <link rel="stylesheet" href="css-js/jquery.mobile-1.0a3.min.css" />
    <script src="css-js/jquery-1.5.min.js"></script>
    <script src="css-js/jquery.mobile-1.0a3.min.js"></script>
  </head>
    <body>
    ...
    <script>
      $(document).ready(function () {
        contactSupport.loadPage('ListPage.html');
      });
    </script>
  </body>
</html>

load dari ListPage.html

ListPage.html memiliki tiga halaman konten di dalamnya (Lihat gambar 7). Mereka sesuai dengan 'Create Account' dan 'Contact List' layar dalam angka 1 dan 2, masing-masing, dan progress layar seperti pada gambar 5. Ingat dari diskusi sebelumnya bahwa salah satu halaman tersebut akan ditampilkan pada waktu tertentu.

<html>
<head>
<B><!-- jQuery Mobile Libraries --></B>
  <link rel="stylesheet" href="css-js/jquery.mobile-1.0a3.min.css" />
  <script src="css-js/jquery-1.5.min.js"></script>
  <script src="css-js/jquery.mobile-1.0a3.min.js"></script>
</head>
<body>
<B><!-- Container Page --></B>
<div data-role="page" data-theme="c" id="containerPage">
  <B><!-- Contact List --></B>
  <div data-role="header" id="hdrList" data-nobackbtn="true">
    <h2><img align="top"  src="img/contacts.png"> Contacts</h2>
    <a id="buttonAddContact" data-icon="plus" class="ui-btn-right" 
      href="<B>javascript:addContact();</B>return false;" data-role="button" data-inline="true">Add</a>
  </div>
  <div data-role="content" id="contentList" data-theme="c">
    <ul data-role="listview" data-dividertheme="c" id="contactSelections"></ul>
  </div>
  <div data-role="footer" id="ftrList"></div>
  
  <B><!--  Progress --></B>
  <div data-role="header" id="hdrProgress" data-nobackbtn="true"  data-theme="c">
    <h2>Processing...</h2>
  </div>  
  <div data-role="content" id="contentProgress"  data-theme="c">
    <div align="CENTER"><h4>Please wait.</h4></div>
    <div align="CENTER"><img id="spin" src="img/wait.gif"/></div>  
  </div>  
  <div data-role="footer" id="ftrProgress"  data-theme="c"></div>
  
  <B><!--  Create Account --></B>
  <div data-role="header" id="hdrAccount" data-nobackbtn="true"  data-theme="c">
    <h2>Create Account</h2>
  </div>  
  <div data-role="content" id="contentAccount"  data-theme="c">
    <div align="CENTER"><img src="img/contacts-master-bgd.png"></div> 
    <div align="CENTER"><h4>Please enter name of the new account for this application</h4></div>
    <div align="CENTER">Contacts created with this application will be associated with the new account specified below. 
    Other contacts can be viewed, however, cannot be deleted or modified with this application.</div>
    <div align="CENTER" id="accountDiv" data-role="fieldcontain">
      <input id="accountName" type="text" />
    </div>
    <div align="CENTER">
      <a href="javascript:createAccount();return false;" <B>data-role="button"  
        data-inline="true"</B>>Save</a>
    </div>
    ...
  </div>  
  <div data-role="footer" id="ftrAccount"  data-theme="c"></div>
  
</div> <B><!-- Container Page Ends Here --></B>
...

Harap dicatat berikut.

• Semua tiga konten halaman memiliki header, footer dan isi Bagian didefinisikan. Semua bagian tersebut memiliki data-theme="c" yang menentukan tema warna tertentu yang disediakan oleh jQuery Mobile. Untuk rincian, lihat referensi asli pada jQuery Mobile Theme Framework.
• Secara default, jQuery Mobile meletakan tombol back di bagian header. Kita kontrol navigasi dalam program kami dan karena itu tidak memerlukan tombol kembali. Sebagai hasilnya, kami menetapkan data-nobackbtn="true". (Untuk informasi lebih lanjut tentang jQuery Handphone navigasi model Lihat referensi asli tentang hal itu.)
• Bagian header di 'Contact List' memiliki tombol Tambah yang memanggil metode JavaScript yang bernama addContact() yang akan ditinjau kemudian. Pada awalnya, 'List Contanct' terdiri dari sebuah daftar kosong, id= "contentList", yang akan diisi pemrograman berdasarkan data dari Java back-end.
• Layar 'Create Account' memiliki tombol untuk menyimpan nama account sebagai masukan oleh pengguna. Melihat data-inline="true" pada definisi bahwa tombol. Ini menyatakan bahwa tombol harus membungkus teks 'Save'. Tanpa itu, tombol akan mengisi lebar layar secara default. Untuk rincian, lihat dokumentasi jQuery Mobile Inline tombol.

Kami terus mengeksplorasi ListPage.html. Daftar di bawah ini menjelaskan cara menampilkan salah satu 'Create Account', 'Contact List' dan layar Progress. Dalam fungsi $(document).ready() jQuery, kita menginisialisasi beberapa variabel yang mewakili header, isi dan Bagian footer konten halaman untuk layar tersebut menggunakan $('#...'). Kemudian, mendefinisikan hidePage(), showPage() fungsi untuk masing-masing halaman konten. Sebagai contoh, showList() menampilkan layar 'Contact List' dan menyembunyikan layar 'Create Account' dan layar Progress.

<script>
  ...
  // Commonly used variables
  ...
  var hdrListVar;
  var contentListVar;
  var ftrListVar;
  var hdrProgressVar;
  var contentProgressVar;
  var ftrProgressVar;
  var hdrAccountVar;
  var contentAccountVar;
  var ftrAccountVar;
  
  
  $(document).ready(function () {  
    // Initialize commonly used variables
    hdrListVar = $('#hdrList');
    contentListVar = $('#contentList');
    ftrListVar = $('#ftrList');
    hdrProgressVar = $('#hdrProgress');
    contentProgressVar = $('#contentProgress');
    ftrProgressVar = $('#ftrProgress');
    hdrAccountVar = $('#hdrAccount');
    contentAccountVar = $('#contentAccount');
    ftrAccountVar = $('#ftrAccount');
    ...
  });
  
  ...
  function hideList(){
    hdrListVar.hide();
    contentListVar.hide();
    ftrListVar.hide();      
  }
  
  function showList(){
    hideProgress();
    hideAccount();
    hdrListVar.show();
    contentListVar.show();
    ftrListVar.show(); 
  }
  
  function hideProgress(){
    hdrProgressVar.hide();
    contentProgressVar.hide();
    ftrProgressVar.hide();
  } 
  
  function showProgress(){
    hideList();
    hideAccount();
    hdrProgressVar.show();
    contentProgressVar.show();
    ftrProgressVar.show();
  }
  
  function hideAccount(){
    hdrAccountVar.hide();
    contentAccountVar.hide();
    ftrAccountVar.hide();      
  }
  
  function showAccount(){
    hideList();
    hideProgress();
    hdrAccountVar.show();
    contentAccountVar.show();
    ftrAccountVar.show();
  }
  ...
</script>

Bagian yang disorot di bawah ini memberikan sisa $(document).ready() fungsi dalam ListPage.html. Progress screen ditampilkan dan, melalui JavaScript mengikat, ContactsActivity.getAllContacts() metode ini dipanggil. Ada dua parameter yang di passing ke metode: setContactsList adalah nama fungsi callback JavaScript untuk mengkonsumsi JSON diformat daftar kontak. Parameter kedua, showAccount, adalah fungsi callback JavaScript disebut jika ada saat ini tidak ada account yang diatur untuk aplikasi ini. Kedua fungsi callback tersebut berada di ListPage.html, file fisik tersebut saat ini.

  $(document).ready(function () {  
    // Initialize commonly used variables
    hdrListVar = $('#hdrList');
    contentListVar = $('#contentList');
    ftrListVar = $('#ftrList');
    hdrProgressVar = $('#hdrProgress');
    contentProgressVar = $('#contentProgress');
    ftrProgressVar = $('#ftrProgress');
    hdrAccountVar = $('#hdrAccount');
    contentAccountVar = $('#contentAccount');
    ftrAccountVar = $('#ftrAccount');
	
    <B>showProgress();
    contactSupport.getAllContacts('setContactsList','showAccount');</B>
  });

ContactsActivity merespon

Daftar di bawah ini memberikan ContactsActivity.getAllContacts() metode.

public void getAllContacts(String callback, String accountCallback){      
  final String accountCallbackFunction = "javascript:" + accountCallback + "()";

  if(accountName == null){
    loadURL(accountCallbackFunction);
    return;
  }
  final String json = ContactUtility.getAllContactDisplaysJSON(getContentResolver());
  final String callbackFunction = "javascript:" + callback + "('" + json + "')";
  loadURL(callbackFunction);   
}

Kami punya sebagian memeriksa kode sebelum. Untuk rekap:

• Jika aplikasi ini saat ini tidak memiliki akun yang dibuat untuk itu, callback fungsi JavaScript untuk 'Create Account' layar disebut. Hal ini dilakukan melalui loadURL(accountCallbackFunction).
• Jika aplikasi memiliki account, ContactUtility.getAllContactDisplaysJSON() dipanggil untuk mendapatkan daftar format JSON kontak dalam perangkat. String JSON yang dihasilkan dipassing ke fungsi callback JavaScript untuk menampilkan kontak tersebut. Hal ini dilakukan melalui loadURL(callbackFunction).
• Sampel JSON diformat string untuk daftar kontak yang diberikan di bawah ini. Kontak dikelompokkan dalam urutan abjad oleh awal pertama dari nama. Setiap kelompok dikenalpasti oleh atribut key, yang nilainya adalah yang mewakili kelompok, dan terdiri dari sebuah array kontak dalam grup, bernama values. Setiap elemen array memiliki atribut contactId dan displayName. Elemen dalam array lebih lanjut diurutkan secara alfabetis berdasarkan displayName. (Bagian bernama 'Mendapatkan JSON diformat daftar dari Contacts' di bawah ini memberikan tinjauan kode yang menghasilkan daftar itu.)

JSON diformat daftar kontak

{"contacts":[
  {"key":"A","values":[
    {"contactId":"257","displayName":"Aach Herb","key":"A"},
    ...,
    {"contactId":"256","displayName":"Aaker David","key":"A"}
    ]
  },
  {"key":"B","values":[
    {"contactId":"259","displayName":"Belanger Andre","key":"B"},
    ...,
    {"contactId":"260","displayName":"Bohme Jacob","key":"B"}
    ]
  },
  ...
  ]
}

Layar Create Account

Ketika ContactsActivity.getAllContacts() metode memanggil fungsi showAccount() JavaScript di ListPage.html, layar 'Create Account' dalam gambar 1 ditampilkan kepada pengguna.

Layar Contact List 

Jika ada account untuk aplikasi, callback fungsi setContactsList() di ListPage.html akan mem-parsing string JSON diformat dari daftar kontak dan menampilkan kontak ke pengguna. Daftar fungsi yang diberikan di bawah ini.

  ..
  <div data-role="content" id="contentList" data-theme="c">
    <ul data-role="listview" data-dividertheme="c" id="<B>contactSelections</B>"></ul>
  </div>
  ...
<script>
  ...
  // Commonly used variables
  ...
  <B>var contactSelectionsVar;</B>

  $(document).ready(function () {  
    // Initialize commonly used variables
    ...
    <B>contactSelectionsVar = $('#contactSelections');</B>
    ...
  }
  ...
  function setContactsList(jsonText){  
    var tmpJson = $.parseJSON(jsonText);  
    if(tmpJson != null && tmpJson.contacts != null){
      var tmpContacts = tmpJson.contacts;
      for(i = 0; i < tmpContacts.length; i++){
        var tmpKey = (tmpContacts[i]).key;
        var tmpKeyFragment = '<li data-role="list-divider">'+tmpKey+'</li>';
        <B>contactSelectionsVar.append(tmpKeyFragment);</B>
        var tmpValues = (tmpContacts[i]).values;
        if(tmpValues != null){
          var j;
          for(j = 0; j < tmpValues.length; j++){
            var tmpDisplayName = tmpValues[j].displayName;
            var tmpContactId = tmpValues[j].contactId;          
            var tmpLiFragment = '<li><a href="javascript:showContact(' + 
              tmpContactId + ');return false;">'+tmpDisplayName+'</a></li>';
            <B>contactSelectionsVar.append(tmpLiFragment);</B>
          }
        }      
      }
    }  
    <B>contactSelectionsVar.listview('refresh');</B>   
    showList();
  }
  ...
</script>

• JQuery parseJSON fungsi dipanggil untuk mem-parsing JSON string dan kembali objek JavaScript yang dihasilkan.
• Ingat bahwa kontak yang diselenggarakan dalam kelompok-kelompok yang didasarkan pada awal pertama dari displayName mereka. Untuk setiap kelompok variabel tmpKey diatur ke nilai key atribut utama kelompok, yang nilainya adalah huruf mewakili kelompok.
• Variabel tmpKey kemudian digunakan untuk membangun jQuery Mobile List Divider, yang direpresentasikan sebagai sebuah variabel string yang bernama tmpKeyFragment. Pembagi daftar setiap menandakan permulaan grup baru dan membawa surat yang mewakili kelompok.
• contactSelectionsVar variabel adalah pointer ke daftar kosong dengan id ="contactSelections". Menggunakan fungsi jQuery.append() kita menambahkan pembagi daftar ke dalam daftar itu.
• Langkah berikutnya adalah untuk membaca array kontak dalam grup, yang diakses melalui values atribut sebagaimana didefinisikan dalam JSON string. Dari setiap elemen array, kita ekstrak atribut displayName dan contactId dan menyimpannya dalam variabel tmpDisplayName dan tmpContactId, masing-masing.
• Variabel tmpDisplayName dan tmpContactId yang digunakan untuk membangun variabel lain, tmpLiFragment, yang mewakili satu daftar item untuk kontak. Item daftar yang ditambahkan ke daftar yang diidentifikasi oleh pointer contactSelectionsVar.
• Akhirnya, kami me-refresh daftar kontak melalui contactSelectionsVar.listview('refresh') untuk memperbarui tampilan daftar. Ini akan menampilkan layar 'Contact List' pada gambar 2.
• Gambar di bawah menunjukkan bagaimana kode fragment di atas membantu membangun daftar kontak.

Penutup untuk bagian 1 dari Tutorial ini

Di bagian awal dari seri tutorial, kami memperkenalkan tujuan dari tutorial dan dibahas contoh aplikasi yang akan di implementasi. Kami juga memberikan gambaran dari elemen halaman dalam jQuery Mobile Framework dan menjelaskan bagaimana layar pada contoh aplikasi dibangun dengan menggunakan element-element. Kami juga meninjau konsep-konsep dasar dalam mengintegrasikan UI, terdiri dari HTML dan JavaScript, dengan kelas Java back-end yang melaksanakan fungsi bisnis.

Di bagian 2, kita akan melanjutkan tutorial dengan menunjukkan bagaimana untuk membuat sebuah akun untuk kontak yang baru dibuat. Kami juga akan menjelaskan cara untuk mengedit dan menghapus kontak yang ada.

Apa itu Webview di Android Studio?

Bagaimana cara mengaktifkan android system Webview?

Chrome Webview itu apa?

Apa itu fragment di Android?