Procedure 3.1. To install VisualXSL:

1. After downloading the visualxsl.zip file, unzip it to a temporary folder.

   After unzipping, the folder contains the setup.exe, Readme.txt, and WhatsNew.txt files.

2. It is recommended to review both text files.

3. Go to the temporary folder and double-click setup.exe.

   The Welcome screen for InstallShield Wizard for VisualXSL opens.

4. Click Next.

   The VisualXSL License Agreement dialog box opens.

5. Select the I Accept option, and then click Next.

   The VisualXSL License dialog box opens.

6. Browsing to the license.xml file, specify its location and then click Next.

   Note

   During the installation, a copy of the license.xml file is placed in the application installation folder (by default, C:\Program Files\RenderX\VisualXSL on 32-bit Windows or C:\Program Files(x86)\RenderX\VisualXSL on 64-bit Windows).

   The VisualXSL Customer Information dialog box opens.

7. Fill in the User Name and Organization fields, select the Install This Application For option, and then click Next.

   The VisualXSL Setup Type dialog box opens.

8. Select the Complete setup type, and click Next.

   Note

   The Custom setup is recommended only for experienced users.

   The VisualXSL Ready to Install the Program dialog box opens.

9. Click Install.

   Important

   The installation starts.

   The Installing VisualXSL screen is displayed while VisualXSL is being installed.

10. Click Finish to exit the InstallShield Wizard

    At the end of the VisualXSL installation, the VisualXSL icon is placed on the desktop.

The welcome screen of InstallShield Wizard of XEPWin opens.

1. Click Next.

   The XEPWin License Agreement dialog box opens.

2. Select the I Accept option, and then click Next.

   The XEPWin License dialog box opens.

3. Browse to the license.xml file specify its location and then click Next. During the installation, a copy of the license.xml file is placed in the application installation folder (by default, C:\Program Files\RenderX\XEPWin\xep on 32-bit Windows or C:\Program Files (x86)\RenderX\XEPWin\xep on 64-bit Windows ).

   The XEPWin Customer Information dialog box opens.

4. Fill in the User Name and Organization fields, select the Install This Application For option, and then click Next.

   The XEPWin Setup Type dialog box opens.

5. Select the Complete setup, and click Next.

   The Custom setup is recommended only for experienced users.

   The XEPWin Ready to Install the Program dialog box opens.

6. Click Install.

   Important

   The installation starts.

   The Installing XEPWin screen is displayed while XEPWin is being installed.

7. Click Finish to exit the InstallShield Wizard

   At the end of the XEPWin installation, the Hot Folder icon is placed on the desktop and ActiXEP is placed on the taskbar.

The Welcome screen of InstallShield Wizard of XEPWin opens.

1. Click Cancel.

2. Click Yes to confirm.

3. Click Finish to exit the InstallShield Wizard.

Procedure 5.1. To invoke Paragraph editor on Address block

1. Create an Address block using the Wizard

2. Close the Wizard to save your initial changes

3. Right-click the Address block on layout

4. Select Edit Paragraph pop-up menu item (see Figure 5.2)

5.  

   

   Figure 5.2. Selecting Edit Paragraph option in Address Block Wizard

   
   

6. The paragraph editor will open the content of the Address block (see Figure 5.3).

    

   

   Figure 5.3. Editing Paragraph in Address Block Wizard

   
   

Procedure 5.2. To manually edit the configuration file:

Assume that XEPWin is installed in the C:\Program Files\RenderX\XEPWin folder.

1. Open the XEP.xml file from xep subfolder.

2. Find the font-group XML element with @label="Windows TrueType" attribute.

3. Add the following text inside the found element:

   <font-family name="IDAutomationPOSTNET" embed="true">
       <font>
           <font-data ttf="IDAutomationPOSTNET.ttf"/>
       </font>
   </font-family>

   This enables the for the XEP formatter to use True Type font to render PostNet barcodes.

Procedure 5.3. Creating Output formats

1. To choose the output format for the document,select Build | Set Output Formats from menu or click the Set Output Format button: <;/p>

   

   .

2. From the drop-down list, select either PostScript,AFP,XEP Intermediate,SVG,HTML or XPS. (PPML is not Supported yet).

    

   

   Figure 5.6.  Choosing document format

   
   

   Note

   For more information about Output formats see RenderX XEP

