Contact | Privacy | Datenschutzerklärung | Impressum

dba Part 3: The TABLE View

You should think of the TABLE View part of a dba application as the place where you decide which Data Fields to show a User while he Browses through your Database. In Browse Mode, it is not always necessary or convenient to show everything a record contains. You only need to show what's necessary for the User to select the records he wants to view in more detail.

For instance, in Browse Mode, our Interactive Guestbook shows only the Name of the person who made the entry, the URL of his Favorite Web Site, and the Date and Time he made the entry. If you want to go directly to the Web Site, you can simply click on the link provided. Most people, however, would first click on the User Name to see what additional information has been provided. It's at this point that the dba application switches into Form View Mode, which we explain in part 4 of this Tutorial.

There are quite a lot of Tags you can use in the Table View, but basically they can be divided into three categories:

  1. Table Format Tags
  2. Data Field Display Tags
  3. Database Action Tags

As we'll see in a moment, this simple classification scheme covers a rich assortment of Tags, many of which can be used in combination with other Tags to create astonishingly flexible and reactive presentations.

There are two Table Format Tags, which are actually Environment Tags used to create a framework within which you define the appearance of the Table to be displayed.

Here is a simple overview of how they would appear in a dba application:

<dbaTable gb cnt=25 cond="pub='T'">
  <let cnt=25>  
  <TABLE>
    // Define your Table Header <TH> line here. 
    <dbaTableEntry gb r>
       // Data Field Display Tags go here. 
    </dbaTableEntry>
  </TABLE>
  // Database Action Tags go here.
</dbaTable> 

The <dbaTable> Tag accepts three parameters, the first two of which are required. The first parameter app, as always, is the Application Name, which we have called gb here. The second parameter cnt establishes a counter to control the number of records displayed on each screen. If this parameter is to be used anywhere else within the <dbaTable> Environment, it should be declared and initialized as we demonstrated above using the let Tag.

The third parameter is optional. We have used it in the Interactive Guestbook to give people an opportunity to keep their entry private. Some Users may prefer to keep their information private, while others may perhaps welcome the chance to hear from other heitml programmers. In any case, the cond or condition parameter is used here as method of keeping some records private.

The cond parameter could also be used in an application where various search functions are allowed. Although we have not done so here, the Interactive Guestbook Template could easily be modified to select entries where, for example, pub='t', DbSys='ODBC', and Opsys='Linux'. Such a parameter could be passed using either of the two methods as follows:

As literal data inserted directly
into the Source Code:

<dbaTable gb
      cnt=25
cond="pub='t' AND DbSys='ODBC' AND OpSys='Linux'">

Or, as a variable assigned at
runtime under program control:

<dbaTable gb cnt=25 cond=gl.SearchCondition>

Obviously, the second method provides more flexibility, because it allows the application to respond in different ways, depending on the values assigned to the SearchCondition variable.

Between the <dbaTable> and <dbaTableEntry> Tags you should open an HTML Table and define the appearance of the Heading Line. This will identify the Data Fields that appear in the records listed by <dbaTableEntry>.

Here's a simplified example from the Guestbook Template:

<dbaTable gb cnt=25 cond="pub='T'">
 <let cnt=25> 
 <table border=4 cellpadding=0 cellspacing=0>
  <tr>
   <th> Name              </th>
   <th> Favorite Web Site </th>
  </tr>

  <dbaTableEntry gb r>
    // Data Field Display Tags go here.
  </dbaTableEntry>
 </table>
  // Database Action Tags go here.
</dbaTable>

Next you define the appearance of the data fields to be displayed. The <dbaTableEntry> Tag accepts two parameters, the Application Name and the variable "r", which points to the contents of the current record. Everything that appears between the <dbaTableEntry> Environment is repeated for each record to be displayed. We use the Data Field Display Tags to add formatting options to the data in each field.

Again, here is a simplified code sample from the Guestbook Template:

<dbaTable gb cnt=25 cond="pub='T'">
  <let cnt=25>  
  <TABLE>
    // Table Header <TH> line is defined here. 

    <dbaTableEntry gb r>
     <tr bgcolor="<? gl.Beige>">
      <td> <dbaAdisplay gb>
             <dbafi gb "FirstName">
             <dbafi gb "LastName">
           </dbaAdisplay> 
      </td>

      <td> <dbaLink gb "Favorite"> </td>
     </tr>
    </dbaTableEntry>

  </TABLE>
  // Database Action Tags go here.
</dbaTable>

We will delay our discussion of the Data Field Display Tags until part 4 of this Tutorial. For now we will mention only a few basic points. The FirstName and LastName Data Fields are displayed together in the same <TableData> column. The <dbaAdisplay> Tag is actually a Database Action Tag. It creates an anchor Tag, or pointer, to the location of that record in the SQL Database. If the user clicks on this link, the Form View part of the program receives that record pointer and retrieves the record from the database for display. And finally, the <dbaLink> Tag creates another anchor Tag, this one an absolute reference to the address of the Web Site contained in the Favorite data field. If the user clicks on this link, (s)he is transported to that Web Site.

All of this should be made clear simply by Browsing through our Interactive Guestbook and clicking on the links to see what happens.

