Sunday, December 25, 2011

My first WP7 app, the shopping list

Beside the "big apps" like facebook, twitter or celsius, the application I use most on my iPhone is the shopping list. It's very helpfull not to write all the things on paper each time but just choose from a list of items I bought recently and add them with one finger movement. The list makes it very convenient to add my stuff and also remembers me of what to buy by looking at all the things from the last weeks. So this is defenitely the first app I need if I win a Nokia Lumia at the MSDN CH contest here.

There must be three elements in the app. The shopping list, the list with recent items and the posibility to add new stuff. A panorama app seems to be the perfect thing. With the panorama design I can quickly switch between the three screens.

A word and a blow. That's what the finished app looks like.




What else does the perfect shopping list need? It should tell you something about your list even if the app is closed. Cool that Windows Phone offers the live tile. This way I'm able to write the number of items to buy to the tile and on the back of the tile I write randomly changing the item names and quantity. So how does this look like? Here we go.



And what about the technical stuff? Was there anything exciting? Oh yes, the live tiles, the background agent task or building a drag&drop sortable list are very interessting tasks to do.

Everybody knows the sortable list from the iPhone. Seems to be a nice and simple control there, because it looks in every app the same and has the same functionality. I thought there must be a control like this in Mango. But there isn't. Thanx to Jason Ginchereau who gave as this missing control. Works very well and you can download it from his blog here.

Working with the tiles is the next tasks. Mango gives as a lot of power and working with the tiles is very easy. Writting the number of items to buy to the tile is as easy as this.

// Application Tile is always the first Tile, even if it is not pinned to Start.
var firstTile = ShellTile.ActiveTiles.First();

// Application Tile should always be found
if (firstTile != null)
{
// Set the properties to update for the Application Tile.
var newTileData = new StandardTileData
{
Count = number
};

// Update the Application Tile
firstTile.Update(newTileData);
}


Now let's take a look on how the background agents tasks write the items on the back of the tile. Read the details on how to use it here. First we need to register and start a periodic tasks. I start if the app is closing or deactivated.

// Obtain a reference to the period task, if one exists
var periodicTask = ScheduledActionService.Find(PeriodicTaskName.SHOPPING_LIST_AGENT) as PeriodicTask;

// If the task already exists and background agents are enabled for the application,
// you must remove the task and then add it again to update the schedule
if (periodicTask != null)
{
ScheduledActionService.Remove(PeriodicTaskName.SHOPPING_LIST_AGENT);
}
periodicTask = new PeriodicTask(PeriodicTaskName.SHOPPING_LIST_AGENT);

// The description is required for periodic agents. This is the string that the user
// will see in the background services settings page on the device.
periodicTask.Description = "This periodic task shows random items from your Shopping List in the tile background title.";

// Place the call to Add in a try block in case the user has disabled agents
try
{
ScheduledActionService.Add(periodicTask);

#if(DEBUG_AGENT)
ScheduledActionService.LaunchForTest(PeriodicTaskName.SHOPPING_LIST_AGENT, TimeSpan.FromSeconds(10));
#endif
}
catch (InvalidOperationException exception)
{
if (exception.Message.Contains("BNS Error: The action is disabled"))
{
ToastNotifications.Show("Background agents:", "Disabled by the user.");
}
}

And last but not least we need the agent who is doing the job. Implement this class in a seperate project and make sure to fullfill this requirements to pass the certification. In a very simple form this class looks like that.

public class ScheduledAgent : ScheduledTaskAgent
{

protected override void OnInvoke(ScheduledTask task)
{
#if DEBUG_AGENT
ScheduledActionService.LaunchForTest(task.Name, TimeSpan.FromSeconds(10));
#endif
// Do work
TileNotifications.UpdateTile();

// Call NotifyComplete to let the system know the agent is done working.
NotifyComplete();
}
}


By adding a reference to this project Visual Studio also adds an entry to the WMAppManifest. That's it. Our shopping list app is finished.


