First personal #Win8 app published – toJSON, converting XML to JSON


Although its pretty small, I am happy to have my first app published in the Windows 8 store. I’ve been lucky enough to be working on Windows 8 projects almost exclusively since Build 2011, but I finally carved out some time to finalize one of my own apps. I’ve been using the script and realized that if I packaged it up, not only would it be more accessible to myself but others could use it as well.

Originally I thought I’d place an ad on it, but then I remembered how much I don’t like ads. I know they have their place, but here it just seemed like a completely unrelated distraction that messed up the aesthetics. So I went with the lowest price point of $1.49.

Adding a price to it represents an agreement, between the a user and myself.  If bugs are found I’ll fix them.  If feedback is given to make it harder, better, faster, stronger; I’ll try it out and see if improvements can be made.

The one day trial (great feature of the Windows 8 store, btw)  is there so you can test the app’s conversion skills, or even just use it for a day for free if you need to.  If the need comes up again, then at least you know it works and could be worth purchasing.

Overall this has reenergized me to finish my “medium-sized” app idea and then to begin my “large-sized” app idea.

Here is the toJSON description:

toJSON is a utility application that quickly converts XML to JSON. Open a file or paste XML directly, hit the transform button or the key combo Ctrl+t and you are provided instant JSON. Once you have the results, you can easily copy them to the clipboard, save as a file or share with the Windows 8 Share charm.

• Quickly converts XML to JSON
• Key combos for Open (ctrl+o), Transform (ctrl+t) and Save (ctrl+s)
• Supports Share, Save or Copy to Clipboard for the transformed JSON

Oh and congrats to the Windows Store review process for being great. It took 3.5 hours to go through the submission and review process!

Watch BUILD 3-108 and read my notes if you are styling the WinJS Listview

The ListView is an integral control for developing Win 8 apps with WinJS. If you are a UI developer like myself, you will be spending a lot of time building and styling ListViews. In the Deep dive on WinJS ListView talk, Mike Mastrangelo takes us on a nice tour of the ListView control and how to bend it to your will properly.

If you don’t have 45 minutes, check out the cliff notes version read below.

– There has been a considerable amount of work written in to the control to handle touch input, virtualizing items, animation, binding, grouping, layout, etc.  Its not just drawing a bunch of flowing divs.

– Once bound, items are drawn using either Binding.Template (normally, declared in HTML) or for more complex or multiple templates based on datatype a function can be used. Check out the itemTemplate page for examples.

– Item size is determined by measuring the first item in the list and then applying that size to every other item.  If you want to override the measuring, set the custom groupInfo function for the set Layout.

– To override the default appearance in CSS, for items start with .win-item and for the ListView as a whole use .win-surface. Be sure to precede those overrides with a list or page identifier so you don’t overwrite all ListViews in your app.  For more pertinent CSS classes check out the recommended class list on MSDN.

– In order to have a ListView scrollable anywhere on the page, set the ListView and parent elements to a height and width of 100%.  Set the page header to “position:fixed” so it does not affect the ListView. And set the .win-surface margin to “200px 120px 100px 120px” to maintain proper page margins.

– If you move to a grouped ListView, be sure to adjust your left margin for .win-surface or .win-item.  The grouped CSS classes add 70px to the left by default.

– Semantic Zoom control alternates between two ListViews. The first child is the zoomed in view and the second is the zoomed out view. For easy baking, setup each ListView individually first to make sure they are working and styled properly, then wrap them in a Semantic Zoom control.

Once you get through the basics of laying out and binding the ListView, checkout the following samples for more advanced topics:

Overall the control is awesome and once you get it under control, it becomes indispensable.

Building a project skeleton, using CSS3 layout and styling WinJS controls #Win8Dev

This past week was spent turning wireframes and workflows into a moving prototype using static data. Not only does this action of sketching out the project inform architecture, but it also allows us to create the placeholders once we get the visual design.

As a bonus, a short screen cap of the prototype can be a valuable asset while the app concept is still forming in our heads.

Project Skeleton

Here’s the process I’ve been using to build the project skeleton.

Start with a Blank Project template
We want the least amount of pre-existing code. The goal is to stay slim and only add what’s needed. The other project templates are a great way to learn, but could be filled with extra cruft. The “default.html” page will act as the frame for the page fragments.

Grab the PageControlNavigator from the Grid project template
The navigator class handles navigation events, instantiating page objects and enabling the back button. Additionally you have the code in your app so its simple to customize if needed. Don’t forget to change the namespace of the class from “Application” to your namespace. Attention to detail, private.

Add pages for each full screen of your app
Using the Page Control item template, create the individual screens (I place them all in a pages folder). In order to set the initial page, add the PageControlNavigator to your default page and set the “home” property to the URL of the initial page. You can grab the code from your sample Grid app.

