This week, I started to write a simple Metro Application for Windows 8, using HTML5/Javascript. It’s a customer project, and it’s a new world for me. I want to present in this post the minimal application.
Using a Windows 8 with Visual Studio 2011 Preview, you have these initial Javascript Metro application choices (you could write Metro applications with C++, C#, VB.NET, too):
If you don’t have VS 2011, you can download the generated solutions from my GitHub repo:
https://github.com/ajlopez/MetroApps
This is the solution of a Blank Application:
Notice the winjs folder, with js files. This is the new namespace we can use in Metro apps. Detailed info:
Windows Library for JavaScript reference
And there is a package manifest file: it’s describe the capabilities of the application (i.e: it can access Internet, it expose the search contract, etc…).
The default.html code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>BlankApp</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> <!-- BlankApp references --> <link rel="stylesheet" href="/css/default.css" /> <script src="/js/default.js"></script> </head> <body> </body> </html>The ui-dark.css is used. This is the “black style” you usually see at Metro apps.
The section “WinJS references” refers the javascript files that makes the WinJS namespace. According to the WinJS documentation:
When you reference these JavaScript files in your app, you must add the references in the following order:
- base.js
- wwaapp.js (after base.js)
- ui.js (after base.js)
- binding.js (after ui.js)
- res.js (after ui.js)
- animations.js (after ui.js)
- controls.js (after animations.js)
- uicollections.js (after animations.js)
The /js/default.js is for your application/page: you can adapt it to put your own code, new namespaces definitions. You can add other javascript files, too.
Next steps: explore these Javascript files, dissecting implementation; research and use concepts like navigation, declarative binding, and more.
Keep tuned!
Angel “Java” Lopez
http://www.ajlopez.com
Interesting post. I like these short, sort of a quick intro posts!
Indeed, as a Smalltalker, I have big expectations about the fit of S8 in this new world of MetroStyle applications.
Comment by garduino (@garduino) — October 28, 2011 @ 11:02 am