.Net and Ext: Coolite has the Answer

Written by on February 18th, 2008 in Ajax News.

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.
LANGUAGE:

<%@ Page Language="C#" %>
<%@ Register assembly="Coolite.Web.UI" namespace="Coolite.Web.UI" tagprefix="cool" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        this.Calendar1.SelectedDate = DateTime.Today.AddMonths(1);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title>Window - Coolite ASP.NET Web Controls</title>

    <cool :ScriptContainer ID="ScriptContainer1" runat="server" />

    <script type="text/javascript">

        var message = function(el, date) {

            // Do something with the new Date…

            Ext.Msg.show({

                title:"New Date",

                msg: "Change departure date?<br /><br />" + date.dateFormat("Y-m-d"),

                buttons: Ext.Msg.YESNO

            });

        }

    </script>

</head>

<body>

    <div style="margin:20px;">

        <form id="form1" runat="server">

            <cool :ScriptManager ID="ScriptManager1" runat="server" />

            <div>

                <h1>Window with nested Panel</h1>

                <p>The following example demonstrates how to create a Window

                with nested controls and content.</p>

                <div style="margin: 15px 0;">

                    <p><asp :Button ID="Button1" runat="server" Text="Show Window" /></p>

                </div>

            </div>

            <cool :Window

                ID="Window1"

                runat="server"

                Title="Vacation Details"

                Width="400px"

                Height="630px"

                BodyStyle="padding: 6px;"

                CloseAction="Hide"

                Collapsible="True"

                TriggerElement="Button1"

                AnimateTarget="Button1">

                <content>

                    <cool :FieldSet

                        ID="FieldSet1"

                        runat="server"

                        Title="Schedule"

                        Collapsible="True">

                        <content>

                            <div style="margin-bottom: 6px;">Departure Date:</div>

                            <cool :Calendar ID="Calendar1" runat="server">

                                <clientevents>

                                    <select Handler="message" />

                                </clientevents>

                            </cool>

                        </content>

                    </cool>

                    <cool :Panel

                        ID="Panel1"

                        runat="server"

                        Title="Summary"

                        Height="125px"

                        BodyStyle="padding: 6px;"

                        Collapsible="True"

                        AutoLoad="vacationdetails.aspx"

                        />

                    <cool :Panel

                        ID="Panel2"

                        runat="server"

                        Title="Photo">

                        <content>

                            <div style="text-align: center;">

                                <img src="../images/beachday.jpg" />

                            </div>

                        </content>

                    </cool>

                </content>

            </cool>

        </form>

    </div>   

</body>

</html>

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

Source: Ajaxian
Original Article: http://feeds.feedburner.com/~r/ajaxian/~3/237032841/net-and-ext-coolite-has-the-answer

Comments are closed.



Site Navigation