MS Visual Studio 11 Express bản dành
preview developer bao gồm các công cụ giúp bạn có thể: create, code, debug,… một
ứng dụng kiểu Metro ( Ứng dụng trong win8).
Bây giờ chúng ta cưỡi ngựa xem hoa một
tí nhé. Các phần chính của bài viết:
Creating a Metro style app
Khi bạn tạo ra một ứng dụng, điều đầu
tiên bạn quan tâm là mình sẽ sử dụng ngôn ngữ nào. Bạn có thể chọn Javascript,
C++, C# hoặc VB. Bây giờ, giả sử rằng bạn muốn dùng JS để tạo một ứng dụng
Metro style. Đây là một loại ứng dụng mới trong windows Developer Preview. Để tạo
một ứng dụng, ta tạo một solution nơi quản lý các dữ liệu, tài nguyên cho ứng dụng.
( như code, hình ảnh, css…)
Để tạo một Metro style, nhấn File
> New > Project (hoặc nhấn Ctrl+Shift+N). Bạn sẽ thấy một New
Project hộp thoại hiện ra. Bởi vì bạn
đang viết ứng dụng js, nên bạn sẽ chọn phần tử Javasript trên pane trái. Bạn sẽ
thấy mẫu ứng dụng xuất hiện ở giữa.
Lưu
ý là bạn vẫn có thể chọn cho mình ứng dụng Metro Style bằng C#, C++ hoặc VB.
Tiếp
đến, chọn Navigation
Application. Ở khung phía dưới, đặt tên cho ứng dụng.
Click OK, rồi chờ cho ứng dụng khởi tạo.
Chú ý: bạn cần phải có 1 chứng chỉ developer mới tạo được
ứng dụng Metro style.
Chi tiết: Getting a developer license.
Bây
giờ nhìn vào phía Solution Explorer, nơi
chứa những tài nguyên ứng dụng.
Bạn
có thể xem các thuộc tính của file bằng cách chọn file trên Solution Explorer và sau đó chọn
Properties.
Building and running the app
Bạn
có thể xây dụng và chạy ứng dụng mới của mình ngay bây giờ, mặc dù nó chưa làm
được gì. Nhấn Build Solution or Rebuild Solution để built ứng dụng ( hoặc nhấn F6). Bạn sẽ thấy
kết quả của quá trình built ở cửa sổ Output.
Để chạy ứng dụng, chọn Debug > Start Debugging,
hoặc nhấn F5. Ứng dụng sẽ chạy trên shell, nhưng bạn sẽ thấy chỉ là một màn
hình đen thui. Để thoát khỏi đó, bạn nhấp Alt + Tab hoặc, chọn Debug>
Stop Debugging hoặc nhấn Shift + F5.
Writing code
Đa số bài viết đều nói về code nên bài viết này sẽ
hk diễn giải cụ thể cho bạn các công cụ của IDE như IntelliSense… các công cụ này sẽ giúp
ta tăng tốc độ code và xử lý.
Để
cho bạn thấy IntelliSense, chúng ta sẽ add vào một DatePicker, một control cho
phép người dùng chọn ngày. DatePicker là một phần của thư viện Window cho
javascript được thiết lập tự động cho ứng dụng như thế này.
Và
bây giờ chúng ta sẽ thêm code vào cho homePage.html. Lưu ý là phần tham chiếu
cho trang ta sẽ để ở thẻ <head>
Inserting
code snippets
Code snippets, một Visual Studio IntelliSense rất hữu ích trong việc thêm
vào các thẻ HTML và cả JS. Nhưng trong ứng dụng này ta chỉ cần thêm một vài đoạn
đơn giản.
Trên
đoạn:
<p>Content
goes here.</p>
thêm vào một thẻ <div> </div>
Giữa thẻ <div>, chuột phải, chọn Insert Snippet >HTML > table. Một
đoạn code mặc định sẽ được thêm vào:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
</td>
</tr>
</table>
Ở thẻ <td> cho thêm một cái : id =”date”.
Using
IntelliSense statement completion
Câu lệnh IntelliSense cho phép bạn có được một cái nhìn nhanh chóng về đối tượng trong ngữ
cảnh hiện tại. Đó là một phương thức tuyệt vời để khám phá và tìm hiểu các lớp
và hàm đang thực sự hiển thị.
Mở
file homePage.js và xem thử hàm
fragmentLoad.
Thêm vào một vài dòng lệnh: function fragmentLoad(elements, options) {
WinJS.UI.processAll(elements)
.then(function () {
// TODO: Initialize the fragment here.
var dateDiv = document.getElementById(‘date’);
var picker = new WinJS.UI.DatePicker(dateDiv,{});
});
}
Hình ảnh:
Trình
sinh mã sẽ hỗ trợ và gọi được tên hàm tương ứng.
Nếu
bạn muốn tìm hiểu thêm về thư viện đối tượng hơn là IntelliSense vào Definition bằng cách. Chuột phải Go To
Definition (hoặc nhấn F12). Nó sẽ mở ra thư viện JavaScript và chứa cả
DatePicker và nhiều thành phần khác. Dùng Go To Definition không thể tạo ra được các tập tin WinMD.
Và bây giờ built ứng dụng một lần nữa bạn sẽ thấy có
một cái DatePicker xuất hiện trên trang.
Debugging and troubleshooting
Bây
giờ bạn đã biết cách tạo và biên dịch ứng dụng js, chúng ta sẽ nói về cách làm
việc của debugger. Giả sử ta bỏ một dấu ngoặc đơn trong đoạn code lúc nãy, và
nó trở thành:
// TODO: Initialize the fragment here.
var dateDiv = document.getElementById('date';
var picker = new WinJS.UI.DatePicker(dateDiv, {});
F5
để debug và ta một lỗi.Trở vào Visual cửa sổ phía dưới ta chọn JavaScript
Console tab, nó sẽ báo 1 lỗi: Expected ')', file nào bị lỗi và dòng, cột chứa lỗi.
Bạn có thể chọn các tab DOM Explorer để xem một ứng dụng bị lỗi gì thuộc HTML.
