MetroApp1: Tổng quan về ứng dụng phong cách Metro

Phần 1: Tạo ứng dụng “Hello, world”

Bài viết trước đã cung cấp cho bạn cái nhìn tổng quan về Metro App (ứng dụng theo phong cách Metro). Bạn đã biết Metro App có thể tạo ra bằng các ngôn ngữ quen thuộc như HTML, JavaScript, C#, Visual Basic hay C++. Trong loạt bài viết về MetroApp, chúng tôi sẽ hướng dẫn bạn tạo ứng dụng bằng những ngôn ngữ đó trên phiên bản Visual Studio 2012. Bài hướng dẫn tạo ứng dụng Metro App đầu tiên, tôi xin dành cho HTML và Javascript và CSS. Chúng ta cùng bắt đầu nhé!

Bài viết này sẽ hướng dẫn bạn tạo một ứng dụng đơn giản gọi là “Hello, world” theo phong cách Metro sử dụng JavaScript. Loạt bài hướng dẫn tạo MetroApp cho mỗi ngôn ngữ sẽ gồm 3 phần, hướng dẫn bạn cách để xây dựng ứng dụng Metro. Sau ví dụ này, bạn sẽ biết cách:

• Tạo mới project
• Thêm mới nội dung HTML vào trang đầu tiên của bạn
• Xử lý tương tác đầu vào là cảm ứng, bút, và chuột
• Chuyển đổi giữa 2 loại style sheets sáng và tối

Trước khi bắt đầu

• Để hoàn thành hướng dẫn này, bạn cần sử dụng Windows 8 Release Preview và Microsoft Visual Studio Express 2012 RC cho Windows 8. Để tải chúng về, thì xem thêm ở phần Công cụ.
• Bạn cũng cần biết tới giấy phép phát triển (developer license). Xem thêm về developer license.

Bước 1: Tạo mới project trong Visual Studio

Bạn tạo ra một ứng dụng mới đặt tên là HelloWorld. Đây là các bước thực hiện.

1. Khởi động Visual Studio Express 2012 RC trên Windows 8.

   Visual Studio Express 2012 RC xuất hiện ở màn hình Start của Windows 8.

2. Từ menu File chọn New Project.

   Hộp thoại New Project xuất hiện. Phần phần bên trái của hộp thoại, bạn nhập chọn loại template để hiển thị.

3. Ở phần bên trái, mở rộng phần Installed, mở tiếp JavaScript và chọn loại template Windows Metro style.

   Phần giữa của hộp thoại hiển thị danh sách mẫu project cho JavaScript.

Trong hướng dẫn này, chúng tôi sử dụng Blank App template. Template này tạo ra ứng dụng Metro nhỏ nó biên dịch và chạy, nhưng không chứa controls giao diện hay dữ liệu. Chúng ta sẽ thêm các controls và dữ liệu vào ứng dụng.

1. Ở phần giữa, chọn Blank App template
2. Trong ô textbox Name, nhập “HelloWorld”
3. Click OK để tạo project

Visual Studio tạo ra project của bạn và hiển thị nó trong Solution Explorer.

Mặc dù Blank App chỉ là một template nhỏ, nhưng nó vẫn chứa một vài files như:

• File manifest (package.appxmanifest) nó mô tả ứng dụng của bạn (tên, mô tả, tiêu đề, tile, trang start, màn hình splash, và hơn thế) và danh sách file trong ứng dụng của bạn.
• Tập hợp ảnh logo lớn nhỏ (logo.png and smalllogo.png) để hiển thị trên màn hình start.
• Ảnh (storelogo.png) đại diện cho ứng dụng của bạn trên Windows Store.
• Màn hình splash (splashscreen.png) để hiển thị khi ứng dụng của bạn khởi động.
• CSS và file code của Windows Library cho JavaScript (bên trong thư mục References).
• Một trang bắt đầu (default.html) và kèm theo tập tin JavaScript (default.js) chạy khi ứng dụng của bạn bắt đầu.

Những tập tin này rất cần thiết cho tất cả các ứng dụng phong cách Metro sử dụng JavaScript. Bất kỳ dự án nào mà bạn tạo ra trong Visual Studio đều chứa chúng.

Bước 2: Khởi động ứng dụng

