I was invited to speek a little bit about my experience with migrating a HTML5 app to the modern style UI (formerly Metro) of Windows 8 using the example of my Vocabulary Trainer project.

I was invited to give a speech there today about utilizing the new Intel Ultrabook features on Windows 8 using the example of my Vocabulary Trainer project.

After the speech several attendees used the opportunity to get a closer look on the new Intel Ultrabook and asked questions regarding app development for Windows 8.

Have you been to the Developer Open Space, too?

But first I extended the main view with a semantic zoom. Here is the normal view:

And with semantic zoom (zoomed out):

If there should be many lessons to display the user can get a better overview this way.

But now the more interesting part: the words card game that looks similar to the game Memory® by Ravensburger:

It displays covered playing cards in the first place. After the user touches/clicks on a card it is uncovered and a word in one of the two languages of the current lesson is displayed. The user then needs to find the translated word for it.

If there are too many words in one lesson to show, the words are picked random automatically.

Here is how that looks like now:

OK, that was the last post in the Ultimate Coder Challenge from me.

Of course, there is still enough things left that could be added to this vocabulary trainer – especially the online sychronization should be available soon -, but there is not more time left in this challenge.

As a summary you can say that it is possible to convert a HTML5 app to the new Windows 8 UI design in six weeks, but it is really much work. Although Microsoft says that with HTML5 you just develop once and deploy it to different platforms that’s more like wishful thinking. In practice you have to do a lot of extra work to get the right look and feel for each platform – especially for Windows 8.

Anyway, I hope you enjoyed reading my posts!

There I showed my vocabulary trainer at a booth of Intel at the technical showcase area.

But I also had time to implement some Interface improvements for the vocabulary trainer.

First of all I optimized this dictionary view:

There is no need to show the flags for every single word. It just wastes space. Here is how it looks now:

Now the flags are only showed once anymore at the top right of the screen.

Additionally I needed to find a good way to make it possible for the user to delete Folders again. Deleting lessons is done by selecting them first and then hitting the delete button in the command bar. But that’s not possible for folders as there is no way to select them.

Therefore I decided to use a kind of popup menu for this: when touching/clicking on a folder name a button should appear to enable the user to delete this folder.

After doing some research on that I figured out that this should be possible by using flyouts. So I added this peace of code to the HTML file:

<div id="deleteFolderFlyout" data-win-control="WinJS.UI.Flyout" aria-label="{Delete folder flyout}">
    <button id="deleteFolder">Delete this folder with all lessons?</button>
</div>

To finally show the flyout about touching/clicking the folder name I needed to call a JavaScript function in the OnClick event. But obviously it is only possible to call the JavaScript function if this is exposed with a WinJS namespace:

GroupedItems.ShowDeleteFolderFlyout(event)

And here is the JavaScript function itself including the namespace definition:

function showDeleteFolderFlyout(e) {
    var deleteFolderFlyout = document.getElementById("deleteFolderFlyout");
    deleteFolderFlyout.deleteFolderId = e.target.groupKey;
    deleteFolderFlyout.winControl.show(e.target, "right");
}

WinJS.Namespace.define('GroupedItems', {
    ShowDeleteFolderFlyout: showDeleteFolderFlyout
});

That’s how it looks like now after touching/clicking on a folder name:

This was the update for the current week again.

Read on next Monday!

Last week there was a funny event by Microsoft here in Munich (Germany): a Windows 8 Hackathon for App Development.

This was a very good opportunity to ask some questions to competent Microsoft developers and get forward with this app project.

Past week I implemented the vocabulary training:

After the user clicked on a lesson a word for translation together with the mentioned info text is shown.

If the user has a tablet PC without a keyboard a virtual keyboard is displayed automatically after the text field got focus:

By clicking on the check button the app shows a message whether the entered translation is correct

or wrong:

Finally, after the lesson has been finished, the user sees how many words were correct and how many were wrong (looks like my German would be quite good already ):

Now the added words can be trained, but while working on that I got already several ideas for enhancements: e. g. it would be possible to let the user choose in which direction the translation should be trained. Also adding a words card game, similar to the one in the old vocabulary trainer version, would probably be a nice feature.

So there is enough left to do, but first there are still other interface things that needs to be added or improved. I got some good ideas also from the Microsoft guys last weeks.

Next week I’ll be at the IDF in San Francisco.

So stay tuned for my next post in two weeks again on Monday!

That was the kind of events that really is for developers only - at the latest when you see the time of this event: it started at 6 pm and ended at 4 am.

But it was fun to be there and doing some development for my first metro-style app for Windows 8 in HTML5, especially as there were some competent Microsoft developers available for questions.

… and there was also enough to eat.

Have you been to a development hackathon before, too?

This time we’ll add some real functionality to the app.

But before starting with that I’ll talk about a new issue I came across while developing. Suddenly Visual Studio didn’t start anymore and printed this error message:

It told me:

The procedure entry point _Atomic_fetch_sub_4 could not be located in the dynamic link library C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\devenv.exe.

What?
A stil running instance of Visual Studio worked perfectly, but I couldn’t start a new one!

