Web email client development UI Based on AJAX technology

Source: Internet
Author: User
In this series (three in total), you will learn how to use AJAX technology to create a simple Web-based POP3 client. Specifically, we will fully discuss how to use AJAX technology to build the client UI and its comprehensive JavaScript programming, finally, you can use a PHP class to retrieve and display the email messages in the mail server on the Web page.

I. Introduction

Nowadays, AJAX technology has a huge impact on the development of client Web applications. This new method of building Web applications-sending http requests in the background without page overloading-has been designed and developed for today's email software (they were originally designed and developed as desktop applications) development provides several possible implementation solutions.

Do you also want to build FTP clients, chat software or full-featured email applications that run all functions on the same Web page based on the Web? First, you need to have a good understanding of AJAX technology, learn about its attributes and methods, and then develop the corresponding backend and front-end, in the end, we hope that you can create a workable HTTP program that can at least implement the established functions in a decent way. Then, you can gradually improve it to eventually turn this program into a strong reusable library.

In this article, I will create a simple Web-based POP3 client that uses the XMLHttpRequest object to retrieve messages from a given mail server. This application uses a simple front-end to connect to the mail host, display messages, and implement back-and-forth navigation between messages. On the server side, I will use PHP to access the mail server, push (pushing) POP3 command, and read messages in the inbox.

Now, we start to build this client.

2. Create an Application User Interface

The first step is to build basic user interfaces. If you only consider the framework, the interface consists of three simple DIV elements, which will respectively contain the corresponding region of the mail client. The first DIV box contains the area used to display the appropriate data fields. This allows you to enter general information to connect to the mail server (by specifying its domain name or IP address, and name/password combination ). 1 is a snapshot of the framework composed of the user interface of the client program.

Figure 1.Web POP3 client User Interface Snapshot

As shown in, in addition to providing some basic back-and-forth navigation control between messages, this Web-based POP3 client also displays typical data domains connected to the mail server. In addition, I added a "Clear" button in this program to Clear the message display area.

My POP3 client user interfaces are easy to use. Of course, you will see later that the client and server application layer will seamlessly support the development and implementation of an improved interface. However, for demonstration purposes only, the functions of the current program version are relatively simple.

Now you know the general plan of this program interface. Next, let's discuss how to translate the above image into some CSS statements and corresponding structured (X) HTML tags.

Iii. Build the program style-Write the CSS Declaration

In fact, it is very easy to write a CSS Declaration to implement this client program with the specified style. Because its user interface only contains three DIV elements, I may apply most CSS styles directly to it. In addition, I will declare some CSS classes to improve the appearance of the control button. To this end, the CSS rules that control the appearance of my Web POP3 client program are as follows:

body {

margin: 10px 0 0 0;

}

#serverinfo {

width: 700px;

height: 22px;

padding: 2px 5px 2px 5px;

border-top: 2px solid #000;

border-left: 2px solid #000;

border-right: 2px solid #000;

background: #9cf;

margin-left: auto;

margin-right: auto;

font: bold 11px Verdana, Arial, Helvetica, sans-

serif;

color: #000;

}

#mailcontainer {

width: 700px;

height: 520px;

padding: 2px 5px 2px 5px;

border: 2px solid #000;

background: #eee;

margin-left: auto;

margin-right: auto;

font: 12px normal Arial, Helvetica, sans-serif;

color: #000;

overflow: auto;

}

#navbar {

width: 700px;

height: 22px;

padding: 2px 5px 2px 5px;

border-left: 2px solid #000;

border-right: 2px solid #000;

border-bottom: 2px solid #000;

background: #9cf;

margin-left: auto;

margin-right: auto;

}

form {

display: inline;

}

.inputbox {

width: 150px;

border: 1px solid #000;

background: #eee;

}

.formbutton {

width: 70px;

height: 20px;

font: bold 11px Verdana, Arial, Helvetica, sans-

serif;

color: #000;

}

