Blogging Dot Net (and jQuery too!)

Simple OOXML For OOXML SDK v 2.0 released

2010-07-13T18:53:00.001+01:00

The goal of the Simple OOXML project has always been to create documents and spreadsheets using minimum resources, including a server environment. The library provides commonly used functionality whilst hides away the details of creating open xml documents and without a large performance overhead. Documents created with this library and the Open Office SDK can be viewed using Microsoft Excel/Microsoft Word or OpenOffice as well as any third party that supports the format.

Getting Started

Simple OOXML adds the DocumentFormat.OpenXml.Extensions namespace to version 2.0 of the Open Office SDK. It allows developers to create spreadsheets and documents either from scratch or using predefined templates. All functionality is represented by static functions for high performance tasks, or higher level wrapper functions can provide simpler code expressions with some minor performance loss.

The following classes are provided:

SpreadsheetReader - manipulation of templates, retrieval of document parts, row and column reference functionality
SpreadsheetWriter - writing of document parts and creation of document level attributes. Add or remove spreadsheets.
SpreadsheetStyle - encapsulates font, border and fill handing in a spreadsheet.
WorsheetReader - retrieves cell and style information from a worksheet
WorksheetWriter - allows the pasting or insertion of data and style - using simple value types or DataTables - at a cell or range reference.
DocumentReader - retrieval of document templates.
DocumentWriter - pastes and saves text and text lists using predefined bookmarks.

Download the source files to view the source code, examples as well as a unit testing library which is a useful reference to all the features of the library. Users of the unsupported ExcelPackage library could consider using this library instead.

Simple OOXML is licensed under the LGPL. Requires .Net Framework 3.5 or later and can be downloaded from CodePlex.

VS2010 The mappings for the solution could not be found

2010-05-19T09:46:00.003+01:00

When trying to open a project with VS 2010 that used Visual SourceSafe, you may receive the following error:

The mappings for the solution could not be found

To fix this problem, go to Tools -> Options -> Source Control -> Plug-in Selection and change to the Visual Sourcesafe plugin from the TFS plugin.

Another reason to switch to svn ...

Coming to a browser near you – HTML 5

2010-04-19T18:33:00.001+01:00

Found this great web based slide show detailing the changes and additions that make up HTML 5.0

http://apirocks.com/html5/html5.html#slide1

(Warning – not IE friendly)

Great comparison of web browser performance

2010-04-19T18:30:00.001+01:00

Jason Gube at sixrevisions.com has posted a great article comparing browser performance. It pretty much echos day to day performance I’m seeing and backs up my decision to switch to Chrome.

Hitting the thousand mark on stack overflow

2010-04-09T22:59:00.001+01:00

The last few weeks have seen me actively participating in the community of programmer and pundits known as stackoverflow.com.

I set myself a target of reaching 1000 rep in two weeks and Im really glad to say I managed to do it in 11 days, thanks in part to a particularly feisty conversation about team participation vs individualism and how it relates to building and testing software.

My observations are that once a popular user (read user with high reputation or awards) replies to a question, most other users will jump on that band wagon. In practice, choosing other responses that are voted up even only once or twice may be more prudent.

Javascript Localization using .Net Resource files and jQuery

2010-02-24T21:43:00.001Z

As a web developer I'm shifting more and more code to the client, and a few weeks ago an interesting situation came up on a multi-lingual project. ie wanted to include translations for validation messages in jQuery code, but stay with the great .Net resource file model.

What I came up with was a pattern using JQuery AJAX and JSON to download the resource file to the browser. The translations are available using the same object notation available on the server eg

// -- Localisation --
var localResources;
var globalResources;

//Sample JSON for javascript resource values eg {TrackDetail:{HideHelp:"Hide Help", ShowHelp:"Show Help"}}
//Usage e.g: alert(localResources.TrackDetail.HideHelp);

//Load Localisation values into variables so that they can be available on the client
//Note that these values are loaded asynchronously, the code in the function will not run until the call has completed.
$.getJSON('Localisation.ashx?files=TrackDetail.aspx.resx&local=true', function(data) { localResources = data});
$.getJSON('Localisation.ashx?files=Errors.resx,Strings.resx', function(data) { globalResources = data});

The code on the server reads the local or global resource file and streams the contents back as a JSON formatted object. Note that I opted to roll my own JSON serialization code instead of using one of the built-in serializers.

Imports System.Web
Imports System.Web.Services
Imports System.Xml
Imports System.Resources
Imports System.Reflection

