In: Categories » Computers and technology » AJAX » Dealing with Formatted Data and Forms
The first article of this article dealt with the topic of validating your form data. This article takes a step back and deals with the topic of how to interact with the data that is being manipulated on the server. The focus in this article is not code, but rather an illustration of how to think differently, in preparation for the rest of the articles in this article. Let’s look at how to make forms more intelligent, so, for example, they can adjust their data setup automatically if you move to a different country, or they can look up data in order to save users work when filling them in. Problem There must be a better way of dealing with form data in modern Web applications. You need to know the best way to go about it. Theory Filling in forms can be painful. They require you to enter the data in a piecemeal manner. The way you enter the data is a direct reflection of how the data is stored in the database.
The advantage of doing a one-to-one mapping is that it simplifies the work for you. It’s easier for you to write a database statement such as “Search for this city” rather than “Search for this thing, which could be a city, address, or country.” Yet, the seemingly vague input is the better approach from the perspective of the user. The Web site asks you to enter the address or intersection, city, state, or zip code. This can be confusing, as an address can mean the street, city, state, zip code, and country. If you enter a complete address into the address text field, you get an error saying that you need to enter a city, state/province, and so on. What if you don’t live in North America? A link is provided, but you must click on the link. Following the link takes you to a combo box that allows you to select the country, but this seems clunky. Solution
The validation architecture has changed from two fields to a single-field form. The singlefield form has a single text box that accepts a buffer in the form [number]+[number]. The buffer is validated on the client side to contain the numbers and operator. On the server side, the data would be preprocessed and the individual numbers and operator would be extracted and assigned to a state. The state is then validated and passed to the underlying business logic. The advantage of using a search-engine-type approach is that users can define a buffer as [number] + [number] + [number] wiithout having to change the user interface. You would need to make some minor changes to the client-side validation logic and some minor changes to the server-side preprocessor.
Notice the location of the start and end locations of the route. In between the start and end locations is a link that allows you to stop along the route. This link is in between the two end points, which gives users an immediate understanding of the link’s purpose. Below the route destinations are a number of options that serve as trip modifiers, allowing user to finetune the route being calculated. Notice that all of the fine-tuning elements are logical and don’t require additional instruction to use.
You can also format your data by cross-referencing the information with common items that people use today. For example, both http://map.search.ch and http://immo.search.ch represent information that you can find elsewhere, such as in the telephone article, classified ads, and so on. However, the information is cross-referenced and assembled in such a way that users find the information in a very short time. The Web site http://immo.search.ch is an extension of http://map.search.ch and represents a way of finding real estate in Switzerland, whether you’re looking to buy or rent. Users determine the parameters of the search. The top of the Web page represents the controls used to define the criteria used to select the properties. The criterion is not just a bunch of numbers that users can select. The criterion is detailed using a histogram and numbers that allows users to create brackets to see which properties are available. When some criteria have been selected, the properties that are available in the region shown in the right-hand pane are selected in the left-hand pane. The right-hand pane not only shows the properties and the associated details, but also shows the public transportation, shopping, and topographic information. When investigating a property, users can instantly figure out what is nearby, thus making it easier to narrow down which properties they want to visit. This article did not illustrate a single line of code, and that was done on purpose. This article is a lead-in to the next article, because it illustrates that the user interface is directly coupled to the data being presented. Think of the presented user interfaces as data-mining user interfaces. The next article will dissect the architectures behind the user interface. When developing the user interface to your data, keep the following things in mind:
• User interfaces in an Ajax context are tightly coupled to the data that they’re managing.
• There is absolutely no reason why user interfaces to the data have to be bad.
• When searching and narrowing down data, think of the technology that search engines use and the criteria they use to fine-tune the results.
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
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...
2. 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...
3. 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 ...
4. 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...
5. 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...
6. 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...
7. 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...
8. Implementing an Error and Exception Handling Strategy
Implementing an Error and Exception Handling Strategy Problem You want to implement a clean error and exception handling strategy in your applications, to make them run more smoothly. Theory Of course, you might argue that one error is a dialog box and the other is generated in the JavaScript console. The fact that one browser uses a dialog box to show an error and the other does not is a browser issue, not an error issue. A concise way of classifying the two errors is to ...
9. Understanding the Behavior of Variables When Implementing Recursion
Understanding the Behavior of Variables When Implementing Recursion Problem You want to implement recursion in JavaScript, and you also want to understand how variables will behave under those circumstances. Theory In JavaScript, you do not need to declare the variable type, or even declare the variable. For example, the following code works perfectly: if( counter == 1) { buffer = "counter is 1"; } document.getEle...