At the BUILD event a lot of great applications were released. The big one of course was the Windows 8 preview. One of the released ISOs contains a couple of preview version of development tools. Expression Blend 5 preview is one of them.   This preview of Expression Blend 5 doesn’t let you create Silverlight, WPF or Windows Phone 7 apps. Instead it does what a lot of people where hoping for: Editing/Designing Html5, Css and JavaScript.

Project Templates

The first thing to notice are the new project templates. There’s only one category in the preview: Windows Metro Style. The category contains 5 templates. All templates help you getting started creating Html applications for Windows 8 in Metro style. The Language and Version dropdown lists only contain one element in the preview version. I assume these will grow over time, when Silverlight, WPF and WP7 return. The Blank Application template creates a solutions with only the minimal elements needed. The designer shows a tablet-shape around the surface, like you might be used to when working on Windows Phone 7 applications. The solution contains a couple of Css and .Js files needed for the Metro Style. A manifest file is also added which defines what is needed to run the app on Windows 8. The second project template, Fixed Layout Application, adds some basic layout to the blank application. The Grid Application template is where things get a lot more interesting if you’re just starting writing these kinds of apps. This template contains a couple of .Html files glued together (I might dive into this in a later tutorial) with html attributes. It's a basic starting point a grid application and contains some navigating from master to detail views. The Navigation Applications template creates a solutions which looks a lot like the last, but blank. The basic Html elements are in place. This would be a great template to start you applications. The last template, Split Application, create a more complex solution again. It demonstrates how to create a master/detail application showing the master and the details side by side.

Item Templates

Besides new project templates, there are new Item Templates too. Adding new files to the solution is something you would to in an Html/JavaScript application too, right? Besides a basic JavaScript File, Style Sheet or Html page, there some templates that will help you develop your Windows 8 applications faster. The Landing Page adds a Html page, a Css file and a JavaScript file to the solution. The page contains a header with a button and a title and a section containing a list. Again, the data is defined in the JavaScript file. The JavaScript code wires thing up to create an interactive page. The Split Page template shows a lot of resemblance with the Split Application project template. The item template adds a Html file to the solution defining the layout of the page. A Css file is added for the styling and a JavaScript file is added which contains the code to make things interactive. The JavaScript code is responsible for creating the sample data too. The Collection Page item template defines a large item and a list of smaller items. Again a Html, Css and JavaScript file are added to the solution. It should be pretty easy to extend the JavaScript code and make the small items navigate to different pages in the solution. The Category Page template adds a page with a horizontal list of images with some details below them. The JavaScript file that is added is pretty much the same as the ones in the previous templates and again, it should not be hard to modify and extend this code to add navigation to the page. The Html Fragment adds an almost empty page. It contains the most basic styles and elements for a Metro style application. The JavaScript file that is added contains only a few lines of code handling the fragmentLoad event. The Details Page contains a large text over multiple columns. The JavaScript file that goes along with this template initializes the page and fills it with sample data.   That’s it for the templates.

Wrap-up

Although this first preview of Expression Blend 5 only does Html, I think it’s moving in the right direction. Looking at the .Dll files in the root directory of Blend reassures me that the future will bring everything we’re used to back to one of my favorite tools. Great job Expression Blend team! Keep up the good work. For future tutorials on Expression Blend (and I’m sure many will follow) please subscribe to the rss feed or follow me on Twitter (@Sorskoot).