HTML Builder

HTML Builder is editor for editing Velocity template on HTML adapter.

HTML Builder provides the following functions.

Inserts variable reference to Velocity template by mouse operation.

Inserts reference result data of processing component to Velocity template by mouse operation.

Support the input of conditional branch or loop defined by Velocity template language(VTL).

For more details on DataSpider Studio, refer to here.

Start and End HTML Builder

Start HTML Builder

When you execute the property actions of [Open HTML Builder], the HTML Builder edition screen is launched as a dialog.

End HTML Builder

When you click "×" button on the right top of HTML Builder edition screen, or select [File]-[Exit], it exits and returns to the property settings dialog.

Screen structure of HTML Builder

Numbering in the figure	Name	Description	Remarks
(1)	Menu	Various menus for operating HTML Builder are displayed.
(2)	Input source	Schema of input data, script variable, component variable are shown.	You cannot edit the schema of input data in HTML Builder. Edit in Mapper.
(3)	Template area	Describe Velocity template. Tags and comments are displayed with color.

Item name	Description	Remarks
Exit	Exit from HTML Builder and returns to property settings dialog.

Item name	Description	Remarks
Undo	Cancel the last editing action and revert to the previous status.
Redo	Re-execute the operation that was canceled with "Undo".
Cut	Cut the selected text.
Copy	Copy the selected text.
Paste	Paste the copied text.
Delete	Delete the selected text.
Select All	Select all text.

Insert

Insert HTML template, various references or various operations into the Velocity template.

Description of items

Item name	Description	Remarks
Insert HTML template	Insert the text that will be a template for HTML4.
Insert HTML5 template	Insert the text that will be a template for HTML5.
Add input data	Add the input data.
Insert script variable	Insert the script variable.
Insert component variable	Insert the component variable.
Insert loop	Insert the loop.
Insert conditional branch	Insert the conditional branch.

View

You can perform various view settings in HTML Builder.

Description of items

Item name	Description	Remarks
Zoom In	Magnify the display size of template area.
Zoom Out	Reduce the display size of template area.
Reset	Reset the display magnification of the template area to its original size.

Tools

Description of items

Item name	Description	Remarks
Load HTML file	Display the dialog for reading the HTML file available in DataSpider file system.

Developing procedures

Here introduces HTML Builder development manual by example which uses "Generate HTML File".

Place the Generate HTML File icon on the script canvas.

Open the properties settings dialog of icon, launch the HTML Builder edition screen.
Refer to "Start and End HTML Builder".

In HTML Builder edition screen, insert the HTML template.
You can insert from "Insert".

In HTML Builder edition screen, add variable reference to Velocity template.
Refer to "Usage of variables".

In HTML Builder edition screen, add input data.
Refer to "Input data Add/Delete".

In case of adapter in which schema is not generated automatically, set schema.
Refer to "Edit Schema".

In HTML Builder edition screen, add loop which used input data to Velocity template.
Refer to "Insert loop using input data".

In HTML Builder edition screen, add conditional branch using variable or input data to Velocity template.
For conditional branch using variable: Refer to "Usage of variables".
Conditional branch using input data: Refer to "Insert conditional branch using input data".

After insertion of conditional branch

After modification of conditional branch

Finally, align HTML and finish.

Usage of input data

With the following notation, the reference of results data used in DataSpider can be passed to Velocity context.

Notation	Description
$component.<Processing component name>	Returns the object corresponding to the result data of processing component in <Processing component name>.

Difference according to input data type

Depending on if the input data is of table model type of XML type, the object passed to Velocity context is different. Therefore, depending on the type of input data, descriptions of loop and conditional branch differs.

XML type data

For XML type input data, it is converted to JDOM document. JDOM document root element can be retrieved by writing in "$component.<Processing component name>".

