Expression Web 3 for the ASP.NET Developer (First Glance and Tutorial)


In previous years, I would have kept up with what was going on in Expression Web from the get go. But, this year, with so many new technologies, I have largely stayed in the background and ignored what was going on in this space. This blog entry is a quick whirlwind tour through Expression Web 3 from the eyes of someone experienced in web design.

Tutorial

This section is designed to show what I did to play with Expression Web 3. The next section are my feelings on the product (although i have some nice comments to interject, I am sure).

Create a New Site

The first step in new web development is creating a new site. So, I open Expression Web 3 and click File >> New and see the following:

File.New

What, no new site on the menu? Hover around for a bit and I find the means of creating a new site is found on the buttons underneath the menu.

NewSite

That is not so bad, but why complete neuter the menu of the creation of a new site? This has been a standard in web applications for quite some time and is how I would do things in Visual Studio. Fortunately, Cheryl got this before I tweeted and pointed out this blog post. There is a new Site menu in Expression Web 3. You find it in the middle left of the menu. You can find Cheryl’s review of new features at http://by-expression.com/content/ExpressionWeb3.aspx.

Add a Configuration File

As this is an ASP.NET website, it needs a configuration file. To do this, you choose File >> New >> Page … The next step is to choose ASP.NET in the left most panel and then Web Configuration 3.5. The dialog to choose the configuration file is found below:

newCOnfig

Create a SiteMap

This is not necessarily a second step in a .NET application, but I want to be able to play with the menu I am going to throw on a master page, so first step is to create a site map. To do this, choose File >> new >> Page … then the ASP.NET tab and then Site Map. I then edit the three nodes to end up with something like this:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="
http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
    <siteMapNode url="default.aspx" title="Home"  description="Home Page">
        <siteMapNode url="about.aspx" title="About"  description="About us" />
        <siteMapNode url="contact.aspx" title="Contact Us"  description="Contact Us" />
    </siteMapNode>
</siteMap>

Create a Master Page

As I work with .NET, this is my general first option for pages. The only way to create a master page is to use File >> Page… and then chose master page in the dialog, as we have before with config and site map. After I create the file, I am going to add a menu above the content area. The menu control is in the toolbox under ASP.NET Controls >> Navigation. Here are the steps to link things together.

  1. Drag the menu control on the page above the content area and choose new datasource

    AddSiteMap

  2. You will now get a popup. Whether you ignore this or not depends on how you want the control set up. I would personally leave it off, as you can edit in the code view by clicking on the asp:SiteMapDataSource tag. Having it in design view is a pain. You can turn it off again unde rthe view menu. Just unchecked the highlighted option.

    TurnOffVisual

  3. The first property you are going to want to set is the StaticDisplay Levels. You do this by going into Tag Properties and choosing 2 for StaticDisplayLevels (found under Behavior) – You can separate it from the side, as I have below, by double clicking on the header. This makes it a free floating window. Useful when you don’t have a lot of resolution, as I have on this particular box.

    TagProperties

  4. You will also want to change the menu to horizontal (Layout >> Orientation).
  5. Done with adding a menu to a master page. Now add the SiteMapPath and link to the same site map. Notice that I have the site map data source visible (see point 2 for how to turn it off).

    MasterPage 

Yes, this is an extremely easy (and ugly) master page. There are a couple of things I notice that I am not too fond of right now.

 

Add Pages

I need to add 3 pages

  • default.aspx
  • about.aspx
  • contact.aspx

To do this, I can either choose File >> New or click the left most icon underneath the menu. I then select Create From Master Page. I now see one of the features I wish they had added that is missing. To make things easier, you can specify a default master page. I have suggested in the past that Microsoft add the option to save the master as a default, or right click and make default. As the tool is used by non ASP.NET developers, it is not critical, but it makes things much easier for newbs. Even if this was not an option by right click or when saving a master page, it would be nice to add “Make default” when you select a master page, or at minimum select the master if there is only one in the project. Points off for this one still being like this.

Point of irritation 1: The damned visual aid popup that pops up with every page.

VisualAidPopup

Every time I add a page with my master, this popup comes up, as the page is linked to a page with a master with a non-visual control on it. This would absolutely annoy the crap out of me if I was building a larger site (for the record, I would normally create the site layout in Visual Studio).

Point of Irritation 2: Content areas not automatically added to pages. When you first start a page from a master, it looks like this:

<%@ Page language="C#" masterpagefile="site.master" title="Untitled 1" %>

To actually implement the page, look for the smart tag on the side of the content placeholder and choose Create Custom Content.

CreateCustomContent

The page now looks like this, in code view.

<%@ Page language="C#" masterpagefile="site.master" title="Untitled 1" %>
<asp:Content id="Content1" runat="server" contentplaceholderid="ContentPlaceHolder1">

</asp:Content>

Much better. I had really hoped they would fix this, as well, in Expression Web 3, as this is a useless extra step in the process of creating a page. At least give the option to implement content regions.

Code Behind

Expression still does not handle code behind. If you want code in your page, you have to do it like this:

<script runat="server" language="C#">

    protected void Page_Load(object sender, EventArgs e)
    {
        //Page set up here
    }

</script>

I personally think this is very yucky. It even makes me feel dirty to do it this way. So, what about round tripping, etc. Let’s create a file in Visual Studio. Look, it creates the content placeholder regions for me (no  need to click on each one):

<%@ Page Language="C#" MasterPageFile="~/site.master" AutoEventWireup="true" CodeFile="CreatedInVS.aspx.cs" Inherits="CreatedInVS" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
</asp:Content>

