Web And Email Hosting, Jsp, Tomcat, J2Ee, Hibernate Programming Blog

174 CHAPTER 6 DECOUPLED NAVIGATION PATTERN The solution is to decouple the steps of Figure 6-11, which was illustrated as a single piece of code, into two code pieces. The decoupled code would be as follows: function InjectHTML( elementId, text) { document.getElementById( elementId).innerHTML = text; } function OnClick( event) { InjectHTML( “myDiv”, “data”) There are now two functions (InjectHTML and OnClick). The function InjectHTML requires an element identifier and some text, and will perform an HTML injection. The function InjectHTML is a business-logic-specific implementation that operates on an HTML element reference defined by the client. The function OnClick reacts to the event and is responsible for gathering the data used to call the InjectHTML function. Each function has its responsibilities and each function is decoupled from the other. The only shared information is the data gath ered by OnClick and processed by InjectHTML. Figure 6-11 has been implemented by using a decoupled solution, but now Figure 6-12 needs to be implemented. This means that an additional step of using the XMLHttpRequest object needs to be added. For simplicity, assume that the XMLHttpRequest object functionality is encapsulated in the function CallXMLHttpRequest, which accepts a single parameter. As the function CallXMLHttpRequest is used to gather information, the function is called by OnClick, and the returned data is passed to the InjectHTML function. The modified source code is as follows: E B V N function InjectHTML( elementId, text) { document.getElementById( elementId).innerHTML = text; } function OnClick( event) { InjectHTML( “myDiv”, CallXMLHttpRequest( “data”)) In the modified source code, the second parameter of the CallXMLHttpRequest function has been replaced with the function CallXMLHttpRequest. Looking at the solution technically, you can see that the three steps have been decoupled from each other, and each can vary without affecting the other. What is still kludgy is how the data is gathered and passed to the function InjectHTML. This is the reason for creating Common Data functionality. The Common Data functionality replaces the kludgy calling of the functions with some common state. The problem at the moment is that the OnClickfunction relies on the functions InjectHTML and CallXMLHttpRequest. The reliance cannot be avoided, but what can be avoided is the calling convention. Imagine that instead of InjectHTML being used, the function InjectTextbox is used due to a business logic decision. And then imagine that InjectTextbox requires an extra parameter, as illustrated by the following source code: function InjectTextbox( convert, elementId, text) { // …. } function OnClick( event) { InjectTextbox( false, “myDiv”, CallXMLHttpRequest( “data”))
Searching for affordable and reliable webhost to host and run your web applications? Go to our java web server services and you will be pleased.

CHAPTER 6 DECOUPLED NAVIGATION PATTERN Let s continue building on this example. Imagine that the same user interface is used to make a remote call via the XMLHttpRequest object. Figure 6-12 illustrates the steps needed in the remote case. E B V N Figure 6-12. Steps resulting from clicking a button when using an extra XMLHttpRequest call Figure 6-12 shows an added step (step 2), in which a request is made by using the XMLHttpRequest object that then generates some data that is processed in step 3. Looking at Figures 6-11 and 6-12, you might be wondering where the need for the Common Data functionality is. The need arises because often an application is converted from the state depicted in Figure 6-11 to that in Figure 6-12, or vice versa. Implementing the conversion can require some major restructuring of the code, or a completely new implementation that needs to be tested and maintained. The Common Data functionality decouples the steps so that an application that executed as in Figure 6-11 could be converted without major surprises into an application that executes as in Figure 6-12. The intention is to decouple, allowing the fewest number of changes and yielding the largest user benefit. Consider the following code, which mimics the implementation of Figure 6-11: function OnClick( event) { document.getElementById( “myDiv”).innerHTML = “data”; } The code is a problem because what was defined as two steps in Figure 6-11 is one step in technical terms. The code is a function with an implementation. The problems of the function OnClickare that the text identifier myDiv is hard-coded, and so is the assigned value data. Imagine that the assignment code is used in multiple places, and imagine that the text has to be converted to uppercase before doing the assignment. Then the code would have to be updated in multiple places.
If you are looking for affordable and reliable webhost to host and run your business application visit our ftp web hosting services.

172 CHAPTER 6 DECOUPLED NAVIGATION PATTERN Of course, it goes without saying that a good programming practice in the implementation of MonitorLinks would be to test whether the evt variable is null. This is because when the events are wired together by using programmatic terms, the first parameter may or may not be the event. Defining and Implementing the Common Data Functionality As outlined earlier in this chapter, the Common Data functionality requires defining a state and potentially some function that processes the state. When processing the state, the data may be locally processed or may involve some remote processing. If the state is processed remotely, a URL is involved and the process requires URL design. Therefore, this section presents materials relating to URL design. The Purpose of the State and State Manipulations Some may perceive the Common Data functionality as unnecessary overhead. The Common Data functionality is a necessity, albeit (as described in the Applicability section) only when the Decoupled Navigation pattern is a necessity. The purpose of the Common Data functionality is to provide a wedge between the Action and Presentation functionalities, enabling a decoupling of functions. Consider Figure 6-11, which illustrates the steps that occur when an HTML button is clicked, generating an event that causes a JavaScript function to be called. E B V N Figure 6-11. Steps resulting from clicking a button Figure 6-11 represents the simple button click as two steps. The first step is the HTML event, which processes the mouse click. The second step is the content generation in the table row below the button. The content uses HTML injection by assigning the innerHTML property. From this simple example, there would be no need for the Common Data functionality because that would add an unnecessary layer.
If you are looking for cheap and quality webhost to host and run your website check Jboss Web Hosting services.

CHAPTER 6 DECOUPLED NAVIGATION PATTERN 171 is generated and the element captures it. Consider the following example that illustrates how to capture an event by using a property to wire the event: function DoAssociation() (document.getElementById( “manualassociation”))[ ‘onclick’] = MonitorLinksId; document.getElementById( “manualassociation”).attachEvent( ‘onclick’, MonitorLinksId); } In the example, the wiring of the methods to an HTML element should happen in the HTML element bodyonload event. It is important that only when the onload event is being fired that the events can be wired. If the wiring occurs before the document has been loaded, some HTML elements might not exist and cannot be referenced. The onload event ensures that the HTML content has been loaded and can be referenced. After the method DoAssociation is called, there are two ways to wire an event to an HTML element. In either way, it is important to call the document.getElementById method to retrieve an HTML element instance. The first way to assign an event is to assign the array index of the event that is to be wired. In the example, that means assigning the onclick array index. This assignment illustrates a fundamental feature of JavaScript: there are no differences made between properties, functions, E B V N and so on. The second way to assign an event is to use the method attachEvent (as illustrated) or addEventListener. When calling the methods attachEvent or addEventListener, you will need two parameters. The first parameter is the event to be captured, and the second parameter is the function to be associated with the event. In both cases, it is not necessary to use function variables or identifiers, because an anonymous function would be acceptable. You would use attachEvent with Microsoft Internet Explorer, and addEventListener when using a Mozillabased or Safari browser. The advantage of using the array index approach is that it works on all browsers without any special requirements. However, it works because it is a special case of how the JavaScript language is constructed. The official approved way would be to use either addEventListeneror attachEvent. After the events have been wired, they will function identically to the MonitorLinks function of previous examples. If you do not want to associate the event to the HTML element in the bodyonload event, it can be done after the element has been declared, as illustrated by the following source code:

…