Embrace the existing CSS and templates
WinJS comes with very refined CSS rules, defined “ui-dark.css” and “ui-light.css” which can both be found by digging into the References folder. Become familiar with the rules applied and try to work with them and not against. You can do this by reading the files or, more targeted, by adding the elements to your page, running the application and using the DOM explorer or Blend to see all of the cascading rules applied to each element.

Another trick is to grab the header and section elements of a page, along with their CSS, from the sample Grid app as well.

The title and content layout of each page is pretty defined in Metro apps and the HTML also includes the back button which the navigator class will be looking for.

Using CSS3 layout

One of the ideas that keeps popping in my head during development is – I am doing web dev for a single browser. Of course the idealistic side of me says “What about the open web?”, but then the pragmatic side says “Hey, that’s actually pretty cool for development.”

One browser to test and you can guarantee what is going to work, including CSS layouts. All you need to is refer to the Internet Explorer 10 Dev Guide.

Looking at the example above, if you need a continuous flow of items filling up all the space available, use a Flexbox.  Need to change the order of the items? Set the direction.

Or you may have a requirement for a complex tile-based layout like the above image.  Use the Grid.  Learn the Grid, love the Grid, it is your friend.  Many layout issues can be easily sized and made adaptable by taking advantage of the Grid.

Styling the ListView and WinJS Controls

Along the same lines, one other tip I wanted to pass along is remember that the appearance of HTML elements and WinJS controls are driven by CSS.  Yes its obvious, but sometimes when you get into “control-thinking” you may take the hard road skipping the easy dandelion-laced path.

On StackOverflow a question was asked about changing the selection template of a ListView. All he wanted to do was change the selection border color and rather than updating the entire selection template, all you need to do is override a single CSS rule.

The rules to override can most easily be found by loading your application in Blend, turning on Interactive mode to change the state of your app if needed and then, in Design mode, select the element and examine the CSS Properties panel.

Further Reading

Last week I mentioned Promises as one of the main features to learn in WinJS. To learn more beyond the MSDN docs, check out Christopher Bennage’s WinJS: Unpacking Promises post. He goes into detail on chaining Promises and their results together.

Another post of note is Kirupa’s Animating with requestAnimationFrame. You no longer need to use setInterval for JavaScript-based procedural animations, it’s wonderful.

Talking about Windows 8 and WinJS on Yet Another Podcast

 Jesse Liberty was kind enough to invite me back on to his cleverly named podcast, Yet Another Podcast, to talk about the technology I’ve been focusing on lately, Windows 8 and WinJS apps.

In Jesse’s own words:

Talking with Adam Kinney, Independent Design Developer and former Microsoft Evangelist and Jon Galloway, Microsoft Technical Evangelist, about programming for Windows 8 using JavaScript, CSS3 and HTML5.

Let me know if I sound like someone actually excited, an evangelist or a clueless dolt.

Yet Another Podcast #74–Adam Kinney–Windows 8 and JavaScript and HTML5

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.


(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.


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.

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.

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.

Setting up your first use of the Animation library in WinJS

The WinJS Animation library provides some pre-scripted animation functions that allow you to easily reproduce the signature animations of Metro-style apps.  Since there is no “Animated Application” template (and I don’t think there should be).  I thought I’d share the first couple of steps needed to use the library in your own application.

1. Create a new JavaScript (Blank Application) Project in VS11 Express.

2. In default.html, add an element to be animated.  I chose a header taking advantage of the provided classes of the theme CSS.

3. Next add a reference to the Animation library which is defined in the “animations.js” file under the “winjs/js” folder.  Additionally if you open this file, you will find in the comments at the top that this library is dependent on the “base.js” file and the “ui.js” file.  The first file is already referenced but “ui.js” needs to be added.  Add the references to your default.html file, like the following:

4. Switch over to default.js, and in the onmainwindowactivated method add the following code to locate the element and run the page enter animation.

Its important to notice the namespace is “Animation” and not “Animations”.  One reason I was prompted to write this post is because the Windows 8 dev center example code erroneously uses “Animations”. Certinaly frustrating when you’re just getting started.

Run. Run the example and you should see after the app starts up, the page title slides into view with a short animation.

What about chaining a second animation after this first animation? Since animation functions return promises its very easy to do so.  Check it out.

5. Add another element below your first in default.html. Let’s use the fadeIn function this time, so set the opacity to “0”.

6. Now go back to default.js and add a then call on enterPage. Inside define a function that locates the second element and calls fadeIn.

Run.  Now when you run the app, after the page title slides in, the paragraph below should fade in to view.

And that’s it to getting started! If you look at the WinJS.UI.Animation namespace you’ll find the other available scripted animations.

Looking through the “animations.js” file, I found it interesting to note that the available functions actually make a call to the Win.UI.executeTransition function, so if you’re looking to run some custom animations you can do that too.

I’m sure I’ll be posting more about the Animations library soon.  I’m not sure what everything does yet, but it sure is fun to poke around.