Lightweight, Component-based, and Database-oriented Web Application Framework

About | Overview | Documentation


Documentation > Tutorial > 7.2 Entry list page: List testing and view template customization

7.2 Entry list page: List testing and view template customization


Go back to browser's window/tab for mygb application and open/refresh the "List Entry" main link page. All previous entries might be listed as below.


The above design layout displays the items of the list by using traditional spreadsheet row and column style. The column names of the list are directly mapped from the table field names. In the context of guestbook application, the list is targeted to be viewed as a simple list of public comments and should not make the visitors feel like they are using an online database administration tool. Need to change the design layout to make the list looks more natural to the visitors.

Open the template file that is currently used as a default view layout of the list (E:\wmbase\public_html\cgi-bin\webman\mygb\mygb_entry_list.html) and below is the part of the content which utilizes HTML table to structure the main layout of the list.

 14 ...                                              

 15 <table border="1">                               

 16   <!-- start_menu_ name=caption //-->            

 17   <tr>                                           

 18     <th>Num.</th>                                

 19     <th>menu_item0_</th>                         

 20     <th>menu_item1_</th>                         

 21     <th>menu_item2_</th>                         

 22     <th>menu_item3_</th>                         

 23     <th>menu_item4_</th>                         

 24   </tr>                                          

 25   <!-- end_menu_ //-->                           


 27   <script language="JavaScript">                 

 28     // javascript array to store popup info. data

 29     // __js_popup_data_array__                   

 30   </script>                                      


 32   <!-- start_list_ name=main //-->               

 33   <tr class="$tld_row_class_">                   

 34     <td align="right">$tld_num_.</td>            


 36     <td>$tld_nickname_</td>                      

 37     <td>$tld_email_</td>                         

 38     <td>$tld_entry_</td>                         

 39     <td>$tld_wmf_date_created_</td>              

 40     <td>$tld_wmf_time_created_</td>              


 42   </tr>                                          

 43   <!-- end_list_ //-->                           


 45   <tr bgcolor="#EEEEEE">                         

 46     <td align="right">...</td>                   


 48     <td>...</td>                                 

 49     <td>...</td>                                 

 50     <td>...</td>                                 

 51     <td>...</td>                                 

 52     <td>...</td>                                 


 54   </tr>                                          

 55 </table>                                         

 56 ...                                              

Inside the above table structure the content is further splitted into two sub-content which identified as MENU template-element named caption (lines 17-24) and LIST template-element named main (lines 33-42). Read the framework's view template documentation to understand how the view template content is generally constructed to be used by the framework's component-type modules. Also read the documentation on webman_db_item_view_dynamic module especially at the view template sub-section for more specific descriptions on how view template layout for the list should be structured. Do remember that the module ("mygb_entry_list") that is used to display the list is generated based on this particular component-type module ("webman_db_item_view_dynamic").

Below is the new proposed view template layout structure of the list.

 14 ...                                                                    

 15 <!-- start_menu_ name=caption //-->                                    

 16 <b>Order by:</b> menu_item0_ | menu_item1_ | menu_item3_               

 17 <!-- end_menu_ //-->                                                   

 18 <p />                                                                  


 20 <table border="1" width="480">                                         

 21   <!-- start_list_ name=main //-->                                     

 22   <tr>                                                                 

 23     <td>                                                               

 24       $tld_nickname_ [$tld_email_] said...                             

 25       <p />                                                            

 26       $tld_entry_                                                      

 27       <p />                                                            

 28       <b>Posted at:</b> $tld_wmf_date_created_ / $tld_wmf_time_created_

 29       <p />                                                            

 30     </td>                                                              

 31   </tr>                                                                

 32   <!-- end_list_ //-->                                                 

 33 </table>                                                               

 34 ...                                                                    

The proposed modifications make the layout structure more simple but still follow the generic structure defined by the framework. The caption part has been moved out from the table structure (line 16) and reduced to only 3 caption names that would be displayed (caption names number 1, 2, and 4). The field part still remains inside the table structure (lines 22-31) but the viewed items are placed together into single column. Apply the proposed modifications and save it as new view template file named mygb_entry_list_customize.html.

Go back to ADT's Link Structure/Reference page section and set the "template_default" parameter name setting for "mygb_entry_list" module reference as shown below.


In the previous setting there is no specific view template file has been assigned to "mygb_entry_list" module. Following framework's CoC the module will use the default one (mygb_entry_list.html). This new setting will make the module ignore framework's CoC implementation and use mygb_entry_list_customize.html file as its view template. Click the "Set" button to save this new view template setting of "mygb_entry_list" module.

Still at the ADT's Link Structure/Reference page section of "mygb_entry_list" module, change the setting for "order_field_caption" parameter value using new string entry as below:


The "order_field_caption" parameter holds string value that represents the captions of fields separated by ":" characters. The new string value assigned was to change the caption "Wmf Date Created" to "Date/Time Posted". It also remove the "Wmf Time Created" caption thus reduce the field number from 4 to 3. This is done so the available captions were inline with the content structure of the new view template: mygb_entry_list_customize.html.

Following this new caption setting the "order_field_name" and "map_caption_field" parameters should also be changed as follows:

Field NameNew Setting
order_field_name nickname:email:entry:wmf_date_created desc,wmf_time_created desc
map_caption_field Nickname => nickname, Email => email, Entry => entry, Date/Time Posted => wmf_date_created


Click the "Set" button to apply the changes made above and below is the new parameter settings of "mygb_entry_list" module's reference that should be displayed by the browser.


Go back to browser's window/tab for mygb application and open/refresh the "List Entry" main link page. The list should now be displayed in more natural ways with less administrative looks and feels as shown below.