Procedure 6.3. To add a new data field:

1. Select a node in the Xml Tree View. The data stored in this node is rendered in the resulting form.

2. Click the Add to Layout toolbar button to add a field with the selected XML node to the design layout. Alternatively, you can drag a selected tree node and drop it onto the layout. A new data field appears in the form layout. Or, you can drag an item by holding the right mouse button. In that case, after releasing the mouse button in the desired place on the layout, you can choose a data field type from the context menu.

   Figure 6.2. Dragging XML node onto the layout

   
   

3. You can now select the newly added frame by clicking it, and setting its desired position by dragging it over the layout.

4. A data field, when selected, has handles at the corners and at the middle of the sides. You change the location and size of the data field by dragging.

5. Additional properties can be modified for a selected data field in the Properties pane.

   After all data fields are added and aligned, you can generate the XSL stylesheet and/or the resulting PDF document.

   During the PDF rendering, fields are filled with data from the XML file. See the detailed properties description in the Data Fields and Properties chapter.

Procedure 6.5. To create a PDF/PostScript document:

1. Set Output Format toolbar icon or use the menu command Build | Set Output Format and select output format.

    

   A File Save dialog box appears.

2. Click the Create Resulting Document toolbar icon or use the menu command Build | Create PDF.

   A File Save dialog box appears.

3. Type in the file name for your document, set the desired document format (PDF or PostScript), and click OK.

   Note

   The application automatically rasterizes PDFs into an image when PostScript files are generated and a PDF file is set as the background for the project. This raster image is used as the background in the document.

   Generation of the document can take some time, depending on the number of pages and the PDF background form's complexity.

   Note

   If your XML file contains a large number of records, you may get Not enough memory to format error. To fix this issue, increase Java memory settings (-Xms and –Xmx keys) for Cliser Service (a part of XEPWin package used by VisualXSL). For details see the CliserService.exe.config. file installed in the assumed location of C:\Program Files\ RenderX\XEPWin folder. However, if the number of pages is more than this setting can handle, see below How to Create Large Documents Faster by Using RenderX VDPMil for the solution.

Procedure 6.6. To write JavaScript for a frame

1. Open/Create a VisualXSL project

2. Add a Text Frame

3. Navigate to Properties pane and set Threat as Field property to True

   Note

   JavaScript can be written only for those fields, which Threat as Field property is True.

4. Navigate to Mouse Enter property in the JavaScript section of the Properties pane. Use icon to open VisualXSL's JavaScript window. Usually it is used to paste (Ctrl + V) the JavaScript written in a JavaScript editor, but this is a simple example and we can write our JavaScript code into the opened window: app.alert("Mouse entered the field", 2);

5. Generate resulting document or preview results (PDF)

6. Open the generated PDF document

7. Move the mouse cursor to the field. Mouse entered the field message is shown.

Procedure 6.7. To add a Page Number

1. Open/Create a new VisualXSL project

2. Click Add Page Number icon on the Toolbar menu or Data | Add Page Number menu item

3. Create resulting document and see page number on each page of the document

   Note

   By default, Page Number is in Page i of count format, where i is the current page's number and count is the count of the pages in the document.

Procedure 6.8. To use Symbol

1. Open/create a VisualXSL project

2. Add a Paragraph frame

3. Click icon on Toolbars. Character Map window opens.

4. Choose the symbols by double-clicking on them or via Select button

5. Click Copy button and close the window

6. Open the paragraph and paste (Ctrl + V) the selected symbols.

   Note

   You can use (paste) the copied symbols for any allowed frame.

Attach a new XML map by doing the following:

1. Open the XML Source tab by selecting Data | XML | XML Source.

2. Click the XML maps button, which opens the window with the XML map list.

3. Add a new file by clicking the Add button and selecting a prepared XML file as an XML source.

4. When a warning message appears saying that no XML schema is referred to this file, click OK.

   Excel creates the schema automatically.

   

   Figure 7.3. Warning that Microsoft Excel will create a schema based on selected XML file.

   
   

