In: Categories » Computers and technology » AJAX » Implementing the HTML Client
I explain the code in chunks. First, I illustrate the overall architecture and then I fill in the individual pieces. The following is the source code for the entire HTML page.
Source: /client/ajaxrest articles/architecture/dynamiclist.html
<html>
<head>
<title>Dynamic List</title>
<script language="JavaScript"
src="/scripts/jaxson/common.js"></script>
<script language="JavaScript"
src="/scripts/jaxson/cachecommunications.js">
</script>
<script language="JavaScript" src="/scripts/jaxson/uimorphing.js"></script>
<script language="JavaScript" src="/scripts/json.js"></script>
</head>
<script type="text/javascript">
function Initialize() {
DynamicIterator.initialize("display", "listElements");
}
// Removed for clarity
</script>
<body onload="Initialize()">
<table>
<tr id="listElements">
<td onmouseover="DynamicIterator.startIteration( -1)"
onmouseout="DynamicIterator.stopIteration()">
<img src="/images/left.jpg"/></td>
<td onmouseover="DynamicIterator.highlightItem(this)" id="1"></td>
<td onmouseover="DynamicIterator.highlightItem(this)" id="2"></td>
<td onmouseover="DynamicIterator.highlightItem(this)" id="3"></td>
<td onmouseover="DynamicIterator.highlightItem(this)" id="4"></td>
<td onmouseover="DynamicIterator.highlightItem(this)" id="5"></td>
<td onmouseover="DynamicIterator.highlightItem(this)" id="6"></td>
<td onmouseover="DynamicIterator.highlightItem(this)" id="7"></td>
<td onmouseover="DynamicIterator.highlightItem(this)" id="8"></td>
<td onmouseover="DynamicIterator.highlightItem(this)" id="9"></td>
<td onmouseover="DynamicIterator.highlightItem(this)" id="10"></td>
<td onmouseover="DynamicIterator.startIteration( 1)"
onmouseout="DynamicIterator.stopIteration()">
<img src="/images/right.jpg"/></td>
</tr>
</table>
<iframe id="display"
style="top:100px;left:0px;width:400px;height:500px;position:absolute"
src="hello.html"></iframe>
</body>
</html>
In the source code at the top of the HTML page are a number of script tags that reference a number of JavaScript files. The JavaScript files contain the reusable logic that has been used previously and can be used in different contexts for manipulating large or slow data sets. Our main interest right now is the bold HTML code, which represents the base structure of the large and slow data sets. There is a table tag and an iframe tag. The table tag, in an abstract sense, represents the navigation of the data set, and how you structure the navigation depends on your personal preferences. The iframe represents the content of that data set. An iframe is used so that the navigation is separate from the display of the data. Separating these two actions using a physical HTML barrier makes it simpler to manage the generated output of each.
The navigation of the metadata is unique in that the onclick event has not been implemented, but onmouseout and onmouseover have. onclick is not supported because clicking is overrated when navigating large or slow data sets. Removing the need to click reduces the particular problem of overclicking that most Web sites seem to promote. If your users constantly need to click to navigate the data, they are likely to become mentally and digitally fatigued and give up after a number of clicks. For example, if you’ve ever visited an image Web site and clicked through hundreds of pictures, trying to find the one you’re interested in, then you know how tedious this type of navigation experience can be. When creating your own navigation, it is important to make sure that you do not lose users’ attention.
One way to keep their attention is to avoid using click-based navigation. Bound like articleends by the navigation elements are the data elements here’s an example:
<td onmouseover="DynamicIterator.highlightItem(this)" id="10"></td>
Again, this element has not implemented the onclick event to avoid click fatigue. When hovering their mouse over the element, users will expect to see the data associated with it. One exception to this rule is if users pass their mouse quickly over the HTML element we’ll examine that situation shortly. Each of the data elements has an ID with a number, with the idea being to create an array of HTML elements that can be addressed and manipulated directly. You do not need to do this, and you could create an array of elements when the navigation HTML content is loaded.
Clickless Navigation
In my opinion, we rely too much on clicking to navigate. This was not always the case: originally, the default for Unix operating systems was to assign focus to the window that the mouse was hovering over. It was the Windows world that promoted its own brand of clicking to accomplish tasks and activate items. Very quickly it became apparent that too many clicks were needed to accomplish even the most basic tasks. For example, to activate items in an application you usually have to click or double-click them. The Adobe Reader slider is a great way to sift through the data and find the page you want. However, what if the document you’re looking at has thousands of pages? It would seem that the Adobe Reader slider pane has the same problem as all other sliders have it’s easy to iterate 10, or maybe 100 pages, but beyond that the navigation gets tedious.
The solution Adobe Reader implements is a dual slider. On the right side is a scroll bar, which has a much coarser iteration and allows you to quickly jump from page 1 to page 300. For larger documents, Adobe Reader will even tell you which page you are scrolling to. The dual scrolling method, where one slider is a “coarse” slider and the other is a “fine” slider, is extremely effective, because moving the coarse slider also moves the fine slider. An effective strategy is to use the coarse slider to get you in the neighborhood of the content you’re interested in, and then use the fine slider to hone in on the exact content.
• Gesture history remembers where you navigated so that questions about your navigation can be asked in the future. The example question relates to whether you enjoy navigation without clicking.
• Navigation to an external Web site does not need a click. In the clickless navigation paradigm, the act of hovering for a specific period of time activates a new navigation.
• Moving around the Web site activates and deactivates pieces of functionality. This aspect is particularly useful for tablet-style computers. The http://www.dontclick.it site illustrates how effective clickless navigation can be, without losing any functionality. All that is necessary is a change of perspective in how you navigate content. Implementing this type of navigation using HTML is a challenge because JavaScript is not multithreaded. In a multithreaded scenario, you would have a thread watching what the mouse is doing and then acting. What you need to do in JavaScript is mimic multithreaded behavior. But even with mimicking, your success will be limited. The strategy that needs to be implemented is akin to throwing a ball and having a dog bring it back. As an analogy, I have a good friend who has had dogs all of his life. One time when I visited him, he had an Australian shepherd. Anyone familiar with this breed knows that Australian shepherds have boundless energy, so my friend needed to find a way to release his dog’s energy. His solution was golf. My friend was a budding golfer and he had problems with shorter shots, he would practice his golf shots and let his dog bring the golf ball back. To finish the story, the dog loved the game, consistently brought the ball back, and my friend’s golf game improved dramatically.
Now let’s relate this story to the strategy of mimicking threads in JavaScript. When real multitasking isn’t available, you need to use events. In the case of my friend, his events were hitting the golf ball and the dog bringing back the ball. Between taking the shot and waiting for the ball to come back, my friend could do other things (because initially he kept hitting the ball into the bushes); admittedly, his time to do other things was limited, but he could still have a conversation with someone else and so forth. Thus, when mimicking multithreading in JavaScript, you are not really implementing multithreading, but you are implementing a proactive event-driven architecture.
legal notice
Our website is not responsible for the information contained by this article. Web-articles is a free articles resource.
Suggestion: If you need fresh, daily updated content for your website, feel free to use our service. Click here for more information.
Useful tools and features
If you like this article (tutorial), please link to it from your web page using the information above.
related articles
Understanding the Definition and Philosophy of REST REST is a controversial topic among Web service enthusiasts, because it’s considered to stand for the opposite of what Web services and SOA are trying to achieve. The problem with this thinking is that REST is not in contradiction with the abstract definition of SOA and Web services. REST is in contradiction with technologies such as SOAP, WSDL, and WS-* specifications. The following offers a quick definition of REST:...
2. The Easiest Way to Get Started with Ajax and REST
The Easiest Way to Get Started with Ajax and REST Problem You want to know the best way to get started with writing Ajax and REST. Solution When developing an Ajax and REST application, you must decide on the tools and frameworks you’ll use. The choice is simple: Use whatever you’re using today, and write some Ajax applications. You don’t need to change the tools you’re using today. Whether you’re using ASP.NET, JavaServer Pages (JSP), PHP, Ruby, or Python, you...
3. Testing a Dynamic Contract with Ajax
Coding the Contract Using Test-Driven Development Techniques Coding the contract using agile and test-driven development techniques requires writing a number of tests and implementing aMock URL layer. Problem You want to code the contract using these development techniques. Solution To demonstrate, let’s define a use case, implement the use case as a contract, write a test case(s) to implement the contract, implement the contract in the Mock URL, and finally...
4. Testing the Client Side Logic
Problem You want to effectively test your application’s client-side logic. Theory Testing GUI code tends not to be a productive task because of the complications that arise. The main complication is how to test the correctness of a user interface. Imagine a situation where clicking a button causes a table to be filled with data. Now imagine that when a check box is checked and the button is clicked again, a different table is filled with content. The fact that clicking the same button results in two ...
5. Understanding JavaScript and Types
Understanding JavaScript and Types Problem You want to work around the fact that JavaScript does not have types declared for its variables. Theory JavaScript code does not have any variables with a declared type. The lack of typed variables is apparent when you declare functions. That said, not having typed variable declarations does not mean JavaScript has no types or no type safety. Let’s start out with the simple declaration of a function, as illustrated by the following ex...
6. Coding Using Conventions and Not Configurations
Coding Using Conventions and Not Configurations Problem You want to make your JavaScript constructs more efficient by applying the Rails “convention over configuration” principle to them. Theory You may already be familiar with the programming platform Ruby on Rails, which is used to build Web applications. The focus of this recipe is not Ruby on Rails, but one aspect of Ruby on Rails namely, convention over configuration (see http://en.wikipedia.org/wiki/ Ruby_on_Rails for m...
7. Advantage of parameterless functions in JavaScript
Using Parameterless Functions Problem You want to take advantage of parameterless functions in JavaScript. Theory JavaScript functions for the most part have parameters. You may think that the previous sentence states the obvious after all, without parameters, what data could be passed to a function? JavaScript has the ability to declare functions that have no parameters, even though the caller of the function has passed parameters to the function. For example, let’s look at...
8. JavaScripot Functions
Treating Functions Like Objects Problem You want to take advantage of the fact that functions are objects (remember, everything is an object in JavaScript). Theory Many people think that a function is some keyword used in JavaScript. A function is also an object that can be manipulated. Knowing that a function is an object makes it very interesting from the perspective of writing JavaScript code, because the code can treat the function like another other object. This mean...