The last thing we need to talk about before leaving this section relates to the Database Action Tags. Currently, there are a wide variety of Database Action Tags, but in this section we will concern ourselves only with the ones that can be used in the TABLE View part of a dba Application. Database Action Tags are easy to recognize for several reasons:

  1. They all share the format: <dbaAaction>, where the action part of the Tag name describes what the Tag does.
  2. All Database Action Tags are Environment Tags, which means that they require and End Tag in the form: </dbaAaction>.
  3. They all create hot-links to specific records in the Database. In other words, any text or data enclosed by a dba Action Tag is underlined just as though you had used the standard HTML <a href> or <a name> anchor Tags. A User can click on the link, and the dba Action Tag retrieves the record it points to in the Database and performs a specific action.

Database Action Tags can be sub-divided as:

  1. Those that act on a group of records.
  2. Those that act on a single record.

The dba Action Tags that act on a group of records help you navigate or "Browse" through the Database n-number of records per screen or Web Page view. They are:

<dbaAfirst gb> First <? cnt> Records     </dbaAfirst>
<dbaAlast gb> Last <? cnt> Records      </dbaAlast>
<dbaAnext gb> Next <? cnt> Records      </dbaAnext>
<dbaAprev gb> Prev <? cnt> Records  </dbaAprev>

All of the above Tags take a single parameter: namely, the Application Name, as seen in all other dba Tags. You can place any descriptive message you like in the body of the Tags. In this case, we've simply told the user how many records he can expect to see with each page view, and where those records will be coming from. The cnt variable is always defined immediately following the <dbaTable> Tag, as described previously. You can make this variable as large or as small as you like, but keep in mind the volume of data you will be delivering to each Web Page, and the potential delay Users with slow connections may experience.

The dba Action Tags that act on a single record are:

<dbaAedit> <? gb.LastName> <dbaAedit>
<dbaAshow> Show All fields <dbaAshow>
<dbaAempty>  Add your own entry </dbaAempty>
<dbaAdelete> Delete this Record </dbaAdelete>

As we've tried to illustrate above, you can place almost any information imaginable between the Beginning and End Tags, but normally you will want at least one of the Tags to make it clear which record is being acted upon. For instance, if you look again at the simplified code sample from the Guestbook Template, you will see that we only used one of these Tags in our TABLE View. Therefore, it seemed wise to display the name of the person who's record was being displayed.

You will want to be careful about using the <dbaAdelete> Tag. It would be unwise to put this Tag in an application where anyone on from the Web could maliciously purge records from you Database. But in an Administrative Application placed in a secure area, this Tag makes it very convenient for quickly deleting old, out of date, or offensive records. The Administrator could rapidly scan through a Database, deleting records with a single click.

The <dbaAempty> Tag is something best positioned near the top or bottom of a Web Page. It gives Users the opportunity to contribute their own entries to the Database. Clicking on the link from this Tag sends the User to the input form you created in the FORM View that we will describe in the next section.

There is a subtle but important distinction to be made between the <dbaAshow> and <dbaAedit> Tags. The Show Tag takes you to the Form View in such a manner as to display the contents of the individual data fields in a record. The Edit Tag takes you to the Form View as well, but in this case the User is presented with the raw data as it was originally entered into the Form. In other words, if certain data fields contain HTML formatting Tags, the Show Tag displays the data as interpreted by your Browser, while the Edit Tag shows the data in its true form.

The Edit Tag can be useful in two situations: First, when you want to encourage people to learn something about how other Users formatted their entries. You can pick up a lot of tips and tricks simply by looking at other people's code. And second, when the original User wants to come back and make changes or enhancements to his entry, the Edit Tag gives him quick access. In this case, alterations to the individual records should be Password protected, as we'll demonstrate in the next section of this Tutorial.

Summary

This section explained how a dba Application presents a Browseable list of records from a Database. We presented a theoretical model as an overview, and then a simplified code example from the Guestbook Template to give you an idea of how to set up the first (or Table Heading) row, followed by a quick look at how individual Data Field Display Tags could be contained within (surrounded by) Database Action Tags that allow the User to select individual records for a closer look.

We delayed an in-depth discussion of the Data Field Display Tags until the FORM View section immediately following this one, because in this, the TABLE View part, the Database Action Tags are more important.

We explained the naming convention that makes it easy for the programmer to recognize these Database Action Tags when he sees them in the Source Code. We sub-divided the Tags into two easy to remember groups, and we gave an example of each Tag, and how it should be used.

We've only touched the surface of how these Tags operate in this section, because the purpose of this Tutorial is to give you a quick introduction to the structure of a dba Application. Later pages in the Advanced Topics part of the Language Guide will treat these Tags in more depth.


This page was dynamically generated by the web application development tool RADpage of H.E.I.

Selected blog articles : 3D Objects on HTML pages, CSS Transition Visibility, and CSS Transition Display.


© 1996-2022 H.E.I. All Rights Reserved.



Homepage
Intro/Features
Component Guide
Programming
  Language Guide
  Language Ref.
  Component Ref.
  Class Library
  User Components
  Tutorial
  New Features
  heitml 1
    dba Tutorial
      dba Part 1
      dba Part 2
      dba Part 3
      dba Part 4
    dbq Tutorial
    dbs Tutorial
    The heitml Libraries
    Demonstration
User Guide
Services
Privacy
Datenschutz
 
Contact / Impressum