One of the biggest challenges facing Web developers is creating pages that work across a wide variety of browsers. While cascading style sheets (CSS) have become the preferred method for defining the look of an HTML document, they have little or no support from many widely used browsers. This forces Web developers to make difficult trade-offs. They must either produce legacy HTML code to handle all browsers, try to build a hybrid version or write two different versions. The Gatsby Application Objects solve this problem using a technique called server-side style sheets that allow you to define the look of the lists and forms using CSS. The Application Objects will then produce legacy HTML code for browsers that do not support CSS using the provided style information. This gives you a consistent look across all browsers using a single style sheet.
Naturally, a basic understanding of cascading style sheets is necessary to customize the styles of the Gatsby Applications Objects. Fortunately there are plenty of tools and resources available for learning about and working with cascading style sheets. A good starting point is:
The Gatsby Application object uses a single style sheet for all views. By default, these styles provide a look that is consistent with the desktop of appearance of the serving machine. However you can modify these styles to fit your own needs or provide your own set of styles. The style sheet can be manipulated programmatically using the Styles property of the Application object.
The list and forms views of the Gatsby Application Objects each have a structure that provides a great deal of flexiblity when using CSS selectors to define the style. The document object models use constructs that such as table sections and multiple classes per element that are not available in all browsers. There is no cause for concern. The Gatsby Application Objects will produce compatible HTML for the target browser at run-time. These constructs are provided in the document object models to give you maximum flexiblity at design-time.
A Gatsby Database Explorer form is a table is with two columns. The first column contains the field captions and the second column contains the field values. Each row contains a separate field.
|
col
class=FieldCaption
|
col
class=FieldValue
|
|
td
class=FieldCaption
div
caption
|
td
class=FieldValue
div
value
|
Field caption table cells may also have the classes "required", "readonly" and "error" depending upon the state of the field.
A Gatsby Database Explorer list is a table is with a column for each field. There can also be row cap columns on the left and right of the table. Each row in the table represents a row in the database table.
The following style attributes are used to produce legacy HTML.
The Gatsby Application Objects try to derive reasonable values from the supplied style sheet. However, you can also specify explicit values to be used during the legacy code generation using the following attributes in your style sheet. These attributes do not inherit from parent elements.
| gatsby-font-family | The legacy code generator resolves the value of the font-family attribute to the single font on the server that most closely matches it. The gatsby-font-family attribute allows you to explicitly specify the face to be used in font tags. |
| gatsby-font-size | Provides an explicit value to be used with the size attribute of font tags. |
| gatsby-padding | Specifies the padding in pixels for all four sides of each cell. This attribute can be applied to the table, td and th elements. |
|
gatsby-padding-left gatsby-padding-right gatsby-padding-top gatsby-padding-bottom |
Specifies the padding in pixels for each of the respective sides of a cell. These attributes can be applied to table, td and th elements. If specified these values override the setting of the gatsby-padding attribute. |
Other Attributes
There are two table attributes, cellspacing and border, that do not have reasonable analogs in CSS. Gatsby Database Explorer provides properties on the Style property of the Application object that allow you to supply values for these. These values are used by both CSS-enabled and legacy browsers.
|
ListCellSpacing FormCellSpacing |
The cellspacing attribute for the table tag. |
|
ListBorder FormBorder |
The border attribute for the table tag. |
You need to provide the style information to the Gatsby Application Objects in order to produce legacy HTML that has the same look as the CSS-enabled browsers. You can either modify the default style sheet provided by the Gatsby Application Objects programmatically or you can supply your own external style sheet.
The following code demonstrates how you can provide your own external style sheet.
You can use the following document as a starting point for developing your own custom style sheet.
The following documents have sample form and lists that conform to the document object models described earlier. These are useful when developing your own style sheet. These documents are targeted for Internet Explorer 5.0 or later.