Ext Framework, jQuery and ASP.NET
If you are developing a browser-based application, or using Adobe AIR, then jQuery and Ext JS are prime choices for your framework. Of course you could code it all in raw Javascript and HTML but Daniel Penrod hasn't got the time or the inclination to type code all day. He wants rapid results!
With a little bit of magic you can do anything! I enjoy leaving the details of the intricate workings of object libraries to those lower level folks who enjoy typing code all day. If you’re like me, you’re only concerned with the higher level aspects of web development. I want to get things done fast, and ASP.NET and JavaScript libraries like Ext and jQuery make that possible. Some people cringe at JavaScript. I don’t claim to be an expert, but you don’t have to be a genius to use good JavaScript APIs. This article is aimed at those who would like to see greater things out of their presentation layers without having to write tremendous amounts of code to accomplish it.
Practical Overview
Let me start by explaining the practical uses of Ext and jQuery. The Ext Framework, for the most part, is geared at creating stunning user interfaces in a browser or AIR application that interact with the user much like what you would expect to see in a Flash or Silverlight application.
The great thing about Ext and jQuery is that they run on the client, so any server side language can interact with them. ASP.NET can be used as a wrapper, like Coolite (http://www.coolite.com/), which encapsulates the Ext Framework and supplies developers a standard way to implement Ext, or it can be used simply as a mechanism to interact with the client to create a customizable user experience. Either way you decide to use Ext, you will immediately see the power in its implementation.
Like Ext, jQuery is a cross-browser JavaScript library that takes the strain out of doing complex procedures on the client. jQuery is implemented in a way that most object oriented developers are familiar with, making it easy to learn and use. Every method in jQuery returns the object itself, allowing you to chain methods together. In .NET, a simple chain could consist of turning an object into a string and then calling the substring method all within one line of code:
objectA.ToString().Substring(0, 3).
One advantage of both libraries is their awareness of page state. Both Ext and jQuery use the document ready approach to ensure that page elements are ready to be manipulated before any calls are made. By using these two libraries, you immediately eliminate much of the time you would usually spend developing workarounds for common problems associated with DHTML and cross browser integration. You also give yourself a plethora of web 2.0 functions.
Getting Started
To get started using Ext and jQuery, download the latest versions:
- Ext Framework SDK: http://extjs.com/products/extjs/download.php
- jQuery: http://docs.jQuery.com/Downloading_jQuery (Optional, Ext contains a version of jQuery already)
Create a directory in the root of your web application called resources and then create a subdirectory called jscript. Copy the entire Ext Framework SDK folder into the jscript subdirectory. To reference these script files anywhere in your application you will need to run your application from a web server. In the example I share in this article, I created a web application in IIS called webportal. So now, anywhere in my application I can reference Ext and jQuery by using the relative path of the application itself: /webportal/resources/jscript/.
Note: Some Ext examples in the SDK contain php code, so some samples will not work unless your server can serve php.
Including the Script Libraries
Ext is a little more problematical to include in your applications and it has a bigger footprint than jQuery; however, there are options that will improve performance if you do not require the use of the entire library. For example, you can build your own version of Ext using this wizard: http://extjs.com/products/extjs/build/.
Below I show how to include these libraries in your ASP.NET Master page. Please check out the source code to my example web portal as well for a more in depth view of the setup.
At the time of this article the current version of Ext was 2.2. If a new version of Ext where to come out, all you would need to do is delete the old ext-2.2 directory and copy the new SDK in its place. You would then update the references below to the new version. Using ASP.NET you could retain the version in a settings file and reference that setting everywhere in your application. You will notice in my portal example that this is the approach I took.
Just below the script references are the style sheets for Ext. The first one is required. The second one is optional if you want to override the default theme with a custom theme. In this article I am using the slickness theme, which can be downloaded from the Ext website.
<script type="text/javascript" src="/webportal/resources/jscript/ext-2.2/adapter/jQuery/jQuery.js"
xml:space="preserve">
//<![CDATA[jQuery LIBRARY
//]]>
</script>
<script type="text/javascript" src="/webportal/resources/jscript/ext-2.2/adapter/jQuery/ext-jQuery-adapter.js"
xml:space="preserve">
//<![CDATA[EXT jQuery LIBRARY
//]]>
</script>
<script type="text/javascript" src="/webportal/resources/jscript/ext-2.2/ext-all.js"
xml:space="preserve">
//<![CDATA[EXT FRAMEWORK
//]]>
</script>
<link href="/webportal/resources/jscript/ext-2.2/resources/css/ext-all.css"
rel="stylesheet" type="text/css" />
<link href="/webportal/resources/jscript/ext-2.2/resources/css/xtheme-slickness.css"
rel="stylesheet" type="text/css" />
If you want to use the jQuery library or any other library that comes with Ext you will need to look at the INCLUDE_ORDER.txt file in the SDK. Notice that jQuery is included first.
Looking at the Code
My example web portal uses an ASP.NET Master Page consisting of a two column content layout with a header, body and footer. Ext powers the entire layout. Let’s examine the code.
And this is what it produces (minus the lightshow in the upper right hand corner J):
The layout has the north (BoxComponent), the west navigation panel, the center content panel and the south panel. The west and the south panel are collapsible. The viewport has the black slickness theme as defined in the xtheme-slickness stylesheet, which overrides the default look. You can download additional themes from the Ext website, or you can create your own.
So how do we interact with the panels? Let’s say you want to collapse a panel using a button. Remember those global panel variables? Here is some jQuery code:
<div class="northRegion" style="position: absolute; top: 5px; right: 0%; z-index: 50000;">
</div>
<input type="button" value="North" class="northRegionButton" />
<input type="button" value="South" class="southRegionButton" />
<input type="button" value="West" class="westRegionButton" />
<input type="button" value="Center" class="centerRegionButton" />
<script type="text/javascript">
//--------------------------------
// jQuery Code
//--------------------------------
$(document).ready(function(){
//--------------------------------
// Setup North Region
//--------------------------------
$("div.northRegion").hide();
$("div.northRegion").html(
"<div style='font-family: Tahoma; font-size: 11px; color: white; width: 800px; " +
"text-align: center;'><h1 style='font-family: Impact; font-size: 50px;'>North Region" +
"</h1>this is the Ext North Region"
);
//--------------------------------
// Events
//--------------------------------
// North Region
$("input.northRegionButton").click(function(){ $("div.northRegion").toggle("slow"); });
// South Region (pSouth - Global Ext Panel defined in MasterPage)
$("input.southRegionButton").click(function(){ (pSouth.collapsed) ? pSouth.expand() : pSouth.collapse() });
// West Region (pWest - Global Ext Panel defined in MasterPage)
$("input.westRegionButton").click(function(){ (pWest.collapsed) ? pWest.expand() : pWest.collapse() });
// Center Region
$("input.centerRegionButton").click(function(){
var $child = $("#center").children();
var $page0 = "/webportal/resources/jscript/ext-2.2/examples/samples.html";
var $page1 = "/webportal/resources/jscript/ext-2.2/examples/collapsed.html";
($child[0].src.toLowerCase().match($page1) != null) ? $child[0].src = $page0 : $child[0].src = $page1;
});
//--------------------------------
});
</script>
Inside the jQuery document ready function I included a setup section where I set up my northRegion div. Inside my northRegion div I want to toggle in and out some words from the right hand portion of the screen in a swoop like fashion when the northRegionButton is pushed. I setup the northRegion div and then defined a jQuery function for when the northRegionButton is pushed:
$("input.northRegionButton").click(function(){ $("div.northRegion").toggle("slow"); });).
Inside the click event is logic to toggle in the northRegion div content. You can see at first I had to hide the northRegion, and then I defined what it contains and I defined an event for it. The result is pretty cool considering all the JavaScript code in the background making it work that I didn’t have to write myself.
Now what about those global Ext panels? As mentioned previously, the south and west panels are collapsible. In the jQuery script above I make a basic condition for the two buttons in their click events. For example, the south panel (pSouth) I say – If the south panel is collapsed then expand it, else collapse it. I did the same for the west panel (pWest). You can handle any global Ext object with the same approach using jQuery.
The source of the project is here (a 7 Mb zip file)
Using Coolite / ASP.NET
Don’t want to bother with JavaScript? Well Coolite is your answer. I like Coolite, but I also like JavaScript so it really boils down to your preference. There are advantages to both approaches. Coolite is good because you can drag and drop server controls on your web form and setup the properties in Visual Studio just like you would any other server control. Coolite is free unless you want the source code. The biggest disadvantage of Coolite is when Ext upgrades. Because Ext is encapsulated in Coolite you have to wait for Coolite to upgrade before you can take advantage of the new features and fixes of Ext. Also, when Coolite does upgrade, you have to upgrade all your projects to use the new version of Coolite. It can become very tedious doing this. Basically with Coolite, you get the latest version now and stick with it for the long run. Another disadvantage is the extent to what Coolite implements. Not all the features of Ext are available in Coolite controls. So with that said, don’t let my negativity dissuade you from checking out Coolite. It is very awesome and it continues to become more powerful as time goes on!
Links to consider
The following will be helpful in your exploration of Ext and jQuery.
In Summary
When you have deadlines and a surplus of projects on the backburner, Ext and jQuery are Godsends that save you time and your company money. Their intense functions will make your boss smile and your customers happy while making you look like a superhero. I love the reaction I get when I implement these libraries at work. I take all the credit and I don’t feel ashamed! Happy coding!