Jumping in feet first: Setup, Resources and Fundamentals #Win8Dev

As the first log item, I’m going to focus on setup and initial concepts. Here I’ve listed a few topics worth looking into before beginning or during the initial stages of development.

Get the goods

The Windows Dev Center has become my new home. One of the issues while working through preview technology is that it’s of course ever changing.  Searching on the web can easily bring up deprecated answers, so the WinRT and WinJS API has been the place to verify the answers given. On the UI side, the IE10 guide has proven helpful determining which aspects of CSS3 are supported.

Originally I was downloading them individually, but the all up Sample pack is a great way to see and run sample code. In order to search the samples though, I still use the Samples search on the site, and then find the sample on my local drive by title.

Multiple displays

Using multiple monitors is an obvious recommendation, but for Win8 development I would classify it as a requirement, especially when working on the UI. Similar to development for different devices, you are building an app for one environment (Metro app) using a program in a different environment (Visual Studio in Desktop). It’s a big context switch and with a separate monitor you gain some great debugging and analysis capabilities using the DOM Explorer that comes with Visual Studio.

On the left you see the screen running Visual Studio displaying the DOM Explorer, on the right screen you see the Main screen where the Metro app is running.  The #content div is selected showing the CSS rules currently applied on the DOM explorer and on the right screen you can see the div selected. It’s like Firebug built right in.

Not only is it useful for debugging and testing CSS rules, it’s also a great way to see the HTML that the WinJS custom controls are outputting.

Even more useful for CSS editing is Blend Interactive Mode, which I’ll cover more in the future, but for now I just wanted to mention it and point you to a video showing it off.  I think you could do a whole video on it, but there’s a short clip here around 33:20.

Code organization

Going into these projects my goal has been to use as much of the WinJS Framework as possible. Not only is this a great way to learn the new technology but I also wanted to use the framework with the most interest in working well on the pre-release platform.

I did an experiment porting over a single-page jQuery-based app into a Win8 Metro app and most of it worked without modification. The main thing I ran into was code security restrictions around how and what elements are added dynamically to the page. Check out details for toStaticHTML and Features and restrictions by context for more details on what isn’t allowed and how to restructure your code if needed.

Now on to writing your code the WinJS way, I suggest starting at the tutorial aptly named Writing code using the Windows Library for JavaScript.

This will clue you in on Namespaces, Classes, Property declaration, using mixins and handling DOM events. This helps bring a little of that C# feel to JS and as a bonus Visual Studio will provide intellisense for your Classes.

Single page app vs WinJS.UI.Pages

I initially got this wrong when I first started coding with WinJS. After Silverlight 4, I moved over to HTML5 app dev and became familiar with a single page app pattern.  In most cases, once you instantiated an object representing a section or sub-page of the app, it was there until you told it to go away.

In WinJS, the project templates and documentation lead you towards the Pages namespace, for a good reason. Loading sections of your app dynamically rather than a top-level navigation avoids the page refresh, loss of context and linear history.

When working with Pages though, the page loading is much closer to something like Windows Phone 7.  You load an initial html file with a designated “host” div, which acts as the frame or container. Then an instantiated Page object is rendered in the “host” div. This method combined with the Navigation namespace allows you to track history and provide “go back” functionality.

For a full walkthrough check out this Using single-page navigation tutorial.

Once figured out, the Fragments/Pages/Navigation namespaces can be very helpful in organizing your code and making it more modular.

Promises

(If you don’t follow Andy, you should.  Not only does he deliver geeky jokes, he’s clever guy who is on the ball with creating UIs and adding physics for fun.)

Windows 8 is “Fast and Fluid”! And how does it do that? By making the UI take full advantage of asynchronous functions. Tap a button, send a worker off to do the work and entertain me visually while I wait. Help me keep my confidence that you didn’t freeze by providing some type of animation or feedback.

WinJS.Promise provides this functionality for you and this is where you can go to learn about the namespace and how to use it. Asynchronous programming in JavaScript

Learn to love and use it well and your users will love you.

VS2012 Quick Launch

Although not a core technique needed for getting started, I learned about the Quick Launch in VS2012 this past week. The feature allows you to “quickly search and execute actions for IDE assets such as options, templates, menus”.

For example, open Visual Studio, hit Ctrl+Q and type “line numbers”. Hit enter and the Options window is opened for you with the current node selected showing the option to turn line numbers on or off.

That’s pretty quick. Nice work VS team.

Conclusion

The wireframes came in for the new project, so this week we’ll be starting on the UI layer. Windows 8 RTM appears to be faster than the Release Preview, and I’m looking forward to testing that with some heavy dev work.

A web log of #Win8Dev

I spent the last 9 months developing a Windows 8 app. It’s not in the store and I’m not sure it ever will be.  It was a proof of concept and something very different for the company, so I believe it met its goal of adding energy in that direction and hopefully some inspiration.

Unfortunately though all of this knowledge on developing a Win8 app (WinJS/C++ specifically) was not shared. Of course it’s complicated with NDAs, deprecated knowledge of past builds and the fact that I just didn’t catalog much of what I learned.

