Menggunakan jQuery Mobile untuk membangun aplikasi pembaca Berita Android native: Bagian 3

Dalam bagian 1 dari seri tutorial ini, kami memperkenalkan contoh aplikasi, menjelaskan page floew, dan membahas bagaimana menyusun halaman dalam aplikasi melalui jQuery Mobile. Di bagian 2, kami menyelesaikan implementasi aplikasi web kami. Pada bagian akhir, kami akan memigrasi aplikasi web ke dalam aplikasi Android native.

Mengkonversi ke aplikasi Android native

Aplikasi web yang selesai di bagian 2 sekarang dapat dikonversi menjadi sebuah aplikasi Android native. Diskusi di bawah ini berlaku untuk Android OS 2.2 & 2.3.

Aplikasi Android akan menggunakan index.html sebagai komponen UI. Kami akan menulis class android.app.Activity untuk menentukan titik integrasi antara index.html dan aplikasi native. Kami juga akan menulis class android.webkit.WebViewClient untuk memastikan bahwa halaman berita yang ditampilkan dalam contoh android.webkit.WebView di mana aplikasi Berita diluncurkan.

Ubah di index.html

Kami akan memperbarui variabel NEWS_URI sebagai berikut:

1

var NEWS_URI = 'https://rss.news.yahoo.com/rss/';

Kita tidak perlu bridge.php dalam aplikasi Android native untuk meneruskan panggilan AJAX ke Yahoo! News. Hal ini karena same-origin restriction tidak berlaku di sini. Ketika dikemas sebagai bagian dari aplikasi asli, index.html file tidak download dari web server. Dengan demikian, itu dapat membuat request AJAX ke remote URL.

Selain itu, kita menambahkan fungsi berikut:

1

var EMPTY = '';

2

...

3

function changeLocation(varURI){

4

  showProgress();  

5

  $.get(EMPTY,function(data){

6

    window.location = varURI;

7

  });	

8

}

changeLocation() fungsi akan dipanggil dari android.webkit.WebViewClient, yang akan ditampilkan sejenak. Tujuan dari fungsi adalah untuk menunjukkan kemajuan halaman selama transisi dari halaman berita ke detail halaman berita.

• Langkah pertama dalam changeLocation() adalah untuk menampilkan halaman progress.
• Ingat bahwa fungsi get() jQuery khusus ajax() fungsi. Kita memanggil get() memasukan URL kosong dan handler callback, yang menetapkan variabel window.location ke argumen masukan. Argumen masukan adalah URL dalam <a href='...'>atribut tertutup dalam tag a untuk item berita, seperti yang dibahas dalam bagian 2, "Pergi ke The Berita halaman dari The Berita halaman Detail". Ketika load URL, halaman progress diganti dengan isi dari URL itu.
• Seperti yang kami tunjukkan di bawah ini, fungsi changeLocation() bukanlah merupakan bagian penting dari migrasi aplikasi web menjadi native. Hanya dibutuhkan untuk menampilkan halaman progress ketika pengalihan dari halaman berita ke detail halaman berita di aplikasi native.
• Halaman progress tidak diperlukan dalam aplikasi web ketika pengalihan dari halaman berita ke detail halaman berita. Hal ini karena selama transisi browser web itu sendiri menampilkan indikator progres kepada pengguna. Sebagai contoh, dalam Android, native dan Dolphin browser menampilkan roda yang berputar dan sebuah progress bar di bilah navigasi. Di iOS, Safari browser menampilkan indikator progres serupa.

Activity class

Bagian awal dari Activity class, bernama NewsActivity ditunjukkan di bawah ini:

1

package com.news;

2

3

import android.app.Activity;

4

import android.webkit.WebView;

5

import android.os.Bundle;

6

...

7

public class NewsActivity extends Activity {

8

	WebView mWebView;

9

10

  public void onCreate(Bundle savedInstanceState) {

11

    super.onCreate(savedInstanceState);

12

    setContentView(R.layout.main);

13

14

    mWebView = (WebView) findViewById(R.id.webview);

15

    mWebView.setWebViewClient(new NewsClient());

16

    mWebView.getSettings().setJavaScriptEnabled(true);

17

    mWebView.getSettings().setDomStorageEnabled(true);

18

    mWebView.loadUrl("android_asset/www/index.html");

19

  }

20

  ...

21

}