For JDOM, please refer to "jdom.org"(http://www.jdom.org/).

Table model type data

If the type of input data table model, can get Collection object related to row by writing in "$component.<Processing component name>.rows" format.

Method Name	Arguments	Return type	Description
rows	None	Collection	Collection for object to access to each row.

Also, the following methods are implemented in the row object.

Method Name	Arguments	Return type	Description
getColumnValue	int	Column	Get the column object with the specified index.
getColumnCount	None	int	Returns the number of columns in the row.
getColumnData	None	Column[]	Returns an array of column objects included in row object.

Also, the following methods are implemented in the row object.
In addition, column object itself returns string equal to getStringValue.

Method Name	Arguments	Return type	Description
getData	None	Object	Return column input value unchanged.
getStringValue	None	String	Value as String type
getIntegerValue	None	Integer	Value as Integer type
getLongValue	None	Long	Value as Long type
getShortValue	None	Short	Value as Short type
getFloatValue	None	Float	Value as Float type
getDoubleValue	None	Double	Value as Double type
getBigDecimalValue	None	BigDecimal	Value as BigDecimal type
getBooleanValue	None	Boolean	Value as Boolean type

Input data Add/Delete

HTML Builder input data

In HTML Builder, different from other writing process adapter or Mapper, base on Velocity template content to add/delete input data dynamically.

Add input data

Add input data.

Execute one of the processes below and open the "Add input data" screen.
- Select [Insert]-[Add input data] from menu.
- From right click menu of template area, select [Add input data].
Select data you add to [Input data] in the "Add input data" screen, and click the [Finish] button.

By clicking [Next] button, you can also insert loop or conditional branch using added data.

"$component.<Processing component name>" is written in the template area and input data will be added.
Velocity templates in the template shown in the area "$component.<Processing component name>", by writing and will be added to the original input data is the result of the tree component.

With the process above, input data is added and data flow of designer and input source tree are updated automatically.

Delete input data

By deleting all description of "$component.<Processing component name>" from template, input data will be deleted and data flow of designer and input source tree are updated automatically.

Insert loop using input data

Insert loop using input data.

Execute one of the processes below and open the "Insert loop" screen.
- Drag & drop node which is target of loop from "Input data" tree of input-from to template area from the shown dialog, select [Insert loop] menu.
- Select [Insert]-[Insert loop] from menu.
- From right click menu of template area, select [Insert loop].
Select data for loop from [Target data] in the "Insert loop" screen, and click [Next].

This process is not required if you open the "Insert loop" screen by drag & drop the node of data for the loop from the "Input data" tree.

Select the type for loop in the "Insert loop" screen, and click [Finish].

Insert conditional branch using input data

Insert conditional branch using input data.

Execute one of the processes below and open the "Insert conditional branch" screen.
- Select [Insert]-[Insert conditional branch] from menu.
- From right click menu of template area, select [Insert conditional branch].
Select data for the conditional branch from [Target variable/data] in the "Insert conditional branch" screen, and click [Finish].

You can also add a conditional branch by drag & drop the node of data for the conditional branch from the source "Input data" tree, and select [Insert conditional branch] in the menu.

Usage of variables

With the following notation, the reference of results data used in DataSpider can be passed to Velocity context.

Type	Notation	Description
Script variable	$script.<Script variable name>	Returns the string representation of the value dereferenced by the <Script variable name>.
	$start.<XML script input variable name>	Return XML data of the script variable shown as <XML script input variable name>. For more details, refer to "XML type data".
	$component.<XML script input variable name>
Component variable	$property.<Processing component name>.<Component variable name>	Return string representation of component number indicated by <Processing component name> and <Component variable name>.

Environment variables cannot be used.

For variable, refer to "Variables".

Component variable

Component variable is variable that can be gotten with each component.
They are used to alter the succeeding processing with the results of the adapter.

Values you can obtain vary depending on the component. For more details, refer to the Help page of each adapter.

In HTML Builder, for Velocity template, you can perform "Insert component variable" or "Insert conditional branch which targets component variable" for Velocity template.

Insert component variable

Insert component variable.

Execute one of the processes below and open the "Insert component variable" screen.
- Select [Insert]-[Insert component variable] from menu.
- From right click menu of template area, select [Insert component variable].
Select the variable to insert to [Component variable] in the "Insert component variable" screen, and click [Finish].

You can insert a component variable also by drag & drop the component variable you insert from the input source "Component variable" tree to the template area and select [Insert component variable] from the displayed menu.

Insert conditional branch using component variable

Insert conditional branch using component variable.

Execute one of the processes below and open the "Insert conditional branch" screen.
- Select [Insert]-[Insert conditional branch] from menu.
- From right click menu of template area, select [Insert conditional branch].
Select the component variable for a conditional branch to [Target variable/data] in the "Insert conditional branch" screen, and click [Finish].

You can insert a conditional branch also by drag & drop the component variable you insert from the input source "Component variable" tree to the template area and select [Insert conditional branch] from the displayed menu.

Script variable

Script variable is variable that can be created by the designer.
Store data temporarily, then use when we want to use in the process after.

In HTML Builder edit screen, for Velocity template, it is possible to execute "Insert script variable" or "Insert conditional branch which targets script variable".

Insert script variable

Insert script variable.

Execute one of the processes below and open the "Insert script variable" screen.
- Select [Insert]-[Insert script variable] from menu.
- From right click menu of template area, select [Insert script variable].
Select the variable to insert to [Script variable] in the "Insert script variable" screen, and click [Finish].

You can insert a script variable also by drag & drop the script variable you insert from the input source "Script variable" tree to the template area and select [Insert script variable] from the displayed menu.

Insert conditional branch using script variable

Insert conditional branch using script variables.

Execute one of the processes below and open the "Insert conditional branch" screen.
- Select [Insert]-[Insert conditional branch] from menu.
- From right click menu of template area, select [Insert conditional branch].
Select the script variable for a conditional branch to [Target variable/data] in the "Insert conditional branch" screen, and click [Finish].

You can insert a conditional branch also by drag & drop the script variable you insert from the input source "Script variable" tree to the template area and select [Insert conditional branch] from the displayed menu.

Specification Limits

Obtain XML type data
- If you obtain XML type data by using the JDOM method, the escaped characters are obtained as not escaped.
  You can avoid this by enclosing the target data in XML with "CDATA".

Restrictions on the usage of characters in component or variable names.

The following characters cannot be used in component or variable names.

Characters	Description
	space
!	Exclamation mark
?	Question mark
\	Backslash
$	Dollar sign
@	at symbol
%	percent symbol
&	ampersand
#	hash mark
*	asterisk
^	hut
~	tilde
,	comma
.	period
+	plus sign
/	forward slash
\|	vertical bar
:	colon
;	semi colon
<	less than sign
=	equal sing
>	greater than sing
-	hyphen
'	single quote
"	double quote
`	back quote
(	parentheses(left)
)	parentheses(right)
{	braces(left)
}	braces(right)
[	bracket(left)
]	bracket(right)
「	double-byte parenthesis(left)
」	double-byte parenthesis(right)
・	double-byte bullet point

Notes

Notation of component names and variable names enclosed in {}
- Although variable names enclosed in {} are valid syntax used in Velocity template(such as ${var} $!{var}), these are regarded as "DataSpider variable usage" and expanded before the template is parsed.
  Therefore, usages of syntax such as ${script.<Script variable name>} and ${property.<Processing component name>.<Component variable name>} are not allowed.
- If you need to enclose the script variable and component variable such as displaying a string immediately after that, in \{}, then use DataSpider variable.
  Example: Total ${script.<Script variable name>} -> Total ${<Script variable name>}
- In a template area, where "." period is appended to $script.<Script variable name>, may cause compilation error of during the build process of the script.
  To prevent this issue, enclose the script variable in {}.
  Example:$script.<Script variable name>.csv -> ${<Script variable name>}.csv
Use of multi-byte characters in component names and variable names
- In Velocity template language, you cannot use a variable name containing multi-byte characters. However, in HTML Builder, you can use multi-byte characters for component name and variable name.
None existing variables
- If you specify a script variable name that does not exist, error occurs when compiling the script.
- Non-existing component variable dereferenced in syntax will be "null".
Components renamed
- If components used in the template area are renamed, error will occur at runtime.
  The component names used in the template area needs to be renamed accordingly.
Any component whose name contains either "(" or ")" cannot be specified as an input data.
Example: "mapping(1)".

HTML Builder

HTML Builder

Start HTML Builder

End HTML Builder

Screen structure of HTML Builder

Description of items

Description of items

Description of items

Description of items

Description of items

Developing procedures

After insertion of conditional branch

After modification of conditional branch

Difference according to input data type

Table model type data

HTML Builder input data

Notes