header-object

[Webapp Tutorial] Xây dựng ứng dụng di động dùng HTML5 - Bài 8

 

 

8. Tích hợp vào Android-App

Trong phần này chúng ta không đề cập đến vấn đề cài đặt môi trường để phát triển ứng dụng Android. Về cơ bản việc này gồm 4 bước sau.

  1. Cài Java Platform (JDK)
  2. Tải về Eclipse
  3. Tải về Android SDK và cài đặt
  4. Mở Android SDK Manager và tải Tools và Source

 

8.1 Tạo Project dùng Eclipse

Các bước hướng dẫn tiếp sau thực hiện trên Eclipse 4.2 (Junio) được tích hợp Android SDK Tools phiên bản 21.
Mở Eclipse, Chọn File à New à Android Project… sẽ hiện ra hộp thoại tạo Project Android, nhập các nội dung như trong hình minh họa sau:
h16 Các bạn cũng lưu ý rằng để có thể tạo ứng dụng Android cho phiên bản nào của hệ điều hành Android thì chúng ta cần phải tải API Level tương ứng của phiên bản đấy trong Android SDK Manager trước.
Nhấn Next để qua bước tiếp sau như hình minh họa:
h17 Như các bạn thấy trong phần Location là nơi chứa toàn bộ mã nguồn của ứng dụng chúng ta sẽ tạo ra. Hãy nhớ đường dẫn này.
Ở bước này nhớ check 2 tùy chọn Create custom launcher icon và Create activity. Sau đó nhấn Next để qua bước tiếp sau:
h18 Ở bước này cho phép bạn chọn một hình bất kì làm biểu tượng đại diện cho ứng dụng. Bạn browse chọn một hình bất kì rồi cứ thử các chức năng tùy ý để xem các hiển thị khác nhau của biểu tượng sẽ tạo ra. Sau khi có một biểu tượng ưng ý thì nhấn Next để qua bước kế tiếp.
h19

Bước này cho chúng ta chọn kiểu trình bày của màn hình chính của ứng dụng. Chọn loại BlankActivity và nhấn Finish. Perspective Java cho phép chúng ta viết mã cho ứng dụng sẽ hiển thị như sau:
h20 Vùng bên trái như trong hình là Panel Package Explorer, cho phép chúng ta quan sát các Project đang thực hiện và cấu trúc tập tin, thư mục của từng Project
Vùng bên phải như trong hình là Editor cho phép chúng ta thiết kế layout cho ứng dụng. Như các bạn đang thấy hiện tại nó đang mở tập tin res/layout/activity_main.xml trong ứng dụng của chúng ta. Các bạn lưu ý một điều là Editor này cho phép hiển thị ở chế độ Design (Graphical Layout – Như trong hình trên) và chế độ Code (activity_main.xml).

 

8.2 Tích hợp các tập tin vào resouce của ứng dụng

Việc các bạn cần làm tiếp sau là chép toàn bộ các tập tin (HTML + Javascript + CSS) chúng ta đã tạo ở các phần trước vào trong thư mục assets của ứng dụng mới tạo. Xem hình minh họa:


h21

h22

HÌnh bên trái minh hoạc cấu trúc của Project khi chúng ta mới tạo ra, thư mục assets hiện đang trống. Hình bên phải là sau khi chúng ta đã chép các tập tin Html, Javascript, Css vào thư mục assets (Chú ý là phải right-click vào thư mục này rồi nhấn Refresh).
Một điều các bạn tìm hiểu lập trình Android cũng cần phải nắm được là sau khi Build Project sẽ được đóng gói thành một tập tin .apk (tập tin nhị phân thực thi ứng dụng). Có nghĩa các thành phần sẽ được mã hóa thành mã nhị phân, duy chỉ có các thành phần nằm trong thư mục assets sẽ không bị mã hóa.

 

8.3 Tạo màn hình chính của ứng dụng chứa Webview

8.3.1 Tạo giao diện bằng xml

Hiện tại, trong thư mục res/layout chúng ta có một tập tin xml có tên activity_main.xml, đây là tập tin tạo ra giao diện cho màn hình ứng dụng của chúng ta. Double-click vào nó để mở nó, Chọn chế độ code bằng cách bấm vào tab activity_main.xml (Ngay phía dưới Panel có tên Palette có 2 tab chọn chế độ Design hay Code như hình minh họa sau)
h24 Nhập nội dung xml đơn giản như sau:


Như bạn nhận thấy ở đây chúng ta đã đặt một thẻ WebView, thẻ này có thuộc tính android:id mang giá trị là “@+id/webView” hãy nhớ điều này vì chúng ta sẽ cần làm việc với nó ở phần sau.

 

8.3.2 Cơ bản về Activity trong android

Việc tiếp sau chúng ta sẽ làm là viết một vài dòng lệnh đơn giản. Mở tập tin MainActivity.java (nằm trong package src/com.hn.danwebdrawing). Mã nguồn hiện tại như sau:

package com.hn.danwebdrawing;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
public class MainActivity extends Activity {
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		
	}
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		getMenuInflater().inflate(R.menu.activity_main, menu);
		return true;
	}
}

Ở đây các bạn thấy đang cài đặt lớp MainActivity kế thừa từ lớp Activity có sẵn của Android. Đối với Android thì mỗi màn hình hiển thị sẽ được tạo nên từ một đối tượng Activity. Có nghĩa nếu ứng dụng của các bạn có 3 màn hình khác nhau thì chúng ta sẽ phải tạo ra 3 lớp đối tượng khác nhau kế thừa từ lớp đối tượng Activity của Android.

 

8.3.3 Nhúng tập tin dwdrawing.html lên Webview

Việc tiếp sau chúng ta sẽ làm bao gồm các bước:

  • Lấy về đối tượng WebView tương ứng với thẻ WebView chúng ta đã đặt trong tập tin xml
  • Thiết lập để WebView này tải và hiển thị (load) nội dung tập tin dwdrawing.html
  • Thiết lập bật tính năng javascript của WebView

Đoạn mã thực hiện sẽ làm thay đổi phương thức onCreate thành như sau:

@Override
public void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	
	WebView webView = (WebView) findViewById(R.id.webView);
	webView.getSettings().setJavaScriptEnabled(true);
	webView.loadUrl("file:///android_asset/dwdrawing.html");
}

 

8.4 Đóng gói và cài đặt

Để đóng gói ứng dụng chọn Project à Build Project hoặc nhấn F11 đều được. Sau đó mở thư mục con có tên bin nằm trong thư mục project, nếu đã đóng gói thành công chúng ta sẽ thấy xuất hiện tập tin có tên DanwebDrawing.apk. Đây chính là tập tin ứng dụng cuối cùng dùng để cài đặt lên thiết bị Android.
Đây là kết quả khi ứng dụng thực thi trên máy tính bảng Samsung Galaxy Tab (Android 3.0).
h25
Bạn có thể tải tập tin cài đặt tại đây: DanwebDrawing.zip
Bạn có thể tải toàn bộ mã nguồn của Project DanwebDrawing tại đây: DanwebDrawing-Project.zip

 

Đào Ngọc Giang

Bình luận  

 
0 #3 Trần Hòa Thứ 2-09-15 11:15
Em chào anh!
[fv]Em chào anh! Em có thắc mắc về thẻ canvas nếu như ta sét kích thước cho nó là 600x400 rồi thì khi mình add vào trong webview android làm thế nào để nó có thể fix theo size màn hình? hay ta phải sét witdh height cho div canvas theo kích thước màn hình? và giải quết vấn đề này như thế nào vs mutil-screen?[/ fv]
Trích dẫn
 
 
+1 #2 nta2388 Thứ 4-04-13 08:25
Rất cảm ơn vì bài viết rất hay và chi tiết
Trích dẫn
 
 
0 #1 AndyThang Thứ 6-02-13 15:13
Bạn có thể hướng dẫn mình cách add clear canvas button trong trường hợp này không? Mình đã thử nhiều cách nhưng function của button không hoạt động.
Thanks
Trích dẫn
 

Thêm ý kiến


Security code
Làm mới


2

Facebook

Thống kê truy cập

Hiện có 410 khách đang truy cập
2546536