Building the User Interface for an AJAX-Based Network Processor - Creating the application's graphical user interface
(Page 2 of 5 )
In consonance with the concepts that I explained in the introduction you just read, I'm going to begin creating this AJAX-based networking application by defining its corresponding user interface.
Essentially, the front-end that I'm going to build during this article will be made up of three main areas. First, there will be a section on top of the web document where users will be able to enter either the name of the host that they want to query or its equivalent IP address. Pretty logical, right?
The second important area of the web document will display all the potential results returned by a specified query. The interface in question will be completed with a pair of columns placed on the left and right sides of the web page. These columns will act simply as the containers for a set of command buttons, obviously handy for performing different networking queries.
Despite the fact that all the above explanation sounds pretty understandable, a screen shot of the mentioned graphical interface may help you see more clearly how this networking application is going to work.
Given that, pay attention to the picture below, as it illustrates the look and feel that I want to give to this small application. Here it is:
As you can see, the above image shows very clearly the layout of the different sections that comprise the front-end of the application, as well as some hypothetical results displayed in the centered area of the web document. Until now, we've seen nothing unexpected.
So far, so good. Now that you learned how the graphical user interface that corresponds to this expandable networking application will look, the next step involved in the creation process consists of translating the previous picture to functional client-side code.
Having said that, in the next few lines I'm going to teach you how to include some basic DIVs along with a simple web form to create the complete front-end that was depicted by the previous screen shot.
To see how this will be achieved, please click on the link that appears below and keep reading.
Next: Writing some functional client-side code >>
More JavaScript Articles
More By Alejandro Gervasio
/ 3 
