Visit the Java Pro News Directory
Blogs
Blogosphere, Web 2.0...
Education
Help, Learn...
Forums
Search, Learn...
Newsletters
eBusiness, Tech...
News
Tech, Sales...
Software
Animation, Technique...
Tools and Technologies
Extra's,plugins...
Web Site Design
Monitoring, Hosting...


Recent Articles

Adding SEO To Javascript Lightbox JS Content
Lightbox JS was popularized by Lokesh Dhakar where he made a nice friendly degradable JavaScript function where thumbnails can be linked to their larger images but...

Improve Your Sites by Moving JavaScript to an...
This is search engine optimization tip number nineteen in our continuing series of tips from search engine optimization company Vizion Interactive. All of our search engine optimization tips meant to be very specific...

Drooling for Drool 5.0
When I was in the UK recently I got a chance to have a coffee with Mark Proctor and get a detailed demo of the new Drools release - 5.0. Mark spent most of the time showing Guvnor, the new web-based business...

Apple Catches Up To Java Bugs
Despite Apple's many groundbreaking products, it's sometimes fair to call the company slow, and now is one of those times when the label may apply. Following...

Compare Open Source Scripting Languages
OpenLogic just announced yet another webinar on open source scripting Languages for JVM. Rod Cope, CTO and Founder of OpenLogic, will present this webinar, providing a comparison of key attributes for the most popular...

Using JavaScript to Localize Text
Just about every web project I've been involved in have, at one time or the other, needed to present some text to the visitor through JavaScript. It could be in an alert...

SDK Preview for JavaFX
After the advent of SDKs for Adobe AIR & Microsoft Silverlight and the considerable amount of market share they already have, Sun Microsystems has finally come up with their SDK preview for JavaFX. This was a result...

Use JavaScript and Google Analytics to Optimize...
Forms are pretty much a necessity on websites therefore it becomes important to track how your visitors interact with the forms on your website, understand which fields are most often left empty, and determine how...


12.01.08

Turning Your Web Apps Into Components With Java

By Mads Kristensen

At work we are using a lot of JavaScript for all of our user controls and other ASP.NET components. I’m guessing that so are you. Our solution is to add a .js file per each user control and then load them on the page dynamically as explained here. That is a great way to componentize your web application.

Bad behavior

The problem is when an action on one user control’s JavaScript effects elements on other user controls. An example could be the page header where it says Signed in as Joe. When you are on the update profile page and change your name from Joe to Johnny using AJAX, then you don’t update the header element. If you do, you probably reference the DOM element from your profile update script directly. This is bad since the header and profile are located in two different user controls and thus haven’t got a clue about the existence of each other. Why should the JavaScript treat them differently?

Good behavior

What you really want to do is to use an event model. Then it works like so:

The user changes his name to Johnny and the AJAX function in JavaScript triggers an event called profileNameUpdated and passes the new name along as a parameter. The page header have already told the event model to subscribe to the profileNameUpdated event and so it now catches the event triggered by the profile. It reads the new name and updates its own DOM element.

The code

Amazingly, the JavaScript code for this is less than 1KB and works on all websites, platforms and browsers. This is what it looks like.


The Fundamental Server: Everything You
Need Inside and Outside the Box - Learn More

Implementation



When the script is included, it is now possible to start triggering and listening to events.  To trigger an event, simple write this:
events.trigger(’profileNameUpdated’, ‘Johnny’);

You can also pass objects or JSON as a parameter like so:
events.trigger(’profileNameUpdated’, {’name’:'Johnny’, ‘oldName’:'Joe’});

To subscribe or listen to these events, you simply add the following to any user control or JavaScript file:


The eventArgs parameter will contain whatever was passed along by the trigger.

Comments


About the Author:
Mads Kristensen currently works as a Senior Developer at Traceworks located in Copenhagen, Denmark. Mads graduated from Copenhagen Technical Academy with a multimedia degree in 2003, but has been a professional developer since 2000. His main focus is on ASP.NET but is responsible for Winforms, Windows- and web services in his daily work as well. A true .NET developer with great passion for the simple solution. http://www.madskristensen.dk/
About JavaProNews
JavaProNews is a collection of news and commentary designed to keep you in step with the ever evolving landscape of Java environments. News and Advice for Java Professionals





JavaProNews is brought to you by:

SecurityConfig.com NetworkingFiles.com
NetworkNewz.com WebProASP.com
DatabaseProNews.com SQLProNews.com
ITcertificationNews.com SysAdminNews.com
LinuxProNews.com WirelessProNews.com
CProgrammingTrends.com ITmanagmentNews.com





-- JavaProNews is an iEntry, Inc. publication --
iEntry, Inc. 2549 Richmond Rd. Lexington KY, 40509
2008 iEntry, Inc. All Rights Reserved Privacy Policy Legal

archives | advertising info | news headlines | free newsletters | comments/feedback | submit article