XF Designer 2011 allows creating forms to be used in output formats that support them (like PDF and HTML).

 

To create a form in the designer, use the Forms tab in the ribbon:

 

 

To add a control just click on the corresponding button and a control will be inserted at the current caret position. If the form itself doesn't exist, it will be automatically created when you add the first control.

 

Let's insert some controls:

 

 

We've inserted an editbox, a checkbox and a radio button. Let's insert another radio button to create a radio button group. The following dialog will appear:

 

 

Click Yes to put the two radio buttons in the same group.

 

Let's lay out the items in the form (notice the form is highlighted in the Design View in a light brown color). Also, for the purpose of this demonstration, we will also add a button and a submit button control:

 

 

 

To edit the controls, double click on each one and the Edit Form Control dialog will appear:

 

 

Depending on the type of the control, some options will be available and some will be grayed out.

 

The Name option represents the actual name of the control. It's used to identify which value came from which control after the form is submitted.

The Value option represents the value that will be posted when the form is submitted. In the case of checkboxes and radio buttons, it will only be posted if the control is checked. In the case of editboxes, it also represents the default text in the box. In the case of buttons and submit buttons, it's also visible as the caption.

The Checked option only applies to checkboxes and radio buttons; it specifies whether to check some of the controls in advance.

The Multiline option only applies to editboxes and specifies whether the text should be single-line or multi-line.

The Editable option sets a control to be editable

The Http-URL option represents the address to which the form is to be submitted.

The Method option only applies to the submit buttons; it specifies whether to submit via POST or via GET. Both are available in HTML, but only POST is available in PDF.

The Events section allows assigning Javascript code to certain events on each control (mouse up/down, mouse enter/exit, focus/blur).

 

Notes:

 

 

First we'll edit

 

To edit the code for an event, check the event and click Edit. In this case, we're editing the button we inserted earlier to display an alert saying Hello World when the OnMouseDown event occurs.

The Edit Javascript dialog will appear for the specified event:

 

 

Here, you can write or paste your script and select the Script type. This allows you to write different code for different output formats, since Javascript isn't 100% the same for each format (for instance, in PDF you need to use app.alert(), while in HTML you write alert() to raise an alert window):

 

 

In this case, we'll add app.alert("Hello World") to the PDF Javascript section and alert("Hello World") to the HTML Javascript section.

 

Here is the result in HTML. Pressing the button pops up the "Hello World" alert window:

 

 

Here is the result in PDF. Pressing the button pops up the "Hello World" alert window:

 

 

 

Note:

 

 

 

Forms can also be themed using XF Designer 2011. Just click on one of the available themes and all the controls will be colored in that theme. Here is our form using the Fire theme:

 

HTML:

 

 

PDF: