Chapter 7. HTML file

Example HTML page contains:

1. Fields for entering data

2. FOP Editor applet (where we can put some formatted text)

3. Button “Create PDF”

When the Button “Create PDF” is pressed, JavaScript calls applet's method FormatFO() that returns a String which represents a content of applet and is already formatted as a part of XSL:FO file (so when FO file is formatted at Servlet this String is just build-in), and put it in a hidden field on HTML page. Then Servlet reads from HTML page content from all visible fields plus one hidden field. In that moment begins formatting of XSL:FO file at Servlet. Like a result we receive a PDF file. After that, Acrobat Reader is being opened with the data we put in HTML document fields plus the Editor content.

Here we'll be explained HTML documents that serve as example of using FOP Editor applet.

The line with META tag specifies the character encoding for a document as being “ISO-8859-1”:

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1>

That is important for charset to be latin1 because for some other charsets browser is inserting entity names (for e.g. for sign ‘ñ’ browser inserts entity name "&ntilde;" which causes error during processing text into a PDF document. This line could be omitted because charset is by default set to "ISO-8859-1".

There is a JavaScript function in HTML document that transforms (by interaction with applet) the applet written text to a XSL:FO file format and puts it in a hidden field named. This field is defined elsewhere in HTML document. (Notice that names used in this example are: 'myForm' - the form name, 'context' - the name of the hidden field and 'myApplet' - the name used to access the applet)

<SCRIPT type="text/javascript">
<!--
// call this function when button "Create PDF" pressed
function CreatePDF()
{
// calls Java method FormatFO() which make formated string for 
// .FO file and put this string in hidden field 'context';
// after that is executed FORM method "post", who send string 
// to the servlet named ServletEditor
document.myForm.context.value=document.myApplet.FormatFO();
}
//-->
</SCRIPT>

Now we come to the form definition. In this example form is used to place some labels and text fields in it (only one field is necessary - the field named 'context'), to place the applet and to place the button that will cause the action defined by the FORM tag. All form components, except the 'context' field, are placed into the cells of tables defined by the tag TABLE. When the form is submitted (when user presses 'Create PDF' button) JavaScript that transforms applet context into XSL:FO file format is executed, and such formatted text is put in a hidden field. After that, the form will be sent to the program specified by the action attribute, in our case it will be (for example purpose made) servlet ServletEditor:

<FORM NAME = "myForm" action = "http://localhost:8011/ServletEditor.po"  method = "post" >
Inside the FORM tag there is a TABLE tag. Table is made of cells that contains labels and input fields for entering some data, such as "Date", "Name" and "Subject" in this HTML examples. Content of every INPUT element control inside the FORM is passed to the servlet when submit button is pressed.

As mentioned, within the FORM tag is a TABLE tag, and one of the tables cell reference the applet (when you write you own HTML document, and corresponding servlet, which purpose will be to convert the applet context into a PDF document, you don't need to do it in a way that this example does - you don't need to define table, only thing that is important is to reference the applet, to put the submit (CreatePDF) button and hidden field within the FORM tag, and to adjust tags and servlet). The applet is added to HTML in following way:

<OBJECT ID="myApplet" classid = "clsid:8AD9C840-044E-11D1-B3E9-00805F499D93" 
WIDTH = "650"  HEIGHT = "300" NAME = "myApplet" 
codebase = "http://java.sun.com/products/plugin/1.3/jinstall-13-win32.cab#Version = 1,3,0,0">
<PARAM NAME = CODE VALUE = "TextEditor.class" >
<PARAM NAME = "type" VALUE="application/x-java-applet;version=1.3">
<PARAM NAME = "scriptable" VALUE="true">
<PARAM NAME = "Resource" VALUE = "TextEditor">
<PARAM NAME = "Language" VALUE = "de">

<COMMENT>
<EMBED
ID="myApplet"
Name = "myApplet"
type="application/x-java-applet;jpi-version=1.4.1_01" 
CODE = "TextEditor"
CODEBASE = "classes"
WIDTH = "650"
HEIGHT = "300"
Resource = "TextEditor"
Language = "en"
scriptable=true
pluginspage="http://java.sun.com/products/plugin/index.html#download">
<NOEMBED>
This browser does not appear to support Applets.
<NOEMBED>
<EMBED>
<COMMENT>

</OBJECT>
<!--"END_CONVERTED_APPLET"-->
The applet is not added by the APPLET tag because APPLET tag can't force the browser to use Java Plug-in. When you add applet in a way written above, the browser will understand it and execute it.

Let us explain the meaning of OBJECT tag.

OBJECT tag

The classid attribute in the OBJECT tag is the class identifier for Java Plug-in itself. This class identifier should be the same in every HTML page. When browser renders this class identifier in the OBJECT tag, it will try to load Java Plug-in into the browser.

width and height

determines the width and height of the applet

name

represents the name used to access the applet within the HTML document (the JavaScript function CreatePDF() access to the applet function through this name)

codebase

represents the location from which to download Java Plug-in when it is not found on the local machine.

code

identifies the applet

type

identifies the type of the Java executable, such as an applet or a JavaBean, so Java Plug-in knows how to initialize the Java executable.

scriptable

indicates if the applet requires scripting support

resource

determines the name of the "main" property file to be used

language

determines the name of the "language" property file to be used

When writing your own HTML document or adjusting this document, you should only change the width and height attributes and resource and language parameter if needed.

Now we came to the definition of submit button:

<input type="submit" value="Create PDF" onClick = "CreatePDF()" name="Submit">
Attribute type defines this control as a submit button. When activated, the submit button submits the form. Attribute value is the text that will be written on the button. Attribute onClick defines which script to process after clicking the button. Attribute name is a name of a button used to access him within an HTML document.

At the end of the document is defined hidden INPUT field named 'context' which purpose is to hold the applet formatted text after pushing submit button.

<input type="hidden" name="context">