Spry framework : A less cared framework?

I wonder how many Ajax developers know about Adobe Spry? I too feel, I have ignored it for long. Everything apart, lots of question arises about a Ajax framework from Adobe. The reason? Adobe is one of the tough competitor to Ajax. With its Flex and AIR technology to build RIA, they are still ahead in RIA technology. Still in prerelease, Spry offers a way to incorporate XML, JSON or HTML data into pages using HTML, CSS, and a minimal amount of JavaScript. Lets have a look at this framework and unearth its pros and cons.

Spry claims to be "Ajax for Everyone". It provides a set of easy to implement set of widgets, effects and data handlers. The main advantage is each component in the framework can be used independently of one another. So, developers need only to include what they need! Other frameworks have lots of files and folder structure to implement widgets like accordion, tabbed panels etc. The major disadvantage of these hierarchical and dependency oriented frameworks are:

• The framework becomes big and complex.
• To implement a single feature, you require to host the entire framework.
• Implementing a small feature might have a big learning curve.
• Difficult to deploy the framework in a restrictive environment.

Spry framework is the solution to all these plus other advantages. It makes implementing features to the existing web pages very easy. The widgets created into the HTML tags and the framework do not create its own tags. This increases debugging capabilities and readability of the displayed HTML. Dojo toolkit also uses the same methodology to embed widgets. But Spry takes things further to reduce the amount of Java script involved. Advantages does not end here. Each widget is coded independent and developers need to include only the widget files he is going to use. Developer has to use the appropriate CSS and JS files. All he has to do is copy these files to his existing web site folder structure, link them from the page and all the code.

Another advantage with Spry is its ability to work in restrictive environment. Let me explain a restrictive environment. Lets assume I need a accordion in my blog which is hosted on blogger. I am going to host my external java script files in google pages and not any file sharing service available on web; the reason - many corporates blocks these sites and if I host my external files, I am guaranteed of getting my blog messed up for some users. And adding accordion can be made possible by keeping Spry files in google pages and using it in my blog. I will soon demonstrate this feature on my blog.

So why is Spry not so popular? The main reason for this could be Adobe's RIA technology using Flex and AIR. You will also notice that they have not given much UI effects to the widgets in the Spry framework. So, Flex technology itself is shadowing Spry. But Spry can be very helpful when developers need only certain functionality in their web page or application. So if you are an web developer looking to add some features to your pages, have a look at Spry framework!

Backbase for iPhone

Here is the next step of Backbase! They are going to introduce Ajax SDK for iPhone. But's its not going to be just the iPhone, since iPhone uses Apple's Safari web browser, the new SDK will be applicable for desktop versions of borwers also. Ajax is one of the preferred technology for developing custom applications on the iPhone, because the iPhone does not allow installation of native applications. so backbase is all set to provide a strong environment for developers to build ajax applications that have the power of native applications.

"Because of our Ajax dedication and focus, support for the iPhone will reinforce Backbase's technology leadership role in the Ajax space," said Backbase President and CEO Jouk Pleiter. "It ensures that customers developing websites and Web applications using our technology can fully leverage Apple's iPhone and OSX platforms."

The new version of the Backbase Ajax Framework is fully compatible with the Apple stack (OS X and Safari 2 and 3).Backbase promises to provide the new software soon. They recently launched Ajax 360 service, which is a complete enterprise Ajax solution. Let's see who all comes out with their ajax SDK. I guess dojo,yui and other will come up with their widget extension
necessary for iPhone.

Ext, Yet another Ajax &UI Library!

Here is another Ajax & UI library worth looking at! Ext is a client-side, javascript framework for building web applications. It’s developed by Jack Slocum, who started off creating extension utilities for the Yahoo! User Interface (YUI) library. It was then called “yui-ext”. Now Ext is an independent framework which is gaining popularity at a rapid pace.

Ext is dual-licensed under the LGPL and a commercial license. And this is an important flexibility option that you will find in Ext. With regard to support of different server platforms, Ext runs on any platform hat can process POST requests and return structured data. Remember, Ext is a client-side framework!

Ext is built on a slightly different architecture. I would say it’s an enhancement framework. It requires you to include one of the following base libraries: YUI, jQuery or Protoype/Script.aculo.us. Apart from that Ext also have native Ext adapter, so the external libraries are no longer required. But this feature is available only from version 1.1 onwards. You can also use Ext along with GWT and other libraries. I am sure the library support of Ext will increase in future.

Now for development using Ext you will find best tool combination for debugging your application is to use the Mozilla Firefox browser with the Firebug add-on and optionally the Web Developer add-on. If you are looking for an IDE, Spket IDE will be the one you should use! It’s a toolkit for JavaScript and XML development. It supports Support for ExtJS 1.1 development. It also supports JavaScript code completion. Apart from that Spket IDE supports Laszlo, Silerlight and Yahoo! Widget.

Adobe rolls out Betas

Adobe Systems announced the public beta of Adobe Flex 3, Adobe Integrated Runtime (AIR) formerly code-named Apollo, Adobe Builder Beta and Flash Player update. With the new Flex and AIR Abode is pushing itself up in the rich Internet applications (RIAs) competition.

