Wow, I actually couldn’t write JavaScript, what I wrote smelled…

Alright, I’m not really a JavaScript developer, but do they even exists? I think there probably are a few JavaScript developers in this world, but most of the developers that I know of are developing for the Web. Developing for the Web in it’s widest sense. Most of the time there’s a server technology like ASP.NET, ASP.NET MVC, PHP or something else. A lot of times people actually feel like they are a WHATEVER-SERVER-TECHNOLOGY developer. I felt the same.

But lately the client-side technologies become more and more important. Yes most web developers know a little bit of HTML, and if we’re lucky there’s some knowledge on CSS as well. Yeah we also write JavaScript. uh actually we write jQuery script. Yes we are lucky to have a library like jQuery, but in the end most of don’t know much about JavaScript at all. Yeah we write functions, sometimes. But that’s about it, we don’t write, maintainable, easy to read JavaScript code. Our JavaScript smells.

And if we want to make use of the full HTML5 stack either for web or for example in a Windows 8 Metro application, our code needs to be maintainable. I can assure you, it’s not going to be 10 lines of JavaScript for a JavaScript Metro application.

To == or to ===?

I know C# so I’m using the double equals to check if left and right are equal. WRONG! I really need to admit I didn’t know I was wrong until a few months ago. So chances are some of you, my readers, don’t know it either. To quote Douglas Crockford’s book on JavaScript:

JavaScript has two sets of equality operators: === and !==, and their evil twins == and !=. The good ones work the way you would expect. If the two operands are of the same type and have the same value, then === produces true and !== produces false. The evil twins do the right thing when the operands are of the same type, but if they are of different types, they attempt to coerce the values. the rules by which they do that are complicated and unmemorable.

So from now on I will be using triple-equals instead of double-equals.

Of course there’s a lot more in The Good Parts book, I can recommend you buying it.

Object Oriented Programming uh Closures

Most of the JavaScript code I write are just functions, and functions might call other functions, some anonymous some named. The end result is either a large amount of functions, are just a couple of functions with more than 100 lines of code.

Is this maintainable? Hell no!

So why don’t I write code in JavaScript like I do in C#? Uh is that possible at all? I recall everybody telling me JavaScript is not an object oriented language. I still have to agree JavaScript doesn’t have all of the object oriented language characteristics to call  it a fully object oriented language. But still.

JavaScript objects can be created in different ways, but you’ll have to know a little bit more about some of the JavaScript language features to be able to get things working like you expect.

Some things were completely new to me like Closures: JavaScript Closures for Dummies

Take some time to get to know the above JavaScript features.

With the above concepts you can learn a little bit about JavaScript patterns, which help you when you want to write your own JavaScript library.

• Prototype Pattern
• Module Pattern
• Revealing Module Pattern
• Revealing Prototype Pattern

Really interesting articles that can help, but if you need more, you should definitely take a look at the pluralsight course for Structuring JavaScript Code.

PS. Don’t feel hurt, there are exceptions to what I write here. Actually if there weren’t good JavaScript devs out there the rest of the world, like me, couldn’t learn from their expertise.

The problem of the Windows Phone 7 ApplicationBar and not (yet) updated Bindings

As a MVVM enthusiast I’m trying to use MVVM as much as possible, but not for things that are almost impossible to do with MVVM. But simple things, like a TextBox Text property is always bound to a ViewModel’s property. That’s something that works very well…until you start having ApplicationBar buttons and menu items.

A lot of people already know that the ApplicationBar is something special, it’s not just a control like other stuff in your application. When clicking a button on the ApplicationBar the Binding is not yet updated. This is basically because the focus which is on the TextBox for example won’t be changed when clicking ApplicationBar buttons. This is different compared to normal buttons that you put somewhere on your page.

The Solution?

I’ve read different solutions on the web. For example, force focus on a different control by calling the Focus method on a Control. While this is working, I found a technically nicer solution. By getting the Binding of the current focused control and updating that binding.

I wrote a small helper class that implements this Binding updating.

public static class ApplicationBarHelper
{
    public static void UpdateBindingOnFocussedControl()
    {
        object focusedElement = FocusManager.GetFocusedElement();
        if (focusedElement != null && focusedElement is TextBox)
        {
            var binding = (focusedElement as TextBox).GetBindingExpression(TextBox.TextProperty);
            if (binding != null)
                binding.UpdateSource();
        }
    } 
}

The first thing you do in the Event handlers for the ApplicationBar Click events is call.

ApplicationBarHelper.UpdateBindingOnFocussedControl();

What about the BindableApplicationBar?

A lot of use MVVM enthusiasts are using the BindableApplicationBar that’s part of the Phone7.Fx library. Can we use this in combination with the BindableApplicationBar? Yes we can, actually the best way would be to have this integrated with the BindableApplicationBar itself. I have just downloaded the source and manipulated two methods in two classes.

public class BindableApplicationBarIconButton : FrameworkElement, IApplicationBarIconButton
{
    // Other code that hasn't been changed in this class.

    void ApplicationBarIconButtonClick(object sender, EventArgs e)
    {
        ApplicationBarHelper.UpdateBindingOnFocussedControl();
        if (Command != null && CommandParameter != null)
            Command.Execute(CommandParameter);
        else if (Command != null)
            Command.Execute(CommandParameterValue);
        if (Click != null)
            Click(this, e);
    }
}

