Menggunakan jQuery Mobile untuk membangun aplikasi pembaca Berita Android Naitve

() translation by (you can also view the original English article)

Dalam tiga bagian seri tutorial, tujuan utama kami adalah untuk menggambarkan bagaimana jQuery Mobile dapat digunakan untuk mengembangkan aplikasi Android native. Pertama, kami akan mengembangkan aplikasi web sampel stand-alone, yang akan menelusuri artikel dari Yahoo! News menggunakan jQuery Mobile. Kemudian kita akan mengubah aplikasi web ke aplikasi Android native dengan sedikit usaha.

Proyek Mobile jQuery adalah framework mobile web dengan versi alpha 2 dirilis pada November 2010. Framework dapat digunakan untuk mengembangkan aplikasi web mobile cross-platform untuk Android OS, iOS, Blackberry OS dan platform yang sama (untuk tabel cross-compatability yang lengkap, lihat http://jquerymobile.com/gbs/). Meskipun framework dirancang untuk membangun aplikasi web cross-mobile, mungkin untuk menggunakan jQuery Mobile untuk mengembangkan aplikasi Android native juga. Akibatnya, tujuan dari seri tutorial ini dua kali lipat:

Pertama, kami akan menjelaskan pembangunan dinamis elemen UI dasar dalam jQuery Mobile. Untuk tujuan ini, kami akan menerapkan contoh aplikasi web, disebut aplikasi Berita, untuk menelusuri artikel berita dari Yahoo! News. Aplikasi akan mengirim AJAX berbasis permintaan HTTP ke server dan mengurai respon XML untuk membangun UI. Kami akan menggunakan jquery-dotimeout-plugin untuk menggambarkan teknik animasi yang mana berita utama yang ditampilkan setelah satu pada interval periodik dengan fade in/out efek. Ini akan memberi pembaca wawasan pemformatan konten untuk jQuery Mobile daftar, terutama 'daftar split'. Kami juga akan menggunakan DST.js plugin untuk menyimpan pengguna saat Berita kategori pilihan dengan loca storage HTML5. Aplikasi web terdiri dari sebuah file HTML yang memiliki kode UI, Mobile Perpustakaan jQuery, dan jQuery plugin. HTML file juga menggunakan file PHP sederhana yang meneruskan request HTTP untuk Yahoo! Berita URL dan mengirim respon kembali ke HTML file. Ini adalah metode yang bekerja di same-origin restriction permintaan AJAX di web browser. PHP file tidak melakukan manipulasi apapun permintaan atau respon sebagai tujuan utama adalah untuk memanfaatkan jQuery/jQuery api Mobile untuk menciptakan permintaan, parsing respon dan membangun UI. Kami akan memberikan gambar layar aplikasi web dalam perangkat Android OS dan iOS untuk menggambarkan fakta bahwa UI memiliki tampilan yang konsisten di beberapa platform.

Kedua, kita akan menunjukkan bagaimana untuk mengembangkan aplikasi Android asli mana UI kode melalui jQuery framework Mobile. Untuk tujuan ini, kami akan memanfaatkan aplikasi web yang dikembangkan sebelumnya. Ide utama adalah dengan menggunakan android.webkit.WebView objek sebagai wadah untuk menjalankan HTML file dalam aplikasi web. Hanya perlu perubahan di HTML file adalah untuk mengarahkan permintaan AJAX ke Yahoo! Berita URL file PHP. Kami akan menunjukkan bagaimana untuk mengintegrasikan file HTML yang berisi kode UI dengan android.app.Activity dan android.webkit.WebViewClient. Kami juga akan menunjukkan cara membuat ikon peluncuran untuk aplikasi Android kami didasarkan pada pedoman ikon Android.

File yang diperlukan untuk menjalankan web dan aplikasi Android native tersedia untuk di-download sebagai bagian dari seri tutorial ini. Untuk aplikasi Android, kami akan menjelaskan bagaimana cara mengimpor file-file proyek ke Eclipse IDE.

Organisasi dari seri ini

Tutorial ini, yang pertama dalam seri kami, diatur sebagai berikut: di bagian "Page Flow", kami mulai memperkenalkan aplikasi dengan memberikan gambar layar dan menggambarkan page flow. Kemudian kita membahas beberapa detail teknis aplikasi web di bagian "Request/Response Model". Bagian "Page struktur" adalah dimana kami sajikan jQuery Mobile elemen untuk membangun halaman kami.

Dalam tutorial kedua dalam seri ini, kami menyelesaikan pengembangan aplikasi web. Kami terus memperkenalkan kode Mobile jQuery, dinamis membangun daftar split, membahas teknik animasi untuk teks dalam split daftar item, dan menyediakan transisi antara halaman dalam aplikasi kita. Sebuah bagian khusus dari tutorial kedua didedikasikan untuk menjelaskan bagaimana kita bekerja di same-origin restriction request AJAX dalam aplikasi web. Gambar layar aplikasi web akhir pada iOS dan Android disediakan untuk sisi-by-side perbandingan.

Tutorial ketiga dan terakhir dalam seri ini didedikasikan untuk migrasi aplikasi web ke dalam aplikasi Android native. Tutorial ini akan termasuk suatu Deskripsi tingkat tinggi perubahan yang diperlukan untuk mengkonversi aplikasi web kami ke aplikasi Android, dengan perhatian khusus dibayarkan kepada class android.app.Activity dan android.webkit.WebViewClient kustom dan pemeriksaan Konfigurasi file AndroidManifest.xml dan strings.xml. Proses pengaturan aplikasi peluncuran ikon dan struktur file keseluruhan proyek Android kami juga akan dibahas.

Page Flow

Mari kita lihat pada setiap halaman produk akhir untuk mendapatkan rasa bagaimana aplikasi akan bekerja. Aliran halaman yang dibahas di sini berlaku untuk web dan aplikasi Android native:

Halaman pertama adalah halaman kategori dimana pengguna dapat memiliki sekilas di semua berita utama dalam berbagai kategori yang tertarik:

Seperti yang ditunjukkan di atas, setiap kategori Berita ditampilkan dalam jQuery Mobile membagi daftar item yang terdiri dari bagian di sebelah kiri dengan teks dan bagian lain di sebelah kanan dengan tombol. Pada bagian teks, judul kategori yang ditampilkan di atas berita utama untuk kategori. Berita utama untuk kategori yang ditampilkan satu demi satu dalam sebuah loop setiap 2 detik dengan fade in/out efek animasi. Pada halaman tersebut, pengguna dapat:

Menghapus kategori dengan menekan tombol delete.
Pergi ke daftar semua berita di bawah kategori dengan menekan pada bagian teks item daftar untuk kategori.
Tambahkan kategori baru dengan menekan tombol add.

Pada halaman kategori, jika user menekan tombol add, pemilihan Kategori halaman (gambar 2) ditampilkan:

Pada Halaman ini, pengguna memilih kategori Berita dari daftar dan menekan tombol Get Category untuk menambahkan kategori ke halaman kategori.

Pada halaman kategori, menekan bagian teks item daftar untuk kategori mengambil pengguna ke halaman berita mana semua berita item dalam kategori itu akan ditampilkan (gambar 3):

Pada halaman berita, Berita mungkin memiliki gambar yang terkait dengan itu, yang berfungsi sebagai link untuk detail lebih lanjut pada item berita tertentu. Menekan pada gambar mengambil pengguna ke halaman Detail Berita (gambar 4):

Perhatikan bahwa, dalam aplikasi web, halaman berita ditampilkan dalam browser di luar halaman HTML menjalankan kode aplikasi. Untuk kembali, pengguna perlu tekan tombol kembali pada browser. Tindakan itu mengambil pengguna kembali ke halaman kategori. Di Android aplikasi native, halaman berita yang ditampilkan dalam contoh android.webkit.WebView sama di mana aplikasi diluncurkan, di luar halaman HTML menjalankan kode aplikasi. Menekan tombol kembali perangkat mengambil pengguna kembali ke halaman kategori.

Diagram pada gambar 5 meringkas model aliran antara halaman dalam aplikasi berita kami:

Mengamati ikon berputar selama transisi tertentu. Hal ini menunjukkan bahwa progress Halaman ditampilkan ke pengguna selama transisi. progres Halaman ini berguna untuk memberikan umpan balik pengguna bahwa permintaan sedang diproses. Perhatikan bahwa halaman kemajuan selama transisi dari berita ke detail berita ditampilkan hanya di Android aplikasi native, tidak dalam aplikasi web. (Lebih banyak diskusi ini akan diberikan dalam bagian 3, "Perubahan index.html".)

Model request/Response

Mari kita bicara tentang bagaimana request dan response ditangani dalam aplikasi web. Ada satu halaman HTML yang berisi UI dan penanganan event kode untuk aplikasi Berita, yang bernama index.html. File yang di-download ke browser mobile pengguna dari web server (untuk pengujian kami, kami menggunakan server web Apache 2,2). action halaman "Get Category" dan "Choose Category" melibatkan request AJAX untuk mendapatkan informasi berita dari Yahoo! Berita server URL, http://rss.news.yahoo.com/. Karena same-origin request AJAX, hal ini tidak mungkin untuk browser mengirim request tersebut langsung ke Yahoo! News server. akan bekerja sekitar, kami mempekerjakan PHP file di server web kami, yang bernama bridge.php, yang mengirim permintaan tersebut ke Yahoo! News server atas browser dan me-relay respon balik. Di sisi lain, action halaman berita melibatkan regular request HTTP permintaan ke server Yahoo! News. Untuk alasan ini, bridge.php tidak diperlukan.

Dalam hal request/respon model, Android aplikasi native berbeda dari aplikasi web dalam dua cara. Pertama, tidak perlu bridge.php. Hal ini karena ketika dikemas sebagai bagian dari aplikasi Android native, halaman HTML berjalan di android.webkit.WebView tidak dikenakan same-origin restriction ketika membuat AJAX panggilan. Kedua, dalam aplikasi Android native halaman action berita adalah panggilan AJAX daripada regular request HTTP. Kita akan membahas ini lebih lanjut pada bagian 3, "Perubahan index.html".

Halaman struktur

"Halaman" dalam framework Mobile jQuery dapat satu halaman atau halaman link internal lokal dalam halaman. Halaman kontainer akan mencakup satu atau lebih halaman konten. Dimungkinkan untuk Tampilkan/Sembunyikan halaman konten selektif. Seperti disebutkan sebelumnya, aplikasi web kami terdiri dari satu halaman HTML bernama index.html yang berisi semua UI dan penanganan kode event. Kita mendefinisikan halaman wadah kami sebagai berikut:

1	<!-- Container page -->
2	<div data-role="page" data-theme="b" id="containerPage">
3	... <!-- Content pages will go here -->
4	</div>

Atribut data-theme dari wadah div tag memiliki nilai b. Atribut data-theme memungkinkan kita untuk memilih dari style Mobile jQuery tersedia:

1	<div data-role="page" data-theme="b" id="page1">

Tema default memiliki berbagai color swatchers bernama,a, b, c, d, e, masing-masing menyediakan seperangkat konsisten warna untuk elemen yang berbeda di halaman. Untuk aplikasi kami kami memilih warna sesuai dengan b.

Konten halaman kategori, kategori pilihan, dan berita akan terkandung di dalam halaman kontainer. Isi halaman biasanya akan memiliki header, wilayah konten dan footer dengan masing-masing didefinisikan dalam div tag. Nilai atribut data-role dalam div tag mendefinisikan peran tag.

Untuk mendefinisikan header, gunakan<div ...="" data-role="header" ...="">
Untuk menentukan area konten, menggunakan<div ...="" data-role="content" ...="">
Untuk menentukan footer, menggunakan<div ...="" data-role="footer" ...="">

Sekarang mari kita perhatikan berbagai konten halaman dalam aplikasi kita.

Halaman Kategori

<!-- Categories -->
<div data-role="header" id="hdrCategories" data-nobackbtn="true">
   <h1>Categories</h1>
   <a id="buttonAddCategory" data-icon="plus" class="ui-btn-left" href="" 
      data-role="button" data-inline="true">Add</a>
</div>

<div data-role="content" id="contentCategories">  
   <ul data-role="listview" data-split-icon="delete" data-split-theme="d"  
      id="currentNews"></ul>
</div>

<div data-role="footer" id="ftrCategories"></div>

Di bagian header, mengamati data-nobackbtn = "true" atribut. Secara default, jQuery framework Mobile akan mencakup tombol Back di bagian header. Dengan secara eksplisit menetapkan bahwa atribut seperti di atas, kita menghindari memiliki tombol kembali. Sebaliknya, kami menyertakan Tambahkan tombol di bagian header yang menggunakan <a id="buttonAddCategory" ...="">. Karena nilai dari atribut data-icon plus, tombol akan memiliki tanda plus. Juga, class = "ui-btn-left" memastikan tombol ditempatkan di sisi kiri dari header. Kami tidak ingin untuk memasukkan apa pun di bagian footer dan karena itu div untuk footer kosong. Sebagai hasilnya, hanya garis horizontal tipis akan ditampilkan di bagian footer.

Wilayah konten memiliki jQuery disebut Mobile daftar split. Mengacu pada gambar 1 menampilkan halaman kategori, setiap item daftar terdiri dari bagian di sebelah kiri dengan teks dan bagian lain di sebelah kanan dengan tombol, maka 'split'. Atribut data-split-icon dan data-split-theme menentukan daftar sebagai daftar split. Perhatikan bahwa jQuery framework Mobile memiliki fleksibilitas untuk memformat bagian split dalam cara yang berbeda. Misalnya, Anda dapat menempatkan ikon di bagian text, berarti bahwa bukan sebuah tombol delete di sebelah kanan, Anda dapat memilih untuk memiliki ikon yang berbeda. Dalam aplikasi Berita kita, setiap item daftar akan sesuai dengan kategori Berita tertentu. Daftar item akan dibangun secara dinamis berdasarkan pilihan pengguna. Pada awalnya, daftar ini kosong.

Halaman pilihan Kategori

<!-- Category Selection -->
<div data-role="header" id="hdrSelect" data-nobackbtn="true">
  <h1>Select</h1>
</div>

<div data-role="content" id="contentSelect">	
  <form id="form1">
    <div id="categoryDiv" data-role="fieldcontain">  		
      <select id="category" tabindex="2">
        <option value=''>Select a Category</option>
        <option value='topstories'>Top Stories</option>
        <option value='us'>U.S.</option>
        <option value='world'>World</option>
        <option value='politics'>Politics</option>
        ...
      </select>
    </div>
    <a id="buttonGetCategory" href="" data-role="button" data-inline="true">Get Category</a>
  </form>
</div>

<div data-role="footer" id="ftrSelect"></div>

Pada halaman kategori pilihan, di daerah konten ada form yang memungkinkan pengguna untuk memilih dan menambahkan kategori Berita. Berita kategori adalah subset dari kategori di Yahoo! Berita seperti yang tercantum di http://news.yahoo.com/rss. Pemilihan kategori diproses ketika user menekan tombol dengan id = "buttonGetCategory".

Mengamati bahwa ada kembali tombol dan Bagian footer kosong.

Halaman Berita

<!-- News -->
<div data-role="header" id="hdrNews" data-nobackbtn="true">
  <h1>News</h1>
  <a id="buttonHdrShowCategories" data-icon="arrow-l" class="ui-btn-left" href="" data-role="button" data-inline="true">Back</a>
</div>

<div data-role="content" id="contentNews"></div>

<div data-role="footer" id="ftrNews">
  <a id="buttonFtrShowCategories" data-icon="arrow-l" class="ui-btn-left" href="" 
    data-role="button" data-inline="true">Back to News   Categories</a>
</div>

Pada halaman tersebut, daerah konten akan diisi secara dinamis dengan semua item berita yang terkait dengan kategori berdasarkan pilihan pengguna. Pada awalnya, daerah konten masih kosong. Di bagian header ada tombol kembali. Namun, daripada mengandalkan jQuery Mobile action default kembali kami akan menerapkan action itu melalui sebuah event handler. Oleh karena itu kita secara eksplisit mendefinisikan sebuah tombol dengan id = "buttonHdrShowCategories" (Event handler kode tombol akan ditinjau dalam bagian 2, "Pergi ke The Kategori halaman dari halaman berita"). Ikon atribut data-icon= "arrow" menggunakan ikon Mobile built-in jQuery icon Khusus untuk tombol kembali. Untuk jQuery tersedia Mobile tombol ikon, lihat http://jquerymobile.com/demos/1.0a2/#docs/buttons/buttons-icons.html. Pada halaman tersebut, kami memiliki tombol kembali pada footer juga. Hal ini karena halaman akan biasanya panjang dan pengguna akan perlu untuk scroll ke bawah untuk pergi melalui semua item berita. Kami ingin agar pengguna dapat kembali dari bagian bawah halaman tanpa harus menggulir semua jalan ke atas. Event handler untuk atas dan bawah tombol kembali akan sama.

Halaman Progress

Sebelumnya, kami menyebutkan bahwa selama berbagai transisi halaman kami menampilkan halaman progress sampai transisi selesai. Hal ini diperlukan hanya dalam transisi yang memerlukan waktu proses membangun permintaan atau parsing respon. Halaman progress yang sangat sederhana, dengan teks deskriptif dan ikon berputar.

<!--  Progress -->
<div data-role="header" id="hdrProgress" data-nobackbtn="true">
	<h1>Processing...</h1>
</div>

<div data-role="content" id="contentProgress">
	<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"></div>

Halaman Detail Berita

Isi dari halaman detail berita yang disediakan oleh Yahoo! Berita URL. Tampilan Halaman ini dijelaskan dalam bagian 2, "Pergi ke The Berita Detail halaman dari The Berita halaman".

Menampilkan halaman

Hanya menampilkan jumlah halaman untuk menampilkan halaman tersebut dan menyembunyikan semua halaman lain. Mari kita bahas bagaimana mencapai perilaku ini. element div mewakili header, isi dan footer halaman masing-masing ditugaskan variabel mengidentifikasi mereka dalam Konvensi jQuery seperti ditunjukkan di bawah. Karena ini berulang kali digunakan, mendefinisikan variabel global bagi mereka menyediakan suatu keuntungan kinerja setiap variabel yang diinisialisasi hanya sekali tetapi dapat digunakan berkali-kali.

<script>
  ...
  var hdrCategoriesVar = $('#hdrCategories');
  var contentCategoriesVar = $('#contentCategories');
  var ftrCategoriesVar = $('#ftrCategories');
  
  var hdrSelectVar = $('#hdrSelect');
  var contentSelectVar = $('#contentSelect');
  var ftrSelectVar = $('#ftrSelect');
  
  var hdrProgressVar = $('#hdrProgress');
  var contentProgressVar = $('#contentProgress');
  var ftrProgressVar = $('#ftrProgress');
  
  var hdrNewsVar = $('#hdrNews');
  var contentNewsVar = $('#contentNews');
  var ftrNewsVar = $('#ftrNews');
  ...
</script>

Untuk menyembunyikan halaman, kita memanggil fungsi hide() jQuery pada header, isi, dan variabel footer halaman tersebut. Misalnya, untuk menyembunyikan halaman Kategori:

function hideCategories(){
   hdrCategoriesVar.hide();
   contentCategoriesVar.hide();
   ftrCategoriesVar.hide();      
}

Demikian pula, untuk halaman kategori pilihan, Berita, dan kemajuan, kami memiliki berikut 'hide' fungsi:

function hideSelect(){
   hdrSelectVar.hide();
   contentSelectVar.hide();
   ftrSelectVar.hide();      
}
...
function hideNews(){
   hdrNewsVar.hide();
   contentNewsVar.hide();
   ftrNewsVar.hide();
}
...
function hideProgress(){
   hdrProgressVar.hide();
   contentProgressVar.hide();
   ftrProgressVar.hide();
}

Untuk menampilkan halaman, kita menyembunyikan semua halaman lain dan memanggil fungsi show() jQuery pada header, isi, dan variabel footer halaman tersebut. Misalnya, untuk menampilkan halaman kategori kami memiliki fungsi berikut:

function showCategories(){
   hideSelect();
   hideProgress();
   hideNews();
   hdrCategoriesVar.show();
   contentCategoriesVar.show();
   ftrCategoriesVar.show();      
}

Demikian pula, untuk kategori pilihan, Berita, dan kemajuan halaman, kami memiliki berikut 'show' fungsi:

function showSelect(){
   hideCategories();
   hideProgress();
   hideNews();
   hdrSelectVar.show();
   contentSelectVar.show();
   ftrSelectVar.show();      
}
...
function showNews(){
   hideCategories();
   hideSelect();
   hideProgress();
   hdrNewsVar.show();
   contentNewsVar.show();
   ftrNewsVar.show();
}
...
function showProgress(){
   hideCategories();
   hideSelect();
   hideNews();
   hdrProgressVar.show();
   contentProgressVar.show();
   ftrProgressVar.show();
}

Daripada memiliki satu halaman HTML yang berisi semua kode UI, kita bisa menyelenggarakan UI ke beberapa halaman HTML. Untuk tujuan dari tutorial ini, kami memilih pendekatan yang tadi. Untuk kasus terakhir, lihat model navigasi jQuery Mobile yang menjelaskan bagaimana jQuery Mobile melakukan navigations halaman antara file fisik yang berbeda.

Penutup

Di bagian awal dari seri tutorial, kami memperkenalkan tujuan dari tutorial dan dibahas contoh aplikasi yang akan diimplementasikan. Kami juga mulai menyajikan jQuery framework Mobile dengan penekanan pada struktur halaman. Minggu depan, kami akan terus memperkenalkan jQuery Mobile kode dan menyelesaikan implementasi aplikasi web kami dalam bagian kedua dari seri ini.