• Dalam metode onCreate(), kami memanggil pertama implementasi default dari class super dan kemudian memanggil setContentView() untuk memuat layout file untuk activity ini. Argumen masukan ke setContentView() adalah R.layout.main yang merujuk kepada main.xml dalam folder res/layout.
• Kita mendapatkan handler pada WebView melalui findViewById(R.id.webview). Kami menetapkan WebViewClient kustom pada WebView, bernama NewsClient (untuk ditinjau segera). Kemudian, kami mengkonfigurasi WebView untuk memungkinkan eksekusi JavaScript dan DOM penyimpanan API (yang terakhir ini diperlukan untuk menggunakan HTML5 localStorage).
• Akhirnya, kami meminta WebView untuk memuat halaman index.html yang memiliki kode UI.

Pada halaman berita, menekan tombol kembali perangkat yang akan membawa pengguna kembali ke halaman kategori. Untuk yakin bahwa, pertama kita perlu menangani acara onKeyDown di NewsActivity kami. Hal ini ditunjukkan di bawah ini:

1

 public class NewsActivity extends Activity {

2

	WebView mWebView;

3

4

  public void onCreate(Bundle savedInstanceState) {

5

    ...

6

  }

7

8

  public boolean onKeyDown(int keyCode, KeyEvent event) {

9

    if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {

10

      mWebView.goBack();            

11

      return true;

12

    }

13

    return super.onKeyDown(keyCode, event);

14

  }  

15

  ...

16

}

Jika key event yang berkaitan dengan tombol kembali perangkat dan WebView memiliki histori untuk kembali ke, kami kemudian meminta WebView kembali satu langkah dalam histori. Pada halaman Detail berita, ini akan sesuai dengan index.html. Ketika histori pergi satu langkah kembali, halaman kategori akan muncul mengikuti langkah-langkah yang dijelaskan dalam bagian 2, "Startup aplikasi".

Terakhir, mari kita lihat WebViewClient kustom yang implementasi sebagai inner class dari NewsActivity.

1

 public class NewsActivity extends Activity {

2

	WebView mWebView;

3

4

  public void onCreate(Bundle savedInstanceState) {

5

    ...

6

	mWebView.setWebViewClient(new NewsClient());

7

	...

8

  }

9

10

  public boolean onKeyDown(int keyCode, KeyEvent event) {

11

    ...

12

  }  

13

14

  private class NewsClient extends WebViewClient {

15

16

    public boolean shouldOverrideUrlLoading(WebView view, String url) {

17

      view.loadUrl("javascript:changeLocation('" + url + "')");

18

      return true;

19

    }

20

  }

21

...

22

}

Operasi hanya kita override dari parent class adalah shouldOverrideUrlLoading() di mana kita menginstruksikan WebView untuk memanggil changeLocation() fungsi JavaScript di index.html.

• kita belum mendidefinisikan WebViewClient kustom, halaman detail berita yang akan ditampilkan dalam aplikasi browser terpisah, luar Berita aplikasi. Oleh karena itu, mendefinisikan WebViewClient kustom sangat penting untuk menampilkan halaman detail berita sebagai bagian dari aplikasi Berita (yaitu dalam WebView sama yang host index.html).
• Kita bisa ditulis shouldOverrideUrlLoading() dalam cara yang lebih disederhanakan, sebagai berikut:

  1	public boolean shouldOverrideUrlLoading(WebView view, String url)
  2	{
  3	view.loadUrl(url);
  4	return true;
  5	}

  Itu akan cukup untuk menampilkan halaman berita dalam WebView sama index.html host itu. Namun, transisi dari halaman detail berita untuk halaman berita tidak termasuk menampilkan halaman progress.

Meninjau Activity class, mari kita perhatikan komponen lain dari aplikasi kita.

AndroidManifest.xml

1

<?xml version="1.0" encoding="utf-8"?>

2

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

3

  package="com.news" android:versionCode="1" android:versionName="1.0">

4

    <application android:icon="@drawable/icon" android:label="@string/app_name">

5

      <activity android:name=".NewsActivity" android:configChanges="orientation|keyboardHidden"

6

        android:label="@string/app_name">

7

          <intent-filter>

8

            <action android:name="android.intent.action.MAIN" />

9

            <category android:name="android.intent.category.LAUNCHER" />

10

          </intent-filter>

11

      </activity>

12

    </application>

13

    <uses-permission android:name="android.permission.INTERNET" />

14

</manifest>

Untuk diskusi umum pada berkas AndroidManifest.xml Lihat rujukan resmi. Dalam file tersebut, ada dua item tertentu yang layak mengomentari.

• Seperti yang dijelaskan dalam dokumentasi android.app.Activity, secara default, perubahan konfigurasi, termasuk perubahan dalam orientasi atau aksesibilitas keyboard, hasil kegiatan saat ini dihancurkan. Untuk mencegah perilaku default, kami mengkonfigurasi aplikasi kita dengan menetapkan perubahan konfigurasi yang akan ditangani oleh aplikasi itu sendiri. Ini didefinisikan dalam atribut configChanges mana orientasi yang berkaitan dengan perubahan orientasi dan keyboardHidden sesuai dengan perubahan aksesibilitas keyboard (misalnya pengguna meletakkan buka keyboard perangkat). Kami mengkonfigurasi aplikasi sehingga jika salah satu perubahan terjadi, activity saat ini tidak dimusnahkan.
• element <uses-permission android:name="android.permission.INTERNET"/> memungkinkan aplikasi untuk mengakses Internet.

