CSS/HTML

Setting up an Optimised Deployment Version of your AJAX ASP.Net Application

Eden Ridgway — Mon, 28 Jan 2008 04:02:57 GMT

With rich AJAX web applications one needs to look at optimising resources such as your CSS, JavaScript and image files. Yahoo has collected together a great collection of best practices that have been put into their YSlow Firefox extension. These should be taken as a guideline and not gospel. In general however the core principals are as follows:

Keep server roundtrips to a minimum. The techniques for the various resource types are as follows:
- JavaScript - combine them into a single file if possible. One has to make certain they are combined in the correct order in the file.
- CSS - again merge them as far as possible.
- Images - Use CSS sprites where one combines several images into one and uses the background image offset to display the one you are after. To create the sprites you can always use this online sprite generator.
Reduce the size of each request. This is done in two ways:
- GZip/Deflate compress text resources by configuring IIS and/or using an ASP.Net HTTP Module.
- Reduce file sizes. The tools I use for each type are:
  - JavaScript - Jazmin provides pretty good minification by removing whitespace. If you want better minification then you should take a look at the Dojo ShrinkSafe compressor which will shorten the name of local variables and functions to reduce the file size even more. The downside to this is it makes troubleshooting a production issue more difficult.
  - CSS - CSSTidy not only reduces whitespace but optimises the CSS expressions as well.
  - Images - As PNGs are my image format of choice I use PNGGauntlet to reduce the image file size.
Ensure resources are cached. If you know that the files are going to change infrequently then all you have to do is set IIS to enable content expiration for a folder/file to expire after a set number of days, say 10. This will ensure that the client browser caches the resources and does not re-download them. However depending on the frequency of your deployments and your server architecture you most likely want to ensure that your etags are setup correctly. These are used to indicate whether or not the cached browser resources have changed. When loading a page the browser will send a request to the server, with the etag, for each resource and if it has not changed then the server will only return a 304 status code. Note that this advice is contrary to Yahoo where they tell you to remove etags for a web farm scenario. What you should rather do is ensure that the etag change number is the same for each server in the web farm. This ensures that the etag generated for the same resource on a different server is the same (how to do this varies depending on your version of IIS - read this post for more IIS6 information). If you are using a single web server however the whole this is a non-issue for you.

Okay so we know we want to combine and minify our CSS and JavaScript files when we deploy to our test, staging and production environments, but we don't want to develop and debug our applications with monolithic files with no whitespace and cryptic names. The problem is that our pages contain references to these files and we are merge them them together for deployment our references will now be incorrect. Well this is quite easily solved using compiler directives, like so:

<% #if DEBUG %>
    <script type="text/javascript" src='<%= ResolveUrl("~/JavaScript/File1.js") %>'></script>
    <script type="text/javascript" src='<%= ResolveUrl("~/JavaScript/File2.js") %>'></script>
    <script type="text/javascript" src='<%= ResolveUrl("~/JavaScript/File3.js") %>'></script>
<% #else %>
    <script type="text/javascript" src='<%= ResolveUrl("~/JavaScript/Section.minified.js") %>'></script>
<% #endif %>

For CSS files you can either use the directives around alternative <link> elements or around @import statements, like this:

There is a catch to this however, since the aspx pages are compiled separately, setting your application to compile as a release build will not cause the references to change. What you need to do is change the compilation setting in the application web.config file, which should be set to debug="false" in the production environment:

Now on to the merging and minification. This could be accomplished using MsBuild or a batch file, but a batch file is simpler, so I'll discuss that. On one of the build steps for the web site(s) invoke the batch file which then ensures that the optimised files are always up to date. So you want to add something like this to your pre/post build compilation step in the project property window:

I setup the "Build Scripts" folder to contain the optimisation programs as well as text files with lists of files to merge, for example:

You'll notice that I group the JavaScript files on the site by Section of the site and not by page. The granularity of file grouping really depends on the application, but by section or function is a pretty good starting point. Each line of the file will contain a file name, like this:

SubDir\File1.js
SubDir\File2.js

I don't need to specify the full relative path of the files, in respect to the build folder because when I develop web sites all JavaScript files are placed within a JavaScript folder off the root of the web site.

