I registered for “Modern web development with AngularJS” and “Data stream analysis with Azure Stream Analytics” and I’m really curious about it.

• Azure Mobile Services
• Composite User Interfaces for Service-Oriented Applications
• Cross-Platform for WP8, WPF & WinRT
• Development with Xamarin
• Enterprise Web Applications with Ext JS / EXT.NET
• Graphic Recording
• Kanban in Reality
• Mobile Backend as a Service
• Psychologie of Decisions
• Team Formation and Transformation

But in a current project I came across a very strange issue:

for a few forms (curiously not for all) a very expensive SQL query is sent to the database backend while the form is loading. It was basically a SQL query that loads all (and I mean really all) data rows from the database which is obviously not a very good idea. But as I wrote that was not the case for all forms: when loading the other forms only the current data object (the current row in the table) was loaded as expected.

Of course, I’ve first contacted the always very fast and helpful DevExpress support. They researched what causes the data request and determined that the XPCollection.Count property is requested by the CurrencyManager after the Control.UpdateBindings method call. Because that’s something inside the .NET Framework they can’t do anything about it unfortunately.

They suggested to not set the XPCollection at design time, but this would result in losing the possibility to build the forms in the Windows Forms Designer. That would have been very bad, because I do have a lot of big forms in this project and I really don’t like to build them all in code.

But I found another way – I will not call that solution, just a work-around – to be still able to use the designer:

Therefore I simple wrote two batch files (using a command line replacement tool called FART), one that runs before the build starts and makes sure no XPCollection is initialized in the InitializeComponent method (by just commenting the lines of code) and a second one that runs after the build finished and reverts these changes.

Here is the content of the pre-build batch file:

%1Tools\fart.exe -r -C "%1*.designer.cs" "this.xpKern = new DevExpress.Xpo.XPCollection(this.components);" "\x2f\x2fthis.xpKern = new DevExpress.Xpo.XPCollection(this.components);"
%1Tools\fart.exe -r -C "%1*.designer.cs" "((System.ComponentModel.ISupportInitialize)(this.xpKern)).BeginInit();" "\x2f\x2f((System.ComponentModel.ISupportInitialize)(this.xpKern)).BeginInit();"
%1Tools\fart.exe -r -C "%1*.designer.cs" "this.xpKern.ObjectType = typeof(Administration.Daten.Kern);" "\x2f\x2fthis.xpKern.ObjectType = typeof(Administration.Daten.Kern);"
%1Tools\fart.exe -r -C "%1*.designer.cs" "this.xpKern.Session = this.unitOfWork;" "\x2f\x2fthis.xpKern.Session = this.unitOfWork;"
%1Tools\fart.exe -r -C "%1*.designer.cs" "((System.ComponentModel.ISupportInitialize)(this.xpKern)).EndInit();" "\x2f\x2f((System.ComponentModel.ISupportInitialize)(this.xpKern)).EndInit();"

@exit 0

And the post-build one that reverts the changes:

%1Tools\fart.exe -r -C "%1*.designer.cs" "\x2f\x2fthis.xpKern = new DevExpress.Xpo.XPCollection(this.components);" "this.xpKern = new DevExpress.Xpo.XPCollection(this.components);"
%1Tools\fart.exe -r -C "%1*.designer.cs" "\x2f\x2f((System.ComponentModel.ISupportInitialize)(this.xpKern)).BeginInit();" "((System.ComponentModel.ISupportInitialize)(this.xpKern)).BeginInit();"
%1Tools\fart.exe -r -C "%1*.designer.cs" "\x2f\x2fthis.xpKern.ObjectType = typeof(Administration.Daten.Kern);" "this.xpKern.ObjectType = typeof(Administration.Daten.Kern);"
%1Tools\fart.exe -r -C "%1*.designer.cs" "\x2f\x2fthis.xpKern.Session = this.unitOfWork;" "this.xpKern.Session = this.unitOfWork;"
%1Tools\fart.exe -r -C "%1*.designer.cs" "\x2f\x2f((System.ComponentModel.ISupportInitialize)(this.xpKern)).EndInit();" "((System.ComponentModel.ISupportInitialize)(this.xpKern)).EndInit();"

@exit 0

The @exit 0 at the end of them is important as otherwise code 2 is returned (for whatever reason) and the Visual Studio build system will complain about it every build.

Now you just need to call these batch files in the Visual Studio build events with

$(ProjectDir)Tools\PreBuild.bat $(ProjectDir)

respectively:

$(ProjectDir)Tools\PostBuild.bat $(ProjectDir)

I know that this is not a very good “solution”, but the only idea I had that I can still use the form designer while avoiding these expensive SQL queries.

Did you ever have the same issue and maybe even a better solution for it? I’m looking forward to any other suggestion on this topic!

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!