Expression Blend, HTML5

Discovering Expression Blend 5 – Templates

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.

image

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.

image

The second project template, Fixed Layout Application, adds some basic layout to the blank application.

image

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.

image

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.

image

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.

image

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.

image

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.

image

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.

image

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.

image

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.

image

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.

image

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.

image

 

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).

6 comments

  1. Have you heard mention if Blend 5 will only be an HTML5 editor? I can’t imagine they’d leave out support for the technologies in which it was originally designed for..

  2. Hi Aaron,

    In the installation directory of Expression Blend 5 preview on the developer ISO of Windows 8 there are a lot of .DLL files referring to other technologies. There .DLL files are named pretty much the same as the current version of Blend. I assume there’s a special license in place that prevent these functions from loading or something. But, the files are there. Therefor I am sure that in a future release everything will be working again…

  3. Do you think you’ll write a tutorial for Split or Grid templates? I’m just getting started and would love to make one of each of these to get my feet wet.

    For instance, the Grid Template seems great for photo-related rss feeds, while the Split Template would be good for a rss feed reader for many popular news sites.

    I’d love to see your take on using these cool new templates.

    Thanks,

  4. Just wondering if you know if you can edit templates in blend (that is, repeating items in a grid. when I click on the upper right of the design surface when hoovering over the div, it says “edit template” but then the choices are grayed out. I have not been able to find any docs on this (maybe because everyone but me knows how to make it work).

    Nice blog post!

Leave a Reply

Seo wordpress plugin by www.seowizard.org.
%d bloggers like this: