MarkItUp - Thinking Products...

Making Web Parts easier to manage

MarkItUp — Saturday, January 07, 2006 9:31 AM

Adding Dynamic Content

I mentioned yesterday that I've been creating numerous different web parts throughout the course of writing my book on the ASP.NET 2.0 Portal Framework. The web part that I showed in yesterday's article was a part that allowed arbitrary chunks of HTML to be added as content.

Many of the web parts that are included in the book were inspired from web parts that I needed for the next version of SingleUserBlog - which is built on top of the portal framework. Having web parts for all of the dynamic content in SingleUserBlog really gives me a lot of flexibility to add dynamic content to my blog and position it wherever I want.

Hyperlinks WebPart

It would be fair to say that most bloggers have many links that are displayed on their blogs. Heck, even on my simple little blog I have the following groups of links:

My Websites
Blogs I Read
Blogs Using SUB
My Articles
Tools I Use

For other bloggers that I know of it's common to have as many as twenty different categories of links displayed somewhere on the page of their blog. For this reason, one of the first web parts that I built was a web part that allowed me to add hyperlinks and have them displayed on the page. Here's a picture of the web part with links for the blogs that I read:

Custom EditorPart for the HyperlinksWebPart

When I created the HyperlinksWebPart I decided that the data type for storing the custom content should be a custom class that provided a high level of fidelity over how the links are handled. For example, a user should be able to specify some of following attributes for each hyperlink that they add:

Display Title
Url
Description (Optional)
Display Order
Whether or not to open in a new page

Using a complex data type to store the personalization sure provides an easy way to store the data about each hyperlink but complex types do not, by default, get displayed within the property editor when editing a web part. Thankfully the portal framework makes it very simple to associate custom user interface elements with a web part by simply overriding a method named CreateEditorParts and returning a class that knows how to create an editing interface for a particular type of web part. By doing this you are able to provide a totally custom solution for managing the data for a web part. For example, you could display a visual tool such as a map to allow a user to choose which region to display weather information for in a weather web part instead of having to manually type a location name.

The following image shows the user interface that I created for the Hyperlinks web part so that I could easily add new links or delete existing ones:

The custom EditorPart that I created is titled "Manage Links" and sits within the existing EditorZone. All of the existing EditorParts that ship with ASP.NET 2.0 can also be displayed within the EditorZone to allow users to manage more "generic" web part properties such as its title, height, width, and chrome type to use.

As you can see, providing custom EditorParts to manage the data in web parts is a great way to make web parts easier for users to manage by providing fields for each property on the custom data type and allowing users to easily delete existing links.

Within the next day or so I'll upload a recent build of SUB V2 and supply the authorization credentials so that people can login and have a play with the new web parts to see how they work for real.

ASP.NET 2.0 Themes and Skinning

MarkItUp — Sunday, November 13, 2005 1:26 AM

One of my favourite features in ASP.NET 2.0 is Themes (in fact I like it so much that I own the domain aspthemes.net) so naturally it's one of the features that I'm hoping to get a lot of mileage out of when writing SUB V2.

Yesterday I showed how, with zero code, I was able to create the Post Categories tree by simply dragging out a TreeView and binding it to an XmlDataSource. Today I'd like to talk about how, by moving all of those style attributes into my themes folder, that I can get a very customizable site.

When you move the style information into a skin file you can optionally give the skin an ID and then refer to it explicitly. The TreeView that I showed yesterday had a pretty simple style so I'd give it a skin ID of something like: "SimpleTree". The power of themes is that I could easily create several other skin ID's and add them to the skin file also and then, at runtime, I could actually allow the user to choose which theme they want to display.

The following image shows how I was able to create 4 different skins for the TreeView based on some out-of-the-box ones that ship with ASP.NET 2.0.

From the developer perspective I was able to do all of this in less than 10 minutes and, from the end-user's view, they will love the ability to easily style the application in whichever way they choose to do.

All of this makes for a very customizable blog when I'm finished with SUB V2.

SUB V2 First Web Part - Post Categories

MarkItUp — Saturday, November 12, 2005 7:03 AM

Today I worked on the "Post Categories" web part which can be seen in the following image:

The picture shows me dragging the web part to display it elsewhere on the page.

This web part is a pretty simple beastie, in fact here is the actual web part code (all of it):

<asp:TreeView ID="TreeView1" runat="server" SkinID="CategoryTree"
    EnableViewState="False" DataSourceID="TreeNodeDataSource" >
    <DataBindings>
        <asp:TreeNodeBinding DataMember="treenode" NavigateUrlField="navigateUrl" TextField="text" />
        <asp:TreeNodeBinding DataMember="treenodes" Text="Post Categories" Value="Post Categories" />
    </DataBindings>
</asp:TreeView>

<asp:XmlDataSource ID="TreeNodeDataSource"
    runat="server"
    DataFile="~/Data/Categories.xml"
    TransformFile="~/Data/CategoriesToTreeNodes.xsl" />

The control uses the existing Categories xml file and an XSL transform to create a hierarchical XML document which is then bound to a TreeView control via the XmlDataSource control.

Not bad for a fully functional, totally dynamic control that can be dragged around the place at runtime eh?

Web Parts in SUB V2

MarkItUp — Friday, November 11, 2005 1:23 PM

The other day I mentioned that I had plans to integrating some portal features into the new version of SingleUserBlog and today I'd like to share some of that vision. At the moment I'm actually writing a book on the topic of portals and web parts so, I'm actually using some of the samples that I've prepared for the book in SUB - it's been a great way to get some useful, real work examples and the two activities form a nice, symbiotic relationship.

A couple of the features that have been asked for involve exposing additional data about site metrics - such as popular pages, recent comments, etc. In the new version I'm building some new indexes to cater for the storage of this information and will be exposing each individual "report" as a web part. This means that I will start out with things such as:

Most Popular Posts Web Part
Recent Comments Web Part
Post Count By Month Web Part
Post List By Month Web Part (connects to Post Count By Month Web Part)
Daily Links Web Part
etc

The web parts would sit in a custom Gallery (CatalogZone) named "Site Tools". This means that the site owner can dynamically choose which of these parts to display (and where!) at any given time. Parts can be added to or removed from a page at runtime to change the information that is displayed to visitors of the site.

The "Site Tools" gallery is extensible in that it also "probes" the filesystem and adds parts that are added - think of this as being similar to having a plug-in architecture. What this means is that it becomes very, very simple to dynamically develop and upload new web parts.

You can view the current list of feature requests and add your own items to the comments of my original post about the new blog engine which is located here.

MasterPage and Themes: Done!

MarkItUp — Tuesday, November 08, 2005 12:03 AM

I got a good slab of work done on SUB V2 last night; here's a picture of the current state of it:

As you can see, the base theme will stick with the 3-column layout and I have included WebPartZone's on both the right and left column. The right column will also contain the web part editor, catalog, and connections zone.

I'm hoping to have the code for managing posts brought across today so there is some chance of a very early beta by the weekend.

Today I started the new version of SUB

MarkItUp — Monday, November 07, 2005 11:35 AM

Yup, I started it today:

I'll describe some of the features - especially my plans for the Web Parts - a bit later. Remember, if you have any special request, send 'em through!

SUB V2.0

MarkItUp — Friday, November 04, 2005 12:54 PM

If it wasn't for the fact that I'm writing an ASP.NET V2 book I would have done this already but, I've received so many emails about it that I just have to get around to it... I'm going to create an ASP.NET V2.0 version of SingleUserBlog. All of the obvious things will be present:

Master Pages
Themes
Navigation API
Web Part Framework

Here's my question for you: What features would you like to see?

Speak now.