<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE zprava SYSTEM "techrep.dtd">

<zprava cislo="6/2004" jazyk="en">
<nazev>Main concept of the Web frontend</nazev>
<autor>Petr Novák</autor>
<datum>19. 11. 2004</datum>

<p>
The Web frontend is intended to manage the XML configuration during the
interactive Web interface.
</p>

<h1>Requires</h1>
<p>
The Web frontend must be able to work correctly with several types of Netopeer schemas
(in the RELAX NG format). If the user can edit some configuration, the Web
frontend generates the HTML forms from the Netopeer schema. The version of these forms
is the same like the version of the Netopeer RELAX NG schema. 
</p>

<h1>Design</h1>
<p>
The Web frontend is based on HTML forms with CSS. The page is designed
like <i>NetScreen</i> or <i>Extreme Networks</i> - there is a box with the main menu
in the top and there is a box in the left
part of the screen to select which part user can edit.
There is the status bar in the bottom indicating
which version user edits, whether the version is valid, saved, committed, etc.
The rest of the page is the HTML form for edit the XML configuration.
If some error is occured, the section is marked by red color and blinking (if
possible).
</p>
<obr src="screen">Example - the part of the System section</obr>

<h1>Concept</h1>
<p>
Web frontend consists of two main parts: the XSLT style-sheet for generating the HTML forms
and the Web application for processing the data from these forms.
</p>

<h2>Part one: the XSLT style-sheet</h2>
<p>
XSLT style-sheet generates the forms from selected RELAX NG schema and from the
actual configuration (it fills the HTML boxes with the actual values from the configuration).
The result is the HTML form designed to
the selected RELAX NG schema with values from the actual XML configuration.
The creating of the HTML forms needs two steps: in the first step it is created the
XSLT style-sheet for current schema:
</p>
<p>
	<vstup>$ xsltproc main.xsl netopeer.rng > temp.xsl</vstup>.
</p>
<p>
	The second step is applying this XSLT style-sheet to the XML configuration:
</p>
<p>
	<vstup>$ xsltproc temp.xsl configuration.xml > form.html</vstup>
</p>
<obr src="concept">Generating the HTML forms from the Netopeer schema and data from configuration</obr>
<p>
(this is very simple, in the fact you must initialize some variable here)
All of these transformations will be executed from the Web frontend CGI application
during the API of the XSLT processor.
</p>
<p>
The forms are in the follow format: the name of even input box is the absolute
XPath path to the node of the current configuration and the value is the value of that item.
For example:
</p>
<tt>&lt;input type="text" name="/configuration[1]/system[1]/box-id[1]" value=""/&gt;</tt>
<p>
This part is written in XSLT 1.0 and is designed to be used with <i>libxslt xsltproc</i>
XSLT processor.
</p>
<p/>
<p>
If there is some "table in the table" in the form, it is written as a hypertext
link in the first table, because the "table in table" is not good human readable. After
clicking to this link it is created a new window with the second table. For all
those links it is written out absolute XPath path to them during processing the
XSLT style-sheet.
</p>
<p>
If you have got a XSLT style-sheet generated for the actual RELAX NG schema,
you can generate some parts of HTML forms - you only need to set the absolute
XPath path to the nodes which you can process (and some variables - see later).
</p>
<p>
For example for generating the HTML form for processing <tt>/configuration[1]/system[1]</tt>, you
have to use:
</p>
<p>
	<vstup>$ xsltproc main.xsl netopeer.rng > temp.xsl</vstup>
</p>
<p>
	<vstup>$ xsltproc toProcess "/netopeer:configuration[1]/netopeer:system[1]" temp.xsl configuration.xml > form.html </vstup>
</p>
<p>
(see "Variables for creating the HTML form from the XSLT style-sheet" section for
the list of all available variables).
</p>

<h3>Some notes for status in this time</h3>
<ul>
	<li>If you need to generate the HTML form for processing some part of the schema,
		you must set some variables - see "Variables for creating the HTML forms from the XSLT
		style-sheet" section.</li>
	<li>There is a problem with creating the output namespace <tt>xmlns:netopeer</tt>.
		It is possible to do it by "deprecated" way - create the output style-sheet
		as a text (not as a XML) and xmlns:netopeer write as a text too.
		The second way is to give to all elements the namespace - this is easy but
		the output is very unreadable and the style-sheet spends more space
		(and it is slower).</li>
</ul>




<h2>Part two: the Web application</h2>
<p>
The purpose of the Web application is to process the data from the forms. The
main function of the Web application is to read data from forms and write it to
the XML configuration file.
</p>
<obr src="concept2">Sending data from HTML forms to the XML configuration</obr>
<p>
This application is designed to use the <i>FastCGI</i> library. Simply it gets the
names and the values from the forms and saves them to the XML configuration.
There are some special "key words" for specify the actions over the configuration
as a deleting some node etc. All these "key words" and its values are defined in
<soubor>main.xsl</soubor> XSLT file as a variables.
</p>


<h1>Implementation of the XSLT style-sheet</h1>
<p>
XSLT style-sheet consists of two parts. One part is the <soubor>main.xsl</soubor> style-sheet, which generates
all the templates of the result XSLT style-sheet. For elements it creates two templates:
one is in format <tt>&lt;xsl:template match="..."&gt;</tt> and is used if element exists in the
XML configuration (this template switches the context node to the processing
element). It contains only calling the second template:
<tt>&lt;xsl:call-template name="..."&gt;</tt>.
The second template is the template in the form <tt>&lt;xsl:template name="..."&gt;</tt> where the name
is the <i>id</i> for the element. It is called always - if the element exists it is called by
the <tt>&lt;xsl:template match="..."&gt;</tt> template and if the element doesn't exist
it is called by its parent.
The name of the template for the element contains the name of the parent(s) too (because
there are many elements with the same name in the Netopeer RELAX NG schema and it is
necessary to different them). For attributes it is only created a template in the
format <tt>&lt;xsl:template name="..."&gt;</tt> where name is the <i>id</i> of the attribute.
</p>
<p>
The second part is RELAX NG parser, which parses the Netopeer RELAX NG schema and creates
the proper HTML forms from it. It contains many files with prefix "relaxng".
Note that it is not parser for any RELAX NG, it implements only parts important for
Netopeer RELAX NG (see documentation in the <soubor>relaxng-core.xsl</soubor> for more).
</p>

<h2>Variables in the templates</h2>
<p>
There are some variables in ever template. There are some differences between the variables
in the templates for elements and for attributes. See documentation in the <soubor>main.xsl</soubor> for more.
</p>

<h2>Variables for creating the HTML forms from the XSLT style-sheet</h2>
<p>
You must initialize some variables during the second step of the generating the 
HTML forms from the RELAX NG schema. There are the follow variables:
<ul>
	<li><tt>toProcess</tt> - contains the absolute XPath path which indicates which
		part of the Netopeer schema the HTML form will be generated from.</li>
	<li><tt>toProcessPath</tt> - is the string which contains the prefix of the generated
		part of the Netopeer schema. It depends on "toProcess" variable.</li>
	<li><tt>error</tt> - is the string which is the absolute XPath path to the node
		in which the error is occurred.</li>
	<li><tt>revision</tt> - is the string with the number of the revision of the
		editing configuration.</li>
	<li><tt>changed</tt> - is the boolean XPath expression which indicates whether the
		editing configuration was changed.</li>
	<li><tt>committed</tt> - is the boolean XPath expression which indicates whether the
		editing configuration was changed.</li>
</ul>
</p>

</zprava>