And what else did I learned? If I build a WP7 app I need almost more time to do all the design stuff then programming. Nice icons, a cool background image and a well designed app is as important as the functionality itself. To make the user choose your app from marketplace where 100`000 of other apps are available, you need to have a good design.
Next thing that will help to sell your app is offering a trial version. To write good keywords in app hub is also a part of the success (and delimit them with a semicolon). An AboutPage is also a good plan. More about this in the next post.


And after all, if you think you will love the app like I do and it is helpfull for you (or your wife ;-) please get it here.


Wednesday, December 21, 2011

My first Windows Phone 7 Game

As I wrote in my last post my first windows phone app was a game called Simon aka Saimon or here in Switzerland better known as Senso. It's a classic brain game from the 80ies and everybody in my age will know the old version from MB I guess.

The goal of the game is to repeat the color sequences as long as you can. You will start with one color and with every right reputation one additional color will be added.

And this is what the game looks like.



To make the game more interesting I added different color schemas. You got the classic design in a nice Windows Phone Metro Style look, a dark and a bright color schema which are harder to play.
To make the game more addicting and more fun to play I added a statistic and you and your friends can set up a competition.



And now we take a look at the programming. Was there anything exciting? At the begining everything was straight forward. Take four buttons, setup some storyboards, ...
Then I wanted to add four sounds for the button clicks. In a Silverlight App for WP7 there is the media tag for a background sound. After a short google session it was clear not to use the media tag. It's not right thing for my needs, playing different sounds in a short sequence.
What I need is the SoundEffect class from the Microsoft.Xna.Framework.Audio. To make this sounds work you also need the FrameworkDispatcher class.
So first thing to do is to add a reference to the Microsoft.Xna.Framework.dll. Then you got access to all the classes you need. For the rest take a look at the Sound Sample.


After all, if you think you like the game get it here. Or if you not sure yet, wait for the trail version that is already submitted to Microsoft.

Sunday, December 18, 2011

How to start with Windows Phone Development

Before I actualy start let me tell you one thing: I can't realy write something new. Everything about windows phone development is already out there. But lets start the story three weeks ago.

Three weeks ago I wanted to do something new. At this time I read from @techpreacher on Twitter that Microsoft Switzerland started a contest where you can win a Nokia Lumia, the new Windows Phone from Nokia. Read more about it here.
That was good motivation for me and Windows Phone or short WP7 development was the thing to do. It was a good idea to get some more knowledge in this area specially because the Windows 8 Metro Style App developement is pretty close to WP7 development. This I learned at a MSUGS event where Maik Schärer talked about it. So this will also be a good investment for the future.

The idee for the first app was to build the cool Senso game from the 80ies which I already did ten years ago for the hp and compaq pda's everybody in my age will surely remeber. So let's start.

I already had a WindowsLive account, Visual Studio 2010 installed and some Silverlight knowlage. I asked Google what to do next. I need the Windows Phone SDK 7.1. Version 7.1 to build Windows Phone 7.5 (Mango) apps? Yes that's right :-) Get it from here. If you installed the SDK you got everything you need to develop a WP7 app and test it on the emulator. You don't evan need a windows phone.
Another must have tool ist the Silverlight for Windows Phone Toolkit which provides a lot of useful additional controls.
 
Now the technical part begins. Start Visual Studio, choose the right templete for your app, etc. It makes no sense if I write anything about the dev part in this blog. Everything on how to start you will find here, start under education. Another great resource is MSDN. And already in the first view hours I had a lot of specific questions, problems and no answers. All the answers I found on the great WindowsPhoneGeek site. Give it a try!
 
If you wanna make your App available to others, you need an account on AppHub. The registration is straight forward but will cost you a few bucks. The only strange thing was the exchange rate. $ 99.- in the US and CHF 129.- in Switzerland. C'mon Microsoft, what's wrong with you guys!? Anyway, pay and they do a real good job for you by selling your App to the whole world. I think it's a faire deal.
 
To get your App certified you have to fullfill a lot of requirements. It's a good idea to read this section on MSDN. It gives you a good understanding on what are the dos and don'ts so that your App will be available on the whole world soon.
 
Last thing I learned, give them a trial version of your App. The statistic sais, you will sell 70% more this way.
 
So now have fun developing wp7 apps and games!
 
Ohh, one last thing, buy my Apps on the Microsoft Marketplace and follow me on twitter for more great hints ;-)
 

Monday, October 17, 2011

Web Application Performance Tuning

In my actual project I have to do the performance tuning of a Microsoft Dynamics CRM System. From a technical viewpoint this is just an ASP.NET WebForms and WCF Services application. Therefore I was looking for some tools to monitor and analyse a web application. The customer don't want to spend any money on a tool, therefore it has to be free, open source or at least under $100.-. Here is a list of what I have found and what I use now.

IE Developer Toolbar
Used to analyse the HTML that is rendered in the browser. Very usefull to fix design bugs.

Fiddler2
Used to analyse what is sent and received over the wire. Analyse traffic, header information, etc.

DynaTrace Ajax Edition
Used to analyse what's going on on the client. Used to analyse CPU and memory usage, JavaScript, etc.

IntroScope
Used to analyse what happens on the server. Used to analyse CPU and memory usage, code, queries to the db, etc.

Not used yet
- HttpWatch
- NetMon
- Windows Performance Monitor
- Windows Resource Monitor
- Visual Round Trip Analyser
- Performance Toolkit for Microsoft Dynamics CRM 2011

Any further recommendations are very welcome. Write your comment!

Tuesday, October 11, 2011

jQuery Mobile 1.0 RC1 released

The future is mobile.

At the Microsoft conference Build last month, ASP.NET MVC 4 was announced and with it the jQuery Mobile Framework. Since a few days jQuery Mobile 1.0 RC1 is released. But what is jQuery Mobile?

There Website tells us:
A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.

So let's see what it does and how it can be used. I build a small demo web application with ASP.NET MVC 4. Based on the AdventureWorks database and the vendor table I got a form that looks in the Windows Phone emulator like that.

Looks not too bad but not really phone like. Via NuGet I install jQuery.Mobile.MVC which is based on jQuery.Mobile. After the installation I already have a new design because of the new MasterPage that was installed with the package. The site looks like:


Much better already. But where does this changes come from? If we take a look at the new mobile MasterPage we'll find the following code: 

In this code snippet we see two new attributes (data-role and data-theme) which belong to jQuery Mobile and they are the reason for the new formatting.

If we like to format the Create New link on top of the side, so it will be a touchable button instead of the normal link, it's that simple. Just add the attribute data-role="button" and if you also like an image next to it data-icon="plus". After that small change it looks like:

Pretty easy, isn't it. There are a lot more functionality and design stuff in jQuery Mobile. Check out there website and attend my session at TechDays in Bern.

Tuesday, September 27, 2011

ASP.NET MVC 4 Developer Preview Released

At the Build conference Microsoft has announced the availability of ASP.NET MVC 4 Developer Preview. The following are the some of the new features of ASP.NET MVC 4 Developer Preview.
◦Enhancements to Default Project Templates
◦Mobile Project Template
◦Display Modes
◦jQuery Mobile, the View Switcher, and Browser Overriding
◦Recipes for Code Generation in Visual Studio
◦Task Support for Asynchronous Controllers

For more information join my talk on Oktober 21, 2011 at TechDays in Bern. Hope to see you there!

Tuesday, September 20, 2011

Windows 8, WinRT, .NET 4.5 and more

Last week at the Build conference in Anaheim CA lots of new announcements have been made. The big things were Windows 8, Metro Style Apps and WinRT. But also .NET 4.5, ASP.NET MVC 4 and other new stuff came up.

Sadly I had to stay at home and did not get all the information from the remarkable experts who were speaking at Build (and did not get the cool tablet). But after I read a lot of Blogs and talked to a lot of friends (some have been there) I will write in this post what the most important news is to me.

Windows 8 has two modes. The Desktop mode addressing the business needs using keyboard and mouse (this is where all our Win7 Apps are running in the future) and the new Metro style mode addressing the lifestyle needs with touch etc.
Therefore there are also two development stacks. The big picture is shown below.



On the right side there is the Desktop mode stack in blue with .NET 4.5, C# ?, Silverlight 5, WPF ?, HTML 5, etc. Pretty much the same as we’re having today.
On the left side in green there is the new Metro style mode stack with WinRT, C# 5, XAML, HTML 5 etc. that brings the big news.

WinRT
Also WinRT is not completely new. WinRT covers a great part of the Win32 functionality and many of the .NET 4.5 libraries are also (unmanaged) WinRT libraries. But stuff like WinForms etc. will definitely not be part of WinRT and can be found just in the Desktop App part where the full .NET 4.5 framework is located.
A thin managed layer gives the developer the C# programming API. With C++ this layer is not needed what could be an advantages for some critical scenarios. JavaScript uses the Chakra Engine to access WinRT.
Fast and fluid is what we heard a lot when someone talks about Metro style apps. There is a good chance that the WinRT APIs are mostly asynchronous. The C# 5 features will help as to handle this approach.

Portability
HTML/JavaScript Metro style apps are not typical web programming and are not cross platform. Furthermore they will be build specially for Windows 8 using the WinRT APIs.
XAML/C# Metro style apps are neither Silverlight nor WPF. They are something new using the WinRT APIs. Silverlight and WPF Apps are still present on the Desktop App side.

Business thoughts
Pretty cool all this new possibilities (Metro style apps) and all the old ones (Desktop apps) are also still working (even WinForms). Pretty cool that I can use all my existing knowlege to build the app of the future by only learning a few new things (WinRT).
As a developer employed by a software vendor working on one product I'm probably really happy. I can choose the technology I'm familiar with and addresses my needs best.
Being a .NET consultant at Trivadis it's not just fun because my boss expects me to do whatever my next customer prefers and therefore I do have to know just everything. And what about a service and maintenance team if every app comes in another technology?
Am I completely wrong by thinking the wide range of technologies ends up in superficial knowledge and in a next step in bad quality? Probably it would have been a good idea to make the world a little bit easier!

Wednesday, May 04, 2011

TechDays 11, ASP.NET MVC

TechDays 11 in Basel are over and we all had a great time with lot of interesting informations.

On the TechDays Website you will find soon the recordings and the slides.

If anybody is interested in the demo application of my Speech "Mit ASP.NET MVC zur praxistauglichen Webseite" please let me know and I will send it to you.

If you missed my speech your next chance to get more information about ASP.NET MVC and Razor is at the See#Party in Konstanz.

Thursday, April 21, 2011

Razor Inside Templates

In the dot.NET Magazin 4.2011 I wrote an article about Razor, the new view engine that comes with ASP.NET MVC 3. Therefore, it is probably obvious that I worked a lot with Razor. Despite all my work with this amazing new view engine I really love, I just discovered this week another interesting feature which I call the "Razor Inside Templates".

So what is it all about? Let's take a look at an easy example:



Even so this is a very simple example, there are some magic points to look at.

First we define a Func with the parameter type string and get back a return value with the type HelperResult. Instead of the string parameter we could use any type. Even dynamic is an option so we can pass in an anonymous type. This is shown in the next example.



The second magic point is the item object. With the @item it is possible to access the parameter data passed in. Now the basics are clear and we love the inside templates. But is this all or where does this lead us to?

Think of the possibility to write an extension method doing a loop. Instead of just passing in the data, the extension method can accept a template as a parameter. So we could build a WebForms Repeater control. Interesting thought, right?

Let's take a look at the example.


This is the extension method doing the loop by using the template.


And that's how I used the above extension method to list all vendor names from the AdventureWorks database by using a template.

There are many more situation where we can use the inside template feature to build code in a simple and nice way and where we can reuse the functionality because of the templating option.

More about it and how it works under the hood, you can read in this blog by Andrew Nurse.

Monday, March 28, 2011

Localized Validation with DataAnnotations in Silverlight

Like the title explains, I like to validate input in my Silverlight application. I want to do it with DataAnnotations and I also want my ErrorMessages to be in the language of the user. Sounds pretty easy, not?

My solution has the following projects
- Data project with my Entity Framework Model
- Web project hosting my Silverlight application and my WCF RIA Services
- Silverlight project, that’s my application

The idee of DataAnnotations is to define the validation in one place and use it in all clients. WCF RIA Services as well as ASP.NET MVC generate client code based on the server site DataAnnotations and that’s pretty cool.

Therefore I build a partial class for my entity ‘Foo’ and set the attribute [MetadataType(typeof(FooMetadata))] on it and build the ‘FooMetadata’ class in which I set the DataAnnotations attributs. To be precise I define the Required attribute on my property ‘Name’. All that in a central place, the Data project.

Then I run the application. Everything works fine. Great!

Now I need the localization. I'm adding a resx File with the error messages for my validation. On the Required attribute I add the resources like this [Required(ErrorMessageResourceName = "Required", ErrorMessageResourceType = typeof(ValidationResources))]. So far so good. Now I build the project and I get an error in the client side class generated thru the WCF RIA Services instead of the DataAnnotations attribute. Type ValidationResources is not known in the client project does it say. Hmm, that's probably right.

First idea is to add a common project to my solution, add the resx to this project and reference it from the Silverlight and the Data project. Bad idea because the Silverlight project can only refer Silverlight projects and the Data project is not happy with a Silverlight class library. So I could go the long way and add a 'normal' class library with the resx File and a Silverlight class library with the resx files linked in and so on.

I do it the simple way and link the resx files from the Data project direct to my Silverlight project by clicking Add->Existing Item->Add as Link. Now I got the type with the same namespace in both projects. To make it look nice in Visual Studio I can edit the Silverlight project file and add the dependency beetween the resx and the generated code file in notepad.
WCF RIA Services are generating the right classes with all the attributes and the solution is building. Are we done yet?

When I run the application I discover one last problem. In my generated resx access code file I find the following line:
… global::System.Resources.ResourceManager temp = new global::System.Resources.ResourceManager("Namespace.ValidationResources", typeof(ValidationResources).Assembly);…

Because the namespace is different in the two projects, the resx (XML) file can’t be found at runtime. If I change it to the Silverlight project namespace, everything works fine. But if I would run the custom tool again, my changes are gone. This is not a good solution.

So I move the resx file to the Silverlight application. Everything is generated the right way here. Now I link in the generated code file in the Data project to make the type available for the DataAnnotations attributes. That’s it.

It's also not the perfect solution because if I do have a secound GUI like an ASP.NET MVC application I do need the resx file also in this project. So, if there is a better solution out there please let me know!

Friday, January 21, 2011

ASP.NET and asynchronous communication

Today I had to add a delete function to an old ASP.NET WebForms website. It was missing because there are a lot of relational data. So the steps to delete a record are:
- Click delete button
- Proof of existing relational data
- Show the result to the customer (and ask what to do)
- Delete all or cancel the delete action

Because I'm used to work with ASP.NET MVC, I thought on jQuery to solve the problem. Async calls to an Action on a Controller class and showing the result in a modal popup are easy tasks to do in ASP.NET MVC. This because of the MVC architecture, specially the Routing Engine used in MVC.
But in this case, I had to deal with ASP.NET WebForms and no routing to a Controller class. So how to solve the problem? I saw four different ways to do it:
1) Build a WCF Service and call it with jQuery
2) Create a ashx handler and call it with jQuery
3) Set the [WebMethod] Attribute to a method in the aspx page and call it with jQuery
4) Use the ScriptManager, the [WebMethod] and [ScriptMethod] Attribute


The first option (1), building a WCF Service is to much work for this small task.


The secound option (2) is quite good. The only thing I don't like is, I have to deal with two files what makes maintainance harder. Let's take a look at this solution anyway.
The jQuery code to call the handler looks like:

$(document).ready(function () {
$("#deleteButton").click(function () {
$.ajax({
type: "POST",
url: "Handler1.ashx",
data: "{'siteId':'" + id + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
// What you like to do on success
},
fail: function (msg) {
// What you like to do on error
}
});
});
});

The Handler (ashx-File) can be added easily with Visual Studio. Just select the Generic Handler template. The code looks like:

public class Handler1 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
// Check for relational data and generate the message
var message = "Generated message for the user";

context.Response.ContentType = "text/plain";
context.Response.Write(message);
}
...
}


The third option (3) is in this case my favorite. Simple and easy. The jQuery call is the same, just the URL changes to something like
...
url: "SiteName.aspx/IsDeletable",
...
where the parameter after the slash is the name of the method.
In the ASPX-File we have to add a static method and decorate it with the [WebMethod] attribute. That's it! The code looks like:

[WebMethod]
public static string IsDeletable(Guid siteId)
{
// Check for relational data and generate the message
var message = "Generated message for the user";
return message;
}

IMPORTANT: The method has to be static.


The last option is ASP.NET WebForms specific and uses the ScriptManager. In my opinion do we have a better solution with the jQuery version. Anyway, here is what you need:

Add a ScriptManager as follow:
... ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" ...

Add JavaScript code to make the call:
...
PageMethods.IsDeletable(id);
...
Notice that this is just the call. Get and handle the return value has to be added as well.

And on the method in our aspx-File we do need an additional attribute:
[System.Web.Script.Services.ScriptMethod()]


Now it's up to you to choose your right solution.

Friday, January 14, 2011

Everything just random?

Today I had to fix some code of a colleague. To test the class I've fixed, there was a mock class generating random testdata. But this testdata were always the same. So I looked also at this problem and found the following code:

for (int i = foo; i < bar; i++)
{
return new Random().Next();
}

Looks good at first glance, but this will always return the same number (at least in the same second). This is because the Random class uses in the default constructor a time-dependent default seed value.

An easy way to fix the problem would be to use the overloaded constructor and provide a unique seed value. For example just the int value i used for the for loop. This could look like:

for (int i = foo; i < bar; i++)
{
return new Random(i).Next();
}

Another way to get random numbers would be in using the Next method in a correct way. This meens on the same instance of the Random class. In this case the initialization of the Random class has to be outside the loop. The code would look like this:

var r = new Random();
for (int i = foo; i < bar; i++)
{
return new r.Next();
}

This way would definitely be better, then we need just one instance of the Random class.

Further information on the Random class can be found here http://msdn.microsoft.com/en-us/library/system.random.aspx.

Tuesday, January 04, 2011

Relaunch

Welcome back!
After a pretty long break in blogging I'm starting over again. Trivadis gave me a good reason for it ;-) Hopefully there are coming up a lot of interesting themes in 2011.

I'm sure ASP.NET MVC will be big also this year with the release of version 3. I'm doing definitely some interesting post about it. But my first activity is a speech for MSUGS on February 17, 2011. For more infos visit MSUGS. And I will do a session at TechDays 2011 in May as well.

Further there will be the first public beta release of Silverlight 5 in spring with many new cool features like:

  • Richer Media Support
  • 3D Support
  • P/Invoke
  • Elevated rights in the browser
  • Vector printing
  • Multiple windows (out-of-Browser only)
  • Improved DataBinding (almost like in WPF)
  • Custom MarkupExtensions
  • Debugging DataBinding
  • UI Testing

So stay tuned!