Building an SMTP Client with Prototype - Defining the front end of the Prototype-driven SMTP client application
(Page 2 of 4 )
The first step involved in the creation of this Prototype-based SMTP client consists logically of defining the look and feel that this application is going to have.
Since the program that I plan to develop in this series must be capable of sending email to a specified recipient, in addition to working with carbon copies (CC) and blind carbon copies (BCC), the application's visual appearance will look similar to the image below:
As you can see, the previous screen shot illustrates in a clear fashion how the front-end of this SMTP client is going to look. As I said earlier, the user interface that corresponds to this application must provide users with the ability to enter a recipient's email address and to specify additional receivers. As shown in the image above, the front end will include the form fields required for entering all this data.
Okay, at this moment I'm pretty sure that the above picture should give you a clear idea of how the visual appearance of this SMTP client application will be created. However, this section of the article would be rather incomplete if I don't show you the corresponding CSS styles that provide the email application with the look and feel that you saw in the previous screen shot.
Having said that, here is the list of CSS rules that precisely define the visual appearance corresponding to this Prototype-based SMTP client. Have a look at it, please:
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 24px Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
}
p{
font: bold 12px Arial, Helvetica, sans-serif;
color: #000;
padding-right: 100px;
text-align: right;
}
textarea{
width: 400px;
height: 300px;
padding: 2px;
font: normal 12px Arial, Helvetica, sans-serif;
color: #000;
}
#maincontainer{
width: 600px;
height: 550px;
margin-left: auto;
margin-right: auto;
background: #f5ebb1;
border: 1px solid #000;
}
#state{
font: bold 12px Arial, Helvetica, sans-serif;
color: #00f;
padding: 10px 0 10px 10px;
}
.textbox{
width: 400px;
padding: 2px;
font: normal 12px Arial, Helvetica, sans-serif;
color: #000;
}
.formbutton{
font: normal 12px Arial, Helvetica, sans-serif;
color: #000;
}
</style>
As you can see, this straightforward set of CSS styles shouldn't give you any problems as far as understanding how it fits into the schema imposed by this SMTP application.
Basically, aside from styling some common elements of the web document where the application is going to work, such as <h1> headers, text areas and paragraphs, I included a "maincontainer" selector. As you may have guessed, this selector will be responsible for housing the respective web form, which is handy for entering the email address of the eventual recipient, the data corresponding to additional receivers and the text of the message to be submitted. This process sounds pretty logical, right?
Well, at this stage hopefully you learned how the group of CSS styles that were shown previously does its business, with reference to defining the pertinent visual appearance of this expandable SMTP client. Nonetheless, the styles would be rather disconnected from the application's overall context if I don't define its corresponding structural markup.
Therefore, in the upcoming section of this tutorial I'll define the (X)HTML code that corresponds to the front-end of this SMTP client, certainly a procedure that will be very easy to follow.
To see how this task will be performed, please click on the link that appears below and keep reading.
Next: Defining the SMTP client's structural markup >>
More JavaScript Articles
More By Alejandro Gervasio
