WinJS.UI.AppBarIcon

This is mostly for my own reference. I wanted the image below.

Windows 8 apps leverages the “Segoe UI Symbol’ font so you can get vector-based representation of common icons.  These are most often used in app bar, but that is not required, you can use the font anywhere (e.g. the back button).

WinJS includes a namespace that enumerates common App bar icons via friendly names such as ‘refresh’ or ‘like’.  I reference these often enough that I dumped them into an image.   Full resolution of the image is in this skydrive.

appbar

If you want the code to enumerate them, here it is:

?View Code JAVASCRIPT
args.setPromise(WinJS.UI.processAll().then(
    function (unused) {
       var placeholder = document.createElement('div');
       document.body.appendChild(placeholder); 
 
       var icons = WinJS.UI.AppBarIcon;                       
       for ( var icon in icons) {
           var btn = document.createElement('button');
           var iconhex = WinJS.Resources._getWinJSString("ui/appBarIcons/" + icon).value.charCodeAt(0); 
           btn.className = 'win-command win-global';
           btn.setAttribute('role', 'menuitem');                          
           placeholder.appendChild ( btn ); 
           var cmd = new WinJS.UI.AppBarCommand(btn, {
              id: icon,
              label: icon + "(" +  iconhex.toString(16)  + ")", 
              icon: icon
             });
 
        }
    }
));

debugging share operations

If your application implements the share target contract, it can be launched by the shell when an application wants to share into your app. This will present two challenges: 

  1. You will need to attaching the debugger when the shell is launching your app.
  2. You might need to debug user interface issues, and the charms UIs are light dismiss, so as soon as the charm loses focus it will be dismissed.

These next tips should help you get around the two ‘issues’ above:

Attaching the debugger without launching your app
To debug into your application when it is launched by the shell (instead of you launching it in Visual studio via F5 or Start debug) what you need to do is set the
Debug-><ProjectName>Properties–>Debugging–>Launch Application field to No.  

image

Once you have set that property

  1. Start the debugger, by pressing F5 or Debug–>Start debugging. When you start the debugger for Local Machine, nothing will happen, your app won’t be launched.  The debugger is waiting, ready to attach when some one launches your app.  If you launch it to target the simulator, the simulator will be launched, and you will see the start screen.
  2. Now go into the other app that will be sharing into your app, and do the share operation.  This will launch your app and the debugger will attach. You can now step through your code. 

Debugging User interface issues in charms
The earlier tip will let you attach the debugger, but you will not be able to troubleshoot layout or styling issues if you are debugging with a target of Local Machine because the charms will be dismissed when focus changes in your app. 
To debug UI issues,  you should use the simulator.  

image

You can combine this with Launch Application = No and get a great debugging experience for charms.

Happy Windows 8 coding!

Source to a great end-to-end learning app

I really like the WordPress for Windows 8 Metro style app. 

wordpress

I have had the pleasure of collaborating with the team that built the app at automattic and I was very impressed with their skills.  For their v1, I was supposed to answer their questions because they were new to Metro; they cranked the app before we even met, and hardly asked any questions afterwards, when they did it was ‘bugs’ in Consumer Preview.   

If you are wanting to sink your teeth into the source for an app for learning purposes, I think this is one of the best apps out there. It is open source, and uses good, clean code.   Check the code at their SVN repo at http://win8.svn.automattic.com.

Making intellisense work in JavaScript files

When you add a new Javascript file to your project in Visual Studio,  intellisense in the editor does not quite work by default (since engine does not yet know what to reference). 
To tell the editor what to use for intellisense, add a reference comment at the top of your .js files, like this:

?View Code JAVASCRIPT
/// <reference path="//Microsoft.WinJS.1.0.RC/js/base.js" />
/// <reference path="mycustomlocalfile.js" /> 
(function () 
{
    "use strict";
    // your code will go here..
    // and intellisense  will work as you type
})();

The two reference paths above are for WinJS  and for a local file. Obviously, you can link to any file you want.

You can learn more about this these reference directives from this article on MSDN.

A XAML guy doing HTML, really?

Any body that knows me would tell you that for the past few years I have been one of the biggest XAML fan-boys. I have evangelized WPF, Silverlight and Windows Phone.  I still believe in XAML very much, and I still use it quite a bit on Windows 8 apps, but HTML is very exciting to me too, so for anyone that knew me from a previous life, here is a bit on why the recent dichotomy within my technical interests. 
If you are wondering what prompts this post, it is two questions that I get often
1) Is Microsoft serious about HTML and web-standards and 2) is HTML ready for prime-time, desktop app development. 
Note that this is my personal blog so I won’t speak on behalf of Microsoft, but I can share my experiences and try to put these into context.

My opinion on why embracing HTML is important (short and long-term):
HTML is here to stay. Today, there are many different client operating systems out there and many more ‘platforms’. The web platform (in the broadest sense) is the largest platform among all clients. It is also the ‘common denominator’ across the what I consider the three big OSes: Windows, iOS and Android.  This is why I think HTML is critical and has a promising future. I think there is no way a single company can control it and the ‘competition’ among three or more big companies self-regulates the technology to keep it close to standards.  