Adobe Flex 3 Beta:

The new version of cross platform, free open source framework for creating RIA adds rich new UI capabilities, enhanced developer productivity, desktop deployment and enterprise testing and performance tools. The Flex 3 public beta also marks the first significant deliverable for the open source Flex project, beginning with the availability of nightly builds and a public bug database. Some of the key changes in Flex 3 from its predecessors are:

• Enhancement to designer/developer workflow.
• New Containers (mx:ConstraintRow and mx:ConstraintColumn).
• Code enhancement include: faster compilation, compiler class caching, deeper language intelligence for AS3/MXML/CSS, Code Search, Refactoring, Code Outline, Profiling, Profiling Live Memory Data, Enhanced Module support, and Multiple SDK support.
• New Widgets, Components and Classes.
• Smaller SWF file.

Ted Patrick had a week long blog entries on the new Flex version. Each of the above mentioned features is explained in detail.

Adobe Integrated Runtime (AIR):

Apollo Runtime becomes Adobe Integrated Runtime. The cross-operating system runtime was code-named Apollo. It allows developers to use their existing web development skills to build and deploy rich Internet applications to the desktop. Now AIR is set to become a major runtime that all the desktops will have. AIR will also pay a major roll in RIA, mashup softwares and Web 2.0 and beyond.

Adobe Flex Builder 3 Public Beta:

Flex Builder 3 Public Beta is available for download in Adobe Labs. This early public prerelease version begins a new, more transparent product development process from Adobe, with frequent, regular access to early builds and greater insight provided into the feature roadmap and planning process. The Flex Builder 3 beta release will provide you with an opportunity to explore powerful new features. Some of the new major features include:

• Support for the new Adobe Integrated Runtime (AIR).
• Code Refactoring.
• Memory and performance profiling.
• SWF file size reduction through persistent framework caching.

You can also view the complete detailed specs for Flex Builder 3.

Flash Player 9 Update 3 Beta 1:

The new Flash player is code-named "FrogStar". It adds support for caching the Flex Framework within the Flash Player. Moving forward the Flex Framework will be cached within the Flash Player dramatically reducing the size of the output SWF files. SWF files will contain only your code and Flex Preloader containing the caching/loading logic. Some of the new capabilities of Flash Player are:

