Category Archives: Windows 8

Metro Applications: Links, News And Resources (1)

These past weeks, I was programming Metro apps, using Javascript/HTML5. Some links I found useful:

Windows Library for JavaScript reference
http://msdn.microsoft.com/en-us/library/windows/apps/br211669(v=VS.85).aspx

Getting started with Windows Metro style app development
http://msdn.microsoft.com/en-us/library/windows/apps/br211386%28v=vs.85%29.aspx

Building your first Windows Metro style app using JavaScript
http://msdn.microsoft.com/en-us/library/windows/apps/br211385%28v=vs.85%29.aspx

Windows 8 Developer Preview Metro style app samples
http://code.msdn.microsoft.com/windowsapps/Windows-Developer-Preview-6b53adbb
Sample Pack with all the samples

Search app extension sample
http://code.msdn.microsoft.com/Search-app-extension-sample-6baa6270

Dynamic CSS Regions Sample
http://code.msdn.microsoft.com/Dynamic-Regions-Sample-f600c0c1

Navigation with Fragments sample
http://code.msdn.microsoft.com/Navigation-with-Fragments-5e4990f5

Dynamic CSS Region Templates sample
http://code.msdn.microsoft.com/Dynamic-Region-Templates-94bc9c95

DeclarativeBinding
http://code.msdn.microsoft.com/DeclarativeBinding-bfcb42a5

Navigation sample
http://code.msdn.microsoft.com/Navigation-sample-1c34abd1

ListView interaction model sample
http://code.msdn.microsoft.com/ListView-interaction-model-c6f9a124

Form Controls – Part 2
http://code.msdn.microsoft.com/Form-Controls-Part-2-6aaca655

Adaptive layout with CSS sample
http://code.msdn.microsoft.com/Adaptive-layout-with-sample-062e7fe2

Custom data sources example
http://code.msdn.microsoft.com/Custom-data-sources-example-8a58a0fc

WinJS.UI.ListViewItems objec
http://msdn.microsoft.com/en-us/library/windows/apps/A981E0DA-7044-4E16-90E4-BCD963171CCB

Form controls part 2: validation
http://code.msdn.microsoft.com/Form-controls-part-2-327288d9

Getting started with the ListView sample
http://code.msdn.microsoft.com/Getting-started-with-the-0e02c964

App Bar Sample
http://code.msdn.microsoft.com/App-Bar-Sample-026c7baf

Groove Drum Sequencer – HTML/JS and WinRT C++
http://code.msdn.microsoft.com/Groove-Drum-Sequencer-cc6028ec

Promise
http://code.msdn.microsoft.com/Promise-e1571015
Demonstrates the use of the WinJS Promise object. Promises are a simple way to do asynchronous programming in JavaScript. They allow developers to perform operations on a value (or a set of values) that may only be available in the future, handle possible errors, and provide progress notification.

Developing basic Metro style apps (JavaScript)
http://msdn.microsoft.com/en-us/library/windows/apps/br229565(v=vs.85).aspx

Ten Tips When Writing a Hybrid Language Metro style Application
http://channel9.msdn.com/events/BUILD/BUILD2011/PLAT-876T

8 traits of great Metro style apps
http://channel9.msdn.com/Events/BUILD/BUILD2011/BPS-1004

Building your first Windows Metro style app using C#, C++, or Visual Basic
http://msdn.microsoft.com/en-us/library/windows/apps/br211380

Tutorial: How to disable Metro UI on Windows 8
http://www.youtube.com/watch?v=TCdzUICwRfQ

How to Pick Your Platform: Silverlight, Metro, or HTML5
http://www.telerikwatch.com/2011/09/how-to-pick-your-platform-silverlight.html

A few facts about Microsoft’s new Windows Runtime
http://www.itwriting.com/blog/4866-a-few-facts-about-microsofts-new-windows-runtime.html

OK, so I think HTML/JS for Metro apps is a good idea
http://blog.markrendle.net/2011/09/15/ok-so-i-think-the-htmljs-for-metro-apps-is-a-good-idea/

Microsoft to developers: Metro is your future
http://www.zdnet.com/blog/microsoft/microsoft-to-developers-metro-is-your-future/10611

My Links
http://delicious.com/ajlopez/metro
http://delicious.com/ajlopez/windows8

Check the latest links! I’m adding new ones everyday.

Angel “Java” Lopez
http://www.ajlopez.com
http://twitter.com/ajlopez

Metro Applications (1) My First Blank Application

1 Reply

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 
http://twitter.com/ajlopez

Windows 8 and WinRT: Links, News and Resources

Angel \”Java\” Lopez on Blog

Software Development, in the Third Millenium

Category Archives: Windows 8

Metro Applications: Links, News And Resources (1)

Metro Applications (1) My First Blank Application

Windows 8 and WinRT: Links, News and Resources