On my day job , HTML opens a lot of dialogues. When I speak to anyone about Windows 8, there is always some level of interest given that it is the largest broadly deployed operating system (out of the three that I mentioned).  When I am talking to developers who are not building Windows apps today, their interest spikes when I tell them they can develop using HTML and JavaScript.  They all have a website and therefore some of the skills, plus the whole HTML as a cross-platform strategy resonates well with them – we don’t have to sell them on it, they are often going in that direction (or considering it).

I think the two reasons above are enough for any company to take it seriously and to want to stick to the standards.  Microsoft in particular needs to do a stellar job in this space. In the past 18 months, they have done a great job at competing within the browser space around the graphics performance, OS integration (e.g. site pinning), privacy, etc.  but this is still a ‘come back’ story (after IE6, IE7 and even IE8); I think with IE9 they showed they are serious and with IE 10 they will leap forward.  I will stop there cause this is starting to get marketingy, sorry. 

On the “is HTML ready?” question:  
HTML, JavaScript, CSS and all the other features that browsers now expose (e.g. location, video, audio, caching, etc. ) have gone a long, long way in the past few years. 
Most desktop guys asking the “is it ready?” question are out-of-date on the features.  I think Windows 8 can help open their eyes to these improvements. Historically, the concerns have been: performance, OS integration (and getting around the browser sandbox), off-line, and platform richness.

Off-line has long been solved.  The model we are talking about here are apps that are installed,  cached, connect both to the web and to local content.

Performance
has improved in magnitudes over the past few years.  If you go to http://www.beautyoftheweb.com you will see plenty of “immersive” experiences that are taking advantage of the hardware acceleration that IE  9  (and IE 10) provides.  I am sure Firefox and Chrome have some equally cool demos that demonstrate that other browsers have improved on performance in the past few years; I keep hearing there is benchmarks and every browser wins some. I am not a believer in benchmarks, I like cool apps..

Integration with the OS
has two different approaches: HTML has gone a long way; again, new features like location, cache, file APIs get you very far; beyond that, Windows 8 has a great compliment in WinRT. Using WinRT is (imo) the most seamless and most extensible way to do native integration. In the non-Windows 8 platforms, integration between an HTML UI and OS features is possible too via 3rd party libraries like Sencha, Titanium, Phonegap, and many others. To me, the integration model feels proven and will continue to improve since both the technical and business opportunities in this space are large.

That is my 2c.  I hope this gives you context on why I am excited about this.
I still love XAML. But now doing as much HTML as I do XAML without compromising.  Plus, I love the learning of what feels like a new platform and the incredible creativity and innovation that I see around HTML, JavaScript and CSS.

Building Metro style apps with HTML5 and JavaScript

This blog is going to be mostly about “Building Windows 8 Metro style apps with HTML5 and JavaScript” (the topic, and the book!!).   I need your help to keep the book part real!

Here is the context:
I am a Microsoft Evangelist; 11 year veteran at Microsoft. In the past few years I have done everything you can name that was .NET related ( ASP .NET, Windows Forms, WPF, Silverlight, Windows Phone, etc.)  yet when I saw what Microsoft was doing with HTML5, and how they are embracing it with their Metro style platform, I felt that this was cool enough to get back to web development (HTML and JavaScript).  I also felt compelled to write a book and tell the story about the platform.  I am pretty good at building Metro style apps and I have dived deep into WinRT already.  I started writing and I think it is going well but I know that I am writing a book for an audience that is new to me; I want the  book to use language, skills, terms and tones, that (non-Microsoft) web developers would understand and relate to.  I want to be objective and point the good, and the bad.  That is why I am hoping I can share a few random thoughts from the book here, and try to capture your feedback.  If you see me write BS here, please call it..  If you love or hate the platform, feel free to spark a conversation with me,. 

Disclaimers:

  1. Anything you share with me here, might (or might not) inspire me to address it as a topic in the book.  I won’t give everyone credits, but you all will know that you helped.
  2. My focus for the next few months is finishing the book, so you will see rushed, random thoughts in this blog, and it might be inconsistent (in posting frequency)
  3. Anything I share here is not official developer guidance. If you want the real stuff, go to http://dev.windows.com and http://blogs.msdn.com/windowsappdev 

My commitment:

  1. I will make this interesting, objective ( as much as I can be, I bleed blue Kool-Aid), and transparent (within my employers disclosure guidelines).
  2. Subscribe to the blog and you will learn. I will aim to keep balance between stuff I want to share and insightful stuff that will help you.

Welcome to the journey!!  Let’s hope we don’t de-rail.
Happy Windows 8 coding!!

This is going to be fun..

Day 1 is over..  I got my version of a Metro stylish look & feel on IE and Chrome.. 
Firefox is fighting me.. a little on a few fonts..   

5-3-2012 12-46-19 AM

I am sure it is partly the quick CSS hacking that I did on the themes.. but still interesting to see the issue.    

At least it was useful for comparing tools to inspect styles. I liked all of them, but I am sticking with F12 in IE. I feel more in control there.   I like the ability to toggle the traced styles (computed styles in Firefox) on and off..

That said, I do like that Firefox has links to the docs for the CSS properties in the tool. Useful for a newbie like me.

If you know why Firefox is rendering different, be the first to comment… Winking smile