Metro Style Apps là cái gì thế?
Thực ra nếu dùng Windows 7 hay các phiên bản 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 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
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:
Chào_
Chẳng khác gì một file HTML bình thường cả, cái phần thì tạm để nguyên, ta chưa động chạm đến, bây giờ ta khám phá phần trước.Trong ví dụ này, mình sẽ chèn một và một
Thực ra nếu dùng Windows 7 hay các phiên bản 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 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
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:
Content goes here
Chẳng khác gì một file HTML bình thường cả, cái phần thì tạm để nguyên, ta chưa động chạm đến, bây giờ ta khám phá phần trước.Trong ví dụ này, mình sẽ chèn một và một