Monday, June 15, 2009

A Skeleton Tabbed Layout in ext

Using ext for UI is not a pleasant task after experiencing Flex. Nevertheless, we do what we need to do :).

I needed to build a tabbed layout and in a series of article I will explain my experience with the same. The first thing to do (after downloading ext) is place a basic skeleton in place - the jsp/html and the javascript.

Skeleton html for guidance

The basic tab manager javascript guidance

Tuesday, February 24, 2009

Ext or Flex?

For the past few months I have been evaluating another claimant to the realm of RIA:Ext. Ext looks good. In fact it can be quite formidable if combined with Google Charts and Google Visualization. So, given a choice, what should one pick? A brief comparison before I give my views:

Flex
  • Cost per license: $699

  • Technology: Flash and ActionScript

  • USP:
    • More developer friendly and reliable than JavaScript any day

    • Hides your UI code

    • Produces very maintainable and testable code for complex dashboards

    • Very well tested and reasonably predictable

    • Strong user community and support, thanks to Flash and ActionScript legacy

    • From Flex 3, communication between JavaScript and Flex has become easier.BlazeDS is now available as open-source and facilitates integration with various backends

  • Weaknesses:
    • Cost

    • Learning curve

    • Flex can prove to be a hammer to kill a fly for most web applications.

Ext
  • Cost per license: $289

  • Technology: javaScript

  • USP:
    • If you don't have a reasonably complex dashboard that needs significant data visualization,it is a good alternative

    • Hides your UI code

    • Lesser cost

    • Less complicated than Flex

  • Weaknesses:
    • Can be difficult to debug

    • JavaScript

    • Not that strong user community yet

I feel, Ext is impressive but not as good enough as Flex due to the inherent evil nature of JavaScript :). I could not find too much help on the web either to address the countless bugs I face when I use Ext. The fact that I expose some part of my business logic when I use a JS based RIA still holds true for Ext. In its attempt to prevent its precious JS code from being nicked away, Ext has taken great pains to obfuscate its files. Even with it debug javascripts, it can get very frustrating and difficult to debug any issues. This brings in my concern for a maintainable and testable code if my UI is reasonably complex.

Nevertheless, it builds significantly on top of other available RIA options and tries to integrate with JQuery, Protoype, YUI and even AIR. It is definitely an upcoming force that will mature in 2-3 years. It also holds the cost advantage against Flex. All-in-all one may think of using it if one's UI is not as complicated.

But if I have a UI to build that has to be complex, extremely reliable, maintainable and testable, my vote goes to Flex any day.


Friday, October 31, 2008

Removing and Adding Options Dynamically

Using DHTML is beautiful because you can play with the DOM as you please. However JavaScript is not that consistent. Of all sources I find the one by W3C: W3 Schools the most comprehensive and technically correct.

If you are looking to add or remove options from a select box dynamically, using add and remove methods on select element is the most reliable way. For gory details have a look here:


Wednesday, September 24, 2008

Flex Data Services(FDS): FMS

FDS enables you to access and synchronize data across one or more applications built with Flex framework. FDS itself is a server-side java app designed to work with most Java app servers. FDS consists of four parts:
  • Flex Message Service (FMS)
  • Flex Data Management Service (FDMS)
  • Flex Proxy Service (FPS)
  • Remoting Service
FMS helps to build apps that support real-time chat and collaboration. Idea is to update app whenever server side data changes. In this article let us see how we can use FMS Java API (MessageBroker, AsyncMessage) to receive message in Flex.

1. Take the FDS blank application as your starting point

2. Open WEB-INF/flex/messaging-config.xml and add this destination node below default-adapter node:Destination Node Code

3. Define message consumer in MXML

<mx:Consumer id="consumer" destination="feed" message="messageHandler(event.message)"/>

4. Subscribe/Unsubscribe to message at desired part of the flex code as:

consumer.subscribe();
consumer.unsubscribe();

5. Whenever there is a message generated at the backend, now your flex application will hear it. A very simple sample java file that generates message will look like this:


Thursday, July 24, 2008

Large Numbers in JavaScript

Recently faced probelms with large numbers in JavaScript. These two resources were extrelely useful:
Hazards of large numbers in JavaScript
Big Integers in JavaScript

Hope it helps you too :).

Monday, July 14, 2008

Using Webservices

using AS or <mx:WebService> tag

For <mx:WebService> tag, specify id, url of the wsdl file and optionally fault handler function. You can trap an event called load that fires when WSDL loads successfully

You can use methods on a Web Service in three ways:
1.Undeclared Method: Use WS with id. Flex looks at WSDL for the method based on how it is called
2.Declared Method: Operations defined as children of WS tag using <mx:operation> tag. Args validated using WSDL
3.Fully Declared Method: Both operations and arguments declared using <mx:operation> and <mx:request> tag.

Declaring operations enables specifying event handlers for each operation

<mx:WebService id="myWebservice"
wsdl="http://myWsdlUrl/myWsdlFile.wsdl"
fault= handleFaultFunc(event)>
<mx:operation name="funcNameInWsdl" result="resultHandlingFunc(event)">
<mx:request>
<paramName1InWsdl> {asVar1ToPickInputFrom} </paramName1InWsdl>
<paramName2InWsdl> {asVar2ToPickInputFrom} </paramName2InWsdl>
</mx:request>
</mx:operation>
</mx:WebService>

Then to call the operation

myWebservice.funcNameInWsdl.send();

To do in AS:
var myWebservice:WebService = new WebService();
myWebservice.wsdl =
"http://myWsdlUrl/myWsdlFile.wsdl";
ws.loadWSDL(); /*Before calling any method we need to load wsdl. Use canLoadWSDL() to check if WSDL was loaded or not*/
ws.addEventListener("result", resultHandlingFunc);
ws.addEventListener("fault", handleFaultFunc);
ws.funcNameInWsdl(asVar1ToPickInputFrom, asVar2ToPickInputFrom);

Monday, June 2, 2008

Flex-AJAX Bridge

Flex-AJAX bridge is a small non-obtrusive code library. Use it to control a Flex component using JavaScript. Uses ExternalInterface class underneath. This is included in Flex3 installation installation_dir\frameworks\javascript\fabridge. Has some good samples to start working with.