In normal Struts application we generally use DispatchAction to make our web app and life easy. In general struts controller gets a request and delegates it to corresponding action/dispatchAction subclasses. Depending on the method name parameter our target method gets invoked and after processing of some business/domain objects finally forwards a mapping(configured in struts-config.xml) towards the view tier and a JSP gets rendered in our thin client as a response.

Now when we think of Ajax in this kind of application model, we can consider two types of implementation of Ajax: Partial Page Rendering and Partial Response update.

Problem: A form based application has too many fields to be filled in by the user but majority of the fields or group of fields are optional and it takes time to render those fields and thus the entire page.

JSP Solution: Break the optional fields and mandatory fields in two separate groups. And Break the JSP page in two and use JSP:INCLUDE to save some jsp rendering time. You can save approximately 5-7% of your loading time.

Ajax Solution  Have a different method in your DispatchAction for example renderOptionFields(…….)

And return a different forward mapping and in turn return a different JSP but a partial one which render only the optional fields.

And in that partial JSP page you just only include your necessary TLDs and render all the struts html tags with name attribute mentioned.

And now in your main JSP have a button called option fields having a javascript function call to render the option fields.

Including prototype.js is obvious and have the code as follows:

        <input type="button" value="Optional Fields" onClick="renderOptionalFields()"/>    <div id="optionalFieldsContainer"></div>    

<script>function  renderOptionalFields(){	var url ="/appcontext/yourDispatch.action?method=   renderOptionFields";	var params ="";	var updatePage = new Ajax.Updater(''optionalFieldsContainer'',url,		{			method:''get'',			parameters:params,			onFailure:reportError		}	);}function reportError(request) {	alert("Error Updaing Page");}</script>

Inspired by Ruby on Rails a new java based framework for Ajaxified Web based application development framework that’s can turn your heads with some cool features:

• Roma it’’s totally based on POJO (Plain Old Java Objects)
• True Object Oriented vision in all aspects: from the model to the view and to the repository/database

• Encourage the use of the Domain Driven Model (DDD) approach: let’’s think to the Domain: the other things are secondary Aspects
• It works with Conventions ala Ruby On Rails: much less code to write and maintain and more uniformity in projects
• Applications are fully portable across frameworks since the application is developed using POJOs. For example you can switch between JDO and EJB3 PersistenceAspect without changing code unless you use directly the aspect implementation (see below)
• Allow to makes things dirty: you can use directly the target framework taking the full advantage of the implementation power
• You can use the already developed Modules (CRUD, User&Profiles, etc.) and extend their if you need
• The skill requested to build application can be lower than required for modern Java Web Applications: minor cost of development
• Roma is based on Spring Framework as IoC container, but you can use another one if you want.
• The supported frameworks and tools are continuously update on Modules page.

You can have the pleasure of Ajax web front-end with the help of Echo framework and if you are too much conservative and do not want to break out your tie with JSP you can do that too with this framework.

It’s worth checking this framework before going for any other RAD framework in J2EE space.

When implementing Ajax based RUI in enterprise app there are very few options to choose from;

• Developing RIA from scratch
• Plumping various RUI widgets available from open source community
• FLEX (Flash Plug-in dependent) need FA-Bridge
• Open Laszlo Flash based RICH UI (XUL based like Flex)

Developing from scratch makes no sense at all. Because time required developing various widgets it takes too much of time to deliver an enterprise ready version of it. Then an entire framework of Ajax engine makes no sense when too many well-tested versions are available (Dojo, prototype, DWR etc).

Readily available RUI widgets are available from various open source projects like YUI, Scriptaculous etc. But yes, you have to tweak here and there to develop your desired one.

Flex has many advantages over other two options. Because you get support from ADOBE itself, have large community and more of all you get a well tested IDE which is definitely a plus.

Flex has a Licensing cost which you have to consider beforehand like Backbase which has a readily available struts compatible tag-libraries which is rich enough to meet the enterprise requirements.

Open Laszlo is another good option to explore, it is an open source solution having two way supports, single declarative UI with flash or JS based RUI.

But again before starts with any of the options we should define the scope and analyze the expectation of the user, and accordingly go with best possible options available.

Struts and Ajax how to?

Struts itself has absolutely nothing in this area up to 1.2.x, Struts 2 is coming up in big way with the in built features of Ajax. (Webworks2.x).

