Tutorial JQuery Mobile dan WebView Android

jqm2

Artikel ini akan membahas bagaimana caranya menampilkan halaman JQuery Mobile yang tersimpand di folder Assets dan menampilkannya di Webview. Tujuan utama menggunakan JQM (jquery mobile) adalah menjadikan tampilan web didalam aplikasi android terasa seperti aplikasi Native.

jqm2
Tampilan JQM didalam Webview Android

Berikut ini adalah contoh tampilan WebView dan JQM di Android.

Sample HTML JQM

Contoh diatas menampilkan halaman HTML yang dibangun dengan JQM di folder assets. Potongan kode HTMLnya adalah sbb:

html>
	<head>
		<meta charset="utf-8">
		<title> Help </title>
			<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="css/jquery.mobile-1.4.0.min.css" />
				<link rel="stylesheet" href="css/thema.min.css" />
		<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
	
		<script src="css/jquery-1.9.1.min.js"></script>
		<script src="css/jquery.mobile-1.4.0.min.js"></script>

	</head>
	<body>
		<div data-role="page" data-theme="a" id="demo-page" class="my-page">
			<div data-role="header">
				<h1>Home</h1>
			</div><!-- /header -->
			<div data-role="content">
<div data-role="collapsible">
  <h5>Welcome</h5>
   <p>
  Selamat Datang di Candralab Studio. 
  Kami bergerak dibidang pembuatan aplikasi Web dan Mobile
  dengan spesialisasi Android, Google Map, Webservice dengan Framework
  Twitter Bootstrap.
   </p>
</div>


	</div><!-- /content -->
			<div data-role="footer" data-position="fixed">
				<h4>Copyright &copy; 2014</h4>
			</div><!-- /footer -->
		</div><!-- /page -->
	</body>
</html>

Perhatikan ternyata, didalam folder assets juga bisa diisi dengan file javascript dan CSS. Berikut ini adalah struktur direktori di folder assets.

Struktur JQM di Assets
Struktur JQM di Assets

Berikut ini adalah contoh tampilan JQM di Webview dengan thema Gelap.
jqm1

Perhatikan tampilan diatas? Jika anda perhatikan, tampilannya seakan akan murni android bukan?

Cara meload ke Webview

Berikut ini adalah potongan kode cara meload HTML dari assets ke Webview

content = "file:///android_asset/" + namafile;
WebView wv;
wv = (WebView) findViewById(R.id.webView1);
WebSettings webSettings = wv.getSettings();
webSettings.setJavaScriptEnabled(true);
wv.loadUrl(content);

Download

Ingin mencoba sendiri? silahkan download source codenya disini.

Author: Candra Adi Putra

Candra Adi Putra adalah Alumni STMIK AKAKOM Yogyakarta. Like Candralab Studio Di Facebook.

4 thoughts on “Tutorial JQuery Mobile dan WebView Android”

  1. assalamualaikum
    bang punya tutor coding zoom in dan zoom out untuk software eclipse ?
    atwpun coding agar tampilan file html dengan webviewer bisa di zoom ?

  2. Mas Candra, mau tanya dong. Diatas kan saya lihat ada 3 file html (home, about, content), nah semisal load pertama saya arahkan ke home.html kemudan berhasil tampil. Kemudian yang saya tanyakan, setelah saya berada di home.html, bagaimana ya caranya saya memanggil about.html dari page home.html (misal)?
    Apakah untuk about.html nya harus saya onlinekan, baru saya panggil URLnya dengan href?
    Jika saya ingin semuanya offline (file.html ada di folder assets semua) bagaimana cara pemanggilannya?

    terima kasih informasinya

Tinggalin komentar dong!