LAS CUATRO DIMENSIONES DEL PRINCIPIO DE SOLIDARI- SOLIDARI-DAD EN LA UNIÓN EUROPEA

SAMPLES/CHAP05/HTML subdirectory of the directory where you installed Data Widgets. Set the RecordSource property of the control to "Stock."

4. Set the DataSource property of the grid to Data1. This will bind the grid to the database, which contains a few records that represent the inventory of a very small computer store.

5. In the past, the next step would be to set up the grid columns using the Grid Editor. But because Data Widgets 3.1 includes the ability to save and restore layouts, you can simply load a file that was created for you with the formatting already done.

Right-click on the grid to bring up the context menu, then select Properties. The property pages for the grid will appear. Click the "Load..." button, and when the file name dialog appears, click the "..." button to invoke a File Open common dialog. Locate the file STOCK.GRD (located in the same directory as SMALL.MDB) and

open it. Then press "OK" in the Restore File Name dialog to complete your selection. Finally, click "OK" to accept your changes and close the property pages. Your form should look something like this:

The grid is now completely laid out and formatted, and you are ready to proceed to the next step.

6. You are going to add some code to detect when an item is out of stock and change its appearance in response.

Add the following code to the RowLoaded event of the Grid:

Dim iC as Integer

If SSDBGrid1.Columns(1).CellValue(Bookmark) = 0 Then For iC = 0 To (SSDBGrid1.Columns.Count - 1)

SSDBGrid1.Columns(iC).CellStyleSet "Reorder"

Next iC End If

This code checks the value in the Quantity column and, if it is zero, applies the "Reorder" StyleSet to every cell in the row. The "Reorder" StyleSet was stored in the STOCK.GRD layout file, and was added to the grid when you loaded that file. It makes text appear in red, bold italics.

7. Change the Caption of the command button to "Export" and specify the following code for its Click event:

SSDBGrid1.Export ssExportTypeHTMLTable, ssExportAllRows _ OR ssExportOverwriteExisting, "INSTOCK.HTM", "STOCKTPL.HTM"

This line of code performs the actual export to HTML. The constants specified for the Export method indicate that you want to export data as a full HTML table (ssExportTypeHTMLTable) as opposed to a text file or individual rows of HTML data. You will be exporting all the rows in the grid (ssExportAllRows) and you want to overwrite any existing file with the name you've specified (ssExportOverwriteExisting). The control will generate an HTML file called INSTOCK.HTM and will use the file STOCKTPL.HTM as a template to create that file.

It is the HTML templates that provide the flexibility behind the HTML export capabilities of Data Widgets.

By formatting the HTML template using a variety of options, you gain fine control over the appearance of the generated output.

Note You may need to specify the full path to the HTML files. If you receive a run-time error when attempting to invoke the Export method, specify fully qualified path names for the export and template file parameters and try again.

8. Next, you must create the STOCKTPL.HTM template file, which Data Widgets will use when generating the target HTML file (INSTOCK.HTM). Even if you have no experience with HTML you should not have any

problems following along, as the HTML used in this tutorial is quite simple.

Note If you wish to do advanced formatting using templates, a working knowledge of HTML is essential.

If you want to learn more about creating HTML, many resources are available. Most bookstores have a variety of references on creating HTML, and there are free interactive guides on the World Wide Web that provide useful information. A good reference for beginners is the NSCA Beginners Guide to HTML at http://www.ncsa.uiuc.edu/general/internet/www/htmlprimer.html. A more comprehensive reference is Yale University's C/AIM Web Style Guide at http://info.med.yale.edu/caim/manual. HTML files are simply text files that contain HTML formatting tags. For the purposes of this tutorial, you can use Notepad or any pure text editor to create the HTML templates. You may also use an HTML editor of your choice, provided it is not a WYSIWYG editor that hides the formatting tags from you or does not allow you to manually edit formatting information. If your HTML editor does not give you direct access to the HTML tags, use Notepad instead for this tutorial.

Open a new text file and enter the following lines of HTML:

<HTML>

<BODY>

<CENTER>{SSREPLACE TABLE DATA}</CENTER>

</BODY>

</HTML>

This is one of the simplest template files you can create. The real work is done by the {SSREPLACE} token.

When Data Widgets creates the output file, the {SSREPLACE...} section of the template file will be replaced with data from the Data Grid control. In this example, you have indicated that the control should create a table structure based on the grid (TABLE) and fill it with the actual grid data (DATA). The generated HTML will be inserted between the <CENTER> tags, so the final result will be a web page with a centered table containing the grid data.

9. Save the text file as STOCKTPL.HTM. The file should reside in the location specified in your code for the Export method. Return to your Visual Basic project and run it. You should see the grid populated with data from the database.

10. Click the "Export" button on your form to generate a web page based on the data displayed. A file called INSTOCK.HTM will appear in the location you have specified. Open this file in your web browser. The output should look something like the following:

