I've been doing web development since 2005, matter of fact, the first website I ever built is still around .  Back then it was DotNetNuke and WebForms projects, and it sucked.

I honestly had no idea what real HTML was until .Net MVC came out.  The first time I had to write a real form and learn what happened when you posted information was a mind blowing experience.  I've been hooked ever since.

Modern web development still sucks.  But I've learned to manage some of the sucky parts with what your going to see here today.

Step 1: MVC FTW

You need to learn MVC 3 immediately.  There should be absolutely no reason we ever willingly start a new WebForms project again.  It's beyond this article to teach the intricacies of MVC style web development, but I will say that it will immediately boost your HTML, CSS and Javascript understanding.

MVC Resources

 - Intro to ASP.NET MVC 3

 - Introducing "Razor"

Step 2: HTML5 Boilerplate, Normalize.css, Modernizr and YepNope + Polyfills for browser consistency

Battling display inconsistencies with different browsers is never really going to go away.  Legacy IE versions are entrenched in the enterprise world and likely will be there for years to come.  However, we can stand on the shoulders of giants in the web community who have put together a group of collected tips, tricks, magic spells and hacks that give us a pretty consistent baseline experience across most browsers.

The HTML5 Boilerplate project is a great project for not only getting a jump start on a consistent site look and feel, it's also a great way to learn about the cutting edge in web development.  HTML5 Boilerplate code is chock full of tasty bits of knowledge ready for you to expand your mind when you're ready.

HTML5 Boilerplate and Normalize.css Resources

 - HTML5 Boilerplate Site

 - Normalize.css Site

 - Modernizr Site

 - YepNope Site

Step 3: HTML5 != Just put a Canvas in it, bro

I've worked on a couple HTML5 sites... err applications, and I've never once found it helpful to use a canvas element in something that is not a game.  There are so many other cool things in the HTML5 spec that aren't a canvas element that people don't even know about.  The best parts of HTML5 are the things that make you write less code that is more readable.

Isn't that cleaner than a bunch of div's?  And, not pictured, but equally as important is the cleaner CSS that results from not having class pollution everywhere.

I could go on about all the new API's but the point I want to make is that it's no longer acceptable to say "All HTML5 adds is just a canvas and audio element, right?". No,  HTML5 is a collection of state of the art browser API's and semantic markup elements built to let you make the next generation of applications that make use of native resources without the native application walled garden.

HTML5 is a collection of state of the art browser API's and semantic markup elements built to let you make the next generation of applications that make use of native resources without the native application walled garden.

HTML5 Resources

 - HTML5 Rocks

Step 4: Javascript: with great power comes great responsibility

It's amazing how intimidating javascript is to the new comer.  I think when faced with the intricacies and inconsistencies of javascript people often fall back to a mess of procedural code with the caveat that "Hey, it works, so I don't want to change it".  This is lazy, and not the good kind of lazy either.  We need to, and can, write javascript code that is object oriented, loosely coupled and efficient.

Here are some signs that your javascript code is starting to suck:

 - You have one long javascript file

 - You have everything in the global namespace

If you find yourself with a long javascript file and wish you could separate things out into nice manageable chunks, try using a framework like SquishIt to combine and minify your javascript files for you as part of the build process.  Complicated open source projects like jQuery use a similar process to break things down into smaller, more manageable chunks.

Cluttering the global namespace is like having all your variables in an application be shared with everything else.  Information hiding is a core principle of object oriented programming and to that end you should know how to write code that protects it's private data and exposes a nice clean API for you, or someone else, to take advantage of.  One way of doing this is by taking advantage of the Module (or Module-Export) pattern.

Isn't that cleaner than a bunch of div's?  And, not pictured, but equally as important is the cleaner CSS that results from not having class pollution everywhere.

I could go on about all the new API's but the point I want to make is that it's no longer acceptable to say "All HTML5 adds is just a canvas and audio element, right?". No,  HTML5 is a collection of state of the art browser API's and semantic markup elements built to let you make the next generation of applications that make use of native resources without the native application walled garden.

HTML5 is a collection of state of the art browser API's and semantic markup elements built to let you make the next generation of applications that make use of native resources without the native application walled garden.

HTML5 Resources

 - HTML5 Rocks

Step 4: Javascript: with great power comes great responsibility

It's amazing how intimidating javascript is to the new comer.  I think when faced with the intricacies and inconsistencies of javascript people often fall back to a mess of procedural code with the caveat that "Hey, it works, so I don't want to change it".  This is lazy, and not the good kind of lazy either.  We need to, and can, write javascript code that is object oriented, loosely coupled and efficient.

Here are some signs that your javascript code is starting to suck:

 - You have one long javascript file

 - You have everything in the global namespace

If you find yourself with a long javascript file and wish you could separate things out into nice manageable chunks, try using a framework like SquishIt to combine and minify your javascript files for you as part of the build process.  Complicated open source projects like jQuery use a similar process to break things down into smaller, more manageable chunks.

Cluttering the global namespace is like having all your variables in an application be shared with everything else.  Information hiding is a core principle of object oriented programming and to that end you should know how to write code that protects it's private data and exposes a nice clean API for you, or someone else, to take advantage of.  One way of doing this is by taking advantage of the Module (or Module-Export) pattern.

Programmer Values

Tonight I've been thinking a lot about my career.  Every now and then I like to get back to "First Principles" and re-evaluate my core values.

To that end, here is what I think I value as a software developer.

1.  A consistent working location.

  - see Your Commute is Killing You

  - Part of a community that I can contribute to

2.  Solving interesting problems that help people be more productive and prosperous.

  - Challenging work

  - Not micro-managed

  - Do no evil

3.  Working with people who I can learn from and hang out with

  - Continuous learning

  - see Why Friends Matter at Work

4.  Sharing my knowledge with other people.

  - Presentations, discussions

  - Grow your people

  - New business from new ideas

All this is sprinkled with most of the stuff you see in the RSA Animate - Drive video:

That's it for now, maybe some future me will look back at this and re-evaluate.  Next time I'll talk about my career as a consultant and how that meshes with these values.