I then go back to Expression Web and there is no refresh on the folder. But, I can right click and go to properties and have it refresh for me. As expected, Expression still shows the C# file in the folder list. No improvement here.

FolderList

Toolbox for ASP.NET

The Toolbox is pretty much the same as it was in previous versions. One thing I noticed right away, however, is Silverlight 2.0 controls are a link (see below). Clicking on the link takes me to an MSDN page that describes the beta controls for Silverlight 3.
Toolbox

First, that page does not help me at all. I am sure this was missed in QA, but it is kind of stupid to send someone to a site that does not even tell them how to add the Silverlight controls to Expression. In Expression 2, the controls were here, but now I have a link that takes me to a page that really has NOTHING to do with Expression. If you are trying to educate me here, why not links for all ASP.NET controls? Rant off.

It turns out the controls are in the toolbox. Scroll up to HTML and the Media.

Toolbox2

Here you can add Deep Zoom, Silverlight and other media files. But, did they do it right? My answer is … yes. in Expression Web 2, it was such a pain to add Silverlight bits. Fortunately, with Expression Web 3, it is fairly easy. Just select a media file and the encoder pops up and allows you to encode it for the web. I am going to have to play with the rest of the controls here to see if they are as easy to use. I will blog that one later.

Super Preview

Now that I have a page, I can preview. My first thoughts of Super Preview are it should be called Super Slow Preview, as it takes an awfully long time, As my page has nothing on it, there is no use on screen capturing it. I will, instead, show my blog site.

superPreview

This is a fairly neat feature. Being able to see sites either side by side or on top of each other is useful. If you click on an item in one panel, it is highlighted in the other. My biggest issue is it is little more than a preview. I can certainly click on the DOM and see what I am working with, but that is about it. Here are a couple of suggestions I have for a new version (yes, I probably should have been involved in the beta):

  • Allow changing of DOM elements in preview, as you can currently do in Internet Explorer 8.
  • Have a CSS view along with the DOM view
  • Allow a person to traverse more easily to the CSS (double clicking in DOM view?)

I think SuperPreview is a nice addition, but the main value I see in it is finding differences from one browser to another. As there are other tools that allow me to actually fix things, even if I have to pop back and forth from IE to Firefox (I actually do not as there are add ins for that, as well).

Feelings Thus Far

Other than adding a few controls, Expression Web has not made many strides for the ASP.NET developer. Here are some points:

  1. There are no web templates for ASP.NET sites built in
  2. You have to manually edit the web config for simple things, like default master page (although there are tools for editing these files elsewhere in a visual manner – IIS for example)
  3. The content regions in master pages are not implemented automatically, forcing you to do a little song and dance for every page.
  4. There is no option to turn off warnings when you have invisible controls on a master page (yes, this one got me enough to state it twice)
  5. They moved things off the menu and on to a button bar. Why not in both places? I have no clue
  6. There is still no option for a code behind file and adding one shows the code file in the designer.
  7. There is no straightforward refresh button when moving back and forth from Expression to Visual Studio

Let me touch on a couple of points:

On point 6: The story Microsoft sells at MIX and other events is we have Expression for designers and Visual Studio for developers. Hey, I get that. But if my designers are creating a lot of pages that force me to write all of my code in the pages, it is not a good thing. And, if I add the code behind files (or initially set up the site), they see the code files as a separate file. What are you guys thinking here?

Summary

Overall, Expression Web 3 is a nice release. The addition of the Encoder and Design to web makes the package more attractive and make it, in my opinion, well worth the price of admission ($159 or $79 upgrade).

On the plus side, SuperPreview is a good way to see your results in multiple (as in 2) browsers and see what is different. i wish it were more, but I will take it for a 1.0 release of a feature. The Silverlight and media bits are also very nice additions, as it was a royal pain in Expression Web 2. I do think you might be in a tight box with this feature, but I will have to play to make sure. I am sure there are other PHP bits, as well, but I am not a PHP developer (at least not now), so this is not a big thing for me. I have yet to play with the import PhotoShop bits, but I can see how they add something for designers, as I have designed in PhotoShop before.

I am not particular fond of the neuvo look (all black and grey), but I guess it fits the suite better.

On the negative side, the developers have not done much for ASP.NET development. Expression Web 3 is just as clunky as Expression Web 2 in this arena. I might even say a bit worse since the menus have been pushed around, but this is a personal thing. you will have to decide this one. And the extensibility picture is pretty much the same (dismal), although I have heard of possibly fixing this in a service pack or something.

i guess the questions now are: Should I buy? and Should I upgrade?

BUY:
As far as the buying decision, $159 is awfully cheap for a suite like this. Expression Web 3 is a nice editor. My biggest beefs are not taking it too far beyond Expression Web 2, which I also think is a great editor. The CSS support in Expression (any version but 1) is worth the price of admission. Now that Expression has Encoder and Design included, it is a very attractive package.

UPGRADE:
The SuperPreview is probably reason enough for many, although it is not overly compelling for me. Beef it up with something more than a set of visual diagnostics and I am all in. I can see how it is useful, however. For $79, however, the addition of Encoder and Design make it worth the money for me. if I were making that decision (I have MSDN which includes the entire studio). if you prime reason for upgrading is better ASP.NET design and development, you are going to be sorely disappointed, however.

I give Expression 3 a thumbs up, but with caveats (read the blog entry, if you have not).

Peace and Grace,
Greg

Twitter; @gbworld

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: