I am currently engaged in an opportunity that has taken me to New York to help a client rewrite one of their existing VB6 applications in ASP .NET as a web application.  To aid us with developing this application and provide a very modern and consistent look and feel we are using the Coolite UI Framework for ASP .NET which leverages the powerful ExtJS JavaScript library inside of WebForm controls.

However, we have found that the the biggest downside to using Coolite is the intense lack of documentation from the creators. This makes it hard to know exactly what we are doing and often leaves us to pull from two or three sites to fully understand what it is capable of.  The biggest help comes from the Examples site, and the ExtJS documentation site, since the controls follow the supported properties for those controls. ExtJS has excellent documentation.  But I wanted to talk about Coolite cause I think it has a lot of potential and can really be very helpful if people learn more about it.  So to start this series I am going to give a very basic example of an application which uses Coolite and JavaScript.  So lets get started.

To begin you will need to download the Coolite binaries from Coolite.com, this will install three binaries (Coolite.Ext.Web.dll, Coolite.Utilities.dll, and Newtonsoft.Json.dll) and reference these in your solution.

The second step is to update your web application web.config file to support Coolite in the application.  So first add this line to your web.config after the last section group.

<configSections ..>
  </sectionGroup>
  <section name="coolite"
       type="Coolite.Ext.Web.GlobalConfig"
       requirePermission="false"/>
</configSections>
<coolite idMode="Explicit"
       theme="Default"
       initScriptMode="Linked"
       scriptMode="Debug" />

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Also included in this screen shot is the next step of what to add, and that is the new section as defined by the section definition we just added.  Here you can specify a number of things, but the two things to take note of here are:

• idMode:  use Explicit here so that Coolite controls can be referenced in JavaScript without worry about naming containers as with typical ASP .NET controls
• theme: defines the UI styles that Coolite will reference for all controls. Can be Default, Gray, Slate

The next thing we have to add are some reference to HTTP handlers and modules; so we add the following lines to the web.config:

To httpHandlers:

<httpHandlers>
  <add path="*/coolite.axd" verb="*"
     type="Coolite.Ext.Web.ResourceManager"
     validate="false"/>
</httpHandlers>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

To httpModules:

<httpModules>
    <add name="AjaxRequestModule"
         type="Coolite.Ext.Web.AjaxRequestModule,
                    Coolite.Ext.Web"/>
</httpModules>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Optionally, I like to add the following line to my pages collection in system.web to make referencing the Coolite controls easier:

<pages>
    <controls>
        <add assembly="Coolite.Ext.Web"
            namespace="Coolite.Ext.Web"
            tagPrefix="ext"/>
    </controls>
</pages>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

So lets start with building a simple form that will say “Hello {name}” provided a name in a textbox.  I am going to do this using JavaScript on the client side, another blog post will detail doing it with AjaxEvents.

So lets first show some basic markup that uses Coolite to create a form, this first thing that every page using Coolite controls must have is a ScriptManager to facilitate the inclusion of JavaScript to support the various effects, so:

Next, we will want to create a small form, so we will use a FormPanel control, which gives us a very nice look and feel, so:

I have defined a lot of properties on the form, here is an explanation for a few of them:

• FormID: Used in AjaxEvent referencing and to tie controls to certain actions, not really used in this approach, but will be useful when we show AjaxEvents
• Title: The title displayed for the Form (see next screenshot)
• ButtonAlign: The alignment of the buttons defined in the FormPanels portion
• StyleSpec: The style rule to apply to the panel as a whole

Running this should produce the following UI:

Not a bad looking UI considering we haven’t had to do any CSS and this is compatible with IE6 even, so lets keep moving forward and add the actual UI.

The FormPanel has quite a few internal sections, for this tutorial we will use two of them and .  Here is the updated code:

   1:  <body>

   2:    <ext:ScriptManager ID="ScriptManager1" runat="server" />

   3:    <ext:FormPanel ID="fp1" runat="server"

   4:      FormID="mainForm" Title="Test Form"

   5:      Height="150" Width="300" ButtonAlign="Right"

   6:      BodyStyle="padding: 10px;" 

   7:      StyleSpec="margin: 10px;">

   8:      <Body>

   9:        <ext:FormLayout ID="frmLayout" runat="server"

  10:          LabelSeparator=" " LabelAlign="Left">

  11:          <ext:Anchor>

  12:            <ext:TextField ID="txtName" runat="server"

  13:              AllowBlank="false"

  14:              MaxLength="15" FieldLabel="Name" />

  15:          </ext:Anchor>

  16:        </ext:FormLayout>

  17:      </Body>

  18:      <Buttons>

  19:        <ext:Button ID="btnSubmit" runat="server" Text="Submit" Icon="Accept" />

  20:      </Buttons>

  21:    </ext:FormPanel>

  22:  </body>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

So what we have done first is the update the body of the FormPanel with a FormLayout.  There are a lot of things that FormLayout does for us, but for new its enough that it will render the elements described in each block vertically with some label text to the left.

In this case we are adding a a Ext Textfield that has a few things defined:

• AllowBlank – the textbox will validate user input and require input
• FieldLabel – this is the text of the label that will appear to the left. It can also appear above the control, this controlled by the LabelAlign property (see the FormLayout)

Next we move to the group. This section is placed beneath the Panel body and houses button controls, here I am defining a single button.  If you run this, it should output something like this:

The next part of this is to allow the user to click “Submit” and have the program respond with an Ext alert that says “Hello”.  So the first thing we will need is something to listen for this event.  Update the Button definitions as such:

<ext:Button ID="btnSubmit" runat="server"
  Text="Submit" Icon="Accept">
  <Listeners>
    <Click Fn="SayHello" />
  </Listeners>
</ext:Button>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

There are a number of events that we can listen for, obviously the one that makes the most sense in this case is Click.  So when a click happens we want to call the function SayHello. So here is a look at the SayHello function:

<script language="javascript" type="text/javascript">
    var SayHello = function() {
        var name = txtName.getValue();
        Ext.Msg.alert("Alert", "Hello " + name);
      }
    

Notice how we are getting the value of the text field, we are simply calling its name, no ClientID (in this case).  We are then creating an ExtJS alert window to display the message.  The reason we use this here is that it will provide an alert that is linked to our theme, this way all visual elements have the same appearance.  So clicking the button should do this:

One thing I do want to point out is that this alert window is NOT an alert window.  It does not block execution, it relies on callbacks to execute code after the “OK” click.  It is nothing more than a modal dialog being shown.

So there you have it, that is a very basic application which uses Coolite to perform a very basic function.  The next time around we will describe how to do this using AjaxEvents, which are a very interesting concept and take much of the problems you encounter with MS Ajax out of the picture.

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }