Html5 hiện nay đang rất phát triển, đặc biệc là trên smartphone, chúng ta có thể thấy là trên tất cả mọi hệ điều hành smartphone điều hổ trợ html5 rất tốt, tiên phong trong số đó WindowsPhone cũng hổ trợ html5 rất mạnh mẽ. Các bạn có thể tạo ứng dụng Web App chạy như một Native app trên Windows Phone.
Bài viết sau sẽ chia sẻ cách tạo project html5 trong Windows Phone.
Trước tiên chúng ta mở Visual Studio 2012 lên và tạo Windows Phone Html5 App.
Sau khi tạo ứng dụng Html5 bây giờ chúng ta hãy xem lướt qua về cấu trúc ứng dụng xem có gì khác biệc :
Mọi thứ đều bình thường vẫn là một ứng dụng có Xaml code, tuy nhiên Microsoft đã tạo thêm Folder Html và tích hợp sẳn Control WebBrowser vào ứng dụng, do đó chúng ta chỉ cần code html là ổn.
Trước khi code các bạn hãy vào WebBrowser mà Microsoft đã tích hợp trong MainPage.xaml để bật thuộc tính IsScriptEnabled=”True” lên để chạy javascript, nếu không khi code script sẽ không chạy đâu nhé.
Trong ứng dụng html hiện nạy chắc chắn là ko thể thiếu sự có mặt của jquery rồi phải không nào, chúng ta có thể cài đặt bằng Nuget cho nhanh nhé :
Sau khi cài đặt hệ thống sẽ tự động thêm cho chúng ta thư mục Scripts trong Project
Ngoài ra có một thư viện cực chuẩn hiện nay để tạo Layout Cool Design có là Boottrap, chúng ta cũng có thể cài bằng Nuget và project
Bước cài đặt này nọ đã xong, bây giờ chúng ta vào file Index.html để khai báo các thư viện và tiến hành code nào.
Các bạn có thể tham khảo thêm về thư viện boottrap tại đây : http://twitter.github.io/bootstrap/components.html#misc
các bạn khai báo Css theo cú pháp sau nhé :
1: <heard> 2: 3:<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 4:<script src="../Scripts/jquery-2.0.0.js"></script> 1: 2:<script src="../Scripts/jquery-2.0.0.intellisense.js"> </script> 5:<link rel="stylesheet" type="text/css" href="/html/css/phone.css" /> 6:<link rel="stylesheet" type="text/css" href="../Content/bootstrap.min.css" /> 7:<link rel="stylesheet" type="text/css" href="../Content/bootstrap-responsive.min.css" /> 8:<title>Windows Phone</title> 9: </head>
Tiếp theo mình sẽ tạo một cái form Sign in đơn giản nhé :
1: <div class="container"> 2:<form class="form-signin"> 3: <h2 class="form-signin-heading">Please sign in</h2> 4: <input type="text" placeholder="Email address" class="input-block-level"> 5: <input type="password" placeholder="Password"class="input-block-level"> 6: <label class="checkbox"> 7: <input type="checkbox" value="remember-me"> 8: Remember me 9:</label> 10: <button type="submit" class="btn btn-large btn-primary">Sign in</button> 11: </form> 12: </div>
Và bây giờ chạy ứng dụng để xem kết quả
ngoài ra các bạn nào javascript cũng có thể khai báo trong file html như là đang phát triển web nhé .
sau đây là code file Index.html :
1: <!DOCTYPE html>
2: <html>
3: <head>
4:
5: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
6: <script src="../Scripts/jquery-2.0.0.js"></script>
1:
2: <script src="../Scripts/jquery-2.0.0.intellisense.js">
1: </script>
2: <link rel="stylesheet" type="text/css" href="/html/css/phone.css" />
3: <link rel="stylesheet" type="text/css" href="../Content/bootstrap.min.css" />
4: <link rel="stylesheet" type="text/css" href="../Content/bootstrap-responsive.min.css" />
5: <title>Windows Phone</title>
6: <script>
7: $(document).ready(function () {
8: alert("Welcome to WindowsPhone HTML5");
9: });
10:
</script>
7: </head>
8: <body>
9: <div>
10: <h4>Hello Windows Phone</h4>
11: </div>
12: <div>
13:
14: <form>
15: <h2>Please sign in</h2>
16: <input type="text" placeholder="Email address">
17: <input type="password" placeholder="Password">
18: <label>
19: <input type="checkbox" value="remember-me">
20: Remember me
21: </label>
22: <button type="submit">Sign in</button>
23: </form>
24:
25: </div>
26: </body>
27: </html>Hy vọng là bài viết này sẽ hữu ích cho các bạn, đặc biệc là Web Developer
Theo phamnguyen.info
