The output XSL will not perform the full transform, but instead will define the following named templates that should be called from the 'skin' where required
section_title - Contains the name of the page.
page_scripts - Contains the 'script' tags for any custom scripts for this page. This should be placed within the head of the HTML page.
css_imports - Contains the CSS import statements needed to pull in the required CSS files. This should be placed within the head of the HTML page.
section_body - This template contains the main content of the page, starting from the 'form' level. This should be placed within the body of the HTML page.
If an output file already exists when a generation operation is performed, the result is slightly different, in that only the contents of the section_body, css_imports, and page_scripts templates are recreated. All other templates are simply copied from the existing file. This ensures that any new templates created will be retained.
In order to use the advanced value conversion, validation, and error highlighting features of FormMaker a number of JavaScript library files must be included by your skin. This should be done at the same point as the call to the page_scriptstemplate is performed. The skin file used in the tutorial examples includes the full list of standard scripts. You can view this list by opening the skin file xsl. In order to use the AJAX based partial page functionality, the Dojo toolkit needs to be imported by the skin. Please see the provided demo_skin.xsl file for an example of this. In order to use the Message Tooltip form of error display, the following HTML fragment should be placed in the skin so that it is created directly under the HTML body tag in the output.
<div id="tipDiv" style="position:absolute; top:-100px; left:-300px; width : 300px; height : 100px; visibility:hidden;">
<iframe title="tipFrame" id="tipFrame" name="tipFrame" src="#" style="width :300px; height : 100px;">
</iframe>
<div id="messageDiv" style="position: absolute; top : 0 ; left : 0; width : 100%; height : auto; background : white; border : thin solid black; padding : 2px;">
</div>
</div>
In this fragment, all the required styling has been in-lined on the components; however it may be better to separate this out and used named styles instead. The styling applied to the messageDivwill control how the information appears to the user. In this example there will be a white box with a black border containing the text.