Thursday, November 27, 2008 posted by geoffrey.mcgill | 0 Comments
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:
ExampleSayHello(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.
Labels: code, news
Monday, November 24, 2008 posted by geoffrey.mcgill | 0 Comments
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.
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.
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.
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.
Labels: news
Tuesday, October 7, 2008 posted by geoffrey.mcgill | 2 Comments
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 ExampleAjaxEvents
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 ExampleGrid 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.
Labels: news
Thursday, April 10, 2008 posted by geoffrey.mcgill | 5 Comments
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.
Labels: code, news
Wednesday, April 9, 2008 posted by geoffrey.mcgill | 3 Comments
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 Changes1. 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.
Labels: code, news