Monday, February 18th, 2008

.Net and Ext: Coolite has the Answer

Category: Sencha

The Ext team has posted about a new community initiative that has been kicked off by Coolite, the same guys that brought you the cool ninja-inspired DateJS parsing library.

Coolite Studio, a suite of professional ASP.NET Web Controls built on the Ext JavaScript Framework, aims to make it easy for .Net developers to use Ext’s UI components with Visual Studio:

Coolite Studio is an Ext official suite of ASP.NET Web Controls based 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.

Coolite Studio currently offers support for Window, Panel and a many Form Controls including DatePicker, Calendar and HtmlEditor and makes adding Ext controls into their applications easy using .Net languages. Developers using Coolite Studio 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.
  1. < %@ Page Language="C#" %>
  2. < %@ Register assembly="Coolite.Web.UI" namespace="Coolite.Web.UI" tagprefix="cool" %>
  4. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  5.    "">
  6. <script runat="server">
  7.   protected void Page_Load(object sender, EventArgs e) {
  8.       this.Calendar1.SelectedDate = DateTime.Today.AddMonths(1);
  9.   }
  10. </script>
  12. <html xmlns="">
  13. <head id="Head1" runat="server">
  14. <title>Window - Coolite ASP.NET Web Controls</title>
  15. <cool :ScriptContainer ID="ScriptContainer1" runat="server" />
  16. <script type="text/javascript">
  17.   var message = function(el, date) {
  18.     // Do something with the new Date...
  20.         title:"New Date",
  21.         msg: "Change departure date?<br /><br />" + date.dateFormat("Y-m-d"),
  22.         buttons: Ext.Msg.YESNO
  23.     });
  24.   }
  25. </script>
  26. </head>
  28. <body>
  29.   <div style="margin:20px;">
  30.     <form id="form1" runat="server">
  31.       <cool :ScriptManager ID="ScriptManager1" runat="server" />
  32.       <div>
  33.         <h1>Window with nested Panel</h1>
  34.         <p>The following example demonstrates how to create a Window
  35.         with nested controls and content.</p>
  36.         <div style="margin: 15px 0;">
  37.           <p><asp :Button ID="Button1" runat="server" Text="Show Window" /></p>
  38.         </div>
  39.       </div>
  40.       <cool :Window
  41.        ID="Window1"
  42.        runat="server"
  43.        Title="Vacation Details"
  44.        Width="400px"
  45.        Height="630px"
  46.        BodyStyle="padding: 6px;"
  47.        CloseAction="Hide"
  48.        Collapsible="True"
  49.        TriggerElement="Button1"
  50.        AnimateTarget="Button1">
  51.         <content>
  52.             <cool :FieldSet
  53.              ID="FieldSet1"
  54.              runat="server"
  55.              Title="Schedue"
  56.              Collapsible="True">
  57.               <content <div style="margin-bottom: 6px;">Departure Date:</content></cool></content></cool></form></div>
  58.                   <clientevents>
  59.                         <select Handler="message" />
  60.                     </clientevents>
  64.             <cool :Panel
  65.              ID="Panel1"
  66.              runat="server"
  67.              Title="Summary"
  68.              Height="125px"
  69.              BodyStyle="padding: 6px;"
  70.              Collapsible="True"
  71.              AutoLoad="vacationdetails.aspx"
  72.              />
  73.             <cool :Panel
  74.              ID="Panel2"
  75.              runat="server"
  76.              Title="Photo">
  77.               <content>
  78.                   <div style="text-align: center;">
  79.                       <img src="../images/beachday.jpg" />
  80.                   </div>
  81.               </content>
  82.             </cool>
  87. </body>
  88. </html>

Disclosure Statement: Apart from writing for Ajaxian, I am also a member of the Ext framework team.

Posted by Rey Bango at 10:55 am

3.6 rating from 53 votes


Comments feed TrackBack URI

Got huge paste?™

Comment by ibolmo — February 18, 2008

that textview needs a horizontal scrollbar, post-haste!

Comment by urandom — February 18, 2008

Well i got all excited but i guess it’ll take some time till it’s useable… No grid no cookie :( Also it’s still very rough in the designer, but i what can we expect out of 0.3 release, i wonder how long it’ll take till 1.0

Comment by karolrybak — February 18, 2008

Really interesting what he does in the designer for Visual Studio…
Impressive from that point of view :)
Though you can’t nest controls, can have controls inside a Window, there are no Button, LinkButton or any of the “glue” controls really needed in a full Ajax library, etc…
Still I was truly impressed of what he has done in the designer for Visual Studio… :)

Comment by polterguy — February 18, 2008

@karolrybak – The ViewPort, TabPanel and Grid controls are all currently under development. With some luck they should be available before the end of Feb-2008.
@polterguy – Thanks for the feedback. Visual Sudio design-time support was a major focus of this early release. Nesting controls should not be a problem. Can you let me know what you were trying to nest inside of what?
We’re dealing with a ton of baggage from the ASP.NET Framework and Visual Studio, so development has been a bit slower than we were hoping, although we’re working quickly towards FULL Ext widget support.

Comment by geoffreymcgill — February 19, 2008

nice job,
but if I were you, I prefer to add javascript in a separate file ( e.g. uibuilder.js ) instead of adding cool tag’s to be interpreted , in this case it would be lot easier to add some manual manners to some components.

And think about using Script#, that would be great integration.

Comment by phpcs — February 19, 2008

Hi, I’m being trying extjs for a while. Now I tried Coolite and I was satisfaced at first place.
But on deploying it was a disgress. Apache didn’t understand Coolite MarkUps and just showed me standard html ones.
Over VS 2005 it works just fine.
it’s Coolite 0.6 toolkit, Edition for Community.

Comment by DavidSilvaBarrera — November 6, 2008

Leave a comment

You must be logged in to post a comment.