Developer’s Guide

Using FileMaker Pro XML to deliver your data 7-13
A cascading style sheet can only be applied to the existing data in an
XML document—it cannot be used to transform the data (such as
transforming a URL for a container field into its corresponding
image), or to add additional information (such as labels for each
field) to the XML document.
This example demonstrates the use of a CSS document with an XML
document. The following CGI command was used to generate the
FMPDSORESULT grammar for the People.fp5 database and to
apply the People_form.css stylesheet to the generated XML data:
fmpro?–db=people.fp5&–lay=xml form&–format=dso_xml&
–styletype=text/css&–stylehref=people_form.css&–max=1&–find=
The picture in the container field is not displayed in this example
because the CSS document can only apply styles to the existing data
(the relative URL to the image). It’s not possible to transform the
URL into its corresponding image using cascading style sheets.
The following text is the people_form.css stylesheet, which adds
formatting and positioning to the XML:
/*
* Since FMPDSORESULT is the root element of the XML document,
* any formatting applied to this element will cascade down to all
* other elements in the document. This is a good place to set the
* default formatting options for your page.
*/
FMPDSORESULT
{
font-family: sans-serif;
font-size: 10pt;
}
/*
* Don't display the data for these elements.
*/
ERRORCODE, DATABASE, LAYOUT, Picture
{
visibility: hidden;
}
/*
* Since it is not possible to add additional text to the output
* of the XML document via CSS, we must rely on the XML document to
* provide the labels when displaying the field data. In this case,
* the labels are from global fields defined in the database.
*/
Name_Label
{
position: absolute;
left: 20px;
top: 20px;
width: 150px;
text-align: right;
font-weight: bold;
}
Title_Label
{
position: absolute;
left: 20px;
top: 40px;
width: 150px;
text-align: right;
font-weight: bold;
}
Phone_Label
{
position: absolute;
left: 20px;
top: 60px;
width: 150px;
text-align: right;
font-weight: bold;
}
/*
To simulate field labels, the CSS document applies boldface
and right-alignment to data in the three global fields