CandraLab

IT Pro & Developer Resource

Menu Close

Tutorial JQuery Mobile dan WebView Android

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>
<span id="more-3297"></span>   &lt;p&gt;
  Selamat Datang di Candralab Studio. 
  Kami bergerak dibidang pembuatan aplikasi Web dan Mobile
  dengan spesialisasi Android, Google Map, Webservice dengan Framework
  Twitter Bootstrap.
   &lt;/p&gt;
&lt;/div&gt;


	&lt;/div&gt;&lt;!-- /content --&gt;
			&lt;div data-role=&quot;footer&quot; data-position=&quot;fixed&quot;&gt;
				&lt;h4&gt;Copyright &amp;copy; 2014&lt;/h4&gt;
			&lt;/div&gt;&lt;!-- /footer --&gt;
		&lt;/div&gt;&lt;!-- /page --&gt;
	&lt;/body&gt;
&lt;/html&gt;

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.