Thực ra nếu dùng Windows 7 hay các version cũ hơn thì các bạn cũng không biết Metro App là cái gì vì nó chỉ mới xuất hiện trong phiên bản mới nhất của Windows bây giờ, Windows 8!
Nó trông như thế nào?
Chắc hẳn ai cũng quen thuộc với giao diện metro của windows 8 nhỉ. Còn nếu bạn nào chưa hình dung ra thì Metro Apps nó như thế này:
Nhìn nó hơi giống với Apps của Windows Phone! Tuy nhiên, các Apps này thì chạy được cả trên nền PC lẫn Tablet.
Làm Metro Apps Như Thế Nào?
Hiện nay, với mỗi phiên bản Windows 8, có một công cụ cho phép chúng ta Build Metro Apps trên nền Desktop. Với Windows 8 Consumer Preview thì là Visual Studio 11 còn Windows 8 Release Preview thì là Visual Studio 2012 RC. Trong bìa viết này, mình dùng bản 2012 RC vì mình đang dùng Windows 8 Release Preview !
Ngôn ngữ lập trình mình sử dụng trong tut này là Javascript. Mình thích dùng Javascript tại vì nhìn nó quen rồi
Với cả nó cũng không phức tạp cho lắm. Tất nhiên cần phải có các ngôn ngữ khác để tạo UI(User Interface), ở đây ta sẽ dùng HTML và CSS(HTML5 và CSS3).Các bạn cũng có thể dùng các ngôn ngữ khác như VB, C++ hay C#. Mấy cái này có thể mình sẽ trình bày lại sau:
Bây giờ thì chúng ta có thể bắt đầu vào việc chính trong ngày hum nay:
Phần 1:
Làm ứng dụng Hello World
Làm ứng dụng Hello World
Các bạn để ý nhé, khi bắt đầu học ngôn ngữ lập trình nào thì đầu tiên đều có bài tập là “Viết một ứng dụng Hello World”. Ta phải làm bài tập này vì trong đó chứa các cấu trúc và các lệnh cực kì căn bản trong ngôn ngữ lập trình ta định học, ví dụ như lệnh in ra màn hình một dòng chữ, hay gì gì đó.
Đầu tiên phải khởi động cái VS 2012 RC, khi khởi động, màn hình của nó là thế này:
Các Tools của nó thì ta sẽ học cách sử dụng sau, bây giờ đi vào vấn đề chính luôn, để tạo một Metro Style App, ta vào File -> New Project -> Templates -> JavaScript -> Windows Metro style
Đặt tên cho nó theo ý bạn nhé, ở đây mình đặt tên là “Chào!” . Sau khi gõ tên vào khung Name xong, các bạn nhấn OK để nó bắt đầu Build.
Chú ý: Nếu đây là lần đầu tiên bạn cài đặt và chạy thử Visual Studio 2012 RC, nó sẽ hiện lên một khung đăng nhập để cung cấp cho bạn Developer Licences. Dùng tài khoản của Microsoft như live.com để đăng nhập nhé!
Sau khi nhấn OK và đợi nó load cho chúng ta một cái Project, bước tiếp theo là tùy biến cái Project mẫu đó cho đúng ý ta thôi. (Nếu bây giờ các bạn nhấn F5 để chạy thử thì nó sẽ ra một trang trắng màu đen
)Bắt đầu làm phần “ngoại hình” trước nhé, nhìn sang khung Solution Explore bên phải, nó sẽ có dạng như thế này:
Double-Click vào default.html để mở file này lên, đoạn code bên trong đó có dạng như thế này:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Chào_</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
<!-- Chào_ references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body>
<p>Content goes here</p>
</body>
</html>
Chẳng khác gì một file HTML bình thường cả, cái phần <head> thì tạm để nguyên, ta chưa động chạm đến, bây giờ ta khám phá phần <body> trước.Trong ví dụ này, mình sẽ chèn một <input type=”text”> và một <button> vào phần <body>. Xóa cái thẻ <p> đi cho nó , thay vào đó là thẻ <h2> cho chữ nó to. Thêm một cái <div> để lấy chỗ chứa cho phần kết quả sẽ được hiển thị ra màn hình nữa. Bây giờ phần <body> của mình nó sẽ thế này:
<body>
<h2>Bạn tên là gì zạ??</h2><br /><br />
<input type="text" id="name" /><button id="submit">Ờh!</button>
<div id="ket_qua"></div>
</body>
Nhấn F5 để chạy thử và xem thành quả!
Nhìn nó hơi bị xấu, nội dung bên trong nó sát vào lề quá, ta dùng CSS để căn chỉnh cho nó đẹp nhé! Bạn nhìn sang khung Solution Explore, tìm file default.css trong thư mục css, double-click vào đó, ta chỉnh sửa như bình thường (CSS căn bản ý mà).Thêm những dòng CSS sau vào file default.css:
body {
/*Tác dụng của 2 dòng này là làm tăng khoảng cách lề trái và lề trên*/
margin-left: 30px;
margin-top: 20px;
}
Tác dụng của 2 dòng CSS đó là làm tang khoảng cách lề trái và lề trên so với nội dung bên trong. Vậy là xong phần giao diện, giờ bắt tay vào code phần điều khiển. Các bạn mở file default.js trong thư mục js ở khung Solution Explore ra, nội dung bên trong của nó sẽ là như thế này:
// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
"use strict";
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());
}
};
app.oncheckpoint = function (args) {
// TODO: This application is about to be suspended. Save any state
// that needs to persist across suspensions here. You might use the
// WinJS.Application.sessionState object, which is automatically
// saved and restored across suspension. If you need to complete an
// asynchronous operation before your application is suspended, call
// args.setPromise().
};
app.start();
})();
Đoạn từ: (Ta gọi đoạn này là đoạn 1)
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !==
activation.ApplicationExecutionState.terminated) {
//Code trong phần này sẽ được chạy khi ứng dụng mới được mở ra.
} else {
//Code trong phần này sẽ được chạy lại khi ứng dụng bị ngắt đột ngột
//(tức là bị Suppend vì một lí do nào đó)
}
args.setPromise(WinJS.UI.processAll());
}
//Code trong phần này sẽ được chạy khi ứng dụng hoạt động
};
Đoạn từ: (Ta gọi đoạn này là đoạn 2)
app.oncheckpoint = function (args) {
//Những dòng lệnh ở đây sẽ giúp bạn nếu ứng dụng của bạn bắt buộc phải dừng
//đột ngột(suppend) bởi một lí do chính đáng(Chắc là tự tay dừng lại).
};
Đoạn: (Ta gọi đoạn này là đoạn 3)
app.start();
//Code ở đoạn này sẽ được chạy khi được gọi
})();
Ta hãy tạo một function có tên là chao() nhé! Đặt nó ở đoạn 3 đi:
app.start();
function chao() {
}
})();
Ta coi như sau khi nhấn nút “Ờh!” thì các lệnh bên trong function này sẽ được thực thi. Những gì ta cần làm ở trong đó là lấy nội dung mà người dùng nhập bên trong khung text, sau đó in ra màn hình câu chào!
Đoạn mã này sẽ giúp ta làm điều đó:
function chao() {
var khung_text = document.getElementById('name');
var name = khung_text.value;
}
Hoàn toàn là Javascript căn bản, đầu tiên ta chọn khung text bằng lệnh document.getElementById(‘Id của phần tử cần chọn’). Sau đó ta lấy nội dung ở phần tử vừa chọn bằng cách dùng .value. Làm tương tự, ta chọn cái <div id=”ket_qua”> và gán nội dung cho nó nhé!
var khung_ket_qua = document.getElementById('ket_qua');
khung_ket_qua.innerText = "Chào "+name+" !Bạn vừa nhập tên vào khung kia làm gì
thế??!";
Nếu muốn thay đổi nội dung, ta không dùng .value nữa mà chuyển qua dùng .innerText hoặc .innerHTML. Với .innerText, bạn chỉ có thể gán kí tự vào trong nội dung của phần tử nhưng với .innerHTML, bạn có thể chèn thêm các tag của HTML vào nữa, các tag này sẽ có hiệu lực. Nếu bây giờ chúng ta nhấn F5 để chạy thử thì sẽ thấy cái giao diện vừa nãy. Thử nhập tên vào và nhất “Ờh!” thì nó cũng không ra cái gì. Tại vì ta chỉ cho ứng dụng biết khi người dung nhấn “Ờh!” thì nó phải làm gì. Bây giờ chúng ta sẽ chỉ cho nó biết:
Để ý lên đoạn 1 nhé:
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !==
activation.ApplicationExecutionState.terminated) {
//Code trong phần này sẽ được chạy khi ứng dụng mới được mở ra.
} else {
//Code trong phần này sẽ được chạy lại khi ứng dụng bị ngắt đột ngột
//(tức là bị Suppend vì một lí do nào đó)
}
args.setPromise(WinJS.UI.processAll());
}
//Code trong phần này sẽ được chạy khi ứng dụng hoạt động
};
Ta sẽ chèn code sau:
var $submit = document.getElementById('submit');
$submit.addEventListener("click", chao, false);
Đoạn code này sẽ Select phần tử có ID là submit và thêm một sự kiện vào phần tử vừa chọn đó bằng lệnh .addEventListener(“tên sự kiện”, hoạt động, [Boolean useCapture]) trong đó cái [Boolean useCapture] thì thường người ta hay để là false.
Code đầy đủ của đoạn 1 là như sau:
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !==
activation.ApplicationExecutionState.terminated) {
//Code trong phần này sẽ được chạy khi ứng dụng mới được mở ra.
} else {
//Code trong phần này sẽ được chạy lại khi ứng dụng bị ngắt đột ngột
//(tức là bị Suppend vì một lí do nào đó)
}
args.setPromise(WinJS.UI.processAll());
}
var $submit = document.getElementById('submit');
$submit.addEventListener("click", chao, false)
};
Nó đã hoạt động rồi phải không! Các bạn nên viết code và đặt tên các biến khác với mình đặt để cho nó nhớ lâu.
Nói thêm chút về phần trình bày sản phẩm tí. Như các bạn thấy thì Metro App nào nó cũng có một cái icon ở ngoài, không phải hình vuông thì hình chữ nhật phải không. Nhưng cái icon của App mà ta đang viết nó lại có cái hình vuông gạch chéo, bây giờ ta muốn thay nó đi thì làm như thế nào?
Phần 2
0 nhận xét:
Đăng nhận xét