I just signed up for a new project last Friday which should keep me solidly fixed in the Win8 world for a while. And this time I am going to keep a log on the web, call it a web log or even a blog, if you like.

My goal is to bring together all of the notes, trials, discoveries and odd things that come up over the course of the week and then have a post ready the following Monday.

The content will cover developing unnamed (“Metro”) apps using WinJS with a focus on UI development, working with a design team and the language of Windows 8.

That’s it for now, just a tiny commitment to posting weekly about my Win8 development journey. It should be fun.

Why your WinJS app may navigate back when a textbox is in focus and you hit enter

It sounds kind of obscure, but it could happen to you. While developing an application, you navigate to a page with a textbox and out of habit you press the enter key and your app navigates back to the previous page, losing your entered text.

Why, why would this happen?  Who thought it was a good idea to add it to the template?

The good news is this is not intentional. The Metro UX Guidelines recommend, as you would expect, the Enter key is used to Start or activate, not to navigate back.

So what was going on with my app (and maybe yours)? I’ll explain the few steps that line up to cause this behavior and then explain the quick and easy fix.

1) Use the PageControlNavigator class from the Grid App project template
If you create a new Grid Application project in Visual Studio or Blend, you are provided a PageControlNavigator class which will happily manage Page fragments for you.

2) Add a textbox and a button to a secondary page
Continuing with the Grid application project example, open the groupDetail.html page and add the following lines to the main section.

3) Open the app, nav to the secondary page, select the textbox and hit enter
Run the Grid application project and click a group header (“Group Title: 1”), now select the textbox and hit enter.  Instead of the “Tap here” button click event firing the app naviagates back.

Why didn’t the “Tap here” button fire?  Why did it navigate back?

Here’s the issue:

  • The default page template adds a “win-backbutton” button to the  header of each page
  • The HTML5 button tag is by default set to a type submit button
  • Since we are running in a browser, hitting the enter key “clicks” the first submit button
  • The navigator class handles the click event of “win-backbutton” and calls nav.back()

Here’s the solution:

The fix, which you probably figured out already, is to change the type of the back button
In the header of the secondary page, set the button type to “button”:

That’s it, problem solved! The Enter key can go back to starting and activating again and your users won’t unintentionally lose data and cry out in frustration.

List of US States in JavaScript object notation

For my future self and the rest of you who may need it at some point in your JavaScript developer life, here is a list of the US States and Territories in JavaScript object notation, sometimes lovingly referred to as JSON.

This is it.  An internet bookmark for JSON states. Really, I just don’t want to go through formatting this again.  I think this was my second time actually…

Enjoy!

Speaking about Blend for HTML at Stir Trek

I will be speaking at the Stir Trek conference  on May 4th, covering Blend for HTML.  This is the latest incarnation of Blend now rebuilt to support HTML, JavaScript and CSS.

They’ve done a killer job and I’m excited to share how the application makes building WinJS Metro style apps a great experience.

Check out my retro circus style announcement for the session:

Come and see the most marvelous, novel and thrilling Windows 8 design tool ever before displayed under Canvas, in fact ever seen anywhere. Watch in awe, while the Interactive Mode transports you from scripting web pages to building web apps for the Microsoft Store. Expression Blend is valuable as both, a companion to Visual Studio for you and as an integral tool for your design team. Its the big CSS-styling animal sensation of the season!

Read more details on the Stir Trek site.

My mom won’t care about the Windows 8 Start button

Disclaimer: I am an independent Windows 8 developer who used to work for Microsoft. My family uses Windows PCs and iOS devices. When working on HTML5 projects I sometimes use a Mac to develop. Its crazy, I know.

There has been a lot of talk about the lack of a Start button in Windows 8.  Or more accurately, a statically placed visual icon in the Desktop app which the user can click on to return to the Start screen.

What happens if the user is in the Desktop app and moves there mouse into the same area, perhaps even driven by muscle memory?  A little thumbnail of the Start screen shows up and when clicked takes you to the Start screen.

For even faster travel back to the Start screen, just press the Windows key and you’re there. It’s stunning, really.

I do agree though, it’s not in your face and you have to learn how to do it. Should they put the Start button back in the task bar?  Sure, just use the new Win8 logo and you’re done.

BUT…

Do I think this is going to be a real issue for my mother, grandparent or my kids? No.  At least I hope not.  If so, something went terribly wrong.

Try this.

Go to one of your non-techie Windows-using friend’s computers and hit the amazing start button.  Take a look at the most commonly used programs.  What do you see?

This is what I found:

  1. Web Browser
  2. Photos, Music, Video, Messaging, Twitter, Facebook, Reader
  3. Windows Explorer, Microsoft Office, Video Chat, Calculator, Snipping Tool
  4. QuickBooks, Family Tree Maker, Minecraft, League of Legends

Those are examples of commonly used Windows Programs. Now how does that compare to the new fandangled Metro style apps which run from the Windows 8 start screen and not the Desktop app?  You know the one missing the Start button.

Web Browser
You can do just about everything in the browser, the web is amazing. You may even be able to build an OS on it.  Is there a Metro-style browser in Windows 8? Yes, its IE10 and hey it has way better support for CSS3.  Are there more coming? Yes, Firefox is confirmed.

