Author: Michael J. Fuhrman
Updated on: 2010-04-11
Posted on: 2010-04-11
Package: Appointment Calendar
This post will take the design decisions made from the previous post and implement them, creating the various components and pages.
11. Implementing the Appointment Presentation:
===============================
Welcome back to the fourth part of "Creating an Appointment Calendar". The previous post focused on designing the Appointment User Presentation. This post will take the design decisions made from the previous post and implement them, creating the various components and pages.
The Appointment User Presentation will be broken into two separate sections:
a) The Components: List, View, Edit, Calendar, Time and Length
b) The User Presentation: List, View, New, Edit, Move and Delete
Note: at this point in the series, the code described in this blog has been removed . It can be retrieved from PHPClasses as the Appointment Calendar Class.
----------
a) The Panel Components: List, View, Edit, and Calendar(s)
[ --- Common_Panel.cls --- ]
Common_Panel.cls abstracts the functions needed for all Panels and specifically for Panels that will talk with a List.
Lines 8 25 .. describes a generic class for a component panel
Line 10 .. contains the name of the Panel.
Line 12 .. sets the panel name. This function can be overridden by subclasses to propagate a namespace using periods to separate the names of various components.
Line 15 .. returns the name of the panel with periods. This is useful for JavaScript namespaces.
Line 16 .. returns the name of the panel with underscores. HTML FORM Names, Sessions, Cookies and IDs.
Lines 18 - 22 .. provides a series of abstract functions for managing data stored in Sessions, FORM POSTs, and Ladder.
Line 24 .. provides a generic function for drawing the component.
----------
Lines 28 38 .. describes a generic class for a component panel that talks to List panels.
Line 30 .. lets the List know if there are headers for the List to draw.
Lines 32 33 .. tells the List how many columns and rows the List will draw for the component.
Line 35 .. draws the Column Header.
Line 37 .. draws a specific cell.
[ --- Week.cls --- ]
This calendar panel uses two rows to display itself. The first row is the header, and the second row allows the user to navigate by selecting dates.
Line 8 .. creates a new class that extends ENetArch_Panel class, which abstracts most panel functions.
Line 10 .. $dToday contains the current date.
Line 11 .. $dSelected is initialized to the current date, and then can be set by the user on Line 36.
Lines 13 and 19 .. initializes $dToday and $dSelected.
Lines 23 - 27 .. retrieves data from sessions variables based on the panel name.
Lines 29 - 32 .. stores data in session variables based on the panel name.
Lines 36 - 42 .. allows programmers to change the date of the panel to a date of their choice. If the date is not correct, then the date is reset back to the current date.
Line 44 .. retrieves the current date that the panel is set to.
Lines 46 - 116 .. draw the calendar.
Line 48 .. clones $dToday as $dSunday so that it can be manipulated.
Line 49 .. determines if the $dSunday really is Sunday. If not Line 28 sets $dSunday to Sunday.
Line 53 .. starts the table, which ends on Line 114
Line 54 .. starts the header row, which ends on Line 72
Lines 55 and 71 .. are special cells in that they provide lines for the current date, and display the date for which the calendar is set to.
Lines 57 - 69 .. contain the navigation and day headers .. Previous Year, Month, Week, S, M ... F, S, Next Week, Month, Year.
Line 74 .. starts the 2nd row, which ends on Line 92
Lines 77 - 82 .. clone the date yet again for manipulation.
Lines 84 - 89 .. manipulate the dates respectively for the Previous and Next: Year, Month, and Week.
Lines 91 - 93 .. display the manipulated dates for the navigation via previous arrows.
Line 97 .. gets the Day value of the $dSunday. This is used when displaying the date on Line 81.
Lines 110 - 112 .. display the manipulated dates for the navigation via next arrows.
Lines 99 - 105 .. Display the individual dates for Sunday, Monday ... Friday, and Saturday.
Line 100 .. starts the individual cell that will be displayed. 7 cells will be drawn all together, based on the FOR loop on Line 74.
Line 100 and 104 .. emphasize the date shown if it is the date selected.
Line 101 and 103 .. bold the date if it is the current date.
Line 102 .. draws the HREF used to select the date.
[ --- Times_Start.cls --- ]
The Appointment Times Panel provides the programmer with two display options: 1) an editable selection box, 2) a static display of the time selected.
Line 8 .. creates a new class that extends ENetArch_Panel class, which abstracts most panel functions.
Line 10 .. the time this panel is set to display.
Line 12 .. defines the maximum number of Appointment Times for the Array Appointment Times, defined on Line 14.
Lines 16 and 17 .. Initialize the Appointment Times Instance by calling the Init () function on Line 23.
Line 19 .. return the Default Appointment Time.
Lines 29 - 97 .. initialize $aryAptTime with start times based on 30 minute increments.
Lines 99 - 103 .. retrieves data from sessions variables based on the panel name.
Lines 105 - 106 .. stores data in session variables based on the panel name.
Lines 108 - 115 .. retrieves data from POST variables based on the panel name.
Lines 117 118 .. draws a static version of the Appointment Start Time.
Lines 120 - 136 .. draws an Appointment Start Time selection box based on the name provided programmer. The selection box is set to Appointment Start Time provided by the programmer as well.
[ --- Times_Length.cls --- ]
The Appointment Length Panel provides the programmer with two types of display. 1) an editable selection box. 2) a static display of the time selected.
Line 8 .. creates a new class that extends ENetArch_Panel class, which abstracts most panel functions.
Line 10 .. the length this panel is set to display.
Line 12 .. defines the maximum number of Appointment Lengths for the Array Appointment Lengths, defined on Line 14.
Lines 16 and 17 .. Initialize the Appointment Lengths Instance by calling the Init () function on Line 23.
Line 19 .. return the Default Appointment Length.
Lines 21 - 52 .. initialize $aryAptLength with length based on 30 minute increments.
Lines 54 - 58 .. retrieves data from sessions variables based on the panel name.
Lines 60 - 61 .. stores data in session variables based on the panel name.
Lines 63 - 70 .. retrieves data from POST variables based on the panel name.
Lines 72 73 .. draws a static version of the Appointment Start Time.
Lines 75 - 91 .. draws an Appointment Start Time selection box based on the name provided programmer. The selection box is set to Appointment Start Time provided by the programmer as well.
[ --- List.cls --- ]
The List Panel provides the programmer with a method of drawing a list of items from a folder. The list connects to a Panel object that draws the contents of each cell in the list. This List Panel also allows the programmer to specific which data classes should be listed.
Line 10 .. $nTotal captures the total number of items to be displayed in the list. It is private as the variable is filled in on Line 24.
Line 12 .. allows the programmer to define which Panel the List will call to fill in the List's cells.
Line 14 .. allows the programmer to define the number of items that should be drawn per page.
Line 15 .. allows the programmer to define the current page that the user will view.
Line 17 .. allows the programmer to define which Folder the list will be retrieving its data instances from.
Line 18 .. allows the programmer to provide an Array of class ID's that will be used when filtering and counting the number of data instances to be displayed.
Lines 20 25 .. sets the panels name, and sets the panel that of the panel used to generate the row.
Lines 27 31 .. sets the row panel that will generate the data for each row drawn by the list.
Lines 33 - 62 .. draws the List Panel
Line 35 .. validates that the panel has been named.
Line 36 .. validates that a row panel has been provided.
Line 37 .. validates that $fldrTarget has been set, otherwise the function exits without drawing anything. Additional validation could be provided as a separate function that encapsulates validation of this variable, such that it is set with an instance of ldrFolder. For now it is assumed that the programmer has passed an instance of ldrFolder.
Line 39 .. Queries $fldrTarget for the total count of items that can be displayed.
Lines 40 - 44 .. determine if there are any items to be displayed, and if not draws the statement "No items were found". A call back function could be provided here that would allow the programmer to determine what should be presented here.
Line 46 .. sets $nPerPage to 10 if $nPerPage is 0.
Line 47 .. sets $nCurrentPage to 1 if $nCurrentPage is 0. Additional validation could check to see if $nCurrentPage is outside the max range of total pages available, and set $nCurrentPage to the max page available.
Line 49 .. starts the Table for the list, which ends on line 61.
Line 50 .. requests that the List Table header be drawn.
Line 52 .. Calculates the Starting Position for the current page.
Line 53 .. Calculates the Stopping Position of the current page
Line 55 .. validates that the starting position is greater than 0
Line 56 .. validates that the stopping position is less than or equal to the total number of items that can be displayed.
Line 58 - 59 .. loop from the starting position to the stopping position and request that each row be drawn.
Lines 64 - 82 .. draws the List Panel's header row
Line 66 .. starts the header row, which ends on Line 81
Line 67 .. draws a check box. This will be used by the user to identify which row they are interested in.
Line 74 - 79 .. determines if $listPanel has headers. If so it draws them.
Line 76 .. determines how many columns are in $listPanel's header row.
Lines 77 - 78 .. loops the columns, calling $listPanel, asking it to draw each column header.
Lines 84 - 118 .. draws a row of the List Panel. Note that a row may consist of more than one actual table row. Similar to drawColumnHeaders (), this panel cycles through the number of columns and rows that each Panel requires to properly draw itself.
Line 86 .. retrieves the Instance of the Item based on position.
Line 88 .. sets the Panel that draws this particular item.
Line 90 .. determines how many columns are in $listPanel's data row.
Line 91 .. determines how many rows are in $listPanel's data row.
Line 93 .. provides the designer with an option to use line bar effects in the list.
Lines 95 - 118 .. loop through the rows and columns to print out both the List Panel's table cells and the instances table cells.
Lines 97 - 111 .. determine if whether or not to draws the check box for the current row. If it is on the first row needed by the instance, then it draws the check box, otherwise it draws an empty table cell.
Lines 113 - 114 .. call the row panel and tell it which cell it's on, so that it can draw the correct cell.
Lines 120 - 138 .. draws the List's navigation, allowing the user to navigate between 100, 10 and 1 pages either Previous or Next. In addition, it also allows selection of specific page numbers, and allows the user to specify how many items per page they would like to see.
Lines 122 - 124 .. draw the previous page selectors from First Page, 100 pages, and 10 pages back.
Lines 126 - 127 .. determine the left most and right most page position based on the current page.
Lines 129 - 130 .. validate that the pages positions are between 1 and the total number of pages that can be displayed.
Lines 132 - 133 .. draw the individual page numbers by calling PrintLink.
Lines 135 - 137 .. draw the next page selectors from 10, 100 pages and Last Page.
Lines 140 - 143 .. encapsulates the printing of the link needed to navigate between pages.
Lines 145 - 155 .. draws a selection box that allows the user to select between 10, 20, 50 or 100 items.
======================================
Next Post
======================================
The next post will describe how to extend the ldrFolder and ldrItem classes so that PHP classes for Common_Appointment and Common_Appointments can be created.
/* =======================================
Copyright 1998 - 2010 - E Net Arch
This program is distributed under the terms of the GNU
General Public License (or the Lesser GPL).
======================================= */
===============================
Welcome back to the fourth part of "Creating an Appointment Calendar". The previous post focused on designing the Appointment User Presentation. This post will take the design decisions made from the previous post and implement them, creating the various components and pages.
The Appointment User Presentation will be broken into two separate sections:
a) The Components: List, View, Edit, Calendar, Time and Length
b) The User Presentation: List, View, New, Edit, Move and Delete
Note: at this point in the series, the code described in this blog has been removed . It can be retrieved from PHPClasses as the Appointment Calendar Class.
----------
a) The Panel Components: List, View, Edit, and Calendar(s)
[ --- Common_Panel.cls --- ]
Common_Panel.cls abstracts the functions needed for all Panels and specifically for Panels that will talk with a List.
Lines 8 25 .. describes a generic class for a component panel
Line 10 .. contains the name of the Panel.
Line 12 .. sets the panel name. This function can be overridden by subclasses to propagate a namespace using periods to separate the names of various components.
Line 15 .. returns the name of the panel with periods. This is useful for JavaScript namespaces.
Line 16 .. returns the name of the panel with underscores. HTML FORM Names, Sessions, Cookies and IDs.
Lines 18 - 22 .. provides a series of abstract functions for managing data stored in Sessions, FORM POSTs, and Ladder.
Line 24 .. provides a generic function for drawing the component.
----------
Lines 28 38 .. describes a generic class for a component panel that talks to List panels.
Line 30 .. lets the List know if there are headers for the List to draw.
Lines 32 33 .. tells the List how many columns and rows the List will draw for the component.
Line 35 .. draws the Column Header.
Line 37 .. draws a specific cell.
[ --- Week.cls --- ]
This calendar panel uses two rows to display itself. The first row is the header, and the second row allows the user to navigate by selecting dates.
Line 8 .. creates a new class that extends ENetArch_Panel class, which abstracts most panel functions.
Line 10 .. $dToday contains the current date.
Line 11 .. $dSelected is initialized to the current date, and then can be set by the user on Line 36.
Lines 13 and 19 .. initializes $dToday and $dSelected.
Lines 23 - 27 .. retrieves data from sessions variables based on the panel name.
Lines 29 - 32 .. stores data in session variables based on the panel name.
Lines 36 - 42 .. allows programmers to change the date of the panel to a date of their choice. If the date is not correct, then the date is reset back to the current date.
Line 44 .. retrieves the current date that the panel is set to.
Lines 46 - 116 .. draw the calendar.
Line 48 .. clones $dToday as $dSunday so that it can be manipulated.
Line 49 .. determines if the $dSunday really is Sunday. If not Line 28 sets $dSunday to Sunday.
Line 53 .. starts the table, which ends on Line 114
Line 54 .. starts the header row, which ends on Line 72
Lines 55 and 71 .. are special cells in that they provide lines for the current date, and display the date for which the calendar is set to.
Lines 57 - 69 .. contain the navigation and day headers .. Previous Year, Month, Week, S, M ... F, S, Next Week, Month, Year.
Line 74 .. starts the 2nd row, which ends on Line 92
Lines 77 - 82 .. clone the date yet again for manipulation.
Lines 84 - 89 .. manipulate the dates respectively for the Previous and Next: Year, Month, and Week.
Lines 91 - 93 .. display the manipulated dates for the navigation via previous arrows.
Line 97 .. gets the Day value of the $dSunday. This is used when displaying the date on Line 81.
Lines 110 - 112 .. display the manipulated dates for the navigation via next arrows.
Lines 99 - 105 .. Display the individual dates for Sunday, Monday ... Friday, and Saturday.
Line 100 .. starts the individual cell that will be displayed. 7 cells will be drawn all together, based on the FOR loop on Line 74.
Line 100 and 104 .. emphasize the date shown if it is the date selected.
Line 101 and 103 .. bold the date if it is the current date.
Line 102 .. draws the HREF used to select the date.
[ --- Times_Start.cls --- ]
The Appointment Times Panel provides the programmer with two display options: 1) an editable selection box, 2) a static display of the time selected.
Line 8 .. creates a new class that extends ENetArch_Panel class, which abstracts most panel functions.
Line 10 .. the time this panel is set to display.
Line 12 .. defines the maximum number of Appointment Times for the Array Appointment Times, defined on Line 14.
Lines 16 and 17 .. Initialize the Appointment Times Instance by calling the Init () function on Line 23.
Line 19 .. return the Default Appointment Time.
Lines 29 - 97 .. initialize $aryAptTime with start times based on 30 minute increments.
Lines 99 - 103 .. retrieves data from sessions variables based on the panel name.
Lines 105 - 106 .. stores data in session variables based on the panel name.
Lines 108 - 115 .. retrieves data from POST variables based on the panel name.
Lines 117 118 .. draws a static version of the Appointment Start Time.
Lines 120 - 136 .. draws an Appointment Start Time selection box based on the name provided programmer. The selection box is set to Appointment Start Time provided by the programmer as well.
[ --- Times_Length.cls --- ]
The Appointment Length Panel provides the programmer with two types of display. 1) an editable selection box. 2) a static display of the time selected.
Line 8 .. creates a new class that extends ENetArch_Panel class, which abstracts most panel functions.
Line 10 .. the length this panel is set to display.
Line 12 .. defines the maximum number of Appointment Lengths for the Array Appointment Lengths, defined on Line 14.
Lines 16 and 17 .. Initialize the Appointment Lengths Instance by calling the Init () function on Line 23.
Line 19 .. return the Default Appointment Length.
Lines 21 - 52 .. initialize $aryAptLength with length based on 30 minute increments.
Lines 54 - 58 .. retrieves data from sessions variables based on the panel name.
Lines 60 - 61 .. stores data in session variables based on the panel name.
Lines 63 - 70 .. retrieves data from POST variables based on the panel name.
Lines 72 73 .. draws a static version of the Appointment Start Time.
Lines 75 - 91 .. draws an Appointment Start Time selection box based on the name provided programmer. The selection box is set to Appointment Start Time provided by the programmer as well.
[ --- List.cls --- ]
The List Panel provides the programmer with a method of drawing a list of items from a folder. The list connects to a Panel object that draws the contents of each cell in the list. This List Panel also allows the programmer to specific which data classes should be listed.
Line 10 .. $nTotal captures the total number of items to be displayed in the list. It is private as the variable is filled in on Line 24.
Line 12 .. allows the programmer to define which Panel the List will call to fill in the List's cells.
Line 14 .. allows the programmer to define the number of items that should be drawn per page.
Line 15 .. allows the programmer to define the current page that the user will view.
Line 17 .. allows the programmer to define which Folder the list will be retrieving its data instances from.
Line 18 .. allows the programmer to provide an Array of class ID's that will be used when filtering and counting the number of data instances to be displayed.
Lines 20 25 .. sets the panels name, and sets the panel that of the panel used to generate the row.
Lines 27 31 .. sets the row panel that will generate the data for each row drawn by the list.
Lines 33 - 62 .. draws the List Panel
Line 35 .. validates that the panel has been named.
Line 36 .. validates that a row panel has been provided.
Line 37 .. validates that $fldrTarget has been set, otherwise the function exits without drawing anything. Additional validation could be provided as a separate function that encapsulates validation of this variable, such that it is set with an instance of ldrFolder. For now it is assumed that the programmer has passed an instance of ldrFolder.
Line 39 .. Queries $fldrTarget for the total count of items that can be displayed.
Lines 40 - 44 .. determine if there are any items to be displayed, and if not draws the statement "No items were found". A call back function could be provided here that would allow the programmer to determine what should be presented here.
Line 46 .. sets $nPerPage to 10 if $nPerPage is 0.
Line 47 .. sets $nCurrentPage to 1 if $nCurrentPage is 0. Additional validation could check to see if $nCurrentPage is outside the max range of total pages available, and set $nCurrentPage to the max page available.
Line 49 .. starts the Table for the list, which ends on line 61.
Line 50 .. requests that the List Table header be drawn.
Line 52 .. Calculates the Starting Position for the current page.
Line 53 .. Calculates the Stopping Position of the current page
Line 55 .. validates that the starting position is greater than 0
Line 56 .. validates that the stopping position is less than or equal to the total number of items that can be displayed.
Line 58 - 59 .. loop from the starting position to the stopping position and request that each row be drawn.
Lines 64 - 82 .. draws the List Panel's header row
Line 66 .. starts the header row, which ends on Line 81
Line 67 .. draws a check box. This will be used by the user to identify which row they are interested in.
Line 74 - 79 .. determines if $listPanel has headers. If so it draws them.
Line 76 .. determines how many columns are in $listPanel's header row.
Lines 77 - 78 .. loops the columns, calling $listPanel, asking it to draw each column header.
Lines 84 - 118 .. draws a row of the List Panel. Note that a row may consist of more than one actual table row. Similar to drawColumnHeaders (), this panel cycles through the number of columns and rows that each Panel requires to properly draw itself.
Line 86 .. retrieves the Instance of the Item based on position.
Line 88 .. sets the Panel that draws this particular item.
Line 90 .. determines how many columns are in $listPanel's data row.
Line 91 .. determines how many rows are in $listPanel's data row.
Line 93 .. provides the designer with an option to use line bar effects in the list.
Lines 95 - 118 .. loop through the rows and columns to print out both the List Panel's table cells and the instances table cells.
Lines 97 - 111 .. determine if whether or not to draws the check box for the current row. If it is on the first row needed by the instance, then it draws the check box, otherwise it draws an empty table cell.
Lines 113 - 114 .. call the row panel and tell it which cell it's on, so that it can draw the correct cell.
Lines 120 - 138 .. draws the List's navigation, allowing the user to navigate between 100, 10 and 1 pages either Previous or Next. In addition, it also allows selection of specific page numbers, and allows the user to specify how many items per page they would like to see.
Lines 122 - 124 .. draw the previous page selectors from First Page, 100 pages, and 10 pages back.
Lines 126 - 127 .. determine the left most and right most page position based on the current page.
Lines 129 - 130 .. validate that the pages positions are between 1 and the total number of pages that can be displayed.
Lines 132 - 133 .. draw the individual page numbers by calling PrintLink.
Lines 135 - 137 .. draw the next page selectors from 10, 100 pages and Last Page.
Lines 140 - 143 .. encapsulates the printing of the link needed to navigate between pages.
Lines 145 - 155 .. draws a selection box that allows the user to select between 10, 20, 50 or 100 items.
======================================
Next Post
======================================
The next post will describe how to extend the ldrFolder and ldrItem classes so that PHP classes for Common_Appointment and Common_Appointments can be created.
/* =======================================
Copyright 1998 - 2010 - E Net Arch
This program is distributed under the terms of the GNU
General Public License (or the Lesser GPL).
======================================= */
You need to be a registered user or login to post a comment
Login Immediately with your account on:
Comments:
No comments were submitted yet.