Now Playing - Drake - I'm On One

_

document.ready with jQuery Mobile

One of the first hurdles I had with creating sites with jQuery Mobile was figuring out how to run my code when a page loads.  Since navigating to a new page no longer requires a postback, the standard $(document).ready approach isn't going to cut it.  I've come up with a solution that I think helps you modularize and isolate your code to prevent having one large unmaintainable lump of a javascript file.

Creating a Namespace

Now when I work on javascript heavy applications, I take care to modularize my javascript but I don't necessarily follow the pattern exactly.  I start out by creating a namespace object, and I usually place this in a file called core.js.

https://gist.github.com/1246402.js?file=ready.core

So, what we're doing here is creating a blank object (MYAPP) to "scope" our application objects.  We extend that object with some new objects to hold our pages and maybe even some options.  We would also maybe put some other stuff in here, but for this example we'll keep it mostly clean.

The Page Event Mapper

Now it's time to do some plumbing work to hook the new page objects we are going to create up to the jQuery Mobile navigation framework.  We want to pass the page events from jQuery Mobile to a page class that will handle the events.

https://gist.github.com/1246402.js?file=ready.navigation

Every page in jQuery mobile is wrapped in a div with a data-role attribute set to "page", so what we're doing here is handling the jQuery Mobile page events and passing them to our corresponding page.

A Page Class Example

Speaking of pages, let's take a look at what an example page looks like in my code.

https://gist.github.com/1246402.js?file=ready.homepage

As you can see, I've kept the code pretty simple.  This class will now be able to respond to init events (which get fired before the page is modified by jQuery Mobile) and the show event which gets fired every time the page is navigated to (even when it's cached and navigated back to).

But Don't Take My Word For It

If you want to give a try for yourself, head on over to the jsFiddle I set up with this example code already set up.

Now Playing: Nas - It Ain't Hard to Tell (Reading Rainbow Remix)

_

On Windows 8 Metro HTML Apps and the Web Developer Ethos

 

Ethos (noun): The characteristic spirit of a culture, era or community as seen in its beliefs and aspirations.

TL;DR: I hear a lot of people talk about the what the value of offering a way to create "Metro" style apps for Windows 8 using HTML and Javascript is, and I disagree.  I believe the common web developer has a different value system than what the Win 8 "Metro" environment encourages and as a result not many people will end up using the HTML options for creating "Metro" apps on Windows 8.

Current Web Development Values

 - Optimized javascript and css for fast page loading.

     - Combined, Minified JS and CSS

- Load from CDN, fallback to local

 - Simple, short javascript code

 - Reactive and Responsive to different devices.

 

I'll take some liberties and really just boil these down to the following:

 - Fast Page Loading

 - Simple Code

 - Platform Agnostic

Fast Page Loading 

As a web developer I have certain performance implications in mind when I organize my site and its resources.  I like to minify and combine all my script and css files for quicker loading along with loading certain libraries from CDN rather than locally to take advantage of Caching.  The examples I've seen so far tend to have about 87 obscure scripts loading in the head of the page and it makes my face twitch every time I see it.

Simple Code

The WinJS and WinRT namespaces are insanely long and ugly to use.  Again, the average to elite js developer has it ingrained to limit the size of their javascript files for performance.  Using something like WinJS.Class.define(...) or some of the other longer examples for subscribing to certain app events like startup is going to turn off developers to creating apps.  The good thing is that this could be fixed by someone just wrapping all that stuff up in a shorter namespace utility library ($win sounds good).

The javascript examples I've seen so far tend to degrade into this monolithic amount of JS in one file.  There needs to be a better story for architecting javascript heavy solutions.  I think the .Net world isn't used to this type of project yet and it would have been nice to see MS give some guidance about managing them in a responsible way.  I'd like to see a convention based solution that encourages a module + export pattern for managing the complexity of javascript code.

Platform Agnostic

I'll start out by saying that it's unfair when I see people comparing the Metro app development with developing a website.  This is a native app and as such will have a heavy reliance on the underlying platform.  The better comparison for development is that of a ChromeOS application.  On the other hand ChromeOS application doesn't have the same heavy importance on a radical theme/styling for apps like Metro apps will.

Host enforcement rules add an extra layer of security for "Metro" HTML apps by only allowing "safe" html and javascript references.  Host enforcement rules add an extra layer of security at the expense of clean and easy to implement javascript.  The fact is that most web sources are going to not have "safe" html (especially since most data- attributes are considered harmful).

That's all I have for now as far as notes, I'm sure I'll tidy this up a bit for a more official review later on when I've made a couple apps.

Now Playing: Mt Eden - Gambler

_

MVC 3 jQuery Mobile Site Template

I spent most of the night creating a basic jQuery Mobile Site Template for .Net MVC 3 Razor sites.

The source for this project can be found over at the MVC 3 jQuery Mobile Site Template project on GitHub.

Nothing much to say really about the template.  It's very similar to my previous MotherEffin HTML5 Template but I kept it a little bit more bare bones this time.

Most people will want to check out the jQuery Mobile site and Demo / Documentation before the template will be that useful.

Now Playing - AudioSlave - Shadow on the Sun

MVC 3 jQuery Mobile Site Template

I spent most of the night creating a basic jQuery Mobile Site Template for .Net MVC 3 Razor sites.

The source for this project can be found over at the MVC 3 jQuery Mobile Site Template project on GitHub.

Nothing much to say really about the template.  It's very similar to my previous MotherEffin HTML5 Template but I kept it a little bit more bare bones this time.

Most people will want to check out the jQuery Mobile site and Demo / Documentation before the template will be that useful.

Now Playing - AudioSlave - Shadow on the Sun

Anatomy of an HTML5 Page Transition

One of the sexy new trends in HTML5 development right now is Page Transitions.  One of the first places I noticed Page Transitions in use was the GitHub Repository Explorer; as you click around to different directories and files, the content slides in and out without reloading the page.

While most of this functionality can be achieved through Javascript alone, the actual URL History manipulation has only been available in the (relatively) recent incarnations of HTML5.  When you add in the ability to take advantage of CSS3 transitions for sliding pages in and out, you end up with a pretty modern example of HTML5 capabilities.

