Lessons lerned with PixelSense (Sur40)

The first i have to mention is Microsoft changed the Name of the Sur40 Table in PixelSense and the new Microsoft Windows 8 Tablet is called Surface. Hmmm, yepp.

Every year we have our education camp at Zühlke in this time we have 3 days hands on. This year one project was to get some experience with the PixelSense.
Our task was to develop a Point-of-Sale Framework in three days with 10 engineers to show our Zühlke project notes.
The idea behind this framework is to show independent infromation on the PixelSense.

Architecture

With this generic framework you are able to develop your own data adapter and with it you can show your information with your individual surface GUI in your own application, in an easy way.  

Used Technologies

•  PixelSense (Surface Table)
• Windows 7
• WPF
• Surface SDK
• Visual Studio 2010
• TFS 2012
• Blend 4

Results

The demo application is a simple information System for the Zühlke project notes. You can filter your project notes with a cube. The cube is tagged. Also you can filter for special categories.
After it you can drag you project note to the screen and you can work with it in team. The whole application is multi user able.

Here are our positive findings:

• Blend integration works fine
• SDK is a good starting point
• Tag recognition is working
• Multi-User work experience works fine
• Usable application in three days

The PixelSense is an eye catcher but the whole technology is not well engineered. It is very slow and the optical sensors sometimes useless, especially when the sun is shining. In generally the PixelSense seems to have a lot of problems with the lighting situation. It seems it is the best to use it only in the dark. Our demo information System works OK but for a 8000€ table i expect a little bit more.  

Creating Live Tiles for Windows Phone Apps is hard

In this article i will give you our lessons leaned creating our live tile for the XING-App for Windows Phone.

The Live Tiles are the #1 differentiator for Windows Phone apps to other platforms.
Creating a good live tile is hard and needs several iterations.

XING-App live tile iterations

With Windows Phone 7.5 codename "Mango" the live tile become a backside. In the first version the user gets informed with a little icon of the backside live tile if you have new messages or visitors.
More information come with the next app release. Besides the information if you have new messages and visitors you can also see how many. Also some new information come with it. So you can see how many contact request you have and how many contacts has his birthday.
The fail of both versions are. You need to wait until the live tile turn around to his backside to see this information. It can be faster to lunch the app instead of wait until the information is visible.
The idea was to bring this information in front of the tile and to have a detail view in the backside of the tile.
The question that comes up after it, do we really need the backside anymore?
All we need to do is to find significantly icons and the information behind it.
Now we have all information available immediately.  

Using the WPF Dispatcher in unit tests

I have got a problem in my current WPF project when unit testing with mstest.
In one of my ViewModels i need to use the dispatcher to set something in the view.
While Unit Testing this ViewModel i figured out theAction delegate will never covered.

Unit-Test with Dispatcher and BeginInvoke fails

1.         [TestMethod()]
2.         public void TestTheTest1()
3.         {
4.             bool myBoolean = false;
5.             Action theAction = () => myBoolean = true;
6.             Task.Factory.StartNew(() =>
7.                 Dispatcher.CurrentDispatcher.BeginInvoke(
8.                 DispatcherPriority.Normal,
9.                 theAction));
10.             Thread.Sleep(500);
11.             Assert.IsTrue(myBoolean);
12.         }        

The reason for this behavior is that the dispatcher is not processing any messages when called from the testrunner. A synchronous call (Invoke) still gets executed but no queued ones (BeginInvoke).

Unit-Test with Dispatcher and Invoke succeed

1.         [TestMethod()]
2.         public void TestTheTest2()
3.         {
4.             bool myBoolean = false;
5.             Action theAction = () => myBoolean = true;
6.             Task.Factory.StartNew(() =>
7.                 Dispatcher.CurrentDispatcher.Invoke(
8.                 DispatcherPriority.Normal,
9.                 theAction));
10.             Thread.Sleep(500);
11.             Assert.IsTrue(myBoolean);
12.         }

So i handled this by create a Dispatch helper class for myself. This class handle all Dispatcher calls at runtime and for unit-tests.

There are also other solutions to handle this problem.
You can trigger the processing of the messages manually with a DispatcherFrame.
The changed and working example looks like this:

Solution with DispatcherFrame

1.         [TestMethod()]
2.         public void TestTheTest3()
3.         {
4.             bool myBoolean = false;
5.             DispatcherFrame frame = null;
6.             Action theAction = () =>
7.                 {
8.                     myBoolean = true;
9.                     frame.Continue = true;
10.                 };
11.             Task.Factory.StartNew(() =>
12.                 {
13.                     frame = new DispatcherFrame();
14.                     Dispatcher.CurrentDispatcher.BeginInvoke(
15.                         DispatcherPriority.Normal,
16.                         theAction);
17.                     Dispatcher.PushFrame(frame);
18.                 });
19.             Thread.Sleep(500);
20.             Assert.IsTrue(myBoolean);
21.         }

Also possible is to use a interface for the dispatcher and to have the posibility to mock the dispatcher.At runtime you can pulling in the interface from your IOC container.

Dispatcher interface

1. public interface IDispatcher
2. {
3.     void Dispatch( Delegate method, params object[] args );
4. }

Tool tip of the day: NCrunch

This could be one of the things that you can't live without.

The usual steps you go with TDD and Visual Studio at the moment:

• Write test
• Stop and run tests
• Write code
• Stop and run tests
• Refactor code
• Stop and run tests

You can go with NCrunch and it look like:

• Write test
• Write code
• Refactor code

