My screencasts are consistently popular, so I thought I’d create another which talks about a slick usage of my favourite JS framework, Ext JS. In this screencast, I show how to display images stored on a server directory using a PHP JSON backend which provides data to an Ext DataView. I then allow deletion of these images and uploading of new images in an Ajax-style fashion, with no page refreshes.

This approach can be useful when editing a complex form - the details of a product you’re selling on your ecommerce site, for example - and you want to upload images without having to repopulate the other form fields when the page reloads, as it would with a standard file upload.

You can view the screencast here or download the full download the source code. I use loeppky’s BrowseButton extension for Ext 2, which you can read more about at his forum post. I hope you enjoy the screencast which is provided in association with Plastiscenic Ltd.

After my earlier post on JS generation from C#, I wanted to investigate my options. Although zproxy highlighted the jsc project, I wanted to focus on a real world scenario first and so I’m looking at ExtSharp, which relies on Script#, a project which will “compile your C# source code into JavaScript”.

ExtSharp leverages Script# to allow you to write ExtJS applications in C#, which was my target when I began thinking about JS generation. I’d like full intellisense, documentation and compile-time checking when working with this rich framework. Will ExtSharp give me that?

Downloading ExtJS2Samples-v2.0.1.zip from the Google Code site gives me a solution of samples. Here an interesting implementation issue arises - all of the actual C#-Javascript class files are in a separate project to the .aspx pages which display them. This is down to necessity; Script# uses an assembly called sscorlib which, bizarrely, seems to provide its own implementations of many of the .NET types found in the mscorlib assembly.

This separate project also runs an MSBuild targets file from Script# which runs after main compilation to compile the C# into Javascript. Straight away I’m seeing two bits of magic - sscorlib and post-build events - which I’m not too keen on. But the solution builds, and after changing the web.config references to nStuff.ScriptSharp.Web to 0.4.5.0, I am able to view the samples.

Based on my earlier post, I was interested in the Window sample, but unfortunately that didn’t work. The array Grid one did though, and it operated just as the ExtJS website sample does. Many of the other samples are missing, which is disappointing; of the ones which are present, most work very well. Overall, I was encouraged, and I moved on to looking at the C# code which was generating these samples.

Let’s look at how a ColumnModel is built when working in Javascript:

