Coolite

Preview of AjaxMethods

noreply@blogger.com (geoffrey.mcgill) — Fri, 28 Nov 2008 03:01:00 +0000

A huge new feature to be introduced with the next release (v0.7) of the Coolite Toolkit is the [AjaxMethod] Attribute.

Converting a standard server-side Method into an "AjaxMethod" enables the Method to be called directly from your client-side JavaScript. No PostBack, no page flicker and all communication is performed through lightweight AJAX + JSON.

The [AjaxMethod] Attribute can be applied to any public or public static .NET server-side Method (C#, VB, etc.).

An [AjaxMethod] is similar in functionaltiy to the ASP.NET [WebMethod] Attribute except an AjaxMethod is optimized to serialize and return data in an easily consumed JSON response.

Getting Started Basic Example

The following code sample demonstrates a simple AjaxMethod returning a string to the client.

Example

[AjaxMethod]
public string SayHello(string text)
{
    return "Hello " + text;
}

Once the "SayHello" Method has been tagged with the [AjaxMethod] Attribute, the Method is now available to be called directly from JavaScript. The following sample demonstrates calling "SayHello" by clicking a hyperlink.

Example

<a href="#" onclick="Coolite.AjaxMethods.SayHello('World')">Click Me</a>

Once clicked, the SayHello JavaScript function will make an Ajax request back to the server and invoke the server-side SayHello Method. The string "Hello World" would be sent back to the browser packaged in a lightweight JSON object.

Example

{result:"Hello World"}

Calling SayHello returns a total response size of less than 25 characters... that's tight.

Success Handling

If the server-side AjaxMethod returns an object, we need to provide a way of handling that response. As the last parameter of the JavaScript function you can pass in an optional config object with a success handler.

Lets elaborate on our example by adding a <Click> Listener to an <ext:Button> Control and include the optional config object with a success function defined to alert the result.

Example

<ext:Button ID="Button1" runat="server" Text="Say Hello">
<Listeners>
 <Click Handler="
     Coolite.AjaxMethods.SayHello('World', {
         success: doAlert
     });" />
</Listeners>
</ext:Button>

<script type="text/javascript">
var doAlert = function (result) {
 alert(result);
}
</script>

Details

So, lets break this down a bit. First off, the argument signature for the SayHello JavaScript function would be described as follows:

Example

SayHello(string text, object config)

The text argument is pretty simple, as it's the string sent into the server-side SayHello C# Method.

The config argument is a JavaScript object literal made up of a collection of name:value pairs. The JavaScript object literal is similar in concept to .NET Anonymous types. It's a "thing" (ie. object) with some properties.

In the example above, the success property is set with the name of a JavaScript function to call upon a successful response from the server.

Whatever object is returned from the server-side AjaxMethod is serialized into JSON, and passed as the return result into the success JavaScript function. Using our SayHello example, the result is passed to the doAlert JavaScript function.

The success function can also be coded inline within the config object.

Example

<ext:Button ID="Button1" runat="server" Text="Say Hello">
<Listeners>
 <Click Handler="
     Coolite.AjaxMethods.SayHello('World', {
         success: function (result) {
             alert(result);
         }
     });" />
</Listeners>
</ext:Button>

Summary

Adding the [AjaxMethod] Attribute to your server-side Method enables the Method to be called from client-side JavaScript running in a browser, without having to perform a PostBack. The request from the client to the web server is made using Ajax and the response from the server back to the client is packaged as a JSON object.

We're just scratching the surface here, so in future posts we'll dive deeper into performance tuning and advanced AjaxMethod configuration options.

More information and code samples demonstrating AjaxMethods are available in the recently updated Examples Explorer.

The Coolite Toolkit is a suite of powerful Ajax enabled ASP.NET Web Controls which simplify the development of Web Applications. The Coolite Toolkit includes the Ext JS JavaScript Framework and together are dual licensed with an open-source "Community" option or closed-source "Professional" version.

Support Subscription SALE + ExtJS Book Gift

noreply@blogger.com (geoffrey.mcgill) — Tue, 25 Nov 2008 17:54:00 +0000

Yesterday we published a preview build of the v0.7 Examples Explorer and today we're announcing a huge pre-release SALE for all new Coolite Toolkit Professional License purchases.

From now until the public release of the Coolite Toolkit v0.7 (early December) we're including a free Support Subscription with each Professional License purchase.

Details

License	FREE Support Subscription
Developer	Silver Support Subscription (Value $299)
Team	Gold Support Subscription (value $999)
Workgroup	Platinum Subscription (value $2,499)
Enterprise	Diamond Subscription (value $4,999)

All Support Subscriptions include upgrading developers to Premium Forum Membership, direct access to the project source code (including the latest build of v0.7), full source code for the Examples Explorer, email support and more.

AND...

To jumpstart everyones introduction to the ExtJS JavaScript Framework we're also including a FREE copy of the newly published "Learning Ext JS" book from Packt Publishing.

Details

License	Free Books
Developer	One (1) (value $40)
Team	Two (2) (value $80)
Workgroup	Five (5) (value $200)
Enterprise	Ten (10) (value $400)

For a single Professional Developer License that's $330 in freebie's.

The "Learning Ext JS" book ~~is due to be published and shipped in December~~ has just been published. You'll be getting a fresh copy hot off the press and delivered straight to your cubicle. :-)

Professional Licenses can be purchased online via PayPal, or please feel free to contact us (sales@coolite.com) to make other payment arrangements.

Coolite Toolkit V0.7 PREVIEW

noreply@blogger.com (geoffrey.mcgill) — Mon, 24 Nov 2008 12:20:00 +0000

The Coolite Toolkit Examples Explorer has been updated to provide a preview of the latest v0.7 code-base and upcoming public release.

The v0.7 release will bring the Toolkit closer to full widget coverage of the ExtJS Library and introduces several new core asp.net web controls such as the <ext:TreePanel> and Menu.

New Features and ASP.NET Web Controls

[AjaxMethod]	Call server-side Methods from JavaScript, similar to an ASP.NET [WebMethod].
<ext:TreePanel>	Display Tree based data.
<ext:MenuPanel>	Menu support added for all Controls.
<ext:MenuPanel>	Menu support added for all Controls.
<ext:Toolbar>	Toolbar and menus that contain various components like date pickers, color pickers, sub-menus and more.
<ext:StatusBar>	Drop into the bottom of any panel to display status text and icons.
<ext:TaskManager>	Run timed tasks to fire client-side and server-side events.
<ext:TriggerField>	Similar to a TextField control but with option to add one (or more) "trigger" buttons. The ComboBox and DateField are also examples of TriggerFields.
<ext:ProgressBar>	A basic progress bar component to display messages to your users during long running tasks.
<ext:ColorPalette>	Customizable color selector with ability to add as a Menu item or use a standalone control.
<ext:SplitButton> and <ext:CycleButton>	Add Menus to your Buttons.

Notable New Examples

Getting Started

Getting started with the Coolite Toolkit. Download, Project Setup and Hello World. Many more getting started examples in the works so watch this space as we close in on the v0.7 release.

AjaxMethods

Call server-side code using client-side JavaScript by just setting the [AjaxMethod] Attribute. Light-weight client-server communication via Json. Add to your Page, UserControl or WebService and performance tune to meet your specific requirements.

TreePanel

Present tree based data with a full array of features including animations, load-on-demand via Ajax requests, rich client-side API and of course full access to the server using AjaxEvents.

Toolbar with several Button controls demonstrating various Menu configurations including sub-menus, color picker, adding Listeners and AjaxEvents.

TaskManager

Run timed tasks in the browser and fire client-side and/or server-side events at regular intervals. Similar to a "Timer" control.

We're putting the finishing touches on v0.7 and working hard towards the final release. Your feedback is appreciated, so please jump into the forums and let us know what you think.

Coolite Toolkit Version 0.6 Released

noreply@blogger.com (geoffrey.mcgill) — Tue, 07 Oct 2008 19:00:00 +0000

We are pleased to announce the release of the Coolite Toolkit Version 0.6. This release is the most feature packed Coolite Toolkit version to date and ships with 20+ new web controls, new Ajax functionality and dozens of new features to help impress your boss and clients.

New Features

Examples Explorer

We're thrilled with our new "Examples Explorer" and over time we will be filling the explorer with hundreds of working code samples. The explorer is a great place to jump start your introduction into the Coolite Toolkit and simplify adding new functionality to your own projects. Each example also includes a real time "Source Code" viewer, .zip download of the files and "Direct Link" option.

New Slate Theme

The popular ExtJS Slate Theme originally developed by J.C. Bize is now included along with the original "Default" and "Gray" Themes. Just set Theme="Slate" in your <ext:ScriptManager>. As well, continuing with our commitment to provide advanced Visual Studio (and Visual Web Developer Express!) design-time support, switching Themes instantly updates the "look and feel" of all the controls on your Page during design.

Portal

The new <ext:Portal> opens up a whole new world of possibilities for ASP.NET developers. Load unique content or external websites into Portlets and allow your users to drag, drop and re-arrange.

See Portal Example

AjaxEvents

The new AjaxEvents functionality provides a simplified method of attaching Ajax functionality to any client-side event of any element on your Page. For example you can now attach a "Click" event to any Control (Coolite or otherwise) or html element and fire a server-side event handler in your code-behind. The AjaxEvents work similar to the typical server-side ASP.NET events you are familiar with, for example clicking a Button, but now performs the "postback" with an Ajax request and the Page does not reload.

See AjaxEvents Example

Grid Panel

Displaying Grid based data is a key piece of functionality for any web application and the Coolite Toolkit now includes the <ext:GridPanel>. The quantity and quality of functionality included with the new GridPanel Control is staggering. The ease and flexibility of which you can create powerful Grids for displaying, editing, paging, sorting, grouping and filtering data is unrivaled in today's ASP.NET Web Control market.

The <ext:GridPanel> is used in conjunction with the new <ext:Store> control. The <ext:Store> can be loaded with data from any IDataSource control, such as <asp:SQLDataSource>, <asp:ObjectDataSource> and <asp:LinqDataSource>. The Store is flexible enough to load data from any IEnumerable object, such as a Generic List<> or an Array of objects.

The <ext:Store> can also be pointed to any url which returns a JSON, XML feed or just a simple Array of data.

See the following GridPanel examples for a quick introduction to the new functionality.

Data from an Array

Remote Paging and Sorting using

GridFilters

Grouping Summary

Sliding Pager

The Version 0.6 installer and/or manual installation package is available to download now.

Technical support is provided online within the Coolite Community Forums or enhanced support options available with the purchase of a Premium Support Subscription.

Please feel free to contact us if you have any questions or comments as we're always happy to help.

ViewPort Preview

noreply@blogger.com (geoffrey.mcgill) — Thu, 10 Apr 2008 08:08:00 +0000

Hot on the heels of the BorderLayout Preview, is a preview for the new Coolite ViewPort ASP.NET web control.

When added to your Page, the ViewPort control will automatically size itself to the size of the browser window content area (viewport). The ViewPort control must contain a Layout control (typically BorderLayout). Within each Region of the BorderLayout, you can add other containers controls such as Panel, TabPanel, TreePanel or GridPanel.

ViewPort with BorderLayout

Child controls within a BorderLayout Region (North, South, East, West or Center) can themselves contain a Layout. By simply combining various Layout and Panel controls, a developer, within minutes can create elegant and functional application layouts which work consistently across all modern web browsers.

Code samples for both markup (<ext:ViewPort />) and C# code-behind are provided.

The sample also demonstrates the included "Gray" Theme, which can easily be set with one property at the Page, Session, Application or web.config levels.

The ViewPort control will be available with the version 0.5 release of the Coolite Toolkit.

BorderLayout (and more) Preview

noreply@blogger.com (geoffrey.mcgill) — Wed, 09 Apr 2008 12:36:00 +0000

The Layout controls for the version 0.5 release are coming together nicely. It's been a challenge, but I think we've found the sweet spot between clean markup, object model, Visual Studio designer support, Intellisense support and being true to the ExtJS framework.

The following examples provide code samples (markup + C#) and demonstrate the Layout controls within a Window control. The main Layout is controlled by a BorderLayout.

NOTE This build is not currently available for download. Everything you see will be included with the version 0.5 release.

Window with Simple Layout

Window with Complex Layout

All Layout controls, except FormLayout/FormPanel, are now working in both markup and code-behind. Design-time support for the Layout controls is still under development, but progressing quickly.

More v0.5 Notes and a few Breaking Changes

1. The ViewPort control will be included with the v0.5 release.

2. The TagPrefix has changed from 'cool' to 'ext'.

Example

// Old
<cool:window runat="server" id="Window1" />

// New
<ext:window runat="server" id="Window1" />

3. The Namespace (.dll) has changed to Coolite.Ext.Web from Coolite.Web.UI.

Example

// Old
Window win = new Coolite.Web.UI.Window();

// New
Window win = new Coolite.Ext.Web.Window();

4. The Grid (GridPanel) control *might* not be included with the 0.5 release. Completion of the Layout controls is further ahead than the GridPanel, so we might make the decision to release v0.5 early without including the GridPanel.

Any feedback is very much appreciated.

MIX08 in Vegas

noreply@blogger.com (geoffrey.mcgill) — Sun, 17 Feb 2008 06:22:00 +0000

I'll be in Las Vegas 4-Mar-2008 to 7-Mar-2008 to attend the Microsoft Mix08 conference. Should be good.

Let me know if you're going to be around.

geoff [at] coolite [dot] com

Introducing Coolite Toolkit

noreply@blogger.com (geoffrey.mcgill) — Fri, 08 Feb 2008 03:23:00 +0000

Coolite, Inc. is thrilled to announce our collaboration with ExtJS, LLC. The deal has been in the works for a while, but it's now ready for prime time.

The first product to be released from the Coolite.Ext collaboration is Coolite Toolkit

Coolite Toolkit is an Ext official suite of ASP.NET Web Controls built on the Ext JavaScript Framework.

The suite of web controls were built with a focus on bringing full Visual Studio Design-Time support to the Ext JavaScript Framework. A marriage of server-side and client-side frameworks.

The first trial release of the Coolite Toolkit is now available for download and ready to install.

Developers using Coolite Toolkit benefit from features including:

Powerful integration of the Ext JavaScript Framework.
Full Design-Time support in Microsoft Visual Studio 2005 & 2008 and Visual Web Developer 2005 & 2008.
Drag-and-drop ease of use.
Current support for Window, Panel and a many Form Controls including DatePicker, Calendar and HtmlEditor.
New Controls being added weekly.
Dual Licensed (LGPL 3.0 and Coolite Commercial License).
Professional support options available shortly.

A good first step to joining and contributing to the Coolite Community is to visit the Forums.

Please feel free to contact us if you have any questions or comments and we will do our best to help out. Currently, technical support is only provided via the Coolite Community Forums.

We welcome everyone to Coolite.

...Coolite is alive

noreply@blogger.com (geoffrey.mcgill) — Fri, 08 Feb 2008 03:10:00 +0000

We've been tinkering on ideas for over 18 months, and we're happy to announce that Coolite.com is officially online and ready to go. We'd love to hear you what you think of the website. It's Cool(ite)!