การ Embed HTML ลงใน Addroid Package .apk

Posted By:   Published in All Categories, Android/WindowsPhone, HTML/JavaScript/CSS

15

Apr 11

บทความก่อนหน้านี้ได้ทดลองนำ WebView มาใช้กันบ้างแล้ว และเป็นการใช้ WebView เรียกไปยัง website ข้างนอก แต่หากว่าเราต้องการจะนำ HTML ยัดลงไปในโปรเจคด้วยนี้จะทำยังไง โปรแกรมบางโปรแกรมเราไม่ได้ต้องการใช้ความสามารถของเครื่องอะไรมากนัก เราสามารถที่จะใช้ HTML และ JavaScript สร้างมันขึ้นมาได้ไม่ยาก และสำหรับคนที่ทำ website เป็นงานหลักอย่างผมแล้วเนี้ย มันดูจะประหยัดเวลามากกว่าการเขียนทั้งหมดด้วย Java เพียงอย่างเดียวซะอีก ^^

เริ่มด้วยการสร้างโปรเจคขึ้นชื่อ “EasyEmbedHTML”

EasyEmbedHTML

จากนั้นเข้าไปที่ res -> layout -> main.xml และทำการเพิ่ม WebView เข้าไปในโปรเจคโดยกำหนด properties ของ WebView ดังนี้

1
2
3

# WebView01
   - Layout width : fill_parent
   - Layout height : fill_parent

# main.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
 
	<WebView
		android:id="@+id/WebView01"
		android:layout_height="fill_parent"
		android:layout_width="fill_parent">
	</WebView>
 
</LinearLayout>

ต่อไปทำการสร้างโฟลเดอร์ www ไว้ข้างใน assets และนำไฟล์ HTML และรูปที่เราจะใช้มาไว้ในโฟลเดอร์นี้

EasyEmbedHTML

# page1.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EasyEmbedHTML</title>
</head>
<body>
 
<div style="text-align:center">
 
<img src="images/wall-e-icon.png" width="128" height="128" />
<br />
<br />
<input type="button" name="button" id="button" value="Go to Eve" onclick="window.location.href='page2.html';" />
</div>
 
</body>
</html>

# page2.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EasyEmbedHTML</title>
</head>
<body>
 
<div style="text-align:center">
 
<img src="images/eve-icon.png" width="128" height="128" />
<br />
<br />
<input type="button" name="button" id="button" value="Go to Wall-E" onclick="window.location.href='page1.html';" />
</div>
 
</body>
</html>

# wall-e-icon.png

EasyEmbedHTML

# eve-icon.png

EasyEmbedHTML

ทำการเปิด EasyEmbedHTML.java ขึ้นมาและทำการแก้ไขดังนี้ (ผมจะไม่อธิบายตัวโปรแกรมนะครับ เพราะส่วนใหญ่ได้อธิบายไว้ในบทความก่อนๆหมดแล้ว)

# EasyEmbedHTML.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

package com.LookHin.EasyEmbedHTML;
 
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
 
public class EasyEmbedHTML extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
 
        // สร้าง WebView
    	WebView  mWebView = (WebView) findViewById(R.id.WebView01);
    	mWebView.getSettings().setJavaScriptEnabled(true);
    	mWebView.setWebViewClient(new EasyWebViewClient());
    	mWebView.loadUrl("file:///android_asset/www/page1.html");
    }
 
    // Extend Class WebViewClient เพื่อให้คลิก Link ต่างๆแล้วยังคงอยู่หน้าเดิม
    private class EasyWebViewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
    }
}

เท่านี้ก็เรียบร้อยครับ ทำการทดสอบโปรแกรมได้เลย ^^

EasyEmbedHTML

EasyEmbedHTML

Download Source Code ทั้งหมดได้จาก https://www.unzeen.com/download/android/EasyEmbedHTML.zip

บทความนี้แนะนำเพียงเบืองต้น หากท่านสนใจที่จะนำไปใช้ทำโปรแกรมอย่างจริงจัง เราแนะนำให้ใช้ PhoneGap http://www.phonegap.com/ เพราะว่าเป็น Framework ที่จัดเตรียมทุกอย่างไว้ให้เราแล้ว เราไม่ต้องเขียนเองทั้งหมด

Related articles

No Responsed To This Post
LookHin
Mr.Khwanchai Kaewyos (LookHin)
Mobile : 088-799-8421
Name : LookHin
E-mail : [email protected]

https://github.com/LookHin
https://www.facebook.com/LookHin
https://twitter.com/LookHin