Prior to Struts 2 you have to re-align your existing server side code base according to your plan of providing RUI solution. And in doing this DWR , dojo, scriptaculous can become very helpful if you are implementing JS based RUI. In case of Flex you probably have to re-align your server side code a little bit more. Though there are some open source helper toolkits available.

Flex and Js based solution both are surprisingly easy to integrate with struts. Both are Servlet based solution.

In JS based solution Struts Tiles can plays a major role in shortening your development time.

Ajaxanywhere Tag-library and Ajax-display tag can be very helpful, and there are some other open source tag-libraries to explore.

Resources

http://ajaxtags.sourceforge.net/
http://ajaxanywhere.sourceforge.net/
http://javawebparts.sourceforge.net
http://www.getahead.ltd.uk/dwr/
http://www.nextapp.com/products/echo2/
http://sweetdev-ria.ideotechnologies.com/sweetdev-ria-gettingStarted-1.1-RC3//
http://dojotoolkit.org/
http://flex.org
http://www.openlaszlo.org/
http://labs.macromedia.com/wiki/index.php/Flex_Framework:FABridge
http://prototype.conio.net/
http://www.openrico.org/
http://script.aculo.us/
http://karaszewski.com/tools/ajaxlib/

For enterprise builders Ajax solved many problem of responsiveness of UI but problem of overall development methodologies using Ajax still remains with lot of contradictions and conflicts among the developers. When using Ajax in an Enterprise Application main problem faced by the developers are where to start and how to start. The major problem faced by the enterprise developers and architect in implementing Ajax based UI solutions in existing application.

No software solution is beyond the scope of SDLC actually, but in general found missing when implementing Ajax based solutions in an enterprise app. Ajax by nature has some tremendous side effects if practiced unethically (from SDLC perspective) and by overuse.

Where is the Silver bullet?

In Ajax oriented solutions there is no silver bullet till date. Ajax is not a technology it’s more of a technique. And the success of Ajax oriented approach depends upon the proper study of requirements. If you take wrong move at beginning you tend to suffer in later stage of your development cycle.

There is no short cut at all in development of Ajax oriented Rich UI based presentation layer development, it’s a full blown development cycle. Yes there are many toolkit, utilities, tag-libraries to help you develop Rich UI which is Ajax based but development effort of front end, server side code and architecture re-aligning is always be there to be estimated.

Where to start?

As I mentioned before, prior to know where to start and how start better you should know what to do first and your user expectations you are going to meet. Define the scope of Ajax based UI and usability options you are going to provide to your end-users.

But again to remind you that there is no silver bullet which can provide you hassle free Rich UI development in a minutes/hours for enterprise app. It needs extensive planning; architecting and testing that age-old mantra for developing Aax based Rich UI for enterprise app.

In Ajax based approach there are two pattern in development; Dom Manipulation and Partial Updation. Stuts2(Webworks2+) promised to provide some inbuilt features for both of them. But as of now in struts, up to 1.2.9 (I have evaluated up to this version of1.2.x) there are no Ajax materials to help.

So depending on the pattern you are going to use in your enterprise app you have to decide and design accordingly to develop your RUI.

To help your development of Ajax RUI you can use DWR, Dojo toolkit and SCRIPTACULOUS (All based upon prototype lib), Yahoo UI library is good enough to get some readymade widgets out of the box. But you are the person who will be the king of your Ajax app because of your customized need of your very own RUI.

Do not hesitate to take help from ajaxpattern.org for taking right design decision to negate the future disasters as I mentioned earlier.

If you have framed the scope of your UI enhancement try using Ajaxanywhere tag-library, it is really a good one and can shorten your development time in very effective way. Using pre-build Ajax tag-library can really reduce the development efforts, and there are so many to do so. Check out the resource section for that.

Check the first part of this article here

Web application has its own advantages over the age old Client Server Applications, and thus large enterprises adopted it as their prime choice whenever they tend to develop a new applications. And not only new application but stared to migrate their existing client server based enterprise application to web based application. HTTP the base layer has not been changed a lot to cope up with the enterprise user’s expectations.

Gradually form based applications started facing problems in meeting the user’s expectation and responsiveness of the applications started coming up as major issues. Usability of an application came up strongly and XML-RPC became popular in large enterprise applications and been there for long time to meet the user expectations to some extends.

