Take AJAX to Your Email Inbox: Developing a Web-based POP 3 Client - Defining the POP3 client's structure: coding the (X)HTML markup
(Page 3 of 4 )
At this time, you should hopefully have a clear idea of how the application's (X)HTML markup will be defined. Obviously, the top DIV container will house all the corresponding form fields used for entering mail server connection data, together with the button that triggers http requests to the Web server. This sounds really simple and understandable, so it bears no further discussion.
Similarly, the second containing DIV will be responsible for displaying the list of messages pulled from the server, along with all the possible responses that eventually the host might send back to the client. The only thing worth nothing with reference to this element is that the CSS selector tied to it includes the "overflow: auto;" declaration, which means that, in case the length of the message being displayed would be longer than the height of the pertinent DIV, a scroll bar will be added to it automatically.
Finally, the third DIV element will be used as a simple wrapper for the navigational buttons that you saw in the screenshot I showed previously.
After having schematized the visual structure of the web-based POP3 client, let's turn the theory into concrete code. Therefore, here's the corresponding (X)HTML markup, which gives consistency to the program's front-end:
<div id="serverinfo">
<form>
HOST <input name="host" type="text" class="inputbox" title="Enter
mail hostname/IP address" />
USER <input name="user" type="text" class="inputbox" title="Enter
username" />
PASSWORD <input name="pass" type="password" class="inputbox"
title="Enter password" />
<input name="connect" type="button" value="Connect"
class="formbutton" />
</form>
</div>
<div id="mailcontainer">
</div>
<div id="navbar">
<form>
<input name="prev" type="button" value="<< Prev" class="formbutton" title="Previous message" />
<input name="next" type="button" value="Next >>" class="formbutton" title="Next message" />
<input name="clear" type="button" value="Clear" class="formbutton" title="Clear all messages" />
</form>
</div>
Here, I've defined the DIVs I mentioned before, in order to build the structure for the user interface. As described above, the upper DIV houses the form fields that will allow the user to enter mail server connection values, while the bottom DIV wraps up the fancy buttons for navigating back and forth across email messages. The last piece of structural markup rests on the "mailcontainer" DIV element, which, as you may have figured out, will show each of the messages retrieved from the specified server, and incidentally display its respective responses, whether or not the connection process or the retrieval of messages has been successful.
Considering the fact that I've defined the CSS declarations and the (X)HTML markup responsible for rendering the user interface of the mail client, the question is: what's coming up now? Well, over the next few lines I'll define the generic signature for each JavaScript function that integrates the whole web-based mail application, so you can understand its programming logic. Click the link below and keep on reading.
Next: Creating the skeleton of the client-side application layer: defining generic JavaScript functions >>
More XML Articles
More By Alejandro Gervasio
/ 90 