5. Map all XML elements to the spreadsheet data columns, you can see the instructions in the bottom of the XML Source tab. After you have finished, you can export the spreadsheet to XML.

   

   Figure 7.4. XML elements mapped to Microsoft Excel spreadsheet data columns

   
   

6. Save your spreadsheet as an XML file to your project folder.

7. To prepare a PDF document that can be used as a background, you can use Microsoft Word and create a document with space left for variable data. The document might look like the following Figure 7.5. Save it as an XML (WordML) file.

   

   Figure 7.5. Letter with space left for employee personal data

   
   

8. Use XEP Assistant and WordML2FO stylesheets from the XEPWin package to produce a PDF file from your mockup.

   With the XML source file and the PDF file, you have the files necessary for creating a new project.

1. Open SQL Query Analyzer(Microsoft SQL Server 2000).

2. Connect to the Northwind database.

   Our goal is to convert data from the Employees table.

   

   Figure 7.6. Data in the Employees table

   
   

3. Assume that the file with the converted data should be placed under c:\temp\.

4. Using any text editor (for example Notepad), create the template.tpl conversion template file in this folder.

5. Use the editor to enter the following in this template file:

   <root>
     <%begindetail%>
       <%insert_data_here%>
     <%enddetail%>
   </root>

6. Enter the following query into the SQL Query Analyzer window (see the following figure)

   EXEC sp_makewebtask @outputfile =
   'c:\temp\myxmlfile.xml',
   @query = 'select * from Employees for xml auto',
   @templatefile = 'c:\temp\template.tpl'
   

   where:

   • @outputfile - the full path to file XML.

   • @query – the sql query for the necessary data.

   • @templatefile - a file template to use for creating the XML file.

7. Run the query by pressing F5 or by selecting Query | Execute from the menu.

   The myxmlfile.xml file is created in the c:\temp\ folder.

   

   Figure 7.7. Query to export table data

   
   

8. The Employees table data is exported to XML format.

   

   Figure 7.8. Resulting XML file

   
   

9. Continue to next sample to build a VisualXSL document.

Procedure 7.1. To build a VisualXSL project

1. Create a new folder in C:\Documents and Settings\All Users\Documents\VisualXSL Projects for the project and call it.

2. Copy the w9src.xml and w9_blank.pdf files from the C:\Documents and Settings\All Users\Documents\VisualXSL Projects to the new folder.

3. Open the w9src.xml with an XML Editor or WordPad (not Notepad) to study its content. Note the XML declaration xml version="1.0" encoding="utf-8", a good practice for it to exist, and with the correct encoding value. Note the XML element batch at the beginning and batch at the end of the file. A top level XML element as noted is required by VisualXSL even if only one set of XML children elements exist.

4. Open the w9_blank.pdf with Adobe Reader, or equivalent, to become familiar with its content and the various "blank" fields. Close and Exit Adobe Reader.

5. Double-click the VisualXSL icon on your desktop.

   The VisualXSL application opens.

   

   Figure 7.9. Empty VisualXSL application

   
   

6. Click the New Project button.

   The New Project wizard opens.

   

   Figure 7.10. New Project wizard

   
   

7. Add the data source.

   Under Step 1 : Add Data Source click the Open button, navigate to the ..\VisualXSL Projects\Samples\myw9 new folder and select the w9src.xml file.

   Note

   Alternatively, you can skip the wizard, and add the data source later by using the File | Open Source XML menu to select the w9src.xml file from the newly created folder.

   Step 2 : Choose Project Type Form (Insurance Forms, Government Forms,...) for this project the default selection is correct because in the next procedure we will choose a PDF background that is a Form.

8. Add the background (PDF or image).

   Under Step 3 click the Open button ,navigate to the ..\VisualXSL Projects\Samples\myw9 new folder and select the w9src.xml file.

   Note that this step automatically set the BackgroundPath and RasterizedPath property (under Properties | Layout).

9. Click the Create Project button. The new project, yet unnamed, opens in VisualXSL.

   

   Figure 7.11. New project page

   
   

10. Click File | Save as, and save the project as 1stTry.vxl.

11. Click in the Layout (the Designer). The page properties are shown in the Properties pane.