var colModel = new Ext.grid.ColumnModel([
           {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
            {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
            {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
            {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
            {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
 ]);

I think that’s pretty concise - there’s not a lot of cruft. Now the ExtSharp version:

ColumnModel colModel = new ColumnModel(new Dictionary[] {
    new Dictionary("id", "company", "header", "Company", "width", 160, "sortable", true, "locked", false, "dataIndex", "company"),
    new Dictionary("header", "Price", "width", 75, "sortable", true, "renderer", new MoneyRenderer(Format.usMoney), "dataIndex", "price"),
    new Dictionary("header", "Change", "width", 75, "sortable", true, "renderer", new ColumnRenderer(change), "dataIndex", "change"),
    new Dictionary("header", "% Change", "width", 75, "sortable", true, "renderer", new ColumnRenderer(pctChange), "dataIndex", "pctChange"),
    new Dictionary("header", "Last Updated", "width", 85, "sortable", true, "renderer", Format.dateRenderer("m/d/Y"), "dataIndex", "lastChange")
});

Hmm. Lots of strings - I’m not keen. This is one of two methods of providing a configuration to an Ext class, the second of which involves a specific config class:

Ext.grid.GridPanel grid = new Ext.grid.GridPanel(new Ext.grid.GridPanelConfig()
    .el("grid-example")
    .ds(ds)
    .cm(colModel)
    .autoExpandColumn("company")
    .height(350)
    .width(600)
    .title("Array Grid")
    .ToDictionary()
);

Unconventional style, to say the least, but at least it’s properly typed. This is pretty far away from my ideal API for this kind of thing. Let’s look at how this is turned into Javascript.

As I previously mentioned, the Script# project contains MSBuild targets which generate the JS code after the build is complete. This code can then either be referenced directly, or via some ASP.NET controls from your ASPX pages. As well as your own generated code, you must also reference a couple of Script# files and a wrapper file for Ext itself. That wrapper file is actually what makes everything work here - rather than your C# code being converted into something which works with the Ext library, it instead only works with the Ext wrapper provided by ExtSharp.

Looking at the ExtSharp project overall, I’m not a convert. There are too many layers between your C# and where it finally touches the “real” Javascript:

1. Your generated JS
2. ExtSharp JS wrapper
3. Script# utility JS

The C# API is also pretty horrible - certainly not in my style but also far from being an API I recognise from any other project I’ve worked on. Whether this is a style choice or due to technical limitations, I’m not sure.

The ExtSharp project definitely drew my curiosity, and could hold promise. In its current state, I wouldn’t consider using it in a project of my own, as the API is not strong enough to make me swap from native Javascript. Still, I will continue to follow future work with interest.

I’ve previously talked about my dislike for code generation in Javascript. I still standby that, but I am beginning to have a change of heart for certain scenarios. I’ve been working on a couple of ExtJS applications recently and I’ve got lots of code which is purely ExtJS stuff on its own - no HTML or other code in there really. It’s been a project where I’ve been using C# 3 and it’s partly the similarities between the two languages which have triggered this rethink.

Take a look at this code:

var win = new Ext.Window({
	title: 'Order Viewer', layout: 'border',
	width: 500, height: 500,
	modal: true, resizable: false, closable: false, draggable: false,
	items: [ frm, lst ]
});

win.on('render', function() {
	load(5);
});

win.show();

That’s pretty standard stuff for what I’m doing with Ext right now - I create a new window with a load of configuration options, then add in an event handler for the window’s render event, and finally show the window on screen. Now imagine that you could write the following in C# 3:

var win = new Ext.Window{
	Title = "OrderViewer", Layout = Layout.Border,
	Width = 100, Height = 200,
	Modal = true, Resizable = false, Closable = false, Draggable = false,
	Items = new [] { frm, lst }
};

win.Render += delegate {
	load(5);
};

win.show();

As far as I’m aware, all of the above is valid C# 3 code. I’ve basically written it as I’d like to use it, with an enum for the Layout type, and C# style event handler syntax, but the interesting thing to me is how very similar it is to the Javascript version.

The ExtSharp project allows you to write your Ext code in C# and have it rendered as Javascript. I’m going to explore it in my next post, and examine how closely it can be made to fit the code sample above.

Just a quick pointer in response to a comment, all of the posts I make are categorised, and those categories can be accessed by hacking the URL. For example, http://colinramsay.co.uk/diary/category/screencasts/ will list all of my screencast posts. The obvious problem with that is that you’d need to know what the categories were in the first place, so as part of an ongoing blog redesign, I’ve included the categories of a post underneath the post title.

You can also hack the URL to browse by date, for example http://colinramsay.co.uk/diary/2008/03 shows all of the posts I made in March this year, and http://colinramsay.co.uk/diary/2007 shows all of the posts from last year.

As I mentioned, I’m in the middle of a redesign, but the main change you should be able to see is in the readability of my posts; I’ve increased the font size and the line height to make it a lot easier on the eyes.

This post specifically refers to the use of the inverse attribute on Many-To-One relationships, such as a Category with many products. That’s simply because it’s the one I’m dealing with right now, and it’s the one I’ve been using most commonly.
(more…)

A big problem we’re having on a current project is ensuring that reports generated by SSRS actually contain the right data. For example, we have some fairly complicated ranking and averaging going on in subtotal columns that can look right on first glance but will be wrong for edge cases. The other problem is that one “fix” can pretty easily result in a regression elsewhere.

My current thought is to simply use SSRS XML export on the reports and use that to run unit tests against. We could push known data to the database, export the report, and run asserts against the average and ranking values in the XML.

However, I’m not sure how happy SSRS will be with this approach; for example, how easy will it be to change the datasource on the fly for these tests? And obviously, when the reports get redesigned or changed, the unit tests could break. I think it’s worth investigating; I wonder if anyone else has experience with such testing?

It surprises me that no-one offers a web-based build server - specify your source control connection details, set up a couple of tasks (build, test, report) and hit “go”. Is there some obvious problem with this idea that I’ve missed?

I want a build server but I don’t want to have to maintain the install or faff around with configs. I’ve tried TeamCity, which seemed ok, but the interface wasn’t great and it doesn’t support MbUnit.

I’ve started using Beanstalk for Subversion hosting, and it works very well indeed, so maybe that’s what’s got my thirst for web-bases apps going.

I’m starting work on a new project on Monday and I’ve got full control of all development aspects. With that in mind, I’ve been thinking of how I can get to beta status as quickly as possible - finish main development and get to the stage where the client is reviewing minor details. This is dependant on a combination of my skillset and the tools I’m going to use. I’ve got:

• Existing Plastiscenic.Commons code and project structure for quick setup
• C# 3.0 to remove some boiler plate code (automatic properties for example)
• Monorail to develop with fewer LOC in the main app
• NHibernate for low friction database work
• ExtJS for rich backend
• Strong cross-technology skills to integrate the above

Are there any additions to this that you use to accelerate the development process?

Having been delving into the world of IoC, SoC and TDD, I find myself extracting an interface more and more often. A little too often… I have quite a few interfaces that exist as nothing more than a crutch. And now using AspView I have even more! Where will this madness end!

For a while I’ve been meaning to come up with a repeatable starting point for my projects. Not only is adding references, configuration and structure to a solution labourious, it’s also pretty difficult to remember every step. Ideally, I wanted to be able to start a project with everything ready for me.

I spent a while today doing just that; a solution which matches the starting point for most of my projects. Firstly, there’s a Monorail project with Windsor, NHibernate and logging integration switched on. All of the required DLL’s have been moved into a Libs directory in the solution folder - the idea behind that is to allow a developer to be able to build the project without needing to install Monorail or any other components. Secondly, there’s a unit tests project with a couple of folders; Controllers and Persistance. These suggest a future structure for this project, with Persistance being used to check the NH mappings work as expected. In addition it contains an NHTestBase class which allows my unit tests to run with a SqlCe database. Thirdly, a project called Core; this holds core functionality for the solution, such as entities and services, exceptions and utility methods.

The whole thing can be found here: http://dev.plastiscenic.co.uk/svn/projects/Plastiscenic.Sample/ but it’s missing one thing - a good way to customise it. Namespaces, directory names, etc, need to be manually changed. For me that’s still better than building it up from scratch but it’s still a pain. If anyone’s got any suggestions, I’d love to hear them.

One final note; this has pushed me to collect together a couple of classes I use often, and I’ve stolen Ayende’s naming convention by creating Plastiscenic Commons. This contains a repository implementation, stuff for setting up a SqlCe database, a static container accessor, and a few other bits. Nothing exciting but I always need them.

Feedback appreciated.