Chào các bạn, hôm
nay chúng ta sẽ xem xét về cách phát triển một ứng dụng Metro style. Như đã biết
chúng ta có thể phát triển ứng dụng loại này bằng 2 cách chính. MS đã dung hòa
từ người làm website đến người phát triển window form khi phát triển loại ứng dụng
Metro style này. Ứng dụng dùng các công nghệ như: HTM5, JS, CSS3, XAML, C++,
C#, VB. Nếu bạn là người thành thạo lập trình website với các công nghệ HTML5
thì ta sẽ viết dùng: HTML, CSS, JS ngược lại nếu là người thành thạo lập trình
WPF bạn sẽ dùng: XAML và C++ hoặc, C#, VB code đằng sau. Sau đó bạn có thể đưa ứng
dụng của mình lên store và bán.
Để có thể built một
ứng dụng Window Metro style bạn cần download Window SDK phiên bản đi kèm bên trong.
Hôm nay tôi sẽ giới
thiệu cho các bạn xây dựng một ứng dụng nổi tiếng thế giới bằng Window Metro
Style, đó là chương trình Hello World
:)), chắc tới đây các bạn đang buồn cười. OK, let start.
Cách 1: Hello world with JavaScript
Tạo một ứng dụng JS.
Và sau đó thêm code giống như bên dưới.
<!DOCTYPE
html>
<html>
<head>
<meta charset="utf-8" />
<title>MyFirstMetroApp</title>
<!-- WinJS references -->
<link rel="stylesheet"
href="/winjs/css/ui-dark.css" />
<script src="/winjs/js/base.js"></script>
<script
src="/winjs/js/wwaapp.js"></script>
<!-- WinWebApp1 references -->
<link rel="stylesheet"
href="/css/default.css" />
<script
src="/js/default.js"></script>
</head>
<body>
<button
onClick="click">Click me!</button>
<p id="myText" />
</body>
</html>
Đến đây bạn vào
file default .js và thêm vào
các dòng sau:
document.addEventListener("click", function(){
myText.innerText="Hello World!";
});
Nếu bạn không biết
các hàm sử dụng như thế nào hãy tham khảo Window Library dành cho JS ở: Windows
Runtime Reference. hoặc hàm bạn thường dùng không có thì hãy
liên hệ với MS.
Cách 2: Hello world with XAML
Đầu tiên, bạn tạo project với ứng
dụng dùng C++, C# hoặc VB. Sau đó bạn viết mã XAML thành như sau:
<UserControl x:Class="Application1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="768" d:DesignWidth="1366">
<Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Button Grid.Row="0" Grid.Column="0" Name="myButton"
Click="changeText">Click Me!</Button>
<TextBox Grid.Row="1" Grid.Column="0" Name="myTextBox" />
</Grid>
</UserControl>
Ở đây tôi ví dụ dùng C#, sau khi
tạo mã xaml ta vào trong code cs và thêm vào:
private void changeText(object sender, RoutedEventArgs e)
{
myTextBox.Text = "Hello World”;
}
Xong. Tận hưởng thành quả nào
;)).