public class BindableApplicationBarMenuItem : FrameworkElement, IApplicationBarMenuItem
{
    // Other code that hasn't been changed in this class.

    private void ApplicationBarMenuItemClick(object sender, EventArgs e)
    {
        ApplicationBarHelper.UpdateBindingOnFocussedControl();
        if (Command != null && CommandParameter != null)
            Command.Execute(CommandParameter);
        else if (Command != null)
            Command.Execute(CommandParameterValue);
        if (Click != null)
            Click(this, e);
    }
}

What does featuring in the Marketplace do with your app?

A lot of Windows Phone developers probably already know, but some might not. There is a very interesting tool in the market to monitor your application for Downloads, Ranking and Reviews: Distimo Monitor. You can for example compare your application with your competition and conquer the world. Besides that Distimo also shows you when your application was featured in the Marketplace. A couple of the apps I created have been featured so far, but let’s look at Fokke & Sukke app and the target market (The Netherlands).

Is my app featured?

You can watch closely how the marketplace looks either on the Phone or in Zune to see if your app is featured.

But in the end, this is not very doable. Don’t forget that your app can be featured in every market separately. So what else? We have the distimo monitor which shows events for your application. You can see when a new version was released and when your app was featured.

The featured periods are:

• 12/10 – 18/10
• 02/11 – 08/11
• 30/11 – 06/12

My app is featured, now what?

It’s cool to see that this app has been featured that often, but what does it mean? Let’s take a look at the Ranking in those periods.

You can easily see the areas when the app was featured by the green regions. But more important, you can see that in the first and third period being featured meant that the ranking went up immediately.

How to give an element focus when something happens?

I had a very simple problem: On loading of particular screen I wanted to give a TextBox focus. It’s freaking easy to do this in the code behind. Most of my applications are actually MVVM applications and in that case it’s not something for the ViewModel, it’s logic that belongs to the view. But how about a Behavior?

I want to give a specific control focus when something happens on something else. So that should be a TargetedTriggerAction<T>, T should be Control, because that’s something you can give focus. How easy can it be?

public class FocusOnEvent : TargetedTriggerAction<Control>
{
    protected override void Invoke(object parameter)
    {
        Target.Focus();
    }
}

Is that all? Yes it is, or actually, I want to make it even easier, add the default trigger using the DefaultTriggerAttribute. Default should be the Loaded event, so let’s add that single line.

[DefaultTrigger(typeof(FrameworkElement), typeof(EventTrigger), "Loaded")]
public class FocusOnEvent : TargetedTriggerAction<Control>
{
    protected override void Invoke(object parameter)
    {
        Target.Focus();
    }
}

Now we have this easy code, how do we use it? Just add a little bit of xaml to your page / control, just like any other behavior.

<i:Interaction.Triggers>
    <i:EventTrigger>
        <Behaviors:FocusOnEvent TargetName="TitleTextBox" />
    </i:EventTrigger>
</i:Interaction.Triggers>

Some second thoughts, is it required to take the Safe event Detachment base class for Windows Phone Behaviors by Joost van Schaik into consideration? No it’s not required, because we’re not manually attaching handlers to the events, that’s all done by the TargetedTriggerAction itself. Hope you guys think this little bit of code is useful.

Does Windows 8 support Gif images and Animated Gif images?

To some of us it may sound like a strange question, but developers which are used to Silverlight or Windows Phone development know why I ask this question. In both Silverlight and Windows Phone Gif images aren’t directly supported. Don’t ask me why, I don’t know why. Luckily Silverlight and Windows Phone developers are helped by an open source project called Image Tools which enables support for Gif and Animated Gif.

Windows 8 – HTML5 + JS

For a starter I just downloaded an ordinary gif-image from the internet and with no knowledge about how to add an image to a Windows 8 application I used my web-knowledge.

<img src="/images/window.gif" />

And yes it does work. What about an animated gif? So I recall an interesting animated gif on Shawn Wildermuth’s blog, his head-shot. So without do anything else than changing the source of the image tag I created it started working. A surprise? Not really I already heard that the rendering engine for Windows 8 applications that are build in HTML5 + JS is based on IE, so this is what I did expect.

Windows 8 – XAML + C#

So I used my Silverlight knowledge to do in XAML what I did in HTML5, add an image.

<Image Source="/Images/window.gif" />

A really fast surprise it started working in the design view of the xaml document even before I ran the project. And also after running the application it seems to work perfectly. And the animated gif? It appears in the designer as well, but doesn’t animate in there. Also when running the application the animation doesn’t work.

Just a quick thought: Silverlight doesn’t support gif at all, what about WPF? After some googling it seems that WPF does support gif images, but not really the animated gifs. But there are people who created solutions that should work to enable animated gifs in WPF. So let’s see how much of that is possible in Windows 8.

The solution for WPF makes use of the GifBitmapDecoder which isn’t there in Windows 8. But I found something that sounds similar the BitmapDecoder. I tried to get the a small proof-of-concept working, but failed so far. I invite you to solve this Animated Gif problem using the information I’ve given. Please share your solution with the readers of this post.

Conclusion

We all know WinRT isn’t finished, we are just looking at a developer preview. If I recall it correctly WinRT should have the same features in XAML+C# as in HTML5+JS. Will this small difference in features be tackled in the final release?