strings.xml

1

<?xml version="1.0" encoding="utf-8"?>

2

<resources>

3

  <string name="app_name">News</string>

4

</resources>

File ini mendefinisikan app_name bernama konstan yang digunakan untuk mengidentifikasi aplikasi berita. Nilai atribut yang ditampilkan di berbagai tempat di perangkat Android kami, seperti yang ditunjukkan di bawah ini. Dari kiri ke kanan: di bawah ikon peluncuran aplikasi, aplikasi bar judul, Settings - Manage Application.

Mengintegrasikan HTML berbasis UI dengan android.app.Activity

Kami menerapkan UI dalam aplikasi Android native menggunakan index.html dan mendukung perpustakaan JavaScript dan css. Titik integrasi antara index.html dan kelas kustom android.app.Activity adalah baris berikut:

1

  mWebView.loadUrl("android_asset/www/index.html");

Selain itu, mengamati dalam "Aktivitas class" bahwa kita aktifkan JavaScript dan DOMStorage di objek android.webkit.WebView sebagai index.html kebutuhan untuk menjalankan JavaScript dan mengakses HTML5 localStorage.

1

  mWebView.getSettings().setJavaScriptEnabled(true);

2

  mWebView.getSettings().setDomStorageEnabled(true);

Akhirnya, di AndroidManifest.xml kami mengizinkan koneksi Internet dari aplikasi kita:

1

<uses-permission android:name="android.permission.INTERNET" />

Gambar layar aplikasi Android

Sebelumnya ditunjukkan angka 1-4 dalam bagian 1 dari seri ini adalah gambar layar dari Android aplikasi native.

Aplikasi peluncuran ikon

Untuk membuat ikon peluncuran untuk aplikasi Berita, kita mengikuti pedoman desain ikon untuk aplikasi Android. Dalam sumber daya, berbagai template dalam format Adobe PSD tersedia untuk di-download. Kita download icon_templates-v2.0.zip dan diekstraksi Launcher-icon-template.psd. Dalam file tersebut, kami memilih dua template untuk membuat ikon peluncuran kami:

Kami ditempatkan template mereka dalam dua terpisah layer dalam Adobe Photoshop dan menambahkan teks grafis, News, pada layer tambahan di bagian atas untuk menyusun ikon peluncuran. Setiap panduan, kami membuat tiga versi ikon untuk kepadatan rendah, menengah dan tinggi layar dengan 36 x 36, 48 x 48, 72 x 72 piksel ukuran, masing-masing. Masing-masing ikon tersebut dinamakan icon.png dan mereka ditempatkan dalam folder proyek Android berdasarkan tabel berikut:

Sebagai contoh, ini adalah ikon 36 x 36 peluncuran:

Lingkungan pengembangan aplikasi Android native

Sebagai bagian dari tutorial ini, kami menyediakan file-file proyek yang diperlukan untuk mengimpor aplikasi Android Berita native ke Eclipse lingkungan pengembangan. Prasyarat proyek adalah:

• Android SDK revisi 8.
• Eclipse IDE versi 3.5.
• Android Development Tool (ADT), yang merupakan plugin Eclipse, versi 8.0.1.

Proyek telah berhasil diuji terhadap tingkat API Android platform 2.2 8 dan platform 2.3 API tingkat 9.

Mengimpor proyek

Sebelum mengimpor proyek ke lingkungan Eclipse Anda, pastikan bahwa plugin Eclipse ADT menunjuk ke lokasi yang benar dari Android SDK pada sistem lokal Anda. Untuk memeriksa ini, dalam Eclipse menu pergi ke Window-> Preferences-> Android. Jendela SDK Location harus ditetapkan ke lokasi Android SDK. Sekali ditetapkan dengan benar, Anda harus melihat sesuatu yang mirip dengan gambar di bawah ini:

File-file proyek juga disediakan di Arsip file bernama news.zip. Untuk mengimpor proyek dalam Eclipse menu, pergi ke File-> import dan kemudian di file impor wizard Pilih General -> Existing Projects into Workspace (lihat bawah).

Pada halaman berikutnya Wizard, pilih tombol radio pilih Select Archive dan browse ke tempat news.zip yang terletak di sistem file Anda. Jendela Projets akan secara otomatis diisi mana News proyek telah dipilih. Ini ditunjukkan di bawah ini. Tekan tombol Finish untuk menyelesaikan impor.

