Angel \”Java\” Lopez on Blog

November 2, 2011

Metro Applications: Links, News And Resources (1)

Filed under: JavaScript, Links, Metro Applications, Windows 8 — ajlopez @ 8:09 am

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

Windows Library for JavaScript reference

Getting started with Windows Metro style app development

Building your first Windows Metro style app using JavaScript

Windows 8 Developer Preview Metro style app samples
Sample Pack with all the samples

Search app extension sample

Dynamic CSS Regions Sample

Navigation with Fragments sample

Dynamic CSS Region Templates sample


Navigation sample

ListView interaction model sample

Form Controls – Part 2

Adaptive layout with CSS sample

Custom data sources example

WinJS.UI.ListViewItems objec

Form controls part 2: validation

Getting started with the ListView sample

App Bar Sample

Groove Drum Sequencer – HTML/JS and WinRT C++

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)

Ten Tips When Writing a Hybrid Language Metro style Application

8 traits of great Metro style apps

Building your first Windows Metro style app using C#, C++, or Visual Basic

Tutorial: How to disable Metro UI on Windows 8

How to Pick Your Platform: Silverlight, Metro, or HTML5

A few facts about Microsoft’s new Windows Runtime

OK, so I think HTML/JS for Metro apps is a good idea

Microsoft to developers: Metro is your future

My Links

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

Angel “Java” Lopez

October 28, 2011

Metro Applications (1) My First Blank Application

Filed under: HTML5, JavaScript, Metro Applications, Windows 8 — ajlopez @ 9:51 am

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:

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>
    <meta charset="utf-8" />
    <!-- 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>

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

September 16, 2011

Windows 8 and WinRT: Links, News and Resources

Filed under: .NET, C Sharp, HTML5, JavaScript, Links, Windows 8, WinRT — ajlopez @ 9:38 am

This week Windows 8 was unveiled and introduced into society, at Build Conference. Some links I found interesting about Windows 8, Metro applications, WinRT and .NET programming.

WinRT demystified – Miguel de Icaza

Building Windows 8 – Site Home – MSDN Blogs

Build Conference

Some Thoughts on Windows 8

Sessions at BUILD Day 2 and Windows 8

WinRT and .NET in Windows 8

Bye Bye Brain, first game on Windows 8

The final days of Adobe Flash

Windows Developer Preview Metro style app samples
The Windows Developer Preview Samples Gallery contains a variety of code samples that exercise the various new programming models, platforms, features, and components available for the BUILD conference.

Using WinRT from .NET

WinRT is Replacing Win32

Build 2011: What Is WinRT, and Is Silverlight Dead?
The Windows Runtime library (WinRT) is the principal provider of system services for applications in Windows 8 that will be designed to incorporate the new "Metro" style

Functional Fun: Windows Runtime – Dial in the right expectations before reading up

InfoQ: WinRT: An Object Orientated Replacement for Win32
User interfaces in C++ will be written primarily in XAML.
Overlapping Windows No Longer Exist <— I remember Windows 1.0 ;-)
Under WinRT all APIs are exposed as objects that C# and VB can consume directly.
The fourth major language for Windows 8 is JavaScript.
All Metro Applications Must be Digitally Signed.

Sinofsky outlines the Windows 8 vision | News | TechRadar UK

Best place to discuss Windows 8

Metro style browsing and plug-in free HTML5

Experiencing Windows 8 touch on Windows 7 hardware

Welcome to Windows 8 – The Developer Preview

JAPF » Blog Archive » BUILD: WinRT, Silverlight, WPF, XAML

Building real-time web apps with WebSockets using IIS, ASP.NET and WCF | BUILD2011 | Channel 9

A bad picture is worth a thousand long discussions. « Doug Seven

Internet Explorer 10 Metro will not support Flash, Silverlight – Tech Products & Geek News |

C#er : IMage: Windows 8: What you Need to Know

"What’s New in the .NET Framework 4.5 Developer Preview" (and Yield is coming to VB.Net!) – Greg’s Cool [Insert Clever Name] of the Day

Guide to Installing and Booting Windows 8 Developer Preview off a VHD (Virtual Hard Disk)

A few facts about Microsoft’s new Windows Runtime « Tim Anderson’s ITWriting

OK, so I think HTML/JS for Metro apps is a good idea « codeface

I know what you’re thinking, and you’re wrong. « Doug Seven
Metro, Silverlight, .NET

Microsoft to developers: Metro is your future | ZDNet

Microsoft Unveils ‘Reimagined’ Windows 8 at Build Event — Visual Studio Magazine

Welcome to Windows 8 – The Developer Preview – Building Windows 8 – Site Home – MSDN Blogs

Delivering fast boot times in Windows 8 – Building Windows 8 – Site Home – MSDN Blogs

Windows 8 will feature Hyper-V guest OS machine virtualization | ExtremeTech

"A sort of PC": how Windows 8 will invade tablets (and why it might work)

Improving our file management basics: copy, move, rename, and delete – Building Windows 8 – Site Home – MSDN Blogs

My Links

Angel "OMGC++Again" Lopez

The Shocking Blue Green Theme. Blog at


Get every new post delivered to your Inbox.

Join 70 other followers