• Flex Framework to be cached for use across domains.
• The Player Cache will support Flex 3.0 and future versions of the Flex Framework.
• Flex Framework now supports Runtime Shared Libraries (RSL's).

Conclusion:

So with these new features, Adobe is trying to capture the market which other Ajax libraries have. The size of SWF has been an issue for some time. I know some of the projects which opted other technologies like Openlazlo and others due to the size of SWF file.

Another important factor is with Sun’s JRE. Unless Sun reduces the size of JRE and make it more portable, its new RIA technology JavaFX will find it difficult to compete. Compared to Sun Micorsystems, Microsoft seems to be making ground with its new Ajax projects and other .Net enhancements.

Backbase Ajax 360

Backbase has been a leader in providing Ajax solution. They have released Backbase Ajax 360 is a complete enterprise Ajax solution. It includes everything needed for efficient, risk-free browser-based RIA development and life cycle management. It is solution for ensuring successful Ajax implementations in an enterprise environment.

The new product delivers a complete set of development tools designed to significantly improve developer productivity. Another major advantage is that, the company adds comprehensive services on top of the Framework. They also provide Ajax-based RIA architecture expertise, Ajax training, professional development services and enterprise premium support

Talking about Backbase Ajax 360: It’s a complete enterprise solution built on open standards. The framework includes the entire DHTML stack: (X)HTML, CSS, JavaScript, DOM, XMLHttpRequest, etc. It also supports XPath, XMLEvents, SMIL, XInclude, XMLSchema, and XSLTransform. In addition, Backbase also supports Java standards such as JSF, Facelets, Struts, Spring MVC, JSR 168 and JSR 286. Unlike other available products, Backbase's standards-based solutions work with existing applications and technology. It reduces risk and accelerates development cycles.

Backbase provides a rich Enterprise Ajax Framework with widget interoperability, communication, and binding control to data sources. It also takes care of all routine tasks and requirements, allowing developers to focus on the unique aspects of an application, the business logic and UI composition. The system includes more than 250 pre-built and pre-tested Ajax Widgets and functions. IDE plug-ins is also available for the Eclipse development platform and Adobe Dreamweaver. In addition, Backbase provides real time debugging functionality directly from within the Web browser.

Another major ability is Enterprise Integration. Backbase Ajax client technology is fully server agnostic as well. The software seamlessly integrates with common Web servers, application servers, and portal and SOA mashup servers. It is compatible with any server: Java EE, .NET, PHP, and ColdFusion. In addition to its client technology, Backbase provides additional pre-build connectors and/or runtimes for the Java server platform (e.g. Struts, JSF, Portal, Spring MVC).

I haven’t tested the new product yet. But it looks like Backbase has done their homework to compete with others.

JavaFX an alternative to Ajax?

Sun is all set to release a new product range during JavaOne conference. The new product is a java-based product family called JavaFX, which cover development of desktop,web and mobile. It will introduce a new scripting language called JavaFX Script.

Rich Green, Sun's executive vice president said the platform as "JavaFX is a complete software system from the metal on up" and "JavaFX Script is a scripting language focused on the content-authoring and content creation crowd. It is a means of creating visually impactful, high-performance, dramatic Web and network-facing artifacts or experiences that run all the way from the desktop running Java SE (Standard Edition) all the way down to mobile devices powered by JavaFX Mobile".

JavaFX Script will focus on user experiences on the interface and highly animated content. It will be also easier to use thus development of the application will be easy and the JavaFX is not a procedural language. The programmers will be able to make use of the existing Swing and 2D APIs. and finally JavaFX will be open source!

So, JavaFX is Sun's answer to Abode's Flex and Apollo and Microsoft's Silverlight? I would say YES! So, JavaFX will offer an alternative to AJAX and also vies with Silverlight and Adobe's Flash (Flex and Apollo) and will enter RIA competition through this. Dekoh , another RIA project based on Java will also turn out to be a competitor for JavaFX. To get more on JavaFX we will have have to wait a few hours and I will update as soon as I get more information.

Parsing XML response in Ajax

Ajax technology can do magic, but its all about handling ajax the right way! Industry have two wings of browsers (FF and IE) which behaves differently when manipulating DOM. A Ajax programmer need to handle certain "issues" so that you can get same results on both these browsers. One such thing is parsing of XML. You can find lot of XML parsers written in java script but when you are into building custom application that don't make use of Dojo,GWT or any other ajax library. Here I will explain the proper technique to parse XML response and render it on screen. Using this method you will get the same output in FF and IE.

First lets take a look and the wrong code. I have simple set of java script functions to do login, Any server side scripting (I used servlet) may be used.Its just a simple authentication code at the server side, but the important part is the response. We are going to get a XML response which we will try to parse and display the result on the web page. Here is the code:

function getConnection() {

var cObject;
if(window.XMLHttpRequest) {
cObject = new XMLHttpRequest;
} else if(window.ActiveXObject) {
cObject = new ActiveXObject("Microsoft.XMLHTTP");
}

return cObject;
}

function doLogin() {

conObject = getConnection();
conObject.onreadystatechange = displayResult;
conObject.open('GET','/dctmfx/LoginServlet',true);
conObject.send(null);

}

function displayResult() {

if(conObject.readyState == 1){
document.getElementById('result').innerHTML="Loading...";
}
if(conObject.readyState == 4) {

var xmlDoc = conObject.responseXML;
var root = xmlDoc.getElementsByTagName("action");
var tempData = root.getElementsByTagName("message")[0].text;

document.getElementById('data').innerHTML=tempData;
document.getElementById('result').innerHTML="done";

}
}

The HTML page is given below:
<body>
A sample web application...
<a href="#" onclick="doLogin()" > Click to Login >/a>
<div id="result">
</div>
<div id="data">
</div>
</body>

A XML response is given below:
<action>
<message>OK</message>
<action>

When you work on IE, everything is smooth and runs good. Your application will start acting weired when you try access the same web application using FF. And the reason for this is : The way we parser the XML response.
The solution, is to parse the XML using DOM and the basic way is to use the properties in DOM. If we make use of the DOM properties, you can achieve a must robust application. Here is the right code:

function getConnection() {

var cObject;
if(window.XMLHttpRequest) {
cObject = new XMLHttpRequest;
} else if(window.ActiveXObject) {
cObject = new ActiveXObject("Microsoft.XMLHTTP");
}

return cObject;
}

function doLogin() {

conObject = getConnection();
conObject.onreadystatechange = displayResult;
conObject.open('GET','/dctmfx/LoginServlet',true);
conObject.send(null);

}

function displayResult() {

if(conObject.readyState == 1){
document.getElementById('result').innerHTML="Loading...";
}
if(conObject.readyState == 4) {

var xmlDoc = conObject.responseXML;
var docRoot = xmlDoc.getElementsByTagName("action")[0];
var tempData = docRoot.childNodes[0].firstChild.data;



document.getElementById('data').innerHTML=tempData;
document.getElementById('result').innerHTML="done";

}
}

Here you can see, we have made use of firstChild.data to get the same text data that we obtained using *.text. The first case is proper utilization of DOM properties and you will see things working in any browser.
For your reference to DOM properties, make use of this site.

Working with Ajax

For some time my blog have been dry! The main reason for this is I am simply busy with my project. Experimenting with new things does take more time and I am sure you all will agree with this fact. I have already worked with Ajax during my 5th semester project, but was never deep into it. Time has come, now I work deeper on it and I have things yet to learn. As a student there are times you google stuffs and do not find the best resource. The “best” at times may mean simple, comprehensive!
Ajax is a combination of technologies and this is the reason for it to be complex, hard to debug and messy at times! But its outcome is fruitful! But to start with you need some good resource and this blog will put you into that direction! Check out the links given and continue discovering Ajax:

Java Passion – A free professional Ajax tutorial
Mozilla Developer Network
Ajax Matters – A collection of blogs, tutorials and more