.NET AND EXT: COOLITE HAS THE ANSWER
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.
<%@ 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.
AUDIBLE AJAX EPISODE 24: APTANA JAXER TALK
I had the opportunity to sit down with three fine gents from Aptana to discuss their recent launch of Jaxer, the "server side Ajax framework".
Paul Colton, Uri Sarid, and Kevin Hakman all sat with me to chat about things. I have already played with Jaxer, and created the Google Gears wrapper which can be used seemlessly for use cases such as "If the user doesn't have Gears installed, just do it on the server".
We discussed a lot in the twenty odd minutes including:
- Where the idea for Jaxer came from
- The difference between a server side JavaScript framework and Jaxer (since there are many of them!)
- How Jaxer works (think of a headless Mozilla browser)
- Side effects of going this direction
- How developers are using it
- How does your architecture change if you are using Jaxer?
- How can you talk to code in Java and other languages?
- How JavaScript 2 fits into the picture
- What about deployment?
A lot of good stuff. Thanks to the crew for taking the time to chat with me. What other questions do you have for them?
We have the audio directly available, or you can subscribe to the podcast. We also have the video in high def here, or in normal def right below:
SELF PRINTING JAVASCRIPT LITERALS
Are you ever sick of seeing Object get printed out when you try to output a variable to your console.
Oliver Steele talks about Self Printing JavaScript Literals where you can clean that up with a toString:
var L1 = makeLiteral("L1");
var L2 = makeLiteral("L2");
L1
//>>> L1
L2
//>>> L2
Kangax takes it further to support nesting:
var o = window, args = arguments, prop;
for (var i=0, l = arguments.length; i
prop = arguments[i];
o[prop] = o[prop] || { }; o = o[prop];
if (i == l-1) o[‘toString’] = function() {
return Array.prototype.join.call(args, ’.’)
}
}
return o;
}
defineLiteral(‘bar’, ‘baz’, ‘qux’, ‘quux’); // => bar.baz.qux.quux
bar.baz.qux.quux.toString(); // => ‘bar.baz.qux.quux’
LIBERATOR COMET PLATFORM: FREE EDITION
Caplin Systems, creator of the Liberator Comet platform have announced a free version which can be used for non-commercial applications and for evaluation.
Liberator includes a high-performance Comet server, a JavaScript client library, and a Java server integration library.
There are many examples such as the subscriptions sample which shows a page with realtime updating information for a variety of equities and foreign exchange data.
This is how a subscriber looks in JavaScript:
<script type="text/javascript">
// class definition for SimpleSubscriber
function SimpleSubscriber(sObjectName)
{
// Store the object name as a member variable so it can be used later on; no subscription can
// take place until this object's ready() method has been called.
this.m_sObjectName = sObjectName;
// Invokes the initialise method on the base class (i.e. SL4B_AbstractSubscriber), this
// must be called within the constructor of all SL4B_AbstractSubscriber subclasses.
this.initialise();
}
// Defines SimpleSubscriber as a subclass of SL4B_AbstractSubscriber.
SimpleSubscriber.prototype = new SL4B_AbstractSubscriber;
// Overrides the ready() method from SL4B_AbstractSubscriber; once this method has been invoked
// it becomes safe to make object subscriptions.
SimpleSubscriber.prototype.ready = function() {
// Use the RTTP provider to setup the subscription; a reference to this object is passed in
// since it will be acting as the subscriber, and will receive the notification updates.
SL4B_Accessor.getRttpProvider().getObject(this, this.m_sObjectName);
};
// Overrides the recordUpdated() callback method from SL4B_AbstractSubscriber; this method will
// be invoked whenever new object data becomes available.
SimpleSubscriber.prototype.recordUpdated = function (sObjectName, sFieldName, sValue) {
// add code to process the record update here
}
// Creates a new SimpleSubscriber to receive streaming updates for /DEMO/YHOO.
new SimpleSubscriber("/DEMO/YHOO");
</script>