Overview

Here is a pretty typical scenario; two pages with identical layout, but different content.

1. User clicks a link that has the transition-link attribute
2. Download the page with $.ajax call and grab content (<div> with role="main" attribute)
3. Slide out the old content, slide in our new content.
4. Change the menu button highlight and URL.

Page HTML Structure

Setting up your pages to use transitions requires some plumbing hookup to specify what parts of the page are content and what links should load new content in.  In our case, we attach handlers for any link elements with a transition-link attribute, and we look for a div element with a role="main" attribute as our content area.

Retrieving The Other Page With jQuery

When our page loads, we attach to all our transition links click events so we can load our other page with ajax instead of with a browser refresh.

You may notice that we are taking advantage of jQuery's new $.Deferred object for the loadPage function.  This lets us specify callbacks for when the page is done loading, or if there is an error loading the other page.

Transitioning The Page Contents Out and In

Once we've loaded the new page's contents, we're ready to start transitioning the old content out and slide the new content in.  To do this, I took advantage of the jQuery UI Effects library and chained some call backs to insert the new content after we finish hiding the current content.

Bonus Points: We get some bonus points here at the bottom for detecting CSS Transitions and using those instead.  The style for the CSS3 Transitions can be found in the jQuery Mobile source on GitHub.

A more styled fleshed out version of this concept can be found live on my DropBox account.

Now Playing - Lupe Fiasco - Superstar

HTML5 Dialog Element Styling For Pleasure and Profit

Recently I had a great opportunity to work on a small part of a Lync Powered Expert Question Answer Service.  My portion of the code was a simple one page HTML popup that allowed a person to chat with an expert.

One of the cool things I found out about during the project was the HTML5 Dialog Element

The dialog element represents a conversation, meeting minutes, a chat transcript, a dialog in a screenplay, an instant message log, or some other construct in which different players take turns in discourse.

Nifty, eh?  I use jquery to insert the root dialog element, then whenever a message is sent or received I inject the dt and dd elements.  Here is an example of what the conversation looks like in HTML

By default, the browser will display this like this:

Now that's kinda lame, I want it to look like a real chat screen (with some slick Metro UI Styling), so I added some CSS (take a look at the JSSFiddle CSS Tab for my styles) to hide the dt element and give it a nice blue bubble look.  I even added some nice CSS triangles into the mix for some minor speaker perspective.

I've put up a fully coded example with a boring chat bot over at jsFiddle for you to enjoy and mess around with.

Now Playing - La Roux - In For The Kill (Skream Remix) [WTC Mashup]

Jacob

Roll your own Text Messaging Apps with Twilio and MVC 3

I've been messing around with Twilio and their awesome set of TwiML API's this weekend and made a fun little C# Twilio library for creating simple text (and voice) based applications from MVC 3 sites.

How Twilio's TwiML API Works

An SMS comes in to one of your Twilio Phone Numbers.

Twilio Makes a POST or GET call to a URL you set up.

Your site provides a TwiML Response that Twilio parses and executes.