In my simplified scenario the "Optimise Web Resources.bat" batch file contains the following:

set OLDDIR=%CD%

:: Change to the current directory
cd /d %0\.. 

::Ensure there are no old temporary files lying around 
del *.js
del *.css

::Create a single file for the JavaScript in the admin section
for /F "tokens=*" %%f in (AdminJsFiles.txt) do call type "..\Web Sites\Site\JavaScript\%%f" >> AdminCombined.js
type AdminCombined.js | jazmin > AdminCombined.minified.js
copy AdminCombined.minified.js "..\Web Sites\Site\JavaScript\AdminCombined.minified.js"

::Combine the Stylesheets into a single file
for /F "tokens=*" %%f in (CssFilesToMerge.txt) do call type "..\Web Sites\Site\CSS\%%f" >> CombinedStyles.css
csstidy.exe CombinedStyles.css --template=high CombinedStyles.minified.css
copy CombinedStyles.minified.css "..\Web Sites\Site\CSS\CombinedStyles.minified.css"

::Remove the temporary files
del *.js
del *.css

::Restore the old "current directory" 
chdir /d %OLDDIR%

The one part of the batch file that confuses most people is the FOR /F "token=*" statement. That reads in a line at a time from the file specified in brackets and puts it in the %%f variable. The contents of each file is then appended into a single file using a "type SourceFile >> DestinationFile" statement. In the case of the JavaScript files they are then piped through the Jazmin compressor/minifier, the output of which is redirected in an output file, i.e. AdminCombined.minified.js. With the CSS files, the command line syntax is a little different, but the outcome is the same.

Hopefully the rest of the batch file is pretty self evident and there is enough information here to get you started on implementing the approach yourself. If there are areas that need more explanation please leave a comment on the blog post.

Using ASP.Net AJAX WebServices (ScriptServices) in ExtJS

Eden Ridgway — Tue, 09 Oct 2007 05:19:34 GMT

I've only just started investigating ExtJS and what it can possibly provide over and above the ASP.Net AJAX framework. The first thing I wanted to do was use the ASP.Net AJAX JavaScript webservice proxies instead of the expected REST style services. Unfortunately I ran into several problems and ended up using a slightly different approach to what I found on the ExtJS forums. Let me quickly outline the problem. In ExtJS they use a store wrapper for their data which is assigned to a grid panel. This store object may also know how to fetch external data that it needs via a proxy, which is defined like so:

var ds = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy(
         {
          url: '/WebServices/OrderService.asmx/GetOrders',
          params: { userId: getUserId(), day: new Date() }
         }),
    reader: new Ext.data.JsonReader(
        {
           id: 'WorkDoneId'
        },
    ...
});

Unfortunately, try as I might to get this to call my web service (and I tried quite a few different approaches), I would get errors returned by the service. It may have been that unlike all the examples I had seen on the web, like Daniel Larson's my service calls actually needed to send parameters through to the service. One was to add additional properties to the ScriptMethod attribute on the web service like so:

[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true, XmlSerializeString = false)]

I also tried using the ASPProxy class found on this forum post. This also didn't work properly and there were a few minor irritations with the code. It all seemed pretty silly since with the ScriptManager service reference I had a client side proxy that I knew would work properly. So I created the AspWebServiceProxy object that would allow you to simply pass in a reference to the client side web service proxy object and method and use that:

AspWebServiceProxy = function (conn)
           {
              AspWebServiceProxy.superclass.constructor.call(this);
              Ext.apply(this, conn);
           };

Ext.extend(AspWebServiceProxy, Ext.data.DataProxy,
{
     load : function (params, reader, callback, scope, arg)
            {
               var userContext = {
                                    callback: callback,
                                    reader: reader,
                                    arg: arg,
                                    scope: scope
                                 };

               var proxyWrapper = this;

               //Handles the response we get back from the web service call
               var webServiceCallback = function(response)
                                        {
                                            proxyWrapper.loadResponse(response, userContext);
                                        }

               var serviceParams = [];

               //Convert the params into an array of values so that they can be used in the call (note assumes that the properties on the object are in the correct order)
               for (var property in params)
               {
                  serviceParams.push(params[property]);
               }

               //Add the webservice callback handlers
               serviceParams.push(webServiceCallback);
               serviceParams.push(this.handleErrorResponse);

               //Make the actual ASP.Net web service call
               this.webServiceProxyMethod.apply(this.webServiceProxy, serviceParams);
            },

     handleErrorResponse : function(response, userContext, methodName)
                           {
                              alert("Error while calling web service method:" + methodName + "\n" + response.get_message());
                           },

     loadResponse : function (response, userContext, methodName)
                    {
                        var result = userContext.reader.readRecords(response);
                        userContext.callback.call(userContext.scope, result, userContext.arg, true);
                    }

});