12. If you skipped Step 6, add the background now. In the Properties | Layout, select the BackgroundPath property, click the button, and open the w9_blank.pdf file.

    Note

    The application automatically rasterizes PDFs into a PNG image with a filename as noted in the Properties | Layout|RasterizedPath property. This Raster image is used as the document background in the Layout (Designer Area).

     

13. In the XML Tree View pane, find the name node, and drag-and-drop it to the Layout. Place it, and resize the name data field to fit the template in the background form.

14. Change the selected data field's properties by clicking in the Properties pane.

    Expand the Appearance property, and then the TextProperties property group. You can change the font settings for the selected data field by clicking the button, and making desired changes in the Font dialog box to Arial, 10pt.

    Note

    Alternatively , you can select the Font size through the toolbar. Because you are going to add data fields with the same formatting, change the section formatting properties ( Appearance | TextProperties | Font)

     

    Note

    To do so move the cursor to an area in Layout away from any fields and select (left mouse button )- see Figure 7.12 below for suggested location shown as

     

    

    Figure 7.12. Text formatting properties of the selected data field

    
    

15. To view a preview of the project at this stage, click the Preview Result of XSLT button in the toolbar.

    

     

    The Log pane you can monitor the formatting process by tracing messages from the XEP formatter. When the XEP formatter finishes, the Preview pane shows the resulting document. You may now see how the field is placed on the page.

    The Log may report a "[Warning]The project page 2 has no frames. It may be rendered not properly." message. This simply means that your document contains a page on which no XML node is rendered. The original US Government W9 form consist of four pages of which page 2 through 4 consist of instructions.

    Caution

    Click to save the project.

    Note

    By default, to generate a preview only the first three records from the XML are used. You may change this behavior via the Options pane. Be advised that increasing number of records reduces processing of preview, so it is only recommended if your data records vary significantly.

16. Drag-and-drop the rest of the XML nodes to the Layout (note that same are purposely not listed at this time ): business_name, address, city, req_name_address, account_number, soc_sec_number and empl_ident_number and resize them to fit the empty spaces on the background.

    Note

    To align the Business_Name, Address, City and list account number(s) fields to be left aligned with the Name field:

    • Select the Name field. While Ctrl-key is depressed select the Business Name, Address, City and list account number(s) fields. Release the Ctrl-key. Click on the Align Lefts button.

     

    

     

     

    Note

    To size the Name and Business Name fields to be the same width and height:

    • Select the Name field. While Ctrl-key is depressed select the Business Name field. Release the Ctrl-key. Click on the Make Same Size button.

     

    

     

     