Ở thời điểm này, chúng ta đã tạo ra một ứng dụng rất đơn giản. Nếu muốn thấy được kết quả của những gì bạn đã làm, thì hãy nhấn F5 để xây dựng, triển khai và khởi động ứng dụng. Mặc định, màn hình splash sẽ xuất hiện đầu tiên. Màn hình splash được định nghĩa bởi ảnh (splashscreen.png) và màu nền (xác định trong file manifest của ứng dụng). Chúng tôi không hiển thị nó ở đây, nhưng có thể dễ dàng tùy biến màn hình splash. (Tìm hiểu thêm về cách thêm màn hình Splash)

Màn hình splash biến mất, và sau đó ứng dụng của bạn xuất hiện. Nó chứa màn hình đen với dòng chữ “Content goes here.”

Nó không có nút hay lệnh để đóng ứng dụng. Để đóng ứng dụng, vuốt từ mép trên xuống phía dưới của màn hình hoặc nhấn Alt-F4. Tới màn hình Start; chú ý rằng ứng dụng vừa được triển khai nằm ở tile (ô vuông) trong nhóm cuối cùng của màn hình Start. Để chạy lại ứng dụng, chạm hoặc click vào tile trên màn hình start hoặc nhấn phím F5 trong Visual Studio để chạy ứng dụng với chế độ debug.

Những gì bạn làm ở đây chưa phải là nhiều – tuy nhiên – xin chúc mừng bạn, bạn đã xây dựng xong ứng dụng đầu tiên theo phong cách Metro.

Bước 3: Chỉnh sửa trang bắt đầu

Một trong những tập tin mà Visual Studio tạo ra cho chúng ta là default.html, trang bắt đầu của ứng dụng. Khi ứng dụng chạy, nó hiển thị nội dung của trang bắt đầu. Trang bắt đầu cũng chứa tham chiếu với các tập tin mã của ứng dụng và style sheets. Đây là trang bắt đầu Visual Studio tạo ra cho chúng ta :

[sourcecode language=”html”]

HelloWorld

<!– WinJS references –>
<script type="text/javascript" src="//Microsoft.WinJS.1.0.RC/js/base.js"></script><script type="text/javascript" src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>

<!– HelloWorld references –>
<script type="text/javascript" src="/js/default.js"></script>

Content goes here

[/sourcecode]

Hãy thêm một số nội dung mới vào tập tin default.html của bạn. Giống việc thêm nội dung vào bất kỳ tập tin HTML khác, bạn thêm nội dung vào trong các thẻ body. Bạn có thể sử dụng các thẻ HTML5 để tạo ra ứng dụng của bạn (lưu ý một vài trường hợp ngoại lệ). Điều đó có nghĩa là bạn có thể sử dụng các thẻ HTML5 như h1, p, button, div, và img.

Để chính sửa nội dung của trang bắt đầu, ta làm như sau:

1. Thay thế nội dung hiện tại trong phần body bằng lời chào “Hello, world!” – định dạng Heading1, một số chữ yêu cầu người dùng nhập user name, và một phần tử input để nhập username, một nút, một thẻ div. Gán ID cho nút và div.

[sourcecode language=”html”]</pre>
<h1>Hello, world!</h1>
<pre>

What’s your name?

<input id="nameInput" type="text" />
<button id="helloButton">Say "Hello"</button></pre>
<div id="greetingOutput"></div>
<pre>

[/sourcecode]

1. Chạy ứng dụng

   

   Ngay bây giờ, nhấn vào nút thì nó chẳng làm gì cả. Ở bước tiếp theo, chúng tôi sẽ tạo ra xử lý sự kiện cho nút để hiển thị lời chào cá nhân hoá. Chúng tôi thêm mã xử lý sự kiện vào tập tin default.js.

Bước 4: Tạo ra xử lý sự kiện

Khi bạn tạo ra một dự án mới, Visual Studio tạo ra một file /js/default.js cho chúng ta. File này chứa code để xử lý vòng đời ứng dụng của bạn, khái niệm này chúng ta sẽ giải thích thêm ở bài sau. Nó cũng là nơi bạn viết thêm code để cung cấp tương tấc cho trang default.html file. Mở file default.js.

Trước khi chúng ta bắt đầu viết thêm code, chúng ta hãy xem một vài dòng mã đầu tiên và cuối cùng trong tập tin:

[sourcecode language=”javascript”]
(function () {
"use strict";

// Omitted code

})();
[/sourcecode]

