Set data from the module onto the screen using the fm:set-out command, namespaces, and attributes.
SYNTAX
The fm:set-out command takes the following syntax: -
<fm:set-out match=”XPath” namespace:mode=”XPath” [namespace:attribute=”attribute-value”, namespace2:attribute=”attribute-value”, ...] />
The match attribute tells FOX what elements to set out on the screen. The namespace:mode attribute tells FOX which of the elements within the scope of the XPath should be displayed and when.
The optional namespace:attribute=”attribute-value” allows you to override certain attributes for a given name. They will be discussed on this worksheet.
CONCEPTS
Looking at the XX_EMPLOYEEMODULE code from the previous worksheet, navigate to the Schema in Text View in XMLSpy (from the <xs:element> tag). You will notice how each of the simple type elements (FORENAME, SURNAME etc.) have restrictions on them of xs:string and an xs:maxLength. These facets tell FOX what type of data to expect and the size of the data, which assists FOX when it sets out the fields to the screen to make sure they are the right size. You should use the XSD mark-up to specify the data length.
Additionally, for each individual item, you can also specify extra set-out tweaks if FOX doesn’t set out how you want it to (a regular occurrence) or if you’re short of space. For example, you can specify a field width. For example, if there is an element with an xs:string and an xs:maxLength of 20, you can put a fox:fieldWidth of 10 on the element to limit the width of the field to 10 characters (although you can keep typing up to 20 characters within the smaller input box).
The Field Height is a function of the Field Width, so by putting a fox:fieldWidth of 10 in the previous example, FOX will generate a height by dividing the Data Length (20) by the Field Width (10), so the fox:fieldHeight will be 2 characters. This works in the same way when specifying the height and not the width. Both the height and width can be specified at once in order to get the desired result, such as the one below:
If you do not define a Data Length, then FOX will generate a Field Width of 80 and a Height of 5 by default, however you can override this with a fox:fieldMaxWidth or fox:fieldMaxHeight. You can also alter the dimensions of the prompt associated with the field, by using the fox:promptWidth or fox:promptHeight attributes, similar to the field ones above.
You should think of each element as consisting of a field and a prompt. The prompt is a label for the text box describing what it is and can be overridden using the fox:prompt attribute. If you put no fox:prompt, then a default prompt will be derived from an initcapped version of the element name, substituting underscores for spaces.
The following is a table of other attributes that can be used:
Parameter |
Comments |
Common Values |
widget |
Determines the type of widget to enter/display the data for each field The widgets correspond to HTML <input> types. Widgets with a ‘+’ on the widget types makes them always appear enabled, even if disabled.For example, if you want an element displayed as a read only input box, you will use an ‘input+’ value on the widget attribute and namespace:ro.
NB. There is no difference between input and input+ (same for other widgets) in edit mode.(This will be helpful for Exercise 4) |
input |
hint |
Help text for the user on a specific data item |
String |
prompt |
The prompt displayed next to the edit box |
String |
promptAlignX |
Aligns prompt on X axis |
left |
promptAlignY |
Aligns prompt on Y axis |
bottom |
prompt-short |
Static prompt used for column headers on lists etc… |
String |
promptLayout |
Positions the prompt either above or to the left of the element |
north |
fieldWidth |
Fixed display width for an element’s text box |
Integer |
fieldMinWidth |
The minimum width of a data entry text box |
Integer |
fieldMaxWidth |
The maximum width of a data entry text box |
Integer |
fieldHeight |
Fixed display height for an element’s text box |
Integer |
fieldMinHeight |
The minimum height of a data entry text box |
Integer |
fieldMaxHeight |
The maximum height of a data entry text box |
Integer |
fieldxlock |
Sets the element’s position on the x-axis |
Integer |
fieldylock |
Sets the element’s position on the y-axis |
Integer |
debug |
Displays a grid to help with fox layout settings |
Boolean |
listTableStyle |
Allows CSS to be applied to table definitions in order to format the presentation of the table generated. |
String |
EXERCISES
Exercise 1
Modify the width of the Employee List to 80% of the screen and each Employee Forename and Employee Surname so the field size is only 10 characters long.
Exercise 2
Modify the position of the Company Info prompt such that it is aligned above the Name and Established elements and is centered.
Exercise 3
Add a hint to the Hire Date prompt to read “Date employee was hired.”
Exercise 4
Change the widget type of Forename so that it is inside a 12 character input box, but not editable.