Eclipse akan membangun aplikasi secara otomatis setelah impor. Sekarang, Anda harus melihat News proyek dalam proyek explorer, seperti yang ditunjukkan di bawah ini:

Untuk building/debugging proyek Anda, Anda dapat memilih antara Android OS 2.3 dan platform 2.2 sebagai build target. Untuk melakukannya, pilih News proyek dalam proyek explorer, dan dari menu klik kanan pilih Properties. Pada sisi kiri listing properti, pilih Android sebagai properti. Target membangun tersedia ditampilkan di sebelah kanan, seperti yang ditunjukkan di bawah ini:

Daftar file

Daftar file dalam proyek diberikan di bawah ini.

Kami sudah membahas beberapa file-file tersebut. Berikut adalah review/rekap cepat:

• src folder berisi kode sumber untuk class NewsActivity.
• gen folder berisi file secara otomatis dihasilkan oleh Eclipse ADT.
• assets\www folder dan subfolder yang berisi semua berkas yang diperlukan untuk UI, termasuk index.html; assets\ www\css-js memiliki css dan JavaScript file yang digunakan oleh index.html. Khususnya:
  • jQuery-1.4.4.min.js, jquery.mobile-1.0a2.min.js, jquery.mobile-1.0a2.min.css adalah framework Mobile jQuery Perpustakaan.
  • jQuery.ba-dotimeout.js adalah jquery dotimeout plugin Perpustakaan.
  • jQuery.dst.js adalah DST.js plugin Perpustakaan.
  • assets\ www\css-js \images\icons-18-white.png adalah file gambar yang direferensikan oleh jQuery framework Mobile Perpustakaan.
• assets\www\img\wait.gif adalah ikon berputar yang digunakan dalam progress halaman.
• Folder res\drawable* menyimpan ikon peluncuran, seperti yang dibahas dalam bagian "Aplikasi peluncuran ikon" dari tutorial ini.
• res\layout\main.xml file adalah file Android XML tata letak. Karena UI di aplikasi kita didefinisikan dalam index.html menggunakan jQuery framework Mobile, file ini sangat sederhana dan tidak memerlukan penjelasan lebih lanjut.
• Kami telah meninjau res\values\strings.xml dan AndroidManifest.xml.
• File default.properties mendefinisikan target membangun dan merupakan bagian dari news.zip. Itu akan ditimpa oleh Eclipse ADT tergantung pada pilihan Anda build target.

Kesimpulan

Selain mengembangkan aplikasi cross-platform mobile web, jQuery framework Mobile dapat digunakan untuk menerapkan aplikasi Android native. Dalam seri ini tutorial, kami mengembangkan sebuah aplikasi web yang menggunakan jQuery Mobile dan kemudian berpindah ke aplikasi Android native dengan hanya sedikit modifikasi. Ide utama adalah dengan menggunakan android.webkit.WebView objek sebagai wadah untuk menjalankan file html dari aplikasi web dan jQuery kode Mobile JavaScript yang dikandungnya. Beberapa catatan penutupan diberikan di bawah ini.

• Ketika dikemas sebagai bagian dari aplikasi Android native, halaman html berjalan di android.webkit.WebView adalah tidak dikenakan pembatasan asal yang sama ketika membuat AJAX call.
• Jquery dotimeout plugin dan DST.js plugin, meskipun awalnya dikembangkan untuk jQuery framework, melakukan dengan baik untuk jQuery Mobile. Ada sejumlah besar plugin ditulis untuk jQuery dan, meskipun kasus-oleh-kasus analisis yang diperlukan, mereka mungkin akan tersedia untuk jQuery Mobile. Ini adalah aset besar bagi framework baru ini!
• Kami menguji aplikasi web dengan Android OS 2.2 telepon dan sebuah iPod Touch iOS 4.1 & 4.2. Android aplikasi native diuji dengan Android OS 2.2 & 2.3 emulator dan telepon Android OS 2.2. Dalam semua kasus, tampilan dan nuansa dan fungsional atribut yang sangat mirip.
• Di Android platform, yang dikenal teknik untuk membangun panggilan metode JavaScript-untuk-Java dan Java untuk JavaScript. Pada kenyataannya, kita menunjukkan bagaimana memanggil kembali jQuery Mobile JavaScript fungsi dari kode Java dalam aplikasi kita. Ada kemungkinan bahwa dengan jumlah yang wajar dari usaha, satu dapat mengembangkan plugin jQuery Mobile untuk mengakses api Android native. Hal ini lebih lanjut menunjukkan peluang untuk jQuery framework Mobile untuk mengembangkan aplikasi Android native.