Joe Levi presents Greener Living through Technology

The Maimed Leech has been monitoring blogs for people’s impressions of what is happening at MIX07 and has collected a pretty good list. Head on over and check it out!

Define: Patterns

According to Wikipedia, a pattern is a generally repeatable solution to commonly occurring problem in software design.

Further, patterns are subdivided into two groups, foundational patterns and user experience patterns.

Welcome “Back” Again (or “Logical Navigation”)

AJAX is great, but sometimes people implement AJAX in such a way that is disables the ambiguity of the UI that web users have gotten used to, in particular the Forward and Back paging functionality of the web browser.

But what about when a user makes a click on your webpage that does something akin to either resubmitting the page (ie, a traditional postback), or a virtual new page (even though they’re physically on the same page)? Shouldn’t the back button still work? Shouldn’t they be able to click the back button and effectively undo the last navigation that they performed?

Of course the answer is yes. Functionality should not be removed with the addition of features. That’s something to remember with any project: user experience is paramount.

Introducing the “History Control”

A late-comer to the ASP.NET AJAX offerings, the History Control adds history functionality back into AJAXified web apps — finally!

This also allows for links to be saved or bookmarked, and return the user back to the state of the AJAXified web page.

Graceful degradation

What if someone visits your site and they have javascript disabled? Will your pages still “work”? They should. True, the experience won’t be the same as with full scripting enabled, but they should still have access to all your content, just in a “basic” way (rather than a “rich” way).

ASP.NET AJAX Futures

Yes, this does require an update to your installed ASP.NET AJAX. This update, released today, is available from here.

Should All Postbacks invoke history?

In a word: no.

This addition to ASP.NET AJAX allows you, the developer, to determine how history should be handled.

Should an accordion panel change (viewing, let’s say, item 4 of 7 in its expanded view and all the other items collapsed) register as a historical event in the browser? Probably so, this allows your users to click the back button and go back to the prior accordion item that they viewed; it also allows them to bookmark their current viewstate on the current page. (It should be noted that this is NOT their session state, but simply a representation to the way the current page is being displayed.)

Should the back button be enabled when your user submits a comment from a comment form? In other words, do you want your users to be able to submit a comment via a web form, then postback asynchronously and view their comment, and be able to hit the back button and view the submit form again? Probably not. This would not only be counter-intuitive, but it also invites comment spam.

Bottom line: it’s up to you, the developer. The slate has been washed clean and now you can determine the behavior of your AJAX page’s history. Just, please, do it intelligently.

Animation Patterns

If you use animations as update cues (fading a background color from yellow to white to draw attention to the user’s newly submitted post, for example), whatever timing you use in development, when you publish your solution, half it… or more. There’s nothing more annoying that waiting for something to happen, that you just spent a lot of time speeding up with AJAX (yeah, it sounds kind of silly when you put it that way, doesn’t it?).

Silverlight and Degradablity

Silverlight uses javacript to render its content. But what if the user doesn’t have javascript turned on? Well, to be truly degradable, the content needs to be viewable even if scripting can’t “pretty up” your content (not only that, but search engines can’t crawl inside “prettied up” content, right Flash?). So how do we handle that? Luckily Silverlight should handle this for us.

After the Silverlight OBJECT tag is a dynamically written div tag with display: none. Then the “non-pretty” version of the page is presented in the code (but hidden by the div style), then the closing /div is dynamically written. If you’re not using Silverlight, make sure you do that with your AJAXified pages. Don’t send an empty page to the user, requiring another server call (even if it is asynchronous). Present the data to your users on the initial load (even if they can’t see it because it’s hidden from view).

Therefore, if your user doesn’t have javascript turned on, they still will see your content, not a blank page (a la Flash).

What’s new in Visual Studio “Orcas”?

