![]() |
| |
|
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. ![]()
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/ |
|||||||||||||||||||
|
| ||
| -- 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 |