First Dynamic Page

Lets take a look to the XML which is required for our example first.

<?xml version="1.0" encoding="UTF-8"?>

<root>

<NAME>John Watson</NAME>

</employee>

</root>

This is a simple XML document that defines the name of an employee. A valid XML document must have one, and only one, root tag which is "root" in our sample. The first line in the document which is <?xml version="1.0" encoding="UTF-8"?>, is a processing instruction. Processing instructions are enclosed with <? and ?> characters. This processing instruction tells the XML parser that the version of this XML document is "1.0" and the encoding is "UTF-8".

Preparing the XML File

In order to use this XML in our example we have to create an XML file on the disk and copy this XML content into it. You can use the MoreMotion XML Editor (mmEd) for that.

Steps:

1.	Start the mmEd {INSTALL_DIR}\Application Studio\mmEd.exe

2.	Use menu command "File \| New"

3.	Select the file type "XML" and press [OK] button.

4.	Copy & Paste the XML in the sample above and save it as "C:\XML\data.xml".

So, now lets print the name of the employee that can be accessed following the path <root><employee><NAME> in the XML document.

Steps:

1.	Create a new page and name it "Page1".

2.	Add two text elements into it

3.	Give the value "Employee Name:" to the one on the left

4.	Give the value "$vof(/root/employee/NAME)" to the one on the right

The $vof() Function

The $vof(?) is a special Application Studio macro that is expanded to <xsl:value-of select="?"/> during compilation. According to this; the $vof(/root/employee/NAME) will be expanded to <xsl:value-of select="/root/employee/NAME"/>.

Testing

Using this $vof() function makes our page dynamic, so if we compile it, the Application Studio will create a file with .xsl extension. The compilation of a page can be done in two ways;

1.	By Pressing the F9 key to preview the current page in the default browser.

2.	By pressing "Build and Test"[Shift+F9] on the Basic Toolbar to run the project build process .

For the examples in this section we will use only preview. So press F9 now. What you should see is the following:

TheOutput

It seems that our $vof() definition did not function. That is not true. I will tell you why.

But lets have a look first what happened when you pressed F9.

1.	The Application Studio recognized that the page is dynamic since it contains a $vof() definition and therefore it compiled the page and created "Page1.xsl" file.

2.	Afterwards to test the validity of the created XSL file it invoked the XSLT processor MSXML by passing the names of the "Page1.xsl" file created and a dummy XML file as parameters.

3.	After MSXML did its work and created an HTML document ("Page1.html") as the result of the processing, Application Studio invoked the default browser to display it.

Since the dummy XML file contains no data, the $vof(/root/employee/NAME) definition, more accurately <xsl:value-of select="/root/employee/NAME"/> function, returned an empty string.

XML File for Preview

If we want that Application Studio uses our XML file instead of a dummy XML file we have to specify the name of the XML file in the page property "XML File for Preview". Here how you can do it:

Steps:

1.	Click on an empty spot on the page

2.	Press F4 to display "Property Editor"

3.	Switch to the "Other" Tab.

4.	Enter "C:\XML\data.xml" into the XML File for Preview property.

XMLFileforPreview

Press F9 to try again. Now you should be seeing the following.

TheCorrectOutput

We will see other usages of $vof() macro during our examples. The aim of the $vof() is to simplify the usage of the XSL instructions on the properties of the elements. We could do the same thing using an $xsl() macro that enables us to insert native XSL codes into the properties.

Watch how it's done

The $xsl() macro

The native XSL codes defined within a $xsl() macro is transferred to the output document by the Application Studio without making any changes.

The Root Tag and Data Source Tags in XML document

The XML data required for a dynamic page is created on the run time by the MoreMotion AF. The name of the root tag in the XML is always root therefore it is not necessary to mention it when defining references to XML nodes in $vof() and $xsl() macros.

<?xml version="1.0" encoding="UTF-8"?>

<NAME>John Watson</NAME>

</employee>

<item>

<NAME>Desktop Computer</NAME>

</item>

<item>

<NAME>Notebook Computer</NAME>

</item>

</products>

</root>

That means if we omit the root node in the $vof() definition the Application Studio will add it for us and it will expand the $vof(/employee/NAME) definition to <xsl:value-of select="/root/employee/NAME"/>.

We call the tags that are hierarchically right under the root tag as Data Source Tags. In our example employee and products tags are data source tags. In the following sections we will be defining data sources in Data Sources Dialog of Application Studio to tell the MoreMotion to provide XML data automatically for the pages.