The only thing (beside developing) I’ve done till the last reboot was to install some Windows Live apps (to get the Windows Live Writer). I’ve searched in the internet and, indeed, this was the problem. Obviously there were some incompatibilities between that and the installed Visual Studio version. But, luckily, there is already a bug-fix from Microsoft.

These things always cost time, but anyway, everything is still beta.

Good, now let’s go on with the app.

At the end of my last post I made the lessons selectable and added the app bar:

As a next step some functionality for the “Edit dictionary” button needs to be added. Therefore I created a new page where each word contained in a dictionary of a lesson is displayed again in a grid to stay with the UI design:

You can see that not only the words in both languages are displayed, but also a short info text for each word. When adding new words to the dictionary the user may enter such an info text as well to give a hint for the translation. In the example I used it to put the word in the context of a sentence. That’s a hint for beginners and should also increase the learning success.

To be able to change or delete a word the words can be selected just as the lessons on the previous view which opens an app bar again:

Now the user can edit an existing word or add a new one:

At this point words can already be added to the dictionary and this way lessons can be build. But the most important part is still missing: the real vocabulary training.

I’ll take care of that in the next week.

So read on next Monday!

The porting of this vocabulary trainer will be my first Metro style app. Therefore I need to get used to developing for Metro first.

As a starting point I’ve used an app sample code I got at the Microsoft App Excellence Lab. But while trying to run this example project with the most recent version of Visual Studio on the new Intel Ultrabook equipped with Windows 8, a lot of exceptions exploded in my face:

After a short search in the internet I found a new version of the Metro demo apps. I extracted the files and executed the app with the Visual Studio debugger – but: again an exception, at least a different one!

It told me:

0x800a138f - JavaScript runtime error: Unable to get property 'getNetworkConnectivityLevel' of undefined or null reference

After a quick look on what they wanted to do at this code location, I realized what the problem was: they wanted to register the app for push notifications and this was currently not possible, because I was sitting in a nice, sunny garden that was obviously a little bit too far away from my Wi-Fi connection in the office.

I’m not sure if that’s the user experience Microsoft wants to achieve: crash if there is currently no internet connection.

Anyway, I’ll take care of that later on. Now I wanted to continue with analyzing this demo app and therefore I just commented this piece of code. After doing that the demo app started without problems:

Now I started to adapt the example code to my needs. I did some research on how I need to change the data source provider of the example app that it loads my JSON storage file with all the folder and lesson data correctly. Especially this JavaScript promise construct used for asynchronous programming is still driving me crazy. I really need to get used to that. But finally I got it to work.

Afterwards I just needed to make some adjustments to the UI that the flag icons are displayed correctly together with some info text on what the displayed lesson is about. And here’s the result:

As a next step I need to add some functionality to that: add lessons, edit the dictionary of a lesson and delete a lesson again. In preparation for that I made the List View items selectable and added some buttons to the App Bar (I found a good tutorial for that):

There is much work left, but I think I’m on a good way.

So stay tuned for more in my next post on the following Monday and thanks for reading!

We’re six developers competing to code an app for the next generation Ultrabooks running Windows 8. The winner gets $10,000!

About me

I’m a software consultant and developer from Munich (Germany) and author of the end-user products at AB-Tools.com.

Many of my end-user apps were also published in the Intel AppUp store and I gave speeches about AppUp on several developer events like the European Software Conference, MunichJS and MobileMonday.

The Ultrabook

Intel kindly provided us developers with a pre-production Ivy Bridge Ultrabook – thanks for that! – to test our newly created app with all the features of the next generation Ultrabooks. As Intel wrote the specs of this device on their blog post already, I won’t repeat them here.

Of course, I already tested the Ultrabook extensively: it’s a great device, just my USB 3.0 hard drive currently does not work correctly with it, but that’s a known issue and hopefully this will be fixed with a driver update in the future – anyway, it’s a pre-production device and therefore such small issues are OK.

The only real drawback of this device is the glossy display that makes it very hard to work outside on a sunny day in Munich just as today: I don’t understand why Intel provides devices with glossy displays to developers. When a developer looks on a monitor he wants to see some code and not himself in a mirror.

So, what I’m going to build now?

I’ve developed a HTML5 vocabulary trainer app some time ago. Although it is fully implemented, including a web synchronization service, it doesn’t look really good and especially it is absolutely not touch-enabled:

Above you can see the lesson management: here you can add new lessons, organize them in folders and add words to the dictionary.

Below there is a screenshot of the vocabulary training itself:

And as add-on a words card game is included to make learning more fun:

Needless to say that you don’t want to use this vocabulary trainer without a mouse.

Therefore I will convert this HTML5 app in a touch-enabled metro-style Windows 8 app during this Ultimate Coder Challenge.

I’m very excited about the progress of this contest and I’ll keep you updated on each Monday on my blog.

It was very interesting to talk with a Microsoft developer about the requirements that needs to be met for a Metro style app in the Windows 8 app store. There are very high standards especially regarding the look & feel of the application.

At the moment I especially want to get a HTML5-based vocabulary trainer ready for Windows 8. As a result of this App Excellence Lab I got a token that I can use to register at the Windows 8 app store before the official start. Additionally registration is free with this token for two years.

Did you attend to a Windows 8 App Excellence Lab, too?