Dengan menggunakan library Booklet dari Jquery, pada tutorial kali ini kita akan membuat sebuah aplikasi Android berbasis Phonegap yang menampilkan halaman per halaman buku layaknya buku asli. Dimana dari halaman tersebut nantinya kita dapat memasukkan teks atau gambar.
Salah satu plugin Jquery yang akan saya aplikasikan kali ini adalah Jquery Booklet. Jquery Booklet dibuat oleh Will Grauvogel yang sekarang bekerja di Universitas Purdue. Plugin ini tidak berdiri sendiri, karena kita juga harus meng-include beberapa plugin lain untuk memberikan efek smooth pada manipulasi halaman buku. Berikut adalah beberapa library yang dipakai untuk pembuatan ini :
- Jquery.min.js
- Jquery.easing
- dan Jquery.booklet itu sendiri.
Jquery mempunyai puluhan library yang dapat kita pergunakan untuk membuat manipulasi halaman buku. namun setelah saya coba beberapa dari library tersebut, saya lebih memilih Jquery Booklet karena kesederhanaan pengaplikasiannya. Selain itu, Jquery Booklet juga memungkinkan kita memberi efek-efek tertentu yang tentunya sudah disediakan dalam konfigurasi plugin ini.
Tutorial
- Project Name : Booklet
- Package Name : com.mkhuda.booklet
- Phonegap Version : Phonegap versi 1.9.0
- Built Target : Android 2.2 (SDK version 8)
Jangan lupa hapus juga atribut xLargeScreens untuk memastikan tidak terjadi error pada file Manifest kita.
Dari gambar terlihat, seluruh file CSS saya masukkan ke dalam folder Booklet dan file library Jquery saya masukkan ke folder JS.
Oh iya, dalam folder Booklet saya juga memodifikasi dan membuat file library css bernama jquery.booklet.480.css. File ini merupakan modifikasi dari library css asli booklet. Dimaksudkan agar tampilan halaman buku dapat menyesuaikan resolusi beberapa perangkat Android yang berlayar kecil (dibawah 480 px).
<!-- Javascript Library --> <script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script> <script type="text/javascript" src="js/jquery-1.7.2.min"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery-ui.min"></script> <script type="text/javascript" src="js/jquery.booklet.1.4.0.js"></script> <!-- CSS Library --> <link href="booklet/jquery.booklet.1.4.0.css" rel="stylesheet" type="text/css" /> <link href="booklet/jquery.booklet.480.css" media="only screen and (max-width: 480px)" rel="stylesheet" type="text/css" />
Pada line terakhir, kita memasukkan jquery.booklet.480.css dan menambahkan atribut media=”only screen and (max-width: 480px). Dengan ini, secara otomatis pengguna yang menggunakan perangkat beresolusi di bawah 480 px agar dapat menyesuaikan tampilan (bahasa kerennya Responsive).
<script type="text/javascript"> $(function() { //membaca div #mybooklet $('#mybooklet').booklet({ easing: null, easeIn: null, easeOut: null, next: '#next', prev: '#prev' }); }); </script>
Untuk source code di dalam body, silahkan tulis source code berikut :
<center><div id="title"><h3>Mkhuda Booklet</h3></div></center> <div id="mybooklet"> <div> <center><h3>Halaman Pertama</h3></center> </div> <div> <center><h3>Halaman Kedua</h3></center> </div> <div> <center><h3>Halaman Ketiga</h3></center> </div> </div> <center> <a href="#" id="prev">Halaman Sebelumnya</a> [] <a href="#" id="next">Halaman Selanjutnya</a> </center>
Pada kode di atas, jelas tertulis kita akan membuat buku yang mempunyai tiga halaman. Dan di bawahnya kita juga membuat navigasi untuk menuju ke halaman berikutnya atau kembali ke halaman sebelumnya. Cukup simpel.
android:screenOrientation= "landscape"
Silahkan lihat cara mengaturnya di tutorial pengaturan mode layar ini.
Di dalam source code, saya sudah menyertakan semua library baik jquery easing, booklet, hingga hasil file .APK aplikasi booklet tersebut. Selamat mencoba !
android:screenOrientation= “landscape” <!– mode hanya landscape –>