Mail, Photos, Music, Video, Messaging, Twitter, Facebook, Reader
There are Metro-style apps already available in the Consumer Preview that perform these functions. Are they awesome? Almost, definitely promising, but I believe they will be better for release. And if not, there will be other options via the Store.

Windows Explorer, Microsoft Office, Video Chat, Calculator, Snipping Tool
These programs are not  yet available as Metro-style apps. If Microsoft does not make them available then they’ve failed here.  And the good news is, as far as the last three are concerned, there will be other options via the Store.

Quickbooks, Family Tree Maker, Minecraft, League of Legends
These are examples of programs that are likely not to be changed (ever or anytime soon) to Metro-style apps, for some reason or another – existing investment, technical philosophy, etc.  This is where it hits the most and we might need that little Start button back. And if you don’t convert or get a hook in the Store somehow, less and less Windows users will adopt your program and instead use one of the other options via the Store.

My mom won’t care about the Windows 8 Start button
Because hopefully she will be too busy hanging it in Metro style land; not breaking her computer rather finally getting to it enjoy it.  One of my first “ah-ha” moments with Windows 8 was looking at the Settings app.  “My family could use this!” I thought.  It’s way friendlier and less intimidating than the Control Panel.  Thanks Metro design language.

…other options via the Store
You may have noticed this phrase come up more than once in this post.  That’s because this is big clincher, the thing that makes everything work.

Quick, guess how many Windows programs my 10-year old daughter has installed? 0

Now how many apps has she installed on her iPod? At least 30 or 40.

What does the mean?  She loves her iPod way more. I believe that once she sets up her Win8 PC in the same manner as well she’ll be hooked. When my wife customizes her Win8 PC she’ll be happier and more productive. When my mom customizes her Win8 PC (or I do it for her) she won’t be lost anymore.

As for those of us power users
I need my Visual Studio and Photoshop to pay for all of these apps and Windows 8 PCs, so I need to learn to be comfortable moving between the Start screen and the Desktop app. The good news is it’s not that hard. You really just need to know Win, Win+X and Win+C.

Try it out. Besides, your other hand needs something to do while you’re mousing around.

Windows 8 AppBarButtonStyles enumerated and visualized

As a result of the WinJS AppBarIcons post yesterday, I’ve received a fair number of requests asking to see how this compares to what’s available for XAML-based projects.

AppBarButtonStylesThe results are in, but they don’t quite stack up.

Download the full image

There are currently 29 options compared to the 150 options in WinJS.  Additionally some of the names and icons conflict or are used in different ways.  I’m hoping this is ironed out before the full Windows 8 release.

Instead of a property, the appearance of the Button is set via a Style where the name of the icon is used as a prefix to the string “AppBarButtonStyle”. The Styles are defined in the “StandardStyles.xaml” resource dictionary which is part of the basic project template.

Sample code:

This works fine and is inline with how XAML-based controls are styled, but after doing so much WinJS work I will say it feel a bit heavy compared to just setting a property.  Custom icons are defined by setting the to “AppBarButtonStyle” and setting the Content property of the Button to your own PNG file.

Overall, I prefer the WinJS choice of names and icon usage over those used in XAML, except for the “find/Search” icon. Since the icon looks like the OS-level Search charm, I believe it should be named “search” and not “find” in WinJS.

Windows 8 AppBarIcons enumerated and visualized

Download the full image

While digging into the Windows 8 Consumer Preview, I found that AppBar buttons are now defined by using the AppBarCommand object which has an icon property. In order to work, the string value must be set to a property of WinJS.UI.AppBarIcon or a custom PNG.

Sample code:

This is wonderful functionality providing for both custom icons and 150 existing icons using the Segoe UI Symbol font.  Genius, now where is the list of available icons?

Oh, I see, there isn’t one available yet.  Ok, I’ll just make one for myself and my friends. Enjoy.

Fahrenheit to Celsius in the Win8 Weather app, a story of change…

From fahrenheit to celsius in Windows 8 Weather app from Adam Kinney on Vimeo.

This is a very short screen capture on how to change the settings of the Weather app in Windows 8 to use Celsius instead of Fahrenheit. Useful for those who want to make the change, but also indicative of the broader concept – Windows 8 is new, like really new.

Now that you’ve learned to use the Settings charm, you will find it in the same spot every time. And any development team who take the time to follow the pattern will have happy non-confused users.

This is fresh new path to be discovered, refined and molded. I’m looking forward to it as both a user and developer.

———–

As side note, the screen capture was created with Expression Encoder, which has no trouble running on Windows 8.

Cut the Rope in HTML5 is live

Its alive! Cut the Rope is now available in HTML5 on the web at www.cuttherope.ie

I was fortunate enough to be a part of this project and am pleased to see it up and running. Hats off to ZeptoLab for creating a great game with such a fun visual style.  And much praise to the two masters Joel Fillmore (JS Game Engine Lead) and Robby Ingebretsen (Project/Visuals/Everything Lead).

For more information on the developer story, checkout the Behind the Scenes site and grab some developer candy while you’re there.

Om nom, nom, nom.