I call this application - 5Commerce – (an over-simplified) HTML5 ECommerce site. So here’s the flow of the application:
- home page renders
- user enters first and last name, chooses a product and the quantity
- can enter additional instructions for the order
- place the order
- user is then taken to another page showing the order details
Off to the details. This is what my page looks in Google Chrome 10 beta (or later) soon after it renders.
Here are some of the things to observe on this.
- Look a little closer and you’ll see a border around the first name textbox – this is ‘autofocus’ in action. I’ve set the autofocus attribute on this textbox. So as soon as the page loads, this control gets focus.
- See a partially grayed out ‘last name’ text in the second textbox. This is set using a placeholder attribute (see above). It gets wiped out on-focus and improves the UI visuals in general.
- The quantity textbox is actually a numerical-only textbox.
- The last line is for additional instructions. This looks like a label but it’s content is editable. Just adding the ‘contenteditable’ attribute to the span allow the user to edit the text inside.
This is the doctype declaration in HTML5 and this is supported even by IE6 (just take my word on IE6 now, don’t go install it to test it, especially when MS is doing an IE6 countdown). That’s just amazing and extremely easy to read remember and talk about a few less bytes on every call! I modified the rest of my _Layout.cshtml to the below:
I’m sure you’re seeing some of the new tags here. To give a brief intro about them:
<header>, <footer>: Marks the header/footer region of a page or section.
<section>: A logical grouping of content
role attribute: Identifies the responsibility of an element. This attribute can be used by screen readers and can also be filtered through jQuery.
SP1 also allows for some intellisense in HTML5.
You see the other types of input fields – email, date, datetime, month, url and there are others as well.
So once my page loads, i.e., ‘on document ready’, I’m wiring up the events using jQuery. In the snippet below, I’m controlling the behavior of the input controls for specific events.
This enables some client-side validation to occur before the data is sent to the server.
These validation constraints are obtained through a JSON call to the WCF service and are set to the ‘data_’ attributes of the input controls. Have a look at the ‘GetValidators()’ function below:
Just before the GetValidators() function runs and sets the validation constraints, this is what the html looks like (seen through the Dev tools of Chrome):
After the function executes, you see the values in the ‘data_’ attributes.
As and when we enter valid data into these fields, the error messages disappear, since the validation is bound to the blur event of the control.
There you see… no error messages (well, the catch here is that once you enter THAT name, all errors disappear automatically). Clicking on ‘Place Order!’ runs the SaveOrder function. You can see the JSON for the order object that is getting constructed and passed to the WCF Service.
The service saves this order into an XML file and returns the order id (a guid). On success, I redirect to the ShowOrderDetail action method passing the guid. This page will show all the details of the order.
Although the back-end weightlifting is done by WCF, I did not show any of that plumbing-work as I wanted to concentrate more on the HTML5 and its associates. However, you can see it all in the source here.
I do have one issue with HTML5 and this is an existing issue with HTML4 as well. If you see the snippet above where I’ve declared a textbox for first name, you’ll see the autofocus attribute just dangling by itself. It doesn’t follow the xml syntax of ‘key="value"’ allowing users to continue writing badly-formatted html even in the new version. You’ll see the same issue with the ‘contenteditable’ attribute as well.
The work-around is that you can do ‘autofocus=”true”’ and it’ll work fine plus make it well-formatted. But unless the standards enforce this, there will be people (me included) who’ll get by, by just typing the bare minimum! Hoping this will get fixed in the coming version-updates.
Verdict: I think it’s time for us to embrace the new HTML5. Thank you HTML4 and Welcome HTML5.