Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Simplifying Date Data Entry with Calendars, Part I-3 : Page 3


advertisement
Developing Routines for HTML Output
The next step is to output the HTML text to generate the page and the calendar within the page. Do this by encapsulating the task of outputting the top of the HTML page within a sub-routine called WritePageTop and then call the routine. The code at the top of your ASP page will be:

WritePageTop()

At the bottom of the page, create a new section (within ASP <% %> tags) where all your sub-routines are placed. Within this section, write the code for your WritePageTop routine—which outputs HTML text. Writing code this way makes it easy to read and maintain.

<% '------------------------------------------------------ ' All ASP post processing code goes here, as well as ' sub routines and functions '------------------------------------------------------ Sub WritePageTop() %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Please Select the Date</TITLE> <STYLE> <!-- body, td {font-family: Tahoma, Verdana, Arial, Helvetica, Sans Serif; font-size: 8pt; } // --> </STYLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <DIV ALIGN="CENTER"> <% End Sub %>

Notice that the page began with the <HTML> tag and ended the routine just after the <BODY> tag with a <DIV> tag that aligns the contents of the body in the center of the window. You can write the remaining pieces of code—in a very similar fashion, with the HTML outputting routine at the bottom of the page and call it from within the ASP code at the top of the page.



The next task is to output the top table, which includes the name of the month and the ability to move from month to month. Let us call this routine "WriteMonthNameTable":

Sub WriteMonthNameTable() ' -- outputs the table that displays the month name ' -- and the prev and next buttons %> <TABLE BORDER="0" CELLPADDING="1" CELLSPACING="0" WIDTH="200" STYLE="border: 1px solid black;"> <TR BGCOLOR="BUTTONFACE" STYLE="border: 1px solid #808080;"> <TD WIDTH="12" ALIGN="CENTER" VALIGN="TOP"><A HREF="<%= Request.ServerVariables("SCRIPT_NAME") %>?m=<%= intMPrev %> &y=<%= intYPrev %>"><IMG SRC="calmLeft.gif" WIDTH="8" HEIGHT="12" ALT="Previous Month" BORDER="0"></A></TD> <TD WIDTH="176" ALIGN="CENTER" VALIGN="TOP"><STRONG> <%= MonthName(intM) & ", " & intY %></STRONG></TD> <TD WIDTH="12" ALIGN="CENTER" VALIGN="TOP"><A HREF="<%= Request.ServerVariables("SCRIPT_NAME") %>?m=<%= intMNext %> &y=<%= intYNext %>"><IMG SRC="calmRight.gif" WIDTH="8" HEIGHT="12" ALT="Next Month" BORDER="0"></A></TD> </TR></TABLE> <% End Sub

You are dynamically building the previous and the next buttons and their hyperlinks in this section of the code—outputing a table with one row and three columns. Within the first column, place the graphic called "calmLeft.gif" and enclose it within a hyperlink (<A>). The hyperlink points to the page itself by using the "Request.ServerVariables("SCRIPT_NAME")" function call. Also build a query string to be passed to the hyperlink. The query string is in this line of code:

<%= Request.ServerVariables("SCRIPT_NAME") %>?m=<%= intMPrev %>&y=<%= intYPrev %>

If the value of the variable intMPrev was 11 and the value of the variable intYPrev was 2000, then this hyperlink would resolve to the following:

Calpop.asp?m=11&y=2000

The next step is to build the actual days of the calendar. Begin by outputting a simple table tag using a routine called WriteCalTableBegin:

Sub WriteCalTableBegin() %> <TABLE BORDER="0" CELLPADDING="1" CELLSPACING="0" WIDTH="200" STYLE="border: 1px solid black;"> <% End Sub

The next section outputs the first row of the calendar that contains the labels for the days of the week as well as a horizontal line underneath. This routine is called "WriteWeekLabelRow":

Sub WriteWeekLabelRow() %> <TR> <TD> </TD> <TD WIDTH="20" ALIGN="CENTER" VALIGN="TOP">S</TD> <TD WIDTH="20" ALIGN="CENTER" VALIGN="TOP">M</TD> <TD WIDTH="20" ALIGN="CENTER" VALIGN="TOP">T</TD> <TD WIDTH="20" ALIGN="CENTER" VALIGN="TOP">W</TD> <TD WIDTH="20" ALIGN="CENTER" VALIGN="TOP">T</TD> <TD WIDTH="20" ALIGN="CENTER" VALIGN="TOP">F</TD> <TD WIDTH="20" ALIGN="CENTER" VALIGN="TOP">S</TD> <TD> </TD> </TR> <TR> <TD> </TD> <TD COLSPAN="7"><HR SIZE="1" COLOR="#808080" NOSHADE></TD> <TD> </TD> </TR> <% End Sub

The list of routine calls you've now created is below. For each call, the ASP compiler jumps down to the routines and executes the code within them:

WritePageTop WriteMonthNameTable WriteCalTableBegin WriteWeekLabelRow

Before continuing to output the days, you need to pay some attention to the code that occurs after the days are listed. You can end the calendar table with a routine called "WriteCalTableEnd" as follows:

ub WriteCalTableEnd() %> <TR> <TD> </TD> <TD COLSPAN="7"><HR SIZE="1" COLOR="#808080" NOSHADE> </A></TD> <TD> </A></TD> </TR> <TR> <TD> </A></TD> <TD COLSPAN="7" ALIGN="CENTER" VALIGN="TOP"><FORM> <INPUT TYPE="BUTTON" NAME="B" VALUE="Today" STYLE="font-family: Tahoma; font-size: 8pt; width: 48px; height: 20px;"></FORM></TD> <TD> </A></TD> </TR> </TABLE> <% End Sub

This code completes the calendar table by adding a horizontal line and a row containing a "Today" button. You can finish off the page by calling a routine "WritePageBottom" that mirrors the WritePageTop routine.

Sub WritePageBottom() %> </DIV> </BODY> </HTML> <% End Sub

The table below summarizes the routines we've built thus far in this solution and what they do. We are now ready to tackle the actual date display with a routine called "GenerateCalendar."

Routine Description
WritePageTop Displays Top of the page.
WriteMonthNameTable Displays the table with the month name and buttons to move back and forth
WriteCalTableBegin Simple routine to output the table begin tag for the calendar.
WriteWeekLabelRow Displays a row of week day labels (S, M, T, ).
GenerateCalendar Routine that displays the actual dates. We have not yet written this code.
WriteCalTableEnd Displays the bottom of the Calendar table—including a button labelled 'Today'.
WritePageBottom Displays the bottom of the page.





Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date