Bạn có thể tự hỏi những gì đang xảy ra ở đây. Chỉ còn lại những dòng mã bị bọc trong chức năng ẩn danh tự thực hiện.

Bây giờ bạn đã biết nó làm gì, bạn có thể tự hỏi lý do tại sao chúng tôi bọc (wrap) mã của chúng tôi trong một chức năng ẩn danh tự thực hiện. Đó là bởi vì, điều này làm cho nó dễ dàng tránh những xung đột khi đặt tên, hoặc tình huống mà bạn vô tình sửa đổi một giá trị mà bạn không cố ý. Nó cũng giữ những định danh không cần thiết ra khỏi global namespace, giúp tăng hiệu suất. Có vẻ hơi lạ, nhưng đó là một cách tốt trong lập trình tốt.

Các dòng mã tiếp theo quay về chế độ nghiêm ngặt (strict mode) cho mã JavaScript của bạn. Chế độ nghiêm ngặt cung cấp thêm kiểm tra lỗi cho mã của bạn. Ví dụ, nó ngăn cản bạn bằng cách sử dụng các biến khai báo ngầm định hoặc gán một giá trị cho một thuộc tính chỉ đọc.

Hãy nhìn vào phần còn lại của mã trong default.js. Nó xử lý sự kiện kích hoạt (activated) và trạm kiểm soát (checkpoint) ứng dụng của bạn. Sau đây, chúng tôi sẽ đi vào chi tiết hơn về những sự kiện. Bây giờ, chỉ biết rằng sự kiện kích hoạt sinh ra khi ứng dụng bắt đầu.

Chúng ta hãy định nghĩa một xử lý sự kiện cho button của bạn. Xử lý sự kiện của chúng tôi là lấy tên của người dùng từ nameInput control nhập và sử dụng nó để hiển thị ra một lời chào ở thẻ div greetingOutput mà bạn tạo ra trong phần cuối.

Để tạo ra xử lý sự kiện

1. Trong default.js, sau xử lý sự kiện app.oncheckpoint và trước khi gọi app.start, tạo ra một hàm xử lý sự kiện đặt tên là buttonClickHandler với một biến tham số là eventInfo.

[sourcecode language=”javascript”]
function buttonClickHandler(eventInfo) {

}
[/sourcecode]

1. Trong phần xử lý sự kiện, lấy ra username của người dùng nhập vào control nameInput và dùng nó để tạo ra một lời chào. Dùng greetingOutput div để hiển thị ra kết quả.

[sourcecode language=”javascript”]
function buttonClickHandler(eventInfo) {

var userName = document.getElementById("nameInput").value;
var greetingString = "Hello, " + userName + "!";
document.getElementById("greetingOutput").innerText = greetingString;
}
[/sourcecode]

Chúng ta đã thêm được một xử lý sự kiện vào trang default.js. Giờ việc chúng ta cần làm là phải đăng ký nó.

Bước 5: Đăng ký sự kiện khi ứng dụng của bạn khởi động

Có một việc chúng ta cần phải làm bây giờ đó là đăng ký xử lý sự kiện(event handler) với button. Bạn đăng ký một xử lý sự kiện gọi là addEventListener từ code của chúng ta. Một nơi tốt để đăng ký xử lý sự kiện đó là khi ứng dụng của bạn được activated. Tất nhiên, Visual Studio sinh ra một số mã cho chúng ta trong file default.js chứa những xử lý liên quan tới việc kích hoạt ứng dụng: app.onactivated event handler. Hãy nhìn đoạn code này.

[sourcecode language=”javascript”]
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
WinJS.strictProcessing();

app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll());
}
};
[/sourcecode]

Trong phần xử lý onactivated, code kiểm tra xem loại activation gì đã xảy ra. Có rất nhiều loại activations. Chúng ta cảm thấy rất thú vị khi bắt đầu activation. Một ứng dụng được bắt đầu (launched) bất kỳ khi nào nó không đang chạy và sau đó người dùng kích hoạt nó.

[sourcecode language=”javascript”]
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
[/sourcecode]

Nếu activation bắt đầu, code kiểm tra để thấy ứng dụng shut down trong những phút cuối như thế nào.

[sourcecode language=”javascript”]
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
[/sourcecode]

Sau đó gọi WinJS.UI.processAll.

[sourcecode language=”javascript”]
args.setPromise(WinJS.UI.processAll());
}
};
[/sourcecode]