NCrunch is an automated parallel continuous testing tool for Visual Studio .NET.
It intelligently takes responsibility for running automated tests so that you don't have to, and it gives you a huge amount of useful information about your tests (such as code coverage and performance metrics) inline in your IDE while you work.

I will give it a try with my current project.

Windows Phone Hub Control

In this article i will write about our experience with the Xing App main menu development.

What do we talk about?
When you think about a Windows Phone, the first association that comes up is this metro style and the live tiles.
The big new thing with the WP7 is this HUB control. It is the central place on the WP7.
Some apps make use to have such a HUB in the app. But be careful! We had some problems in the submission with it. Microsoft is not so happy about it when your menu is too similar to the WP7 hub. Microsoft will not confuse the user to much.

The idea was to include all nessesary informations in the menu in the familiar WP7 Metro style.
It shows your xing network activities in one screen.
In the beginning of 2011 we had care about our main menu and our concept.
During the development of the Xing app. We talked often about what we do if we have new functionality. Do we increase the tiles of our menu. Or what should we do?

Increase the tiles change the design.but each user has his workflow with the app. A change to the app will cause a rethink of the workflow. The user still knows where he can find the functionality.We decide to do not more then six tiles in the main menu.
But in v1.3 comes the 7th tile and they did not matched in the current concept at all.

WP7 Xing Hub Control in v1

And then came Mango
In the early summer time with the first announcement of "Mango" - the codename of Windows Phone 7.5 - we had the idea to use also the backside of each tile.

We had a critical point of view of it. First, the new tiles turn automatically around. You have no option to do it by yourself. Second, you got no information about the tile from the other side. 
We struggled around with these problems. We had a lot of concepts but also a lot of respect to submit these changes. We did not know if the users will like these changes and is it usable?
Also we had still some open questions:  How to turn a tile?

• only turn one tile
• turn all tiles
• only turn tiles wich offer this functionality

The decision after our intern tests was to ends in turn all tiles. In this way there is always the same behavior behind this functionality. 
Another problem was the usability for this functionality.
We made first tests with a custom slider/button with arrows to turn the tiles. But this did not feel right. Furthermore - how shall the tiles be animated?

First draft how to turn a tile

 We tried some solutions and we are really happy about this vertically flickr gesture to turn around our tiles. You are also able to shake your handy to do this.
The animation is similar to dominos and will in a round robin style physical correct animated.

When you navigate to the main page the tiles will shake a little bit to give a hint they are turnable. But what is with the information from the backside e.g. contact count, message count...
After a lot of brainstorming we came to a really cool idea. How to show information from the backside? How about to show a folder edge from the backside?
We called the feature "dog-ear" since it reminds the folded edge in a book. The user sees that there is something behind (same color like the reverse). On this edge the information from the backside tile is also visible.
This feature also increased the users advertent and many users touched on it.
So it is also possible to trigger the tiles turn around with it. 

Xing app Hub Control in v2

It was our intention every user will see this feature by playing around with the app by own.
It is very interesting for us how is your experience with it?
Do you just understand how to use it?

We are really happy about all your feedback!

Windows Phone Login

In this article i will write about our lessons learned - WP7 login page development.

Windows Phone apps are composed of pages that exist on a backstack and
can be reversed by user with the hardware back key.

There are some screens you do not want to come back. Like the login screen.
After successfully logged in, the login screen should removed from the backstack.
But explicit navigating away and from the login screen will cause to infinitly growing up your backstack. There are some solutions of keeping screens out of the backstack.

The Xing-App main page is a panorama control. The first approach for a login was kind of interesting.
We implement the login screen as a panorama item. This item is visible when you are not logged in. After successfully logged in, the item is hidden. The other items have the inverse behavior. 
In this solution we prevent the backstack problem.

While thinking about a different solution, we discussed the difference between transition and navigation. Navigation is a transition between different places. A Page is a place with a state.
But what is with this stateless pages? Here we have this splash screen or our login screen.
A common way to implement a login screen is as the first page of your app.

But is it really what you want?
While thinking about this, we came to that point the login screen can come up from everywhere in our app. The login screen has no place and it is stateless.

source: http://blogs.msdn.com/b/ptorr/archive/2010/08/28/introducing-the-concept-of-places.aspx

It is useful for example when you loose your access key and you have to login again.
The login page will popup at this place and you can continue after success.
The Silverlight Popup control is a great solution for showing content that (partially) covers the screen without doing a full navigation.You can also override the back key pressed event to handle the hardware back key to have more control over the popup.

This login behavior can also be useful for other platforms.

Windows Phone Marketplace Test Kit

There is a new Toolkit for WP7 available.
The Windows Phone Marketplace Test Kit help to prepare your application to be accepted in the Marketplace.
The Test Kit enables you to identify and fix issues prior submission.
You can use the test kit to evaluate applications that target Windows Phone OS 7.1 or later and it is part of the Windows Phone SDK.
Here are some of the tests from the msdn page:

• Whether the specified images and screenshots meet certification requirements.
• Whether the application icon and background image used in the application meet the certification requirements.
• What capabilities the application uses.
• Whether the XAP meets size requirements and whether the application manifest is valid
• Whether the application handles errors properly.
• Whether the application starts quickly enough to meet certification requirements.
• Whether the application exceeds memory usage requirements.
• Whether the Back button in the application is being used properly.
• Whether the application uses APIs that are not allowed on the phone.
• Whether the application uses APIs that are not allowed with background agents.

Using The Test Kit

Application Details

 

Automated Tests

Monitored Tests

Manual Tests