Macromedia FLASH and the new technology called FLASH-Remoting, opened up new possibilities of Rich User Interface in thin clients. Enterprise App builders started thinking of various possibilities of using Rich User Interfaces in their Enterprise App. And java space tried to play their age old SWING card in various ways but unfortunately SWING was unable to gain the momentum. But developer community started thinking of Rich UI using SVG, SWING etc. but in a different approach, because till then enterprise builders have realized that MVC actually unable to separate the VIEW layer as they expected. Thus XUL has arrived in the scene. Still some declarative swing application project (XUL based) are still live in SF.

But thin client limitation was still a hitch for UI. Google came up with age old technique of MSDN on demand tree menu loading in a new package (Google Suggestion) and developer community acted promptly and AJAX was suddenly became the most HYPED buzzword in the developer community. But Macromedia has come up with XUL based (MXML) RIA development framework FLEX. Beta was a huge hit among the designer community but unable to attract the developer community because of the lack of support of PHP the most popular scripting language of WEB development. They come up with FLEX 1.5 with limited support of SOA which some how managed get the attention of the developer community. But designer community was thrilled because of the introduction of eclipse based IDE for designing FLASH web sites in hours. Laszlo open sourced their Laszlo systems(Flex counterpart) and RIA became hit. Yahoo joined the RIA party and developer and designer community join the party. CSS gained the momentum as well and join hands with the developers because of AJAX. Standard based web development became a popular practice and gave platform to shout for the designers and to establish a new term of WEB-Architect which is becoming poplar day by day.

As RIA became popular and lot of new Ajax oriented toolkit has came up, like dojo, DWR, Sajax Django etc. Lot of tag-libraries for java space has also come up like ajaxanywhre, ajaxtags etc.

In my next post I will try to convey the problems of RIA and Ajax implementations and some resources.

• Web Developer
• FireFTP
• IE Tab
• ColorZilla
• MeasureIt
• FireBug
• Screen grab
• FlashGot
• CSSViewer
• XML Developer Toolbar

Technorati Tags: Firefox, extensions, web development, web design

Dropdown navigation system was written in such a way so that it can fetch navigational data from database after implementation of proper access control.

And after 2 years the navigation data are huge (over 5 level deep with so many children). And as a result for each request and response phase it has to re render all the elements dynamically and thus slowing down page rendering process.

We had very few option at this point of the project life cycle. We were caching the menu tree at server-side (session) but no other option to cache the rendering process.

We were looking for some technique to cache the rendering process ( DOM creation) in rendering the response phase except using frame based navigation. But for a Dropdown navigation system we have developed non-frame based navigation.

So options may be Flash based menu or Ajax call to server. Flash option was not a good solution because anyway we had to re-render the thing on every page refresh.

So the option remains is Ajax. But we were not in a position to take the risk of changing server side code and for security reason unable to introduce DWR for enabling Ajax.

So finally an old trick paid off. Frame is there as “top bar” for other notification system and so.

So I have started exploring the code and found that after first rendering menu code is generating elements which is cacheable (container.innerHTML) but the problem is when you attach events dynamically to an object it is not going to have any foot-print in your rendered DOM.

So we have just cached the DOM tree in the top frame and used it next time onwards with few “dynamic event attachment” codes with it.

    if(!top.topFrame.menubarcache.length){ // check for first time rendering from server            }else {         createMenuBarAndChildrenContainer(); // create the containers        var obj1= document.getElementById(''s1'');         var obj2= document.getElementById(''menuChildren'');                 obj1 = top.topFrame.menubarcache; // storing from cache        obj2 = top.topFrame.menuchildrencache; //stroing from cache        attachevents(obj1); // attach events dynamicaaly        attachevents(obj2); // attach events dynamicaaly    } 

Confluence also provides you a development platform for your web development needs.You can actually build web sites with the help of confluence with its development features like plug-ins (Servlets, theme, XML-RPC etc.).

If you explore this development platform of confluence you will be amazed by its power and flexibility. But you should not expect the out-of the box solution for your web needs with professional looking user interface.

Default web themes which come along with the Confluence distribution will not suit you for an easy customization as an end user. But if you are a developer and looking for an easy development framework for rapid development I think Confluence could be a right choice with bit higher price tag. But it worth convincing your client in favor of using confluence because of its integrated change management system, extensibility and scalability.

You can implement virtually any kind of XHTML sites you can think off by just developing a simple web theme and velocity macros. And by doing this you are done with the features like CMS, Message Board, Search Engine Friendly URLs, Track Back Systems, Administration panel, RSS, Site Search etc.

I have developed a web theme for my company which you can visit and feel the power of it, but obviously after visiting the core confluence to make your judgment an unbiased one.