A new feature in Orcas is the ability to “multi-target” the application that you’re creating. You can select .NET Framework 2.0, .NET Framework 3.0, and .NET Framework 3.5. Accordingly, the project types that are not compatible with the framework that you selected are not shown in the Templates view.

Overall, the look and feel of the IDE is the same as VS2003, which is a nice thing for those of us who like to be comfortable with our programming environment, and feel that radical changes to UI are typically more distracting than helpful (of course there are exceptions to that rule).

Framework 3.0 comes with an AJAX Master Page template… that needs more investigation…

CSS

Orcas handles CSS beautifully!

They have added a “Manage Styles” panel that allows you to see how your styles are decorating elements and lets you click on styles in the list to preview what the selected element will look like with a given style decorating it.

You can create a new style rule on the fly in the document that you’re working in by using a wizard of sorts, but that’s not good practice; CSS rules should be separate from content, in a separate .css file. No problem, just drag and drop your rule into the .css file that you want and your .css file is automatically updated! And if you have a specific way that you want your .css to look, set your Style Application from “Automatic” to “Manual” in the toolbar. Sweet!

New file type: LINQ to SQL

Creating a new file based on this new file type you can use your Server Explorer panel to drag and drop tables from your SQL databse into the design canvas.

The IDE automatically recognizes relationships between the tables and represents this graphically.

This then creates a new .cs codebehind file that adds a series of classes that allow the LINQ to SQL link (no pun intended).

Here’s how easy it is to grab data from a LINQ to SQL:


PhotoAlbumDataContext db = new PhotoAlbumDataContext();
var result = from a in db.Albums select new { Name = a.name, Count = a.Photos.Count };
GridView1.DataSource = result;
GridView1.DataBind();


Now, a GridView is (by definition) a table. That’s not cool unless you’re actually representing tabular data. So, let’s use a ListView instead of a GridView.

<asp :ListView ID="ListView1" runat="server" >
<layouttemplate>
<ul id="itemcontainer" runat="server"></ul>
</layouttemplate>
<itemtemplate>
<li>< %# Eval("Name") %>, < %# Eval("Count") %></li>
</itemtemplate></asp:ListView>

(Of course, you’ll also want to modify your codebehind to databind to the new control.)

New datasource control: LINQ DataSource

The closest thing that I can compare this to, is an actual SQL DataSource, where you’re representing a SQL View from the database, only without a view existing in the SQL database. The LINQ lets you create that “view” via LINQ code.

ASP.NET AJAX

ASP.NET AJAX comes native to ASP.NET 3.5, no add-ins needed (which is a thorn in my side with ASP.NET 2.0).

UpdatePanels ROCK! Wrap whatever you want to asynchronously update within an asp:UpdatePanel and you’re done! With a paged data view (a dataview, repeater, listview, etc.) that has paging (ie, several pages of data are present but only one page is displayed at a time, with the ability to page through the additional data with a pager navigation element) you can view the next and previous pages asynchronously (only the area inside the UpdatePanel is updated, not the entire page!). Wow. Talk about fast!

Intellisense for Javascript

Finally, javascript has intellisense, with new icons to represent variables, methods, functions, etc. Nice!

This works for both inline scripts as well as external .js files. Now, what’s really cool, say you’re working in a .aspx file and have referenced an external .js file, as you’re writing javascript inside the .aspx file, all of the methods inside the external javascript file are represented in intellisense! Including (data) typing!

Javascript Commenting

/// <summary>Type your summary here</summary>
/// <param name="path" type="string">Optional parameter&;lt;/param>
/// <returns type="date" />

Utility Classes

But what if you want to have intellisense across separate .js files?

Add a util.js file (what goes in that?? I’ll have to research that and get back to you).

Then add something like this to the top of the .js files that you want to share the intellisense across.

/// <reference path="util.js" />
/// <reference name="MicrosoftAjax.js" />

Script Manager

Nothing new here, just remember to put all your script references in your ASP.NET Script Manager control to make sure everything is initialized in the right order.