Nó gọi WinJS.UI.processAll liên quan tới bất kỳ ứng dụng nào được shutdown trong quá khứ hoặc bất kỳ khi nào nó được luanch lần đầu tiên. WinJS.UI.processAll được đặt phần gọi phương thức setPromise.

Để đăng ký xử lý sự kiện (event handler) của bạn

Trong onactivated event handler ở default.js, tìm kiếm helloButton và dùng addEventListener để đăng ký xử lý sự kiện cho click event. Thêm đoạn code sau để gọi WinJS.UI.processAll.

[sourcecode language=”javascript”]
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll());

// Retrieve the button and register our event handler.
var helloButton = document.getElementById("helloButton");
helloButton.addEventListener("click", buttonClickHandler, false);

}
};
[/sourcecode]

Đây là code hoàn chỉnh sau khi cập nhật của file default.js

[sourcecode language=”javascript”]

app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll());

// Retrieve the button and register our event handler.
var helloButton = document.getElementById("helloButton");
helloButton.addEventListener("click", buttonClickHandler, false);

}
};
[/sourcecode]

Chạy ứng dụng. Khi bạn gõ tên của mình vào text box rồi bạn click vào button, ứng dụng sẽ hiển thị lời chào cá nhân hóa.

Bước 6: Style cho start page (trang bắt đầu)

Bạn dễ dàng tùy biến look and feel (nhìn và cảm nhận) cho ứng dụng của mình. Metro style (kiểu dáng metro) để bạn sử dụng Cascading Style Sheets, Level 3 (CSS3), như hầu hết website trên thế giới.

Trang default.html mà Visual Studio tạo ra cho chúng ta chưa tham chiếu tới Windows Library cho JavaScript style sheet:

[sourcecode language=”html”]

<!– WinJS references –>
<link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />

[/sourcecode]

Vậy style sheet có thể làm được gì? Tóm tắt một chút! Nó cung cấp những ưu điểm sau:

• Tập hợp styles mà nó tự động được đưa vào ứng dụng trong Windows 8 look and feel (nhìn và cảm nhận). Chỉ cần nhúng style vào sẽ làm cho control nhìn tuyệt vời hơn và nó sẽ làm việc cùng với hiển thị dựa trên cảm ứng.
• Tự động hỗ trợ độ chế độ tương phản cao (high-contrast ). Các style được thiết kế cùng với high-contrast từ trong suy nghĩ, do đó ứng dụng của bạn khi chạy trên thiết bị có hỗ trợ chế độ high-contrast, nó sẽ hiển thị một cách phù hợp nhất.
• Tự động hỗ trợ đa ngôn ngữ. Trong thư viện Windows cho JavaScript style sheets tự động lựa chọn font chữ chính xác với mọi ngôn ngữ mà Windows 8 hỗ trợ. Thậm chí, bạn có thể sử dụng nhiều ngôn ngữ trong cùng một ứng dụng và hiển thị nó theo cách phù hợp.
• Tự động hỗ trợ các loại trình đọc. Nó tự động căn chỉnh HTML và Windows Library cho JavaScript controls, layouts, và styles cho ngôn ngữ đó từ phải qua trái.

Vì mặc định, mỗi trang HTML trong project của bạn có chứa tham chiếu tới dark style sheet. Windows Library cho JavaScript còn cung cấp cả light style sheet. Hãy thử nghiệm và cùng chiêm ngưỡng.

Chọn lựa light style sheet

1. Trong file default.html, thay thế tham chiếu tới dark style sheet:

   [sourcecode language=”html”]
   <!– WinJS references –>
   <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
   [/sourcecode]

   Với đoạn sau:

   [sourcecode language=”html”]

   <!– WinJS references –>
   <link href="//Microsoft.WinJS.1.0.RC/css/ui-light.css" rel="stylesheet" />
   [/sourcecode]

2. Chạy ứng dụng của bạn. Bây giờ đã sử dụng light style sheet.

   

   Vậy là bạn đã biết cách tạo ứng dụng phong cách Metro với HTML, JavaScript.

Bài tiếp theo

Bài tiếp theo sẽ hướng dẫn bạn quản lý vòng đời và trạng thái của ứng dụng.

Tham khảo:

http://msdn.microsoft.com/en-us/library/windows/apps/hh986964.aspx