fm:set-page, fm:set-buffer and fm:include Syntax (Presentation Command)

Presentation buffers simply define fragments of XHTML.

SYNTAX

CONCEPTS

Buffers are the presentational aspects of the state. They can contain HTML as well as FOX presentation commands such as set-outs, menu-outs, and action-outs.

Buffers can be defined at module level or at state level. In case of buffers of the same name, FOX will look at state level first for that buffer, before looking at module level.

The fm:include command is used to pull fragments of XHTML from one buffer into another.

Every module must have a set-page included in the top-level presentation section [unless one is included in a library (later)]. This is a special buffer that pulls in all buffers defined in it recursively.

In practice, a generic screen layout is defined at module level, and a content buffer included.

The content buffer is usually defined at state level to provide each screen display.

EXAMPLES

<fm:set-page>
   <fm:include name="buffer-template"/>
</fm:set-page>

<fm:set-buffer name="buffer-template">
   <html>
   <head>
    <title>Environmental System</title>
   </head>
   <body>
   ...
   <fm:include name="buffer-data"/>
   ...
   </body>
   </html>
</fm:set-buffer>

<fm:set-buffer name="buffer-data">
  <p>
   <fm:set-out match="/*/SOME_DATA" fox:mode="."/>
  </p>
</fm:set-buffer>

EXERCISES

MINI WALK-THROUGH

  1. Create a personal copy of ORDERMODULE.xml in your FOX Training folder in My Documents and rename it XX_BUFFERS.xml (where XX are your initials).
  2. Right-click on the file and go to Properties. Un-tick the Read-only box.
  3. Open your copy of XX_BUFFERS.xml in XML Spy.
  4. View the module in text view and change the value of fm:name to XX_BUFFERS. Save the module.

Exercise 1

Inside the set-page, use fm:include to include a new buffer called “buffer-data”.

Exercise 2

In state-order’s presentation section, use fm:set-buffer to define buffer-data. Add the following HTML to it:

<br/>
<br/>
<b>state-order</b>

Exercise 3

Define a new action in state-order using the code below (this code will change the state from state-order to state-new and is explained in a later chapter):

<fm:action name="action-move-to-state-new" fox:run="." fox:prompt="Change State" fox:widget="button">
   <fm:do>
    <fm:state action="push" name="state-new"/>
   </fm:do>
</fm:action>

Add an fm:action-out inside buffer-data to display this action.

Exercise 4

Create a new state called “state-new”. Inside state-new’s presentation section, define an empty set-buffer named “buffer-content”.

Exercise 5

In state-new’s presentation section, use fm:set-buffer to create “buffer-data”. Add the following HTML to it:

<br/>
<br/>
<b>state-new</b>

Exercise 6

Define a new action in state-new using the code below (this code will change the state back from state-new to state-order and is explained in a later chapter):

<fm:action name="action-back-to-state-order" fox:run="." fox:prompt="Change Back" fox:widget="button">
   <fm:do>
    <fm:state action="pop"/>
   </fm:do>
</fm:action>

Add an fm:action-out inside state-new’s buffer-data to display this action.

Now, Clobber this module and test the new functionality. You will see that the button, “Change State” now changes the modules presentation between the different states.