As shown above, I used three different context selectors ("# serverinfo", "# mailcontainer", and "# navbar) to build the pattern of each different part of the program. In a similar way, I added some styles to the user input domain and control button to further beautify the interface. Of course, you can edit your own CSS rules to change their appearance.

Then, we will compile the (X) HTML tag, which corresponds to the actual build block to create the frontend of this POP3 client program.

Well, since the CSS Code listed above is not complex, we will continue to discuss it without looking at these details. Next we will compile the (X) HTML Tag.

Iv. Define POP3 client architecture encoding (X) HTML Tag

Now, you may want to learn more about how to define the (X) HTML Tag of this application. Obviously, the DIV container on the top will contain all the corresponding form fields used to input the mail server connection data, and the buttons for activating http requests to the Web server. This part is relatively simple, so we will not discuss it here.

Similarly, the second DIV container will be responsible for displaying the message list from the server and all possible response messages that may eventually be sent back to the client by the host. The only thing worth noting in this element is that the CSS selector bound to it contains the "overflow: auto;" declaration. This means that when the length of the displayed message is greater than the DIV height, a scroll bar is automatically added.

Finally, the 3rd DIV elements will be used as a simple package for navigation buttons (you have seen them in the previous screen snapshot.

After planning the visual structure of the client, let's start coding. The following is the corresponding (X) HTML tag, which can achieve the consistency of the front-end of the client program:

<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="&lt;&lt Prev" class="formbutton" title="Previous message" />

<input name="next" type="button" value="Next &gt;&gt;" class="formbutton" title="Next message" />

<input name="clear" type="button" value="Clear" class="formbutton" title="Clear all messages" />

</form>

</div>

In this Code, I defined the previously mentioned DIV block to build a user interface framework. As mentioned above, the top DIV contains form fields that allow users to enter the mail server connection value, while the bottom DIV contains buttons used to navigate between email messages. The last part of the structured tag corresponds to the "mailcontainer" DIV element, which is used to display and retrieve each message from the specified server, by the way, their respective responses are displayed, regardless of whether the message connection or retrieval process is successful.

Assuming that I have defined the CSS declaration and (X) HTML tag for generating the mail client user interface, you will then ask: "What should I do next ?" Well, in the following lines of code, I will define the general code for every JavaScript function that constitutes the entire Web-based mail application, so that you can better understand its programming logic.

5. Definitions of client application architecture common JavaScript Functions

Now that you have the CSS code and (X) HTML tag for generating the application user interface, the rest is to define the structure of the JavaScript function that will integrate the entire POP3 program. For this reason, the following is a list of related functions:

// Request the PHP file-it is responsible for extracting messages from the mail server

Function sendHttpRequest (){

// The code for extracting the PHP File

}

// Display email messages on the webpage

Function fetchMessages (){

// Here is the code for displaying the email message

}

// Obtain form data

'Variable1 = value1 & variable2 = value2 &... variableN = valueN;

Function getFormValues (){

// The code used to obtain the form data

}

// Execute the initialization task, assign values to the event processor, and clear the page Directory

Function initializeUserPanel (){

// Here is the code for creating the user panel

}

With only four JavaScript Functions, this small POP client can retrieve messages directly from the mail server and display them on the Web-based user interface just created. Now, let's take a quick look at the tasks of various functions so that you can understand their respective functions.

The first function "sendHttpRequest ()" is used to access the POP3 file-it implements pushing the original POP3 command into the mail server. Obviously, this process will be called once the user enters the server name (or its IP address) and his username and/or password information.

Apparently, the "fetchMessages ()" function is responsible for displaying email messages on the webpage (in fact, including all the responses generated on the server ). The "getFormValues ()" function is used to obtain all the form data entered by the user before the connection is established to the mail server.

Finally, each time you create a connection to the mail server, the "initializeUserPanel ()" function is responsible for executing some useful initialization tasks, for example, assign the "onclick" event processor to the control button and reset the content of the message containing the DIV. After briefly describing the tasks for integrating every JavaScript function on the POP client, you may agree with me-the logic of the application is easy to understand. Therefore, when coding the complete client application layer, you should not have any problems in understanding the core functions of the program.

Note: If you can't wait to discuss how the POP3 client works in the next article, you can first download and analyze the source code files that are accompanied by this article.

Vi. Summary

So far, I have completed the definition of the general structure of this simple Web-based POP3 client program. I very much hope that this first article will give you enough inspiration-creating the appearance of the program and defining the framework of each client function.

In the next article, we will analyze the complete code of JavaScript Functions that contain the application layer.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.