(See Twilio's own how it works page for a way better explanation.)

Using TwilioSharp to Send TwiML Responses From MVC

As part of my handy dandy TwilioSharp helper library I've created a base TwiML Controller for easily creating TwiML Responses with a Fluent TwiMLBuilder Class.  

The TwiML Controller exposes a TwiML method that is meant to emulate the ease of use of the Json method available in all MVC Controllers.  The TwiML method takes a Func<TwiMLBuilder, TwiMLBuilder> that acts as your Response Factory method; this makes building complex responses easier by allowing for in line fluent declarations.

Full Fledged Example

You can view a full fledged Magic 8-Ball Answerizer 3000 example on GitHub (which is also live on AppHarbor until I run out of money in my Twilio Account).  Including a more in depth example of using the Fluent TwiMLBuilder for answering phone calls.

(The Magical 8-Ball Answerizer 3000 on AppHarbor)

Now Playing - Tommy Tutone - 867-5309 / Jenny

MVC 3 Long Polling / "Comet" Chat Example

I recently read a great article on WebSocket alternatives in MVC by Clay Lenhart and decided to write up a quick proof of concept Chat Server Example for .Net MVC.  Here is a quick run-down of what I did.

First, read up on Comet; a basic way to have real-time notifications sent to a browser (like push notifications).  One common Comet technique involves "Long Polling" an http connection.  What this means is that we call out to a URL that expects to wait around for a long time before something happens.

(images via IBM WebSphere Ajax Dev Guide)

The Long Poll Chat Async Controller

The first step for the chat server was to create a new Async Controller (Async what? Check out this great introduction to Async Controllers) to handle our Long Poll requests.  Here is the ChatController I created:

You can see that we've created our Index action as an Async that calls our to our ChatServer and checks for a message to arrive.  By default, I've specified a 60 second time limit before returning an empty list of messages, but you could theoretically let this go on for hours waiting for a response.  Once a response comes back from the ChatServer, we tell the AsyncManager we are done and return our messages in JSON form.

The ChatServer

I chose to use Observables and the Reactive (Rx) Framework to have a synchronized way of notifying all interested parties when a new message comes in.  To do this, I took advantage of the Subject<T> class that wraps a lot of the Observable and Observer implementation details.  To handle persisting my chat history, I use a simple Queue to keep the last 100 or so by default.  Whenever a new message comes in, I check the history length and pop off anything over the limit, then push in my new messages.  Yes, eventually I'd have to figure out a strategy for pushing this back to a database or Redis cache server thingy but this is just a demo, so relax.

The Client Side (HTML and JS)

On the client side, we need to take advantage of some of jQuery's helper methods for POSTing to an MVC Action (the Index Action on the Chat Controller in our case).  We are going to make a POST call to /Chat that will sit around until a new message arrives, or our 60 second timeout is reached.  If a new message comes in, our POST call will return immediately with the new message(s).  From there, we just insert them into our current chat history.

See It In Action

I've uploaded the MVC Chat Example to AppHarbor for people to play around with.  You can also download the sample project from my dropbox account, or view the source at the MVCChatSite Project page on BitBucket.

Now Playing - The Glitch Mob - Drive It Like You Stole It

Hackatopia - MVC 3 JSON Services & WP7

Here's a list of resources for my talk at Hackatopia on March 26.

Sample Project - JSONPhoneApp1

Links

TeamRepository - For Some Test Data

TeamController - For return our test data in JSON

JsonService - For consuming/serializing JSON objects in Win Phone 7

MVVMCommon - A set of common MVVM Classes

TeamWP7 - All the VM's and Services for Consuming our test data

Postifier - Turn an object into a URL Encoded string

JSONView - A Chrome Extension for pretty printing JSON.

Gist4u2 - NuGet Console Utilities for Gists

Not many people know this, but I'm actually a powershell ninja from waaayyyy back 

(that's me in the scoring list, third from the top)

So when I first started playing around with the NuGet Package Manager Console I was quite impressed with the opportunities it presented.

Flash forward to today and I'm preparing for a presentation in an upcoming Chicago Hackatopia Win Phone 7 event where I find myself storing a lot of my code snippets for my presentation in Gists.  That's when I got the idea for Gist4u2; a handy way to insert gists into your code.  

So far, it's been pretty useful for my demonstrations.  Here is a quick example of how I use it.  Let's say I'm starting a new Windows Phone 7 project and I want to add some basic MVVM fundamental code like a ViewModelBase and Commanding classes (DelegateCommand, EventToCommand behavior).

Start a new Win Phone 7 Project, Open the Package Manager Console from the Tools -> Library Package Manager Menu (if you don't have it, Install NuGet through the extension manager)

Next, install the Gist4u2 package to add the helper commands into the Console

Notice the last Gist there, the 883810, that's what I want.  So I create a new file (hopefully in the future I can create them for you in the project) called MVVMCommon and type Gist-Insert '883810' to insert the contents of my MVVMCommon Gist.

Bam!  That's it.  Now we have a ViewModelBase and DelegateCommand ready to use in our Windows Phone 7 project.  Now my presentation is going to be much quicker.

HTML5 Boilerplate MVC 3 Site with AppHarbor in 3 Easy Steps

Here's a quick way to get a new .Net MVC 3 site up quickly that incorporates HTML5 Boilerplate patterns and practices.

Step 0: Get Git (If you don't have it)

Git for Windows is available from the msysgit repository on Google Code; this guide was written for the 1.7.4 preview version.

There's even a guide for installing on windows if you need some help.

Step 1:  Create Your AppHarbor Project

Go the the AppHarbor home page and create a new account if you haven't done so yet.  Then click the Create New link on the Applications tab to get started.

Once you've got your application created, copy the Repository URL so you can push your source up to your new site.

Step 2:  Create Your MotherEffin HTML5 MVC 3 Site Project

I've created a super easy HTML5 Boilerplate MVC 3 template project that can deploy to AppHarbor with no modifications.  You can get it from the Visual Studio Extension gallery, or through the new project dialog by clicking the Online tab item on the left and searching for "HTML5".

Make a note of your project location so we can use the Git Bash shell to push our source.

Step 3: Push it to AppHarbor with Git

Once you've got your project all set up and ready to deploy, navigate to your project's location, right click on the root directory and select "Git Bash Here".

Enter the following commands to initialize your new Git Repository

1. git init
2. git add .
3. git commit -m "initial check in"

Once you have your files committed locally, you are ready to push up to the AppHarbor Git Repository Url.

Here are examples of the commands to do that:

1. git remote add appharbor [YourSiteRepositoryUrl]
2. git push appharbor master

Enjoy Your Site

Congratulations, you've just deployed your first HTML5 website.

Now all you have to do is navigate to your app's url; i.e http://best-site-evar.apphb.com.  

Next step, add a database and add the code first entity framework NuGet package for fast database scaffolding.  Hopefully I'll get a tutorial up for that soon.

Now Playing - Kanye West ft. Rihanna - All of the Lights

See the full gallery on Posterous

DataGrid Column Header Binding Behavior

I ran into a problem binding a localized string to a Silverlight 4 DataGrid Column Header, it turns out the Header property on a DataGridTextColumn isn't a dependency property and so it doesn't support binding.  This behavior will let you bind a value to the header.

Hope that helps someone else out who may be trying to localize their application.

Jacob 

Silverlight 4 TextBox Update Source on Text Changed Behavior

Here is a simple little behavior for updating a TextBox's Text property in Silverlight when the text changes instead of when it loses focus.

Quick and Easy.  Gotta Love Behaviors.

Jacob

Silverlight 4 DropDropBehavior and FileDragDropBehavior with Command Binding

Here is an easy to use FileDragDropBehavior that you can use in your XAML to implement dragging and dropping of files in your Silverlight 4 Application

Just put the class in your project, reference the namespace in your XAML file and add the behavior to where you want to drop a file.

Jacob

CheckedItemCollection for Silverlight and WPF CheckBox List or RadioButton List

Here is a simple class for wrapping a list of items so they can be checked from a list.  There are some helper methods like CheckAll, UnCheckAll, and CheckWhere that I've found useful in my projects.

Then when you are done and need to get the checked items you can use the handy CheckedItems property.

Jacob

ClickCommandTrigger based on MVVMLight EventToCommand TriggerAction

Here is a simple ClickCommandTrigger based on the MVVMLight EventToCommand TriggerAction.  This will make it a little easier to run an MVVMLight command trigger for a simple button click.

Gotta love triggers.

While working on a recent HTML5 project I found myself wishing for the convenience of data binding.  I was building a timer and was adding a lot of callbacks to update the UI elements on the page.  I figured there was a better way and after a little searching I came across Knockout.

Our Goal

Knockout is a great combination of jQuery templates and data binding that allows for one-way and two-way binding back to a Javascript object.  I've put together an example project with an ugly looking stopwatch, and we'll go through some parts of it in this blog post (just want the code, bro? get it here)

The timer() class with Knockout Observables

/// The timer class.
var timer = function () {
    this.started = new ko.observable(false);
    this.totalSeconds = new ko.observable(0);

    this.seconds = new ko.dependentObservable(function () {
        return (this.totalSeconds() % 60).toFixed(0);
    }, this);

    this.secondsDisplay = new ko.dependentObservable(function () {
        var secs = this.seconds();
        var display = '' + secs;
        if (secs < 10) { display = '0' + secs; }

        // Hack for weird edge case because of setInterval.
        if (display == '010') { display = '10'; }

        return display;
    }, this);

    this.minutes = new ko.dependentObservable(function () {
        return ((this.totalSeconds() / 60) % 60).toFixed(0);
    }, this);

    this.hours = new ko.dependentObservable(function () {
        return (((this.totalSeconds() / 60) / 60) % 60).toFixed(0);
    }, this);

    this.secondHandAngle = new ko.dependentObservable(function () {
        return this.seconds() * 6;
    }, this);

    this.minuteHandAngle = new ko.dependentObservable(function () {
        return this.minutes() * 6;
    }, this);

    this.hourHandAngle = new ko.dependentObservable(function () {
        return this.hours() * 6;
    }, this);

    this.alarm = function () {
        log('alarm fired');
    };
};

// timer.start
timer.prototype.start = function () {
    this.started(true);
    this.startTime = new Date();
    var self = this;

    this.intervalId = setInterval(function () {
        var oldTime = self.startTime;
        self.startTime = new Date();

        var diff = secondsBetween(self.startTime, oldTime);
        var currSeconds = self.totalSeconds();
        self.totalSeconds(currSeconds + diff);
    }, 100);
};

// timer.stop
timer.prototype.stop = function () {
    this.started(false);
    if (this.intervalId) {
        clearInterval(this.intervalId);
    }
};

// helper...
function secondsBetween(date1, date2) {
    return (date1.getTime() - date2.getTime()) / 1000;
};

From the timer class code you can see that we declare our fields as ko.observable()'s.  These are wrappers around our values that help with notifying our bound elements when the values change.  The function() syntax for accessing the fields does take a little getting used to; evidently it's necessary since IE doesn't implement property setters and getters.  Other than the new syntax, our class is pretty basic.  We have a started field and a totalSeconds field that drive the rest of our fields by way of the dependentObservable() functionality.  The dependentObservable() is a nifty way of declaring fields that are computed based on other observable() fields.  For us, we do some quick math to determine our seconds, minutes and hours based on the totalSeconds that have passed while running the timer.  We also create some fields for the angle of our timer hands based on the computed underlying second/minute/hour values.


The ViewModel and View DataBinding

@{
 Page.Title = "Home Page";
}

@section ScriptSection {

    <script id="faceTemplate" type="text/x-jquery-tmpl">
        @* Our SVG Code in a partial view *@
        @Html.Partial("_WatchFace")
        <div id="timerInfo" style="font-weight: bold; font-size: 24px; float: left;">
            <span class="minutes" data-bind="text: minutes()"></span>
            <span>:</span>
            <span class="seconds" data-bind="text: secondsDisplay()"></span>
        </div>
    </script>

    <script type="text/javascript">

        // Our custom svg Rotate transform binding...
        ko.bindingHandlers.svgRotate = {
            init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
                // This will be called when the binding is first applied to an element
                // Set up any initial state, event handlers, etc. here
            },
            update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
                // This will be called once when the binding is first applied to an element,
                // and again whenever the associated observable changes value.
                // Update the DOM element based on the supplied values here.

                var value = valueAccessor(), allBindings = allBindingsAccessor();

                var rotation = ko.utils.unwrapObservable(value);
                var originX = allBindings.originX || 0;
                var originY = allBindings.originY || 0;

                var rotateText = 'rotate(' + rotation + ', ' + originX + ', ' + originY + ')';
                var id = $(element).attr('id');

                // Using the old school doc getElement because jquery's attr() is not setting the value correctly
                var elem = document.getElementById(id);
                if (!elem) { log('rotate binding element not found'); return; }

                elem.setAttribute('transform', rotateText);
            }
        };

        // Our page ViewModel
        var viewModel = {
            watch: new ko.observable(new timer()),
            start: function () {
                this.watch().start();
            },
            stop: function () {
                this.watch().stop();
            },
            toggleTimer: function () {
                this.watch().started() ? this.stop() : this.start();
            }
        };

        ko.applyBindings(viewModel);
    </script>
}

<p>
    This is an example project using <a href="http://html5boilerplate.com">HTML5 Boilerplate</a> patterns, <a href="http://knockoutjs.com">Knockout.js</a>  MVVM Binding and Templating, <a href="http://docs.jquery.com/Qunit">QUnit</a> unit tests and SVG Graphics.
</p><br />

<div id="watchContainer" style="cursor: pointer;" data-bind='template: { name: "faceTemplate", data: watch()}, click: toggleTimer'>

</div>

The main parts of this code are the ViewModel which we bind our HTML Elements to, and the jQuery templates that define our stopwatch and second/minute hands.  At the top, I declare my SVG Stopwatch with a custom knockout binding (you can see the code for the special binding at lines 10-20) I created to update the transform of the path based on the angle in the timer.

Next, the script section for our page creates a special binding that updates the transform attribute of the Path SVG Element to rotate the hands of the clock.  Also in the script section, we declare our ViewModel for the page.  The ViewModel creates a timer and some utility functions for toggling the timer between start and stop.  After declaring our ViewModel, we use Knockout's ko.applyBindings() function to setup the page's templates and apply our data bindings.


The MotherEffin Clock Demo Project

I've put together a Demo Project for download using my MotherEffin HTML5 Boilerplate project template for MVC3.  I highly recommend visiting the KnockoutJS documentation for more information about templates, custom bindings and observables.

Next time, we'll go through Unit Testing and Object Oriented Javascript with QUnit.


Now Playing - LL Cool J - Momma Said Knock You Out

Silverlight Fade Control Behavior - FadeyBehavior

In my last post about Silverlight Property Triggers and Storyboard Actions I showed a way for us to fade in an element when a property on our view model was a certain value.  We used this to fade in a list of items after we loaded them, and ultimately we could fade them out while we were re-loading more items.  The code looked kind of like this;

<ItemsControl
    Margin="0 130 0 0"
    HorizontalAlignment="Left"
    VerticalAlignment="Top"
    Opacity="0.0"
    ItemsSource="{Binding Items}">
            <i:Interaction.Triggers>
                <local:BooleanPropertyTrigger
                    Binding="{Binding FinishedLoading}"
                    TriggerValue="True">
                    <local:StoryboardAction>
                        <Storyboard>
                            <DoubleAnimation
                                To="1.0"
                                Duration="00:00:0.7"
                                Storyboard.TargetProperty="Opacity" />
                        </Storyboard>
                    </local:StoryboardAction>
                </local:BooleanPropertyTrigger>
                <local:BooleanPropertyTrigger
                    Binding="{Binding FinishedLoading}"
                    TriggerValue="False">
                    <local:StoryboardAction>
                        <Storyboard>
                            <DoubleAnimation
                                To="0.0"
                                Duration="00:00:0.4"
                                Storyboard.TargetProperty="Opacity" />
                        </Storyboard>
                    </local:StoryboardAction>
                </local:BooleanPropertyTrigger>
            </i:Interaction.Triggers>
                <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border
                Height="30"
                Width="200"
                Margin="0 2"
                BorderBrush="Plum"
                BorderThickness="3"
                CornerRadius="5">
                <TextBlock
                    VerticalAlignment="Center"
                    HorizontalAlignment="Left"
                    Margin="5 0 0 0"
                    Text="{Binding Name}" />
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Now, the more I looked at all that XAML the more I thought we could make this a lot simpler.  By the end of this post we will hopefully end up having something much simpler to use; like this;

<ItemsControl
    Margin="0 130 0 0"
    HorizontalAlignment="Left"
    VerticalAlignment="Top"
    Opacity="0.0"
    ItemsSource="{Binding Items}">
    <i:Interaction.Behaviors>
        <local:FadeyBehavior
            Binding="{Binding FinishedLoading}" />
    </i:Interaction.Behaviors>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border
                Height="30"
                Width="200"
                Margin="0 2"
                BorderBrush="Plum"
                BorderThickness="3"
                CornerRadius="5">
                <TextBlock
                    VerticalAlignment="Center"
                    HorizontalAlignment="Left"
                    Margin="5 0 0 0"
                    Text="{Binding Name}" />
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

So, what we've done is encompassed our two triggers and their storyboards into a new Behavior.  Our new FadeyBehavior creates and attaches our to FadeIn and FadeOut triggers along with the associated FadeInAction and FadeOutAction.  The secret sauce is in cascading the binding down to the triggers in the code behind.

using System.Windows;
using System.Windows.Data;
using System.Windows.Interactivity;

/// <summary>
/// A behavior for fading an element based on whether a bound property is true or false.
/// </summary>
public class FadeyBehavior : Behavior<FrameworkElement>
{
    /// <summary>
    /// The <see cref="Binding" /> dependency property's name.
    /// </summary>
    public const string BindingPropertyName = "Binding";

    /// <summary>
    /// Gets or sets the value of the <see cref="Binding" />
    /// property. This is a dependency property.
    /// </summary>
    public object Binding
    {
        get
        {
            return (object)GetValue(BindingProperty);
        }
        set
        {
            SetValue(BindingProperty, value);
        }
    }

    /// <summary>
    /// Identifies the <see cref="Binding" /> dependency property.
    /// </summary>
    public static readonly DependencyProperty BindingProperty = DependencyProperty.Register(
        BindingPropertyName,
        typeof(object),
        typeof(FadeyBehavior),
        new PropertyMetadata(null));


    protected override void OnAttached()
    {
        if (AssociatedObject.Opacity != 0.0)
            AssociatedObject.Opacity = 0.0;

        // Create our fade in/out triggers
        var triggerIn = new FadeInTrigger();
        var triggerOut = new FadeOutTrigger();

        // Bind the Binding property in this behavior to the underlying triggers.
        var b = new Binding("Binding") { Source = this };
        BindingOperations.SetBinding(triggerIn, BooleanPropertyTrigger.BindingProperty, b);
        BindingOperations.SetBinding(triggerOut, BooleanPropertyTrigger.BindingProperty, b);

        // Add our triggers to the associated object.
        var currTriggers = Interaction.GetTriggers(AssociatedObject);
        currTriggers.Add(triggerIn);
        currTriggers.Add(triggerOut);

        base.OnAttached();
    }

    protected override void OnDetaching()
    {
        base.OnDetaching();
    }
}

For the time being, I've only had to use this for a boolean property trigger, but it could be expanded into a base class for other trigger types (String, DateTime range, WidgetA, etc.).

You can download the code to mess around with it yourself.

Now Playing - La Roux - In For The Kill

Silverlight Storyboard and FadeIn FadeOut Actions

In my last post I talked about Silverlight Property Triggers and how we could use them to trigger functionality when a property on our ViewModel was a certain value.  The keen observer will have noted that I glossed over a bit of magic that was happening in the StoryboardAction.  Today's post is going to cover how to create your very own StoryboardAction to love and cherish for all time.  Here is a quick re-cap of what our XAML looked like in the last post;

<ItemsControl
    Margin="0 130 0 0"
    HorizontalAlignment="Left"
    VerticalAlignment="Top"
    Opacity="0.0"
    ItemsSource="{Binding Items}">
            <i:Interaction.Triggers>
                <local:BooleanPropertyTrigger
                    Binding="{Binding FinishedLoading}"
                    TriggerValue="True">
                    <local:StoryboardAction>
                        <Storyboard>
                            <DoubleAnimation
                                To="1.0"
                                Duration="00:00:0.7"
                                Storyboard.TargetProperty="Opacity" />
                        </Storyboard>
                    </local:StoryboardAction>
                </local:BooleanPropertyTrigger>
                <local:BooleanPropertyTrigger
                    Binding="{Binding FinishedLoading}"
                    TriggerValue="False">
                    <local:StoryboardAction>
                        <Storyboard>
                            <DoubleAnimation
                                To="0.0"
                                Duration="00:00:0.4"
                                Storyboard.TargetProperty="Opacity" />
                        </Storyboard>
                    </local:StoryboardAction>
                </local:BooleanPropertyTrigger>
            </i:Interaction.Triggers>
                <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border
                Height="30"
                Width="200"
                Margin="0 2"
                BorderBrush="Plum"
                BorderThickness="3"
                CornerRadius="5">
                <TextBlock
                    VerticalAlignment="Center"
                    HorizontalAlignment="Left"
                    Margin="5 0 0 0"
                    Text="{Binding Name}" />
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Today, we added another trigger to fade the items out when we re-load our items.  Then, we are going to encapsulate the fade animations in a new action that will reduce our XAML a little bit.

First, lets take a quick look at the StoryboardAction Source.

using System;
using System.Windows;
using System.Windows.Interactivity;
using System.Windows.Markup;
using System.Windows.Media.Animation;

[ContentProperty("Story")]
public class StoryboardAction : TriggerAction<FrameworkElement>
{
    /// <summary>
    /// Holder for a target setting state.
    /// </summary>
    private bool hasTargetSet = false;

    /// <summary>
    /// Gets or sets the storyboard for this action.
    /// </summary>
    /// <value>The storyboard to run when invoked.</value>
    public Storyboard Story { get; set; }

    /// <summary>
    /// The <see cref="Target" /> dependency property's name.
    /// </summary>
    public const string TargetPropertyName = "Target";

    /// <summary>
    /// Gets or sets the value of the <see cref="Target" />
    /// property. This is a dependency property. 
    /// You can leave this un-set if you want to use the Trigger's 
    /// AssociatedObject as the Target.
    /// </summary>
    public DependencyObject Target
    {
        get
        {
            return (DependencyObject)GetValue(TargetProperty);
        }
        set
        {
            SetValue(TargetProperty, value);
        }
    }

    /// <summary>
    /// Identifies the <see cref="Target" /> dependency property.
    /// </summary>
    public static readonly DependencyProperty TargetProperty = DependencyProperty.Register(
        TargetPropertyName,
        typeof(DependencyObject),
        typeof(StoryboardAction),
        new PropertyMetadata(null));
        

    /// <summary>
    /// Invokes the action.
    /// </summary>
    /// <param name="parameter">The parameter to the action. If the action does not require a parameter, the parameter may be set to a null reference.</param>
    protected override void Invoke(object parameter)
    {
        if (this.Story == null)
            return;

        if(!hasTargetSet)
        {
            // Fall back to the associated object if no target defined.
            var target = this.Target ?? AssociatedObject;
            if (target != null)
            {
                Storyboard.SetTarget(this.Story, target);
                hasTargetSet = true;
            }
        }

        // Stop any previously ran storyboards.
        if (this.Story.GetCurrentState() != ClockState.Stopped)
            this.Story.Stop();
            
        this.Story.Begin();            
    }
}

The important parts of this class are the Invoke logic.  We are doing some basic null checking, then setting the target for our animation to either the Target or the AssociatedObject if no Target was found.  Finally, we make sure the animation is not currently running, then start up our animation.

Extra Snazzy Bonus Implementation Codez


I feel like we are really connecting here, so I'm gonna throw in some extra snazzy bonus material just for you.  Here are some short hand versions of our Opacity Fade Animations that should tame the XAML Monster.

using System;
using System.Windows;
using System.Windows.Media.Animation;

public class FadeOutAction : FadeAction
{
    public FadeOutAction()
        : base(.2, 0.0)
    { }
}

public class FadeInAction : FadeAction
{
    public FadeInAction()
        : base(.6, 1.0)
    { }
}

public class FadeAction : StoryboardAction
{

    public FadeAction(double durationSeconds = .6, double fadeTo = 0.0)
    {
        var anim = new DoubleAnimation { Duration = new Duration(TimeSpan.FromSeconds(durationSeconds)), To = fadeTo };
        Storyboard.SetTargetProperty(anim, new PropertyPath("Opacity"));

        this.Story = new Storyboard();
        this.Story.Children.Add(anim);
    }
}

Now our XAML is looking slightly better.

<ItemsControl
    Margin="0 130 0 0"
    HorizontalAlignment="Left"
    VerticalAlignment="Top"
    Opacity="0.0"
    ItemsSource="{Binding Items}">
            <i:Interaction.Triggers>
                <local:BooleanPropertyTrigger
                    Binding="{Binding FinishedLoading}"
                    TriggerValue="True">
                    <local:FadeInAction />
                </local:BooleanPropertyTrigger>
                <local:BooleanPropertyTrigger
                    Binding="{Binding FinishedLoading}"
                    TriggerValue="False">
                    <local:FadeOutAction />
                </local:BooleanPropertyTrigger>
            </i:Interaction.Triggers>
                <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border
                Height="30"
                Width="200"
                Margin="0 2"
                BorderBrush="Plum"
                BorderThickness="3"
                CornerRadius="5">
                <TextBlock
                    VerticalAlignment="Center"
                    HorizontalAlignment="Left"
                    Margin="5 0 0 0"
                    Text="{Binding Name}" />
            </Border>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Next time, we will create a new FadeyBehavior to encapsulate our fading triggers.

Now Playing - Jay Z, Rick Ross - Hustlin Remix

Silverlight 4 Property Triggers

I spent a little time this week messing around with the newly added Triggers and TriggerActions available through the new Expression Blend 4 SDK.

Triggers and Behaviors are really just ways to attach functionality to an existing element, and the base classes that are included in the newer version of Silverlight 4 really make the job easier.  I'm going to walk through adding a trigger that fires when one of the properties on my ViewModel changes to true.  Now allegedly there is an existing trigger (DataStoreChangedTrigger) that will fire actions based on when a bound property changes, but I want to only fire my actions when my bound property becomes a specific value.

Our Goal

<ItemsControl
    Margin="0 130 0 0"
    HorizontalAlignment="Left"
    VerticalAlignment="Top"
    Opacity="0.0"
    ItemsSource="{Binding Items}">
    <i:Interaction.Triggers>
        <local:BooleanPropertyTrigger
            Binding="{Binding FinishedLoading}"
            TriggerValue="True">
            <local:StoryboardAction>
                <Storyboard>
                    <DoubleAnimation
                        To="1.0"
                        Duration="00:00:0.7"
                        Storyboard.TargetProperty="Opacity" />
                </Storyboard>
            </local:StoryboardAction>
        </local:BooleanPropertyTrigger>
    </i:Interaction.Triggers>
</ItemsControl>

The Codez

[Download the PropertyTrigger Example Source Project and play along at home]

To start out with, I create a base PropertyChangedTrigger class that will do most of the heavy lifting for us.  Essentially, we want to inherit from the TriggerBase<...> generic base class and specify that we want our Trigger to attach to a FrameworkElement (I suppose you could use another type of control class, but FrameworkElement will encompass just about any element with a DataContext, which I find useful).  Our PropertyChangedTrigger will expose a Binding property that will allow us to attach an event handler when our bound property changes so we can invoke our TriggerActions.

/// <summary>
/// A base property changed trigger that
/// fires whenever the bound property changes.
/// </summary>
public class PropertyChangedTrigger : TriggerBase<FrameworkElement>
{
    /// <summary>
    /// The <see cref="Binding" /> dependency property's name.
    /// </summary>
    public const string BindingPropertyName = "Binding";

    /// <summary>
    /// Gets or sets the value of the <see cref="Binding" />
    /// property. This is a dependency property.
    /// </summary>
    public object Binding
    {
        get
        {
            return (object)GetValue(BindingProperty);
        }
        set
        {
            SetValue(BindingProperty, value);
        }
    }

    /// <summary>
    /// Identifies the <see cref="Binding" /> dependency property.
    /// </summary>
    public static readonly DependencyProperty BindingProperty =
        DependencyProperty.Register(
        BindingPropertyName,
        typeof(object),
        typeof(PropertyChangedTrigger),
        new PropertyMetadata(null,
            new PropertyChangedCallback(Binding_ValueChanged)));

    /// <summary>
    /// Called after the trigger is attached to an AssociatedObject.
    /// </summary>
    protected override void OnAttached()
    {
        base.OnAttached();
    }

    /// <summary>
    /// Called when the trigger is being detached
    /// from its AssociatedObject,
    /// but before it has actually occurred.
    /// </summary>
    protected override void OnDetaching()
    {
        base.OnDetaching();
    }

    /// <summary>
    /// Occurs when Binding's value changes.
    /// </summary>
    /// <param name="obj">The obj on which the binding changed.</param>
    /// <param name="args">The <see cref="System.Windows.DependencyPropertyChangedEventArgs"/> instance containing the event data.</param>
    private static void Binding_ValueChanged(DependencyObject obj, DependencyPropertyChangedEventArgs args)
    {
        var trig = obj as PropertyChangedTrigger;
        if (trig != null && trig.ShouldTriggerFire(args.NewValue))
        {
            trig.OnPropertyTrigger(args.NewValue);
        }
    }

    /// <summary>
    /// Does the change logic test. By default, it will always fire on value change.
    /// </summary>
    /// <param name="newValue">The new value.</param>
    /// <returns>True if the trigger should fire, otherwise false.</returns>
    protected virtual bool ShouldTriggerFire(object newValue)
    {
        return true;
    }

    /// <summary>
    /// Called when [property trigger].
    /// </summary>
    /// <param name="value">The value of the property.</param>
    protected virtual void OnPropertyTrigger(object value)
    {
        base.InvokeActions(value);
    }
}

As you can tell, our PropertyChangedTrigger makes use of a virtual method ShouldTriggerFire(…) that will default to just fire everytime a property changes value. Next, we will override our base class to create an EqualsPropertyTrigger that only fires when the value changes to a specific one that we want.

/// <summary>
/// A base class for property triggers that must be equal to fire.
/// </summary>
/// <typeparam name="TValue">The type of the trigger value.</typeparam>
/// <summary>
/// A base class for property triggers that must be equal to fire.
/// </summary>
/// <typeparam name="TValue">The type of the trigger value.</typeparam>
public class EqualsPropertyTrigger<TValue> : PropertyChangedTrigger
{
    /// <summary>
    /// Gets or sets the trigger value to match the property value for.
    /// </summary>
    /// <value>The trigger value.</value>
    public TValue TriggerValue { get; set; }

    /// <summary>
    /// Logic to check whether the trigger should fire.
    /// </summary>
    /// <param name="newValue">The new value.</param>
    /// <returns>True if the trigger should fire, otherwise false.</returns>
    protected override bool ShouldTriggerFire(object newValue)
    {
        if (newValue == null)
            return this.TriggerValue == null;

        return newValue.Equals(this.TriggerValue);
    }
}

So now we have a nice base class for our BooleanPropertyTrigger that makes it's implementation really nice and clean.

/// <summary>
/// A generic object property trigger
/// </summary>
public class PropertyTrigger : EqualsPropertyTrigger<object>
{ }

/// <summary>
/// A Boolean value property trigger
/// </summary>
public class BooleanPropertyTrigger : EqualsPropertyTrigger<bool>
{ }

/// <summary>
/// A string property value trigger
/// </summary>
public class StringPropertyTrigger : EqualsPropertyTrigger<string>
{ }

Now, all that's left to do is hook it up in our XAML by adding the namespace to our trigger and making sure we have a reference to System.Windows.Interactivity (version 4.0.5.0).

Next Steps

Next, we could make a NotEqualsPropertyTrigger that fires when a value is not a certain value. It's implementation would be as easy as inheriting from the EqualsPropertyTrigger and negating the base ShouldFireTrigger(...) method.

Hopefully, like me, you've learned a little about triggers and how they can be useful. For my next blog post I'm going to incorporate the visual state manager and make a GoToStateAction along with talking a little bit about creating the StoryBoardAction you see in the example.

Now Playing - Pretty Lights - Hot Like Sauce