Data Widgets replaced the {SSREPLACE} token with grid data and created a very simple table. Nothing but the data is included. No formatting information from the grid is applied - only formatting applied within the HTML template (such as centering) is evident. If you are familiar with HTML, you may want to open the INSTOCK.HTM file in Notepad and look at the code that was generated. You will see something like the following:

<HTML>

<BODY>

<CENTER><TABLE BORDER=3 CELLPADDING=3 CELSPACING=0>

<TR>

<TD>1</TD>

<TD>5</TD>

<TD>Computer</TD>

<TD>$ 1,500.00</TD>

<TD>8%</TD>

</TR>

<TR>

<TD>2</TD>

<TD>7</TD>

<TD>Monitor</TD>

<TD>$ 550.00</TD>

<TD>5%</TD>

</TR>

. . .

</TABLE>

</CENTER>

</BODY>

</HTML>

(Some line breaks may show as black boxes in Notepad)

The {SSREPLACE} token has been replaced with a complete <TABLE></TABLE> structure. Each row in the grid has been delimited as a table row using <TR></TR> tags, and individual cells have been placed into rows as table data <TD></TD>.

DBGrid: Ex. 7, Part II - Exporting HTML

Now you know how to export basic grid data into HTML format. This is a useful capability if you simply need a raw dump of grid data, or want a simple HTML file that you can tweak by hand. But in most cases, you will want your HTML documents to be formatted in some way. You may have grids that you have set up with elaborate formatting - groups, column headers, custom colors and pictures, etc. You can easily generate HTML code that makes use of all these features; all you have to do is modify the template.

You have already seen how to use the TABLE and DATA attributes of the {SSREPLACE} token. In this part of the exercise, you will learn how to use many more attributes to customize the template. If you want to see a complete listing of the attributes you can use with the {SSREPLACE} token, consult the section on HTML Template Codes.

1. Open the STOCKTPL.HTM file in Notepad and add the following information to the {SSREPLACE} token:

{SSREPLACE TABLE DATA B I COLOR}

2. Save the file and click on the "Export" button in your program. Open the resulting INSTOCK.HTM file in your web browser. The results should look something like this:

By adding the "B", "I" and "COLOR" attributes to the {SSREPLACE} token, you have instructed Data Widgets to include boldface (B), italic (I) and color (COLOR) information from the grid in the generated HTML. The {SSREPLACE} token supports dozens of attribute codes that you can use to control what will be included from the grid in the final printout.

3. Open the STOCKTPL.HTM file and append the following attributes to the {SSREPLACE} token:

{SSREPLACE... CAPTION COLHEAD ALIGN BGCOLOR}

The added attributes tell Data Widgets to include more data in the generated HTML table: the grid caption (CAPTION), the text of the column headers (COLHEAD), the alignment of the data in cells (ALIGN), and the background color of the cells (BGCOLOR). Note that some of these attributes are only applicable because you have instructed Data Widgets to generate a table (TABLE) for you, and might not be used if you were only pulling data from the grid and embedding it in your own formatted HTML. (You will see how to do this later in the exercise.)

4. Save the template file, then click the "Export" button in your application. Open the INSTOCK.HTM file in your web browser. You should see something like this:

You can see that most of the attributes of the original grid have been exported to the HTML page. Some of the formatting is not quite right, due to the fact that the grid caption is confined to a single column, and some of the cells take up two lines. You can easily remedy these problems using another {SSREPLACE} attribute..

5. You can specify additional attributes that control the wrapping of text and the spanning of multiple columns in the table. For example, you probably want the grid caption to span all the columns of the table, as it does in the Data Grid. Modify the STOCKTPL.HTM file to append the following attribute to the {SSREPLACE}

token:

{SSREPLACE... WIDTH COLSPAN}

The WIDTH attribute will base the width of the table cells on the width of the corresponding grid columns.

The COLSPAN attribute enables a single table cell (such as the cell containing the grid caption) to span multiple columns. The COLSPAN attribute can only be used if Data Widgets is generating the entire table (i.e. the TABLE attribute has been specified).

Save the HTML template file and click the "Export" button in your application. Then open the INSTOCK.HTM file in your web browser. The results should look something like this:

Now you have seen how to export various types of grid formatting into HTML format using the various attributes of the {SSREPLACE} token. Along the way, you have seen how to construct a single {SSREPLACE} token that exports the entire grid into HTML, with formatting information intact.

DBGrid: Ex. 7, Part III - Exporting HTML

At this point, you can easily export the contents of a Data Gird into HTML, with or without formatting. However, there may be situations where you do not want to export an entire grid's worth of data. Sometimes exporting only a single row or several rows may be sufficient.

In this part of the exercise, you will see how to export individual rows of data from the grid as distinct HTML files. This technique will become especially useful in the final section, when you will use it to create a master/detail series of web pages.

Note As with the previous exercises, in your code you may need to specify fully qualified path names in place of the "simple" file names shown here.