Public Class Localisation
  Implements System.Web.IHttpHandler

  Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
    Dim files As String = context.Request.QueryString("files")
    Dim local As String = context.Request.QueryString("local")
    Dim isLocal As Boolean
    Dim folder As String = "App_GlobalResources"
  
    context.Response.ContentType = "text/javascript"

    'Write out file as object
    context.Response.Write("{")

    'Determine if local resource file
    If local IsNot Nothing Then
      isLocal = CBool(local)
      If isLocal Then folder = "App_LocalResources"
    End If
    If files Is Nothing OrElse files.Length = 0 Then Throw New ArgumentException("Parameter 'files' was not provided in querystring.")
  
    Dim flag As Boolean = False
    For Each file As String In files.Split(",")
      If flag Then context.Response.Write(",")

      Dim className As String = file.Split(".")(0)
    
      'Write the class (name of the without any extensions) as the object
      context.Response.Write(className)
      context.Response.Write(":{")

      'Open the resx xml file
      Dim filePath As String = context.Server.MapPath("~\" & folder & "\" & file)
      Dim document As New XmlDocument()
      Dim flag2 As Boolean = False
      document.Load(filePath)

      Dim nodes As XmlNodeList = document.SelectNodes("//data")

      For Each node As XmlNode In nodes

        'Write out the comma seperator
        If flag2 Then context.Response.Write(",")

        Dim attr As XmlAttribute = node.Attributes("name")
        Dim resourceKey As String = attr.Value
        context.Response.Write(resourceKey)
        context.Response.Write(":""")

        'Write either the local or global value
        If isLocal Then
        context.Response.Write(HttpContext.GetLocalResourceObject(String.Format("~/{0}",    file.Replace(".resx", "")), resourceKey)) 'Has to be full path to the .aspx page
        Else
          context.Response.Write(HttpContext.GetGlobalResourceObject(className, resourceKey))
        End If
        context.Response.Write("""")

        'Flag that we need a comma seperator
        flag2 = True
      Next

      context.Response.Write("}")
      flag = True
    Next
  
    'End file
    context.Response.Write("}")
  End Sub

  Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
    Get
      Return True
    End Get
  End Property
End Class

jQuery, Google Closure and packing or minifying for performance?

2010-01-30T10:41:00.001Z

One thing I love about writing jQuery plug-ins is that every line of code counts towards performance. Its like real programming again. There are lots of difference ways in which you can improve performance but one must have is reducing the size of the JavaScript that comes down the wire from the server.

There are two options to use when reducing JavaScript file size – packing and minifying. Packing uses a compression algorithm such as gzip to physical compress the file to it’s smallest possible size, whilst a decent minifyer removes whitespace, renames variables and internal functions and removes unreachable code.

A while ago I came across this post by John Resig pointing out that although packing reduces the file size, it takes longer to ultimately execute, due to the repeated unpacking process every time the script is used.

After reading this I started using the Yahoo YUI Compressor to minify all of my plug-ins, and it worked well, typically reducing file sizes by 70% or more.

Looking through the jQuery 1.4 release notes this week I noticed that the jQuery team have switched to Google Closure Compiler. This really is a great tool, for example it reduced my Exclusive Checkbox plug-in to only ~~191~~ 211 bytes and the MapReduce plug-in to under 1k in size! You need to be careful when using the compiler with the advanced option (due to the possible renaming of public methods and variables), but this doesn't apply to plug-ins because of the use of a closure – perhaps this is the reason for the name of the compiler.

Update I had to abandon the use of the Advanced option for the Exclusive Checkbox plug-in, increasing the size from 191 to 211 bytes ...

Links:

Online YUI compressor
Online Google Closure compiler service

Simple OOXML Updated

2010-01-28T22:57:00.001Z

Simple OOXML is a helper library that I wrote for the Open XML Format SDK 2.0 to make the creation of Open Office XML documents easier. You can modify or create any .docx or .xlsx document without Microsoft Word or Microsoft Excel or any other software (ideal for server environments).

Version 2.1.3678 has been released over at Codeplex which works with the December CTP of the SDK.

Batch conversion of docx files to pdf

2010-01-28T22:39:00.001Z

I recently worked on a project where we had over 50 .docx files to convert to .pdf. Now Office 2007 can do this for you, but only one file at a time. Luckily I was able to piece together some code (.net 3.5 csharp) which automated this process. Select a folder and all .doc and .docx files in the folder and any subfolder will be converted to pdf and saved with a .pdf extension.

You still need Office 2007 or later to do this – download the code here:

http://www.opencomponents.com/downloads/PDF Batch Converter.zip

Disclaimer: Use at own risk. No kittens were harmed during the making of this software.

MapReduce plug-in Release Candidate now available

2010-01-25T23:35:00.001Z

The MapReduce plug-in for jQuery has been uploaded to the following url:

http://plugins.jquery.com/project/MapReduce

The plug-in implements a a type of map/reduce algorithm that executes synchronously or asynchronously in the browse whilst minimising loss in performance. Supports long running operations without script timeout messages.

Add map and reduce functions using the $.map and $.reduce methods and execute the functions using the $.execute method. Nested map and reduce functions are supported.

The download contains two samples of finding the prime numbers in a sequence of numbers, one using a plain javascript function and one using map reduce to calculate this asynchronously without causing script timeout errors in the browser.

Options

The following options can be used when calling the $.execute method:

async: true or false - determines whether the $.execute method runs asynchronously (default false)
race: no of functions to call per iteration when async is true (default 100)
interval: interval in ms between iterations when async is true (default 1ms)

Introduction to Map Reduce using jQuery

2010-01-23T13:58:00.001Z

(Solved: How to avoid the "A script on this page is causing Internet Explorer to run slowly." message)

When writing the spellayt spell checking plug-in, I came across an interesting problem with long running JavaScript code – the browser would timeout and display a message box to the user with the text "A script on this page is causing Internet Explorer to run slowly." Even worse, the dialog gives the user the option to cancel the script, potentially breaking your page.

The solution was to use a timer to simulate a background thread, but the solution wasn’t generic and felt far from elegant. This week, with the approval of Google’s Distributed MapReduce patent, I realised that a simpler non-distributed map reduce algorithm would enable the running of code both asynchronously and over long periods of time in JavaScript without complex state management and stack issues.

Map reduce works by taking key/value pairs and running them through a function to create intermediate key/value pairs until all the data has been processed (map). The data is then filtered (reduced) to obtain a result. Joel Spolsky (Joel on Software) has a nice article that explains the fundamentals behind map reduce.

Sieve of Eratosthenes

The Sieve of Eratosthenes is an algorithm for finding prime numbers, this Wikipedia article has a visual explanation of how it works. Its a great example of something that is processor intensive but can be broken up into smaller steps.

A standard JavaScript implementation (using Euler’s optimisation) would look something like this:

function eratosthenesSieve(upperBound) {

   var upperBoundSquareRoot = Math.floor(Math.sqrt(upperBound), 0);
   var isComposite = [];

   for (var m = 2; m <= upperBoundSquareRoot; m++) {

      if (!isComposite[m]) {

         _primes.push(m);

         for(var k = m * m; k <= upperBound; k += m) {
            isComposite[k] = true;
         }
      }
   }

   for(m = upperBoundSquareRoot; m <= upperBound; m++) {
      if (!isComposite[m]) _primes.push(m);
   }
}

The isComposite variable contains an array of boolean indicating whether is element is prime (false) or not (true). The _primes array also contains the prime numbers.

Redefining the problem as a set of Map / Reduce functions

The great thing about map/reduce is that once the problem is defined as a set of functions, it doesn’t matter how the map/reduce is implemented, you should always get the same results. Usually, each for loop will result in a matching $.map or $.reduce function. Reorganising the eratosthenesSieve function to use map reduce requires the following steps:

Map an array containing the initial values – in this case the index of the array is the number we are testing, and a boolean will indicate whether it is a prime or composite number.
Map each prime up to the square root of the upper bound. For each Map that is a prime, strike out it’s square multiplied by the remaining numbers until the upper bound is reached.
Reduce the array by totalling the number of primes (false values) left.
Execute the functions to return the result.

The code now looks like this:

function eratosthenesSieve2(upperBound) {

   //Create an array of booleans representing prime = false
   var composites = new Array(upperBound);

   //Set all to prime (false) to start
   $.map(composites, function(index, value) {
      return false;
   });

   //Calculate the sqr root of the upper bound
   var upperBoundSquareRoot = Math.floor(Math.sqrt(upperBound), 0);

   //For each item, calculate the non primes
   $.map(composites, function(index, value) {

      if (index < 2 || index > upperBoundSquareRoot) return value;

      //If the array item is a prime then map all non primes
      if (value == false) {

         var k = index * index;

         $.map(composites, function(index2, value2) {

            if (index2 == k) {

               k += index;
               return true;
            }
            return value2;
         });
      }
      return value;
   });
                
   //Count only the primes
   $.reduce(composites, 0, function(index, value, result) {

      if (index >= 2 && value == false) result++;
      return result;
   });

   return $.execute();
}

The first $.map function initialises the composites array. The second and third map $.map strikes out multiples of primes. The $.reduce function counts the remaining primes by accumulating the result variable. Note the extra work we have to do to simulate the functionality of the for loop and when we haven’t performed any processing we return the same value that was passed into the function.

Finally, we $.execute the functions. If you attach a debugger to the script, you’ll notice the functions only start executing once this method is called.

Download the plug-in code from the Map Reduce plug-in page.

Next time, I’ll dive into the details of implementing the Map Reduce plug-in and the pitfalls encountered along the way.

Object Data Blocks 2.0 Release Candidate

2010-01-23T08:10:00.001Z

Object Data Blocks is object persistence style ORM for new database implementations. Define you data layer using classes to define tables and fields and decorate them with attributes to define keys, indexes, constraints etc. A provider model for a specific relational database (currently sql server 2005 or later) takes care of the rest. Any changes to the assembly can be deployed at runtime seamlessly to the database without any loss of data.

Read more information and view code samples here.

Object Data Blocks is released under the GPL 2.0 licence and is hosted at http://objectdatablocks.codeplex.com

Simple OOXML 2.1.3565 Released

2009-10-06T22:50:00.001+01:00

Create .xlsx and .docx documents from templates or from new without Microsoft Excel or Microsoft Word. This release fixes previously reported issues and adds the following functionality

Works with August 2009 CTP of the Open XML SDK.
DeleteRow and DeleteRows from a Worksheet
Use FindColumn to retrieve a column from a Worksheet e.g. to set a column width.

The following issues have been fixed

id# 2227 - PasteDataTable results in a corrupt .xlsx file when pasting a DataTable that contains typeof(float) columns with a CultureInfo other than "en-US"
id# 2291 - PasteDataTable fails with adjacent existing data

Note: Download the source code to view examples and unit tests with lots of sample code.

http://simpleooxml.codeplex.com

Announcing the release of the jQuery databind plug-in

2009-10-06T22:47:00.001+01:00

The databind plug-in allows you to automatically bind the contents of an object in JavaScript (usually retrieved using AJAX/JSON).

Each key in the object is used as an id (.example) selector within the selector provided e.g.

var data = { title: 'Lorem ipsum', text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.' };
$(document).binddata(data);

Provides the output visible at http://www.opencomponents.net/databind/example1.htm

More complicated examples include the ability to bind arrays of data and objects to tables and unbind forms into json.

More examples and code can be downloaded from: http://www.opencomponents.net/databind/

Databinding with jQuery

2009-06-24T21:42:00.004+01:00

I guess the title of this blog should be "Writing a new jQuery plug-in every week" - that's all I seem to be doing right now - but I keep finding functionality that isn't available as a plug-in, or has just been plain poorly implemented.

I'm using jQuery UI for a web project right now, and currently it's missing the ability to turn an html table into a grid styled using the UI css. Now there are some good lightweight plug-ins out there, such as tablesorter and I didnt want to reinvent the wheel. Nor did I want to use a heavy wieght plugin such as jqGrid that is impressive but tries to do too much, especially when what you're really only after is a styled table.

To this end, I'm currently workign on the TableGrid plug-in, that uses the guidelines set out by the jQuery UI development team on how to style tables, whilst incorporating the work done by other developers to enable scrolling, paging, sorting etc. (Example1, Example2)

Which brings me to the subject of this post. I didn't agree with the mechanism used in other grid plug-ins where the data retrieval element is included inside the plug-in, to load data via ajax or some other method. What if I also wanted to load data into say my form?

Following my approach of a super plug-in above, I realised I would first need a data binding plug-in so that developers could load table data on-the-fly. A quick look confirmed there was nothing out there that could be used.

The databind plug-in

View examples and download.

Use the databind plug-in to bind a json object to any html element that has text, is an input or is a table/tbody. Each key (property name) is matched to the id of an element within the target of the databind function. The inner text can be used, or the value of an input element - the plug-in is smart enough to decide. Pass array or a collection of objects to the plug-in to bind rows of data to a table or table body.

UpdatePanel plug-in 1.0.0 released.

2009-06-10T19:40:00.006+01:00

In a previous post, I introduced a plug-in that makes it simple for developers to integrate jQuery function calls with Microsoft Ajax UpdatePanels. The final version has been released today to both http://plugins.jquery.com and http://www.codeplex.com.

Functions

.panelCreated(fn) - called when the UpdatePanel is created on a page
.panelUpdated(fn) - called when the panel is updated during a asynchronous (ajax) postback.
.panelReady(fn) - called when the UpdatePanel is first created or updated.
.beginRequest(fn) - called before the processing of an asynchronous postback starts and the postback request is sent to the server.
.initializeRequest(fn) - called during the initialization of the asynchronous postback. Allows the cancellation of the request.

The download includes the script file and a simple example.

Getting started with the Simple OOXML library.

2009-05-17T21:30:00.015+01:00

The Simple OOXML library allows you to create Word Processing (.docx) and Spreadsheet (.xlsx) documents quickly and easily, without having to understand the complex nature of the underlying Xml formats. Because the documents are (mostly) pure xml, these documents can be created in environments even where there is no Microsoft Office installation, such as on a web server.

Whilst the Open Xml Format SDK provides a convenient object wrapper around the xml specification, it is still far from easy to create these documents. Even with a sound understanding of the specification, the Simple OOXML library tool is still useful in providing wrapper functionality to developers, without having a noticeable performance overhead.

To use the Simple OOXML library, you need to be using .Net Framework 3.5 (or later). You'll also need to download the Open Xml Format SDK v 2.0. The current release is the April 2009 CTP and is available from the Microsoft website here: http://www.microsoft.com/downloads/details.aspx?FamilyId=C6E744E5-36E9-45F5-8D8C-331DF206E0D0. Obviously this is pre-release code but so far I've found the CTP releases very stable and haven't found any problems or bugs. Finally, you will need to download a copy of the latest Simple OOXML library release, available at CodePlex: http://simpleooxml.codeplex.com/Release/ProjectReleases.aspx. Since Simple OOXML is open source and distributed under the LGPL licence, you can use and distribute the binary with any application, commercial or otherwise. You can also have a look at the C# code to see how the library operates.

To demonstrate the capabilities of the Simple OOXML library, I'll show you how a number of ways to work with Spreadsheet documents by creating a new ASP.NET Web Application in Visual Studio 2008. Follow these steps to get started:

Create a new ASP.NET Web Application.
Include references to DocumentFormat.OpenXml from the SDK and the DocumentFormat.OpenXml.Extensions.dll from the Simple OOXML release.
Finally, add an asp:Button control to the default.aspx page that was created for you, so that we have somewhere to run our code from.

Make sure that you are using the following namespaces:

using System.IO;
using DocumentFormat.OpenXml.Packaging;
using DocumentFormat.OpenXml.Spreadsheet;
using DocumentFormat.OpenXml.Extensions;

Creating a new Spreadsheet (.xlsx) document.

In the click event handler for the button added above, add the following code:

protected void Button1_Click(object sender, EventArgs e)
{
   MemoryStream stream = SpreadsheetReader.Create();
   SpreadsheetDocument doc = SpreadsheetDocument.Open(stream, true);
   WorksheetPart worksheetPart = SpreadsheetReader.GetWorksheetPartByName(doc, "Sheet1");
   WorksheetWriter writer = new WorksheetWriter(doc, worksheetPart);

   writer.PasteText("B2", "Hello World");

   //Save to the memory stream
   SpreadsheetWriter.Save(doc);
          
   //Write to response stream
   Response.Clear();
   Response.AddHeader("content-disposition", String.Format("attachment;filename={0}", "performance.xlsx"));
   Response.ContentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";

   stream.WriteTo(Response.OutputStream);
   Response.End();
}

The first four lines of code create a stream containing a new document. This is loaded into a standard SpreadsheetDocument object. A WorksheetPart is then retrieved using a sheet name. Finally a WorksheetWriter is created to enable us to write content to the worksheet. Next, the writer is used to paste the text "Hello World" into cell reference "B2". The static Save method of the SpreadsheetWriter class is used to update the stream with the document. The final five lines write the document stream to the browser setting the correct header values for a spreadsheet document.

In the next part of this series I'll demonstrate how to add numeric values, dates, shared text and datatables to worksheet documents.

Introducing the UpdatePanel plug-in.

2009-05-17T21:12:00.003+01:00

A while ago I blogged about Combining jQuery and Ms Ajax UpdatePanels. (http://bloggingdotnet.blogspot.com/2009/03/combining-jquery-and-updatepanels.html). The main problem is that the UpdatePanel contents (a Div element) are replaced during each post back from the server and this means that jQuery looses all the references to the elements that have now been replaced in the DOM. My initial work around (and commonly found on the internet) is a little clumsy as it involves hooking the Ms Ajax pageLoad event and placing all your jQuery code in a separate function which is then called from $(document).ready or pageLoad. Not pretty and not clever, especially when you have lots of jQuery and you only want to rerun the jQuery for the panel that has actually changed.

My subsequent workarounds involved looking into the LiveQuery plug-in and looking at Live events which are new to jQuery 1.3, however I wasn't satisfied with the performance, and the code still looked ugly. And when it looks ugly that usually means there is a better way. What I wanted was code that looked and worked like any other jQuery plug-in. I needed to dig more deeply into the Ms Ajax client runtime. What I found was the PageRequestManager which is created once per page by Ms Ajax and fires the pageLoaded event on each post back. Hooking into this event allows us to examine the panels that have been updated or created. Using this information, it was then relatively straightforward to wrap a jQuery-style functional interface around these events.

The UpdatePanel plug-in has the following three callbacks:

.panelCreated(fn) - called when the UpdatePanel is created on a page
.panelUpdated(fn) - called when the panel is updated during a asynchronous (ajax) postback.
.panelReady(fn) - called when the UpdatePanel is first created or updated

You would generally use the panelReady event like so:

$(document).ready(function() {
  //Place jQuery code here for elements selected outside the update panel
  $('#UpdatePanel1').panelReady(function() {
    //Place jQuery code here for elements selected inside the update panel
  });
});

Generally, you would only want to use panelReady, which is called when the page is first loaded, or on each postback. A sample project as well as the script is available at http://updatepanelplugin.codeplex.com/ or http://plugins.jquery.com/project/updatepanelplugin

Simple OOXML featured on OpenXmlDeveloper

2009-05-14T21:45:00.002+01:00

Simple OOXML has been picked up by http://openxmldeveloper.org - Microsoft's website for promoting the Office Open Xml standard - and is mentioned on their home page. Expect to see an article appear on the site over the next few days.

Exclusive Checkbox jQuery Plug-in

2009-03-23T19:38:00.011Z

Web interfaces like Hotmail often have a checkbox or radio button next to each item so that you can select that row. I've always disliked the radio button approach as you are limited to one row at a time eg when deleting. However sometimes you'd like to keep the checkboxes but have them behave like radio buttons. I couldn't find a really simple jQuery plug-in so I decided to write one. Original and minified versions at the end of the article.

(Update: I changed the code slightly to use the official jQuery extend function for the plug-in definition, and to include the usage in the comments.)

/*
* Exclusive Check Plugin v1.0.2
* Copyright (c) James Westgate
*
* @requires jQuery v1.3.2
*
* Dual licensed under the MIT and GPL licenses:
*   http://www.opensource.org/licenses/mit-license.ph
*   http://www.gnu.org/licenses/gpl.html
*
* @usage $('input:checked').exclusiveCheck();
* @usage $('form input:checked').exclusiveCheck();
* @usage $('table tbody input:checked').exclusiveCheck();
*
*/

//Create closure
(function($) {

    //Plugin definition
    $.fn.extend({

        exclusiveCheck: function() {

            var selector = $(this);

            //Loop through each item in the matched set and apply event handlers
            return this.each(function(i) {

                //When the checkbox gets clicked, uncheck other checkboxes
                $(this).click(function(event) {

                    var clicked = this;

                    //Uncheck all except current
                    if (this.checked) {
                        selector.each(function() {
                            if (this != clicked) this.checked = false;
                        });
                    }
                });
            });
        }
    });

// end of closure
})(jQuery);

Download original and minified version.

Introducing the Simple OOXML library

2009-03-05T21:56:00.014Z

The new xml based document formats (.xlsx, .docx, .pptx etc) introduced with Office 2007 finally provided developers with the ability to create documents on a server without having to have either MS Word or Excel installed or to use a 3^rd party component.

However producing this Xml is very complicated and it's certainly not a pretty format. The OOXML SDK goes as far as wrapping the Xml elements of the specification into a set of .net classes, but still falls short of the higher-level functionality required to actually create documents. Some open source libraries, such as ExcelPackage, are incomplete or discontinued and I wanted to create a simple, robust fully supported library that fits right into the object model of version 2.0 of the sdk.

The http://simpleooxml.codeplex.com project addresses this issue by providing a layer of abstraction over version 2.0 as a set of simple classes and methods to create new spreadsheet (Excel) and word processing (Word) files with the following benefits:

No Excel or Word is required on the server.
No in-depth knowledge of the OOXML standard or SDK is required.
New documents can be created or existing templates can be modified.
Ability to stream directly to the browser or between servers
High performance

The following table outlines the classes used to create and read office open xml documents:

DocumentReader	Static functions used to create new word processing documents.
DocumentWriter	Static functions used to paste text items into a word processing document using bookmarks and save the document to a stream or file.
SpreadsheetReader	Static functions to create new spreadsheet documents and to retrieve worksheet, column and row references. Get style and defined name range parts.
SpreadsheetStyle	Create an object that can set style, color and font information in a spreadsheet and retrieve and compare style parts.
SpreadsheetWriter	Static functions to create style parts in a spreadsheet, control shared strings and helper functions when working with spreadsheet documents
WorksheetReader	High level and static fucntions to retrieve cell and style information from a worksheet.
WorksheetWriter	High level and static functions to write text, numeric and datatable based values to a worksheet. Draw borders, insert rows, merge cells and set print areas.

Simple OOXML requires version 2.0 of the OOXML SDK which can be found here:

http://www.microsoft.com/downloads/details.aspx?FamilyId=C6E744E5-36E9-45F5-8D8C-331DF206E0D0

In my next series of posts, I'll show how easy and powerful this library is.

(The DocumentFormat.OpenXml.Extensions.Testing unit test project included in the source on Codeplex contains samples of almost every type of operation supported by the library.)

Creating a Spell as you type jQuery plug-in - Part 3

2009-03-03T21:37:00.011Z

In my previous posts, I described how to create a jQuery plug-in called spellayt (Spell as you Type) that provided spelling correction to Internet Explorer users.

The timed work queue pattern

The performance of initial implementations of the spellayt were disappointing, you would often wait a few seconds whilst the latest words typed in were checked and highlighted. Even worse, you could get the dreaded "A script on this page is causing Internet Explorer to run slowly." message. I soon found I needed a solution usng a multi-threaded approach so that the spell checking could happen in the background to the user typing. A quick check confirmed that JavaScript does not support more than one thread although the search did reveal some interesting options.

Because the word breaking and dictionary checks could potentially take a few seconds each, I decided that only one word could be checked against the dictionary at a time. The trick is to use lots of short functions at regular intervals, so that the UI can continue to process events from the user.

This gave me the idea for implementing the following pattern which I call the Timed Work Queue pattern. In the plug-in, a call to doWordBreak() starts the ball rolling when the input receives focus:

//Global values
$.fn.spellayt.global = {
  options: null,         //plug-in options
  wordQueue: new Array() //word breaking queue
};

$(this).focus(function(event) {

  //Start the the word breaking queue
  doWordBreak();
});

The doWordBreak() function is actually really straight forward. It shifts the oldest work item off the queue and executes that item. The function then calls itself again in a predetermined time (50 ms seems to be a good figure)

//Pops the next word off the word breaking queue
function doWordBreak() {
  var g = $.fn.spellayt.global;

  //Get an item off the queue
  if (g.wordQueue.length > 0) {
     var work = g.wordQueue.shift();
     work.call(work.data);
  }

  //Process the next item
  g.wordTimer = setTimeout(function() { doWordBreak(); }, g.options.milliseconds);
}

So what does the object look like that we are pushing onto the work queue ? The breaktext function breaks text into sentences and words, and loads words onto the queue one at a time

//Check the spelling for all words in the input provided
function breakText(input) {
  if (input == null) return;

  //Split text into a 2d array of sentences and words
  var sentences = splitWords(input.value);

  if (sentences == null) return;

  //Add the call to checkWord() to the work queue for each word in each sentence
  for (var i = 0; i < sentences.length; i++) {

    $.fn.spellayt.global.wordQueue.push({ call: function(parm) { checkSentence(parm); }, data: sentences[i] });

  }
};

The object consists of a function pointer call and data to be passed to the function data. As long as your function has a single parameter (e.g. a JSON object), you could queue up any combination of functions to execute.

This is really handy as you can push completely different function pointers onto the queue, as well as putting some items ahead of others with a higher priority.

Creating a spell as you type jQuery plugin - part 1

Creating a spell as you type jQuery plugin - part 2

Download: http://plugins.jquery.com/project/spellayt

Compress ASP.NET response streams

2009-03-03T18:38:00.003Z

When sending large amounts of data from IIS to the browser, it is sometimes worth compressing certain types of data such as text documents. Although compression is not supported by IIS 6.0, most browsers support basic gzip compression and they notify the server of this ability by sending a header in each request. The following piece of code shows how to use the System.IO.Compression namespace to add a filter to the output stream that compresses the output whilst checking and setting the correct headers. In this example, a .xls document containing in a string is being sent to the client:


    'Send response with content type to display as MS Excel
    context.Response.Clear()
    context.Response.Buffer = True

    context.Response.AddHeader("content-disposition", String.Format( "attachment;filename={0}", fileName))
    context.Response.ContentEncoding = Encoding.UTF8

    context.Response.Cache.SetCacheability(HttpCacheability.Private)

    'Compress the output as it may be very large
    'When flushing or closing+ending the stream, the compression filter does not have a chance to write the compression footer
    'Therefore, make sure the compression filter stream is closed before flushing
    AddCompression(context)

    context.Response.ContentType = "application/vnd.ms-excel"

    'Write to response
    context.Response.Write(_reportXmlss)

    'context.Response.Flush() 'Do not flush if using compression
    'context.Response.Close()
    context.Response.End()

The AddCompression method checks the appropriate headers and adds a compression filter stream to the output:

'Add compression to the response stream
    Public Sub AddCompression(ByVal context As HttpContext)

        Dim acceptEncoding As String = context.Request.Headers("Accept-Encoding")
        If acceptEncoding Is Nothing OrElse acceptEncoding.Length = 0 Then Return

        'Convert to lower to check
        acceptEncoding = acceptEncoding.ToLower

        'Gzip or Compress compression
        'Compress compression is quicker and performs better compression so try that first
        If (acceptEncoding.Contains("deflate")) Then

            context.Response.Filter = New DeflateStream(context.Response.Filter, CompressionMode.Compress)
            context.Response.AppendHeader("Content-Encoding", "deflate")

        ElseIf acceptEncoding.Contains("gzip") Then

            context.Response.Filter = New GZipStream(context.Response.Filter, CompressionMode.Compress)
            context.Response.AppendHeader("Content-Encoding", "gzip")

        End If

    End Sub

To check if compression is being used, I use the awesome HttpWatch, which shows useful information such as headers, amount of compression and bytes sent/received.

Combining jQuery and UpdatePanels

2009-03-02T21:01:00.004Z

Some of you may have noticed using Microsoft Ajax and jQuery together works fine until you do a post back in e.g. an UpdatePanel and the jQuery plugins referencing elements contained in the panel stop working. I believe these are the event handlers which are bound to the old DOM elements by jQuery.

A simple work around is to combine a bit of Microsoft AJAX with jQuery - in this example I rerun all my jQuery that would normally reside in $(document).ready after each ajax callback instead.

//Jquery document ready
$(document).ready(function(){
  RunScript();
})

//This is called after every page load by ajax
//It is used instead of the normal document ready function
function pageLoad(sender, arg) {
  if (arg.get_isPartialLoad()) {
      RunScript();
  };
}

//Main Jquery function
function RunScript() {
 //... normal jQuery code here etc

Spell as you Type 1.0 plug-in released

2009-02-27T10:43:00.006Z

Today I released the Spell as you Type jQuery plug-in. It provides inline (red wavy) spell checking and correction options to Internet Explorer users - functionality that is built into every other browser.

Codeplex: http://openspell.codeplex.com/

Jquery: http://plugins.jquery.com/project/spellayt

To use, simply call the spellayt function in jQuery

$(document).ready(function() {
$('#txtTextarea').spellayt();
})

The plug-in works fully on the client side. For more information, view my series on building this plug-in:

Creating a spell as you type jQuery plugin - part 1

Creating a spell as you type jQuery plugin - part 2

Creating a spell as you type jQuery plugin - part 3

Referencing a template file from a Visual Studio Unit Test

2009-02-23T22:41:00.005Z

As part of the test suite for the Simple OOXML project, I need to reference a .docx file in a template folder in code - the problem being that every unit test is run in it's own output folder. The solution is to copy the template files to the output folder and retrieve the path from the test context:

1. Make sure the TestContext is set when the test is run by providing a TestContext property (this is now really simple in 3.5)

[TestClass()]

public class SpreadsheetTests

{

public TestContext TestContext { get; set; }

...

2. Make sure that the requested file is copied to the output folder by using the DeploymentItem attribute

[TestMethod(), DeploymentItem("Templates\\template.xlsx")]

public void WorksheetCopyTest()

{ ...

3. Reference from code using the TestContext.TestDeploymentDir

MemoryStream stream = SpreadsheetReader.Copy(string.Format("{0}\\template.xlsx", TestContext.TestDeploymentDir));

Note that even though we copied the template.xlsx file from the Templates folder, it ended up in the root output folder.

Writing an xlsx document to the response stream using ASP.NET and OOXML

2009-02-19T15:55:00.010Z

Have spent a most frustrating day trying to output an Excel document created using OOXML sdk 2.0 in a web service to the web browser.

There are two elements to solving this problem>

Using a web service to transfer binary data
Opening Excel on the browser using the new xlsx format

This is actually pretty straight forward, as long as you use a byte array, the data is base64 encoded in the background automatically. On the client, use the right content type and use BinaryWrite instead of Write which is where I was having the problem:

Public Function PerformanceReportByUser(ByVal startDate As Date, ByVal endDate As Date) As Byte()
'Get the path to the template
Dim path As String = Server.MapPath("Templates/PerformanceByUserTemplate.xlsx")

'Get the stream containing the report package
Dim stream As MemoryStream = PerformanceReport.ExecuteByUser(path, startDate, endDate)
Return stream.ToArray()
End Function

On the client, process the byte array. Note the content type, and use of BinaryWrite.

Dim bytes() As Byte = portalservice.PerformanceReportByUser(CDate(ctlStartDate.Text), CDate(ctlEndDate.Text))

'Send response with content type to display as MS Excel
Response.Clear()
Response.Buffer = True
Response.AddHeader("content-disposition", String.Format("attachment;filename={0}", "performance.xlsx"))

'The following directive causes a open/save/cancel dialog for Excel to be displayed
Response.Cache.SetCacheability(HttpCacheability.Private)
Response.ContentType = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"

'Write to response
Response.BinaryWrite(bytes)

'Response.Flush() 'Do not flush if using compression
'Response.Close()
Response.End()

Creating a Spell as you type jQuery plugin - Part 2

2009-02-10T13:36:00.012Z

In my previous post, I outlined solutions to the technical challenges I faced trying to implement a complete client side browser based spell checking solution.

With the technical challenges sorted, I looked into writing a JQuery plug-in. The tutorials on the JQuery website are a good place to start. I also found the plugin development pattern from Mike Alsup extremely useful. It helps you set up a closure to keep your methods and variables private as well as setting up defaults and options (passed in as a JSON). I won’t go into these details here as they are covered so well in the articles I’ve referenced here.

Detecting non-IE browsers in your plug-in. The first task once the structure of the plug-in was in place and the options set up was to block non IE clients from using the plug-in, or more simply to exit the main function without executing any additional code. This was made very simple by using the following built-in JQuery code

//This plugin is only for IE 6.0 + users
if (!.browser.msie) return;
if (.browser.version <> 6) return;

Loading the dictionary using JQuery AJAX

The next item of code I wanted to tackle was getting the text-based dictionary into a structure the plug-in could understand and use. The $.ajax function provided an asynchronous way of retrieving data from the server. This is useful, because you don’t want the interface to be blocked whilst you potentially download a large file.

The success function passes the data to the loadDictionary function. When successful, the .fn.spellayt.loaded() function is called if it has been set on the plug-in. This is similar the event model used in c# programming. Note that this is how function pointers are exposed outside of the plug-in.

The loadDictionary function loads the words in the dictionary into a three dimensional array, consisting of an array for the first letter of the word, the length and the matching words. In this way, the words starting with the same letter and of the same length can be checked very quickly, as they will most likely have the closest Levenshtein distance.

//Load the dictionary from a url
$.ajax({
  type: "GET",
  url: $.fn.spellayt.global.options.url,
  dataType: "text",
  success: function(data) {

    //Load the dictionary into the dictionaryArray.
    loadDictionary(data);
    if ($.fn.spellayt.loaded != null) $.fn.spellayt.loaded();

  },

  error: function(XMLHttpRequest, textStatus, errorThrown) {
    if ($.fn.spellayt.loadError != null) fn.spellayt.loadError(textStatus);
  }

Highlighting words that have been misspellt

When the input gains focus, a few things need to happen on a regular basis as the user types

find new words to check
check if a word exists in the dictionary
Highlight misspellt words

This is done by using the setTimer and setInterval functions – the difference between them is minimal - the one fires a function every x milliseconds, the other calls a function once after the next x seconds.

$(this).focus(function(event) {

var g = $.fn.spellayt.global;
if (g.ready) {
 g.current = this;

 //Set a timer to break words every 1 second
 g.breakTimer = setInterval(function() {
   if (g.wordQueue.length == 0) breakText(g.current); }, 1000);

 //Set a timer to highlight words every 1/2 second
 g.highlight = setInterval(function() {
   $.fn.spellayt.highlight(g.current); }, 500);

 //Start the the word breaking queue
 doWordBreak()
}
});

The sentence and word breaking is done by the use of regular expression parameters – this is incredibly useful – a word breaking regex can be set as a parameter for e.g. a different language.

In the next part of this series, Ill look into the problems I faced when the processor intensive code for word breaking and checking blocked the UI and how to emulate a multi-threaded environment in the current version of javascript.

Creating a spell as you type jQuery plugin - part 1

Creating a spell as you type jQuery plugin - part 3

Download: http://plugins.jquery.com/project/spellayt

Creating a Spell as you type Jquery plugin - Part 1

2009-01-30T10:11:00.014Z

Recently I've become enamoured with the Jquery library and we are now prefer it over the buggy Microsoft Ajax Control toolkit for things like modal dialogs, autocompletes, as well as hiding and showing divs etc. In short it rocks and I wish I'd found it sooner.

A client had the need to to implement spell as you type, complete with red underline "squiggles" in their web based CRM product running in IE6. An example of this can be found in most popular word processing packages, eg the screenshot from Microsoft Word 2007, but less so online in web pages etc.

Annoyingly, this functionality is built into Firefox and Chrome, but not into Internet Explorer - even the latest IE8 beta. A look around the web produced a couple of hopeful options - a third party component as well as toolbar and plugins from Google and Microsoft Live.

The main problem we had with all of the above solutions was that they tried to overwrite the underlying input with a new element in the DOM. The font and layout settings were never copied correctly and caused the layout of the page to change. Some browser plugins only offered the popup dialog variety of spell checking, and not the inline "squiggles" approach.

Happy day - a bespoke developement was on the cards. The first thing I had to determine was "Is this actually possible in a browser?" and "Could this be turned into a JQuery plugin?" . At the start, I made a list of the problems that would need to be resolved in order to have a chance of creating a decent the plugin:

1. How to measure the location of words in an existing input/textarea?

I did recall seeing that IE had some support for returning the exact measurement of text, and although this wasn't valid with the W3C standard, this potentially wasn't a problem, since the plugin was only targeted at IE users anyway. The TextRange object provides a lot of functionality that would have been very hard to reproduce. You can return the absolute position and size of a piece of text using this object e.g. var wholeWordsOnly = 2;

var range = input.createTextRange();

range.findText(term, 0, wholeWordsOnly);

This will create a range over an input and position it around the first instance of the word, giving you the absolute position of this word (in pixels) on the page.

2. Underlining misspellt words with a squiggly line.

This turned out to be simpler than I thought. Once we have the dimensions of the word, it is relatively easy to insert a div with a repeating background image over the word by using a bit of css:

div.spellayt {position:absolute; z-index:96;

background:url(Images/spellayt.gif) repeat-x; margin: 0px; padding: 0px}

The image itself is only 4 pixels wide and three pixels high, it is positioned 3 pixels from the bottom of the bounding rectangle of the word, using Jquery to append the new div to the document body:

//Append the div to the document body

$("<div class="'spellayt'"

id="'divWord'"></div>").appendTo(document.body).show();

3. Where do I get a list of words and how do I find suggestions when there is a misspelling?

My next task was to find a dictionary of common use words in the English language. A search on the web located some likely candidates with appropriate licenses (GPL etc). The best option turned to be a plain text list of words, including all variations, capitalisations etc.

Projects like GNU Aspell have a dictionary of over 150 000 entries! This clocks in at 1.6 mb uncompressed and 300k+ compressed which is a major consideration for implementation of a client side spell checking solution.

Early on I had decided that the spell checking process would have to occur entirely on the browser for the plugin to be useful to anyone else, and to reduce the massive load that would be placed on the server if every word was to be checked. However with client side caching and server based gzip compression headers, I decided this was acceptable and pushed on.

Next was one of the potentially show stopping problems - how to get a list of suggestions for misspellings? Again this turned out to be a well defined problem with a solution, including source code! The following page by Michael Gilleland details the Levenshtein Distance algorithm used to compare the "closeness" of two words, as a value. This page contains source code and a nice demo provided by Lukasz Stilger, which I used with some fixes and modifications for performance.

At the time this now meant that I thought I had all the tools necessary to tackle the problem and I was ready to go ahead and create my first Jquery plugin "Spell as you type".

Creating a spell as you type jQuery plugin - part 2

Creating a spell as you type jQuery plugin - part 3

Download: http://plugins.jquery.com/project/spellayt