So if you had an ASP.Net web service script reference on your page, like this:

<asp:ScriptManager ID="PageScriptManager" runat="server">
    <Services>
        <asp:ServiceReference Path="/WebServices/OrderService.asmx" InlineScript="false" />
    </Services>
</asp:ScriptManager>

to use the proxy class one would change the code at the start of the article to look like this:

var ds = new Ext.data.Store({
    proxy: new AspWebServiceProxy(
         {
          webServiceProxy: Example.OrderService,
          webServiceProxyMethod: Example.OrderService.GetOrders,
          params: {userId: getUserId(), day: new Date()}
         }),
    reader: new Ext.data.JsonReader(
        {
           id: 'WorkDoneId'
        },
    ...
});

I'm sure that I'll be tweaking the AspWebServiceProxy object over time as I discover its short comings, but at least it is a decent start and is hopefully useful to others as well. One of my concerns are the manner in which the attributes on the extraParams object must be specified in the same order as the web service method parameters. I did it this way to keep it consistent with all the other examples I had seen where they used an object as opposed to an array. I may change this, but I like the fact that with the current approach the parameter value pairs are obvious.

Update - 2 Nov 2007: Changed the service options of extraParams to params. So now one can use dataStore.load({params: {userId: 4, day: new Date()} }) to load data after the creation of the data source.

A Simple Dojo Charting Example

Eden Ridgway — Fri, 13 Apr 2007 05:14:08 GMT

When evaluating the Dojo Charting library as an option for my CruiseControl statistics page replacement it was very evident that the Dojo team hadn't gotten around to providing documentation for this donated library. If you are unfamiliar with what the features the library offers you should take a look at this Ajaxian post. There is also a test page for the library which I could have sworn was down a day or two ago.

In the interest of possibly helping others save some time getting into the chrting library I wanted to post a basic introductory example. Please be aware that I do not know this library in depth, nor have I worked with the Dojo libraries extensively.

What is great about the Dojo charting implementation is that it is very versatile. This however comes at the cost of a slightly more involved structure which makes it somewhat more tedious to use than PlotKit. The composition of the various graphing objects is illustrated in the diagram below. As you can see from the relationships in the diagram they have allowed for features such as the ability to render multiple different graphs, using different plotters, in one plot area. They also have different implementations of the Axis, PlotArea and Plotter objects for VML and SVG rendering.

The Example

So to create a graph one would start off by including a reference to the dojo library and the required namespaces:

You then define or retrieve the graph data and store it in the collection store. This then will be fed into your graph as a series, defined like this:

Next come the axis definitions where you can specify the data display range, data source and the tick labels:

//Define the x-axis
var xAxis = new dojo.charting.Axis();

//Set the upper and lower data range values
xAxis.range = { lower: exampleData[0].time, upper: exampleData[exampleData.length-1].time };

xAxis.origin = "max";
xAxis.showTicks = true;
xAxis.label = "Example chart";

//Setup the x tick marks on the chart
xAxis.labels = [
{ label: 'First', value: 20 },
{ label: 'Second', value: 25 },
{ label: 'Third', value: 35 },
{ label: 'Fourth', value: 50 },
{ label: 'Fifth', value: 55 }
];

//Define the y-axis
var yAxis = new dojo.charting.Axis();
yAxis.range = { lower: 0, upper: 5000 };
yAxis.showLines = true;
yAxis.showTicks = true;
yAxis.label = "Time Taken";

//Setup the y tick marks on the chart
yAxis.labels = [
{ label: "0s", value: 0 },
{ label: "1s", value: 1000 },
{ label: "2s", value: 2000 },
{ label: "3s", value: 3000 },
{ label: "4s", value: 4000 },
{ label: "5s", value: 5000 }
];

You then define how the data will be plotted by defining a Plot and assigning the series with a plotter to render it:

var chartPlot = new dojo.charting.Plot(xAxis, yAxis);

chartPlot.addSeries({
data: timeSeries,
plotter: dojo.charting.Plotters.CurvedArea
});

This then needs to be rendered into a specific area, so one defines the PlotArea and adds the Plot to it:

var chartPlotArea = new dojo.charting.PlotArea();
chartPlotArea.size = { width: 380, height: 170 };
chartPlotArea.padding = { top: 20, right: 20, bottom: 30, left: 50 };

//Add the plot to the area
chartPlotArea.plots.push(chartPlot);

Finally one needs to create the chart and add the PlotArea to it. The chart also needs to have a container element, which one assigns to the chart.node.

var chart = new dojo.charting.Chart(null, "Example chart", "This is the example chart description");

//Add the plot area at an offset of 10 pixels from the top left
chart.addPlotArea({ x: 10, y: 10, plotArea: chartPlotArea });

//Setup the chart to be added to the DOM on load
dojo.addOnLoad(function()
{
chart.node = dojo.byId("GraphContainerArea");
chart.render();
});

And voila, you have a graph that looks like this:

To see the graph in action, take a look at this demo page.

CruiseControl.Net Statistics Graphs using PlotKit

Eden Ridgway — Tue, 27 Mar 2007 07:23:42 GMT

[Update: This does not apply to the Dojo Toolkit vesion of the Statistics Plugin. For information on how to customize that version go to this page.]

As promised in my previous post, CruiseControl Statistics Graphs, here is a high level description of the implementation that allowed me to display graphs in CruiseControl.Net. I've also included a quick guide on how to extend the report to include your own custom statistics that you may have published as part of your build.

After I had decided to create a graphical view of the CruiseControl statistics I assessed various options that were available. My immediate thoughts were to use XSLT to create either SVG or VML graphs. The problem is that I wanted something that was quick and easy to implement and quite frankly the effort required to do all of this using xslt was just too great. My attentions then turned to doing the majority of the processing in JavaScript. The Dojo Charting library was the first solution that sprung to mind, but on further investigation is appeared to be undergoing some restructuring and the documentation is almost non-existent. It was then that I came across PlotKit, a cross browser charting framework built on top of MochiKit. It was simple and had documentation so it was a clear winner.

So the Statistics Graph solution ended up being structured as follows:

StatisticsGraphs.xsl - creates JSON representation of the detailed stats data and the general page structure
StatisticsGraphs.js - contains the logic to summarise the detailed stats data and to create the plotkit graphs and tables
MochiKit_lite_packed.js, PlotKit_Packed.js - packed versions of the libraries that provide the graphing functionality (from PlotKit)
excanvas.js - provides canvas emulation for Internet Explorer (from PlotKit)

If one wanted to create their own custom summary graph of new statistics on the page (for more info on including custom statistics see Grant Drake's blog post), you would open up StatisticsGraphs.js and do the following:

Edit the generateDailySummaries function and add your summarised statistic to daySummary

var daySummary =
{
day : day,
successfulBuildCount : count(currentStatistics, "Status", function(item) { return (item["Status"] == "Success"); }),
failedBuildCount : count(currentStatistics, "Status", function(item) { return (item["Status"] == "Failure"); }),
lastBuildLabel : getLastValue(currentStatistics, "BuildLabel"),
testCount : testCount,
testsPassed : testCount - testFailures - testsIgnored,
testFailures : testFailures,
testsIgnored : testsIgnored,
fxCopWarnings : average(currentStatistics, "FxCop Warnings"),
fxCopErrors : average(currentStatistics, "FxCop Errors"),
averageBuildDuration: average(currentStatistics, "Duration"),
minBuildDuration: min(currentStatistics, "Duration"),
maxBuildDuration: max(currentStatistics, "Duration"),

//Insert new summarised statistics here
averageCodeCoverage : average(currentStatistics, "CodeCoverage")
};
Create a new function to create the graph. Note that the createGraph function creates the title, graph and legend for you. eg.

function createCodeCoverageGraph()
{
createGraph({
graphName : "Average Daily Code Coverage",
series : [
{
name : "Average Code Coverage",
attributeName: "averageCodeCoverage",
color : Color.greenColor()
}
]
})
}
Then call your new function in the setupGraphs

function setupGraphs()
{
createBuildReportGraph();
createBuildDurationGraph();
createTestGraph();
createFxCopGraph();

//Insert calls to functions that create new graphs here
createCodeCoverageGraph();
}

So if you are keen to give it a go take a look at my previous post for the download.

HTMLElement Prototype for Internet Explorer

Fri, 25 Nov 2005 01:47:21 GMT

You most likely know that since HTML Elements in Internet Explorer are wrappers around COM objects, you can't use HTMLElement.prototype, unlike Firefox (or another Mozilla based browser). Jason Davis has a presented a solution to this in his post, Element Prototyping in Internet Explorer 5.5 and above, where he used a behavior to provide this missing functionality.

It would appear that there is a memory leak and possible performance issues (which I was not aware of) with the use of behaviors, so way up your options carefully before employing this approach.

Dynamic Javascript Image Generation with XBM Images

Eden Ridgway — Sun, 13 Nov 2005 01:56:57 GMT

While browsing the net I came across a code example that looked like this:

<script> var
icon = '#define icon_width 4\n#define icon_height 4\nstatic char icon_bits[] = { 0x05,
0x0A, 0x05, 0x0A };'; 
</script>
<img src="javascript:icon;">

Not having seen anything like this before, I did some more digging to discover that the icon was in fact an XBM image definition. I was quite excited at the prospect of being able to dynamically generate images in a browser client only to discover that as of Windows XP SP2, XBM images no longer render in IE by default (source: Karma's Nucleus Dev Blog). You can however override this by setting the HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Security BlockXBM dword value to zero. Here is a registry file to make things a little easier: UnblockXBM.zip. After applying this registry change, reboot your machine.

An incredible showcase of what can be achieved using dynamic XBM image generation can be found at the Wolfenstein 5K site. It's actually one of the most impressive things I've seen on the web for ages (pity about the performance though). There is also a XBM Image Creation Library for JavaScript available to ease generation of these images.

I also found a rather interesting CSS & div based image rendering example on Karma's blog. That must have taken quite some time to get right and I most certainly would not entertain using it as a way of effectively embedding your images in your client side controls/javascript.

As a side note, XBM images do render in FireFox by default, so I wonder how they address the apparent security concerns with the C based image format. However, since FireFox also supports the data url scheme, the XBM image support is a lot less important. For those who don't know what I'm going on about, the data url scheme allows you to embed a base64 encoded image directly into your HTML like this:

<img src="data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////
wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4ML
wWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw=="
alt="Base64 encoded image" width="150" height="150"/>

In conclusion, it's a great sadness for me that the XBM format is no longer supported in IE. If anyone knows of a way to generate a dynamic image from JavaScript in IE (not using VML or CSS) I'm all ears.

Here are some more resources if you are interested:

Using CSS Expressions to Hook Up Event Handlers

Tue, 08 Nov 2005 02:01:14 GMT

/SubText/ImagesI cannot give the relevant author credit. I just want to clearly state that this is not something that I discovered, but it is an interesting technique so I wanted to blog about it. The downside of this approach is that it obfuscates the event wiring logic because most people won't look at the styles to find the logic.

It appears that IE will evaluate and execute a CSS expression even if the style property you are trying to set is invalid. So if you were to define the following CSS style and markup, it will hookup mouseover, mouseout and onclick event handlers for each TR within the table body and AlternatingRowsTable css class. This allows me to create a mouse rollover or "hover" effect on the TRs. Note how it is being applied to the completely bogus HookupEvent style attribute. I could have called it XYZ and it still would have wired up the events for me.

<style type="text/css"> .AlternatingRowsTable
tbody TR { HookupEvents:expression(this.onmouseover=new Function("this.style.background='lightyellow';"),
this.onmouseout =new Function("this.style.background='white';"), this.onclick=new
Function("alert('Hello')")); } </style>
<table class="AlternatingRowsTable" style="width:50%" ID="Table1">  <thead>
<tr> <th>Col
1</th>
</tr> </thead>
<tbody>
<tr> <td>Data</td>
</tr> <tr>
<td>Data</td>
</tr> </tbody>
</table>

And here is a demo of the technique (IE only): CssExpressionsEventHookup.htm

A Simple CSS Based TreeView

Sun, 30 Oct 2005 07:48:23 GMT

/SubText/Imagesach is a reaction to this type of markup. Ultimately one should use markup that reflects the type of information being presented. Hence you have CSS menus that uses nested ordered/unordered lists since this HTML more accurately represents the type of information being displayed. The same is true for treeviews, they are just nested lists of data and if one applied a little thought to the problem, it is quite easy to create a CSS based treeview solution.

I'm going to present a simple example of a CSS based treeview I recently wrote. The markup below represents a two level treeview with a single nested list:

<ul class="TreeView" id="TreeView">
<li class="Collapsed"> First level 1 node

<ul>
<li>First level 2 node</li>
<li>Second level 2 node</li>
</ul>
</li>
</ul>

Without any CSS styling the information looks like this:

First level 1 node
- First level 2 node
- Second level 2 node

Now by default I want the first level node to be collapsed with a plus image next to it, to indicate that the node can be expanded. In order to achieve this we can get rid of the li symbols by making the list items float left. This makes them stack up, so you can then set the elements to display at a 100% of the containing element. We then want space to place our treeview expandable image, so we put in a left padding of 18px. To make life simpler you can use a CSS child selector to apply this to all list elements within the treeview, like this:

.TreeView LI
{
padding: 0 0 0 18px;
float: left;
width: 100%;
list-style: none;
}

Adding the collpasing and expanding images and the associated effects to the child nodes is achieved with the following styles:

LI.Expanded
{
background: url(minus.gif) no-repeat left top;
}

LI.Expanded ul
{
display: block;
}

LI.Collapsed
{
background: url(plus.gif) no-repeat left top;
}

LI.Collapsed ul
{
display: none;
}

Then one needs to add JavaScript to the page to toggle the applied styles. For this, I decided to go with an approach that could handle multiple styles being applied to a single element, so my solution is a little more complex than a simple className replacement approach:

Array.prototype.indexOf = IndexOf;

//Toggles between two classes for an element
function ToggleClass(element, firstClass, secondClass, event)
{
event.cancelBubble = true;

var classes = element.className.split(" ");
var firstClassIndex = classes.indexOf(firstClass);
var secondClassIndex = classes.indexOf(secondClass);

if (firstClassIndex == -1 && secondClassIndex == -1)
{
classes[classes.length] = firstClass;
}
else if (firstClassIndex != -1)
{
classes[firstClassIndex] = secondClass;
}
else
{
classes[secondClassIndex] = firstClass;
}

element.className = classes.join(" ");

}

//Finds the index of an item in an array
function IndexOf(item)
{
for (var i=0; i < this.length; i++)
{
if (this[i] == item)
{
return i;
}
}

return -1;
}

I then wrote a script to setup the treeview based on a nested list container. The main reason I chose not to have all the event wiring in the HTML itself is that my approach leads to cleaner markup and allows one to easily convert any unordered list into a treeview. Here is the script to hookup the click events (it works in both IE and FireFox):

//The toggle event handler for each expandable/collapsable node
//- Note that this also exists to prevent any IE memory leaks
//(due to circular references caused by this)
function ToggleNodeStateHandler(event)
{
ToggleClass(this, "Collapsed", "Expanded", (event == null) ? window.event : event);
}

//Prevents the onclick event from bubbling up to parent elements
function PreventBubbleHandler(event)
{
if (!event) event = window.event;
event.cancelBubble = true;
}

//Adds the relevant onclick handlers for the nodes in the tree view
function SetupTreeView(elementId)
{
var tree = document.getElementById(elementId);
var treeElements = tree.getElementsByTagName("li");

for (var i=0; i < treeElements.length; i++)
{
if (treeElements[i].getElementsByTagName("ul").length > 0)
{
treeElements[i].onclick = ToggleNodeStateHandler;
}
else
{
treeElements[i].onclick = PreventBubbleHandler;
}
}
}

In this example to get it all going, you would call SetupTreeView("TreeView") after the page has loaded to setup the treeview for the nested lists.

And this is the end result: CssTreeView.htm

I was informed of a TreeView control that pretty much does what I blogged about here and more. You should take a look at the SilverStripe Tree Control if you found this post interesting. Thanks Garreth for the information.

Drag and Drop TreeView

Eden Ridgway — Mon, 24 Oct 2005 02:34:53 GMT

It's incredible at how easy it is to create an IE specific drag and drop treeview. While playing aroudn with this I created a survey editor where questions may be reordered or dragged on to answers to create drill down survey question dependencies.

To start off I setup a set of nested survey questions and answers using ordered lists, like this:

<OL class="Questions">
<LI> Where do you like to eat?
<OL class="Answers">
<LI>At home</LI>
<LI> At the pub 
<OL class="Questions">
<LI> How often do you eat at the pub?
<OL class="Answers">
<LI>Once a week</LI>
<LI>Twice a week</LI>
</OL>
</LI>
<LI> How much money do you spend at the pub? </LI>
</OL>
</LI>
<LI>At a restuarant</LI>
<LI>Take away</LI>
</OL>
</LI>
</OL>

As you can see from the HTML above, the idea is that if you answered that you like to eat at the pub, you would then be presented with a question as to how often you eat there. I used the class names to identify whether the lists were questions or answers. While I'm not entirely happy with this solution, it makes a fair amount of practical sense since you would most likely style the two differently in any case.

Then comes the fun part hooking up the drag and drop code. I decided that instead of adding all the event handlers inline I would add them using a script that ran once the survey elements had been rendered. This was because the markup was becoming messy and confused with all the handlers. It would also easily facilitate the turning on and off of the drag and drop functionality. I did this using the following script block to loop through all the ordered lists on the page and attach the relevant event handlers to questions and answers:

As you can see questions are both drop targets and draggable while answers can only act as drag targets. The event sequence when performing a drag and drop operation is therefore as follows:

OnMouseDown - start the drag and drop operation on the element using element.dragDrop() (note that this is IE specific code). In this handler I created two clones of the question being dragged, one to drag around under the cursor as the user selects a target and another to act as a preview of the drag & drop.
OnDrag - draws the question as it is being dragged around
OnDragEnter - adds a preview of the dragged question to the relevant list or if the drag target is an answer it will dynamically create an ordered list container for the element and display it within that.
OnDragOver - simply cancels the default event handler and thereby makes the question or element a valid drag target
OnDragLeave - removes the previewed element from the target element
OnDragEnd - repositions the question at the target position by swapping out the preview question with the question originally clicked on

Since there is a fair amount of code involved in this, you will want to take a look at this demo page to see it all in action: DragAndDropDemo.htm

An Editable HTML Select List

Sat, 15 Oct 2005 12:18:55 GMT

/SubText/Imagesp down arrow next to a select list in windows XP looks different to that of windows 2000. Hence the illusion of the control being a funked up version of a normal drop down list is lost. However there is a way to effectively create the illusion if you place an input box on top of a select list. The user would then be allowed to type into the text box as if they were typing directly into the select and you could then use JavaScript to perform whatever logic you wanted. Unfortunately a select list appears over most HTML elements as it is a special windows control. However if you use region clipping you can hide the rendering of the part of the drop down list that contains the input control. The code below shows you how it is possible (please note that css expressions are only available in IE):

<html>

<style>

SELECT {
top: expression(this.previousSibling.offsetTop);
left: expression(this.previousSibling.offsetLeft);
width: expression(this.previousSibling.offsetWidth);
position: absolute;
clip: expression("rect(auto auto auto " + (this.previousSibling.offsetWidth - 20) + "px)");
overflow: hidden;
}

</style>

<script language="javascript">

var oNewOption = null;

function AddListItem(oInput) {

var oSelect = oInput.nextSibling;

if (oNewOption == null) {
oNewOption = document.createElement("OPTION");
oSelect.options.add(oNewOption);
}

oNewOption.text = oInput.value;
oNewOption.value = oInput.value;

}
</script>
<body>

<form id='Form1'>
<input id='txtInput' type='text' onkeyup="AddListItem(this)"/><select>
<option>abc</option>
<option>cde</option>
<option>efg</option>
</select>
</form>
</body>
</html>

Here is the code in action: EditableCombo.htm