17. The address must be correctly formed from the city, state and ZIP values. Select the city field and change the Expression|XPathValue property to:

    concat (city/.,', ',state/.,' ',zip/.,'-',code4digit/.)

    The XSLT code is generated in the template with the match="batch/W9" attribute and data acquisition is rendered by the concat (city/.,', ',state/.,' ',zip/.,'-',code4digit/.)XPath expression

    Note

    The concat function returns the concatenation of its arguments. The string arguments are separated by a comma. Additional strings, like the comma and space between city and state, the space between state zip ,and the dash (-)between zip code4digit are between single (')quotes.

18. The Social security number (soc_sec_number) data field should be justified. To set the proper spacing between digits, select the soc_sec_number field and change the BlockProperties|AlignmentLast property value to justify.

19. Repeat the procedure above for the Employer identification number (empl_edent_number) including changing the BlockProperties|AlignmentLast property value to justify.

    Note

    To view a preview of the project at this stage , click Preview Result of XSLT button. Adjust the location(Left and Top ) of all fields.

    • Select a field and use the Up, Down, Left or Right arrow keys. The field moves several points (px)based on Grid size defined in the Options panel, irrespective if Snap to Grid is selected or not, or

     

    • Select a field, and while the Alt-key is depressed us the Up, Down, Left or Right arrow keys. You will note that the field moves a fraction (0.75px)irrespective of the Grid size defined and if Snap to Grid in the Options panel is selected or not, or

     

    • Select the field and edit the Location|Top and location|Left values in the Options panel. The field moves irrespective of the Grid size defined and if Snap to Grid in the Options panel is selected or not.

     

     

    Caution

    Click to save the project.

     

20. Place check marks on the appropriate background check boxes so that they are rendered only under certain conditions, according to the XPath expression results.

    Select the entity_type XML node in the XML Tree View pane. From the Data menu select Add Checkbox.

    Select the check murk just placed in Layout and drag it into the Individual/Sole proprietor check box

    • Check appropriate box; Individual/Sole proprietor.

    While still selected view the value displayed in the expression|test property. It should read entity_type/.='individual'. if not, changed it. This is the XPath expression used as the condition to render the field. That is, the field is rendered only if this condition is true.

21. Repeat the procedure above for the remaining check boxes, setting the Expression|Test property accordingly as in:

    entity_type = 'corporation',

    entity_type = 'partnership',

    entity_type = 'limited',

    entity_type = 'other'.

    Note

    An alternative is to:

    • Select the first check mark and copy once and past four times using one of the actions available.

     

    • Select and drag each check mark into each check box , and set the Expression|Test property accordingly as noted above.

     

    Note

    To view a preview of the project at this stage , click Preview Result of XSLT button.

22. In the XML Tree View pane, find the other_text node, select and drag-and-drop it to the Layout here which is associated with the Limited liability company check box.

    While still selected view the value displayed in the Expression|XPathValue property. It Should read other_text/.If not, change it.

    Caution

    Define a condition when to render the value which is only applicable when the Limited liability company check box is checked. Set the Expression| Test property to entity_type/.='limited'. This is the XPath expression used as the condition to render the field. That is, the field is rendered only if this condition is true. If not, change it. This is the XPath expression used as the condition to render the field. That is, the field is rendered only if this condition is true.

23. In the XML Tree View pane, find the other_text/ node, select and drag-and-drop it to the Layout here which is associated with the Other check box. Place it, and resize the other data field to fit the template in the background form.

    While still selected view the value displayed in the Expression|XPathValue property. It Should read other_text/.If not,change it.

    Caution

    Define a condition when to render the value which is only applicable when the Other (see instructions) check box is checked. Set the Expression| Test property to entity_type/.='other'. This is the XPath expression used as the condition to render the field. That is, the field is rendered only if this condition is true.

24. Select the exempt_from_backup XML node in the XML Tree View pane. From Data menu select Add Checkbox.

    While still selected view the value displayed in the Expression| Test property. It should read exempt_from_backup/.='true'. This is the XPath expression used as the condition to render the field. That is, the field is rendered only if this condition is true.

25. To view a preview of the project at this stage , click Preview Result of XSLT button. Adjust the location of all fields.

    Caution

    Click to save the project.

26. After all data fields are added and aligned you can generate the XSL stylesheet and/or the resulting PDF document.

    Click to generate the XSL stylesheet.

    Click to generate the resulting PDF document, enter a filename and save.

    Review the XSL stylsheet and PDF generated.

27. A preliminary view of the project should look similar to that of W9 sample project (except those Barcode data fields). See Figure 7.13

    

    Figure 7.13. View of unfinished project

    
    

    Congratulations, you have completed one of many VisualXSL projects.

Procedure 7.2.  To build a Dynamic type of VisualXSL project

1. Create a new folder in C:\Documents and Settings\All Users\Documents\VisualXSL Projects\my ICW for the project and call it.

2. Copy the ICW.xml and Images folder files from the C:\Documents and Settings\All Users\Documents\VisualXSL Projects to the new folder.

3. Open the ICW.xml with an XML Editor or WordPad or Notepad with "Word Wrap" option enabled to study its content. Note the XML declaration xml version="1.0" encoding="utf-8", a good practice for it to exist, and with the correct encoding value. Note the XML element batch at the beginning and batch at the end of the file. A top level XML element as noted is required by VisualXSL even if only one set of XML children elements exist.

4. Open the w9_blank.pdf with Adobe Reader, or equivalent, to become familiar with its content and the various "blank" fields. Close and Exit Adobe Reader.

5. Double-click the VisualXSL icon on your desktop.

   The VisualXSL application opens.

   

   Figure 7.14. Empty VisualXSL application

   
   

6. Click the New Project button.

   The New Project wizard opens.

   

   Figure 7.15. New Project wizard

   
   

7. Add the data source.

   Under Step 1 : Add Data Source click the Open button, navigate to the ..\VisualXSL Projects\Samples\ICW new folder and select the ICW.xml file.

   Note

   Alternatively, you can skip the wizard, and add the data source later by using the File | Open Source XML menu to select the ICW.xml file from the newly created folder.

   Step 2 : Choose Project Type Dynamic document(phone bills, statements)

8. Under Step 3 click the Open button ,navigate to the ..\VisualXSL Projects\Samples\ICW new folder and select the ICW.xml file.

   Note that this step automatically set the BackgroundPath and RasterizedPath property (under Properties | Layout).

9. Click the Create Project button. The new project, yet unnamed, opens in VisualXSL.

10. Click File | Save as, and save the project as 2ndTry.vxl.

11. Click in the Layout (the Designer). The page properties are shown in the Properties pane.

12. To Create a header select Edit header button in the tool bar.

    You can manually arrange items in the desire place on the field.

13. In the XML Tree View pane, find the name node, and drag-and-drop it to the Layout. Place it, and resize the name data field to fit the template in the background form.

14. Change the selected data field's properties by clicking in the Properties pane.

15. Add Image(add rx-logo.png from images folder ),in the Data menu select Add Image , and in the Properties pane, under Data select ImageUrl.

    

    Figure 7.16. Creating a Header

    
    

16. Unselect Edit Header.

17. Edit Items.

    The Items will dynamically be arranged by turns on the layout.

    

    Figure 7.17. Dynamic document

    
    

18. in the Properties|Space|Spaces before Area or Spaces after Area

    

    Figure 7.18. Spaces between the items

    
    

19. To preview the project at this stage, click the Preview Result of XSLT button in the toolbar.

    

     

    The Log pane helps you to monitor formatting process by tracing messages from the XEP formatter. When the XEP formatter finishes, the Preview pane shows the resulting document. You may now see how the field is placed on the page.

    Caution

    Click to save the project.

    You can find other instructions at To build a VisualXSL project

Procedure 7.3. To use .XEP file as an image

1. In the Sample folder, open the FRUITS.png file.

   

   Figure 7.19. Adding an Image

   
   

2. In the Data menu select Add Image, and in the Properties pane, under Data, select ImageUrl.

   

   Figure 7.20. After Adding an Image and Selecting the ImageUrl Field

   
   

3. In ImageUrl, select the button; the following dialog box appears.

   

   Figure 7.21. Edit ImageUrl dialog box

   
   

4. Select Fixed Path and via Image path field browse to and select Fruits_PNG/Images/VisualXSL/Lady_Red.xep file. It may be necessary to change Files of type: in the file browser window, in order to show .XEP files.

5. In the Edit ImageUrl dialog box, click OK; the dialog box closes, and the Image path in the Edit ImageUrl window and the ImageUrl in the Properties pane are set Lady_Red.xep.

   

   Figure 7.22. Lady_Red.xep has been selected for the new image

   
   

6. To see the Lady_Red.xep image, in the Build menu you can click Preview; after completion, Lady_Red.xep is visible below in the Preview pane.

Procedure 7.4. To use custom attributes

1. In the Samples folder, open the CustomAttributes file.

   Note

   All of the borders of the rectangle are the same - 4pt solid cyan. We will use custom properties to access the FO style attributes for the individual border sides.

   

   Figure 7.24. CustomAttributes file, with table with cyan border

   
   

2. In the Properties pane, under Custom, select CustomAttributes.

   Change the left border to 2px red and the top border to 2px blue by entering the following value: border-left=”solid 2px red” border-top=”solid 2px blue”. Note the space separating the two values.

3. In the Properties pane, under Custom, select OverriddenAttribute.

   Remove the rest of the (cyan) border altogether by entering the following value: border.

4. Do either Build Preview or Build Create PDF. The updated frame's left border is red, top is blue and nothing remains of the cyan. The updated frame can be seen in the Preview pane.

   

   Figure 7.25. Preview, showing updated frame, with red left border, and blue top border

   
   

Procedure 7.5. To create a PDF Form

1. In the Samples/Registration Form folder open registration_form.vxl file via VisualXSL.

   

   Figure 7.26. Registration Form

   
   

2. There are several frames, which assemble a simple registration form. The first part has a title called Registration, which contains two pairs of fields (each pair contains two fields in front each other). In this example all the pairs contain a usual text field and a fillable field (e.g. fillable text frame, checkbox, listbox, ...). Here we will pay attention to the fillable fields; more information about Text Fields can be found at 5.4 Text Frame.

   

   Figure 7.27. Registration Form

   
   

3. Username - fillable text field. To create a fillable text field add a Text Frame to the Layout and set its Treat as Field property to true (Treat as Field is located in the Form Fields section of the Properties pane). VisualXSL sets a default value for the Name property, but as we need to handle the submitted data on the server, we should give names for the submitting frames. So, the name of the Username field is set to username. For all other form fields we set individual Name properties. We can also give the maximum allowed length of the entered text: navigate to the Properties pane, Form Fields section, Max Length property, for this field its value is 15. Besides, usually Username is a required field, to emphasis that, we gave to Required property the true value.

4. Password - password field. Password field is created from a fillable text field. To create a Password, create a fillable text field, like the Username field and set its Password property to true

5. The second part of the form is called Personal Data. The first two pairs are First Name and Last Name. They are created just like the Username field.

   

   Figure 7.28. Registration Form

   
   

6. Then comes Gender fields, which is a group of Radio Buttons. There are used text frames and two radio buttons. Detailed information about how to create Radio Buttons see 7.3. Example of Using Radio Buttons.

7. The last pair of this section is Age. The user is suggested to select his/her age from the given intervals, which are presented as options of a List Box. To create a List Box select the XML node from which you wish the options to be generated and click Add List Box. The values are taken from the source XML (registration_form.xml). VisualXSL sets the current XML node's inner text as the List Box's Values. Options are generated from the Values property on the Properties pane, its values are separated by Separator property. Here the age intervals are separated by | and as the Separator property is |, we get the desired intervals - <18, 18-20, 21-25, 26-30, 31-40, >40.

8. Address section contains information about the user's address and consits of three pairs of fields.

    

   

   Figure 7.29. Registration Form

   
   Country - Combo Box containing a list of countries. To create a Combo Box select the XML node from which you wish the options to be generated and click Add Combo Box. The values are taken from the source XML (registration_form.xml). VisualXSL sets the current XML node's inner text as the Combo Box's Values. Options are generated from the Values property on the Properties pane, its values are separated by Separator property. Here country names are separated by | and as the Separator property is |, we get the desired intervals - Afghanistan, Albania, Algeria, etc. .

9. City - Fillable Text field.

10. Address - Fillable Text field, designed for the user to write his/her address (Street, building, apartment, etc.). The only difference from other fillable fields is that it is multiline, that is - it can contain more that one line. To enable this feature set the Multiline property in the Properties pane true.

11. The Sign section contains a Text Frame and a fillable Check Box, that is a Check Box, which Treat as Field property is set true.

    

    Figure 7.30. Registration Form

    
    

12. At the bottom of the form there are 2 Buttons - Reset and Submit.

    Reset - this type of Button is used to reset all the fields to their default values. To create a Reset button, add a Button, in the Properties pane set its Button Type property Reset. Reset affects only the fields, which names are included in the Fields property (space deliminated list); or if it is left blank, all the fields of the document are affected. As in this example Fields property is left blank, all the fields are affected.

    

    Figure 7.31. Registration Form

    
    

13. Submit - this type of Button is used to submit the form data to the server. To create a Submit button, add a Button. The server's URL is set in the URL property of the Properties pane. By default it is the inner text of the XML node from which the button is created. In this example, it is http://localhost/forms/index.php, of course you may set your own server. The submittion method is set via Method property, its possible values are POST and GET. Here we use POST method. VisualXSL supports four formats for submitting: XFDF, FDF, PDF and HTML. Here we used HTML format. The submitting format is changed from the Submit Format property on the Properties pane.

14. After creating the form, generate the resulting PDF document, fill the form and click Submit button. The form data will be sent to the server, which Url is given to the Submit Button's Url property. This sample includes visualxslforms/index.php file, which is a simple PHP file to show all the data sent to the server. You can copy - paste it to your php server, to see how the sample works.

    Note

    Adobe Acrobat Reader does not read HTML format, and as in this example we use HTML to show the submitted data, you are strongly recommnded to use either Preview window or your web browser.

    

    Figure 7.32. Registration Form