Navigation

Sider view is used to let the user to view and edit a document. The view can have any structure. It can be pretty much anything you want it to be. In general however the view should help the user with what they are trying to do. The document might be complicated and sometimes it might make sense to only show a small portion of it at a time or display an overview (a diagram). To address these cases Sider supports an unlimited number of views for each type. It is also possible to develop a view to support several different types, although the view needs to know how to handle them properly.

The view is the layer between the user and the document. It is displays data in the document in some way and let's user interact with it. It is responsible for capturing user input and updating the document. The view shouldn't work with the document directly, but uses document type instead.

Sider view is an HTML page (or collection of pages shown in frames. It is generated using XSL transformation with the document as its input. With CSS and JavaScript it is possible to have very advanced views. JavaScript became more popular recently. There are different libraries that help developer build a better, more interactive, prettier web application (I wrote JSForms with these goals in mind for developing Sider views). In addition, web browser supports different types of objects (Java Applet, ActiveX, SVG, etc.) on the page it is possible to reuse existing technologies and programs to show the document. All these combined makes it possible to show any type of the document in any form desired.

The view holds a copy of the document inside of it (using XML Island technology). When the view is loaded browser creates a DOM object from that XML. While the document is being edited the DOM object resides in memory. When the document needs to be saved or updated the XML DOM object is transformed back to the XML text, stored in the island and Sider extracts it to work with it directly.

Edit

view.xml

Every view consists of several files. There has to be at least view.xml describing the view and a transformation file used to generate view HTML from the document XML. Often there's also a JS file to make the view dynamic or CSS file to style it. view.xml provides the view information, it's ID, name, transformation file name, etc.

Example


<?xml version="1.0" encoding="UTF-8"?>

<view name="ExampleView" id="26484DAA-1467-4D6F-A258-36BC3C11821A" version="0.5.0.0">

	<properties>

		<property name="Read Only" value="false"/>

		<property name="Can be embeded" value="true"/>

	</properties>

	<transformationFile type="html">viewTransformation.xslt</transformationFile>

	<supportedTypes>

		<type id="679ABF19-D2B4-4C4F-9675-44C632F2302B" version="0.0.5.0" />

	</supportedTypes>

	<includes>

		<file href="ftbView.js" />

		

		

		<component id="D23E874D-E1C7-4B8E-AC45-34E9554DA301">

			<import href="ftb.xslt"/>

		</component>

	</includes>

</view>

Node name	Parent node name	Description	Value
view	Document element	Root element for the view description	Nodes describing the view.
@id	view	View ID.	GUID
@name	view	View name.	String
@version	view	View version.	"x.x.x.x"
properties	view	View configuration properties.	Collection of `property` elements.
property	properties	Property describing the view.	@name - Property name. @value - Property value. Usually `true` or `false`.
property @name="Read Only"	properties	Indicates if document can be edited using this view. If this flag is `true` and the view modifies the document Sider doesn't allow changes to be saved.	`true` if view should not modify the document, `false` if the view can modify the document.
property @name="Can be embedded"	properties	Indicates if this view can be embedded. This property is not used at this point, but in the future views will be able to show other views. Ignore this for now.	`true` or `false`
transformationFile	view	Name of the view transformation file.	@type - Set this to "html" for now. In the future there will be other types of view transformations. text() - Transformation file name with extension.
supportedTypes	view	Holds collection of the references to the types supported by this view. Only document of the specified type can be shown using this view.	Collection of `type` elements.
type	types	Reference to the type supported by this view.	@id - Type ID. [@version]- Optional type version. It is possible to specify ranges of version and such.
includes	view	Holds reference to all resources required for this view to function.	Sequence of `file` or `component` elements.
file	includes	View file reference. This is usually view custom view scripts.	@href - File location. Usually just file name since the file should be located together with `view.xml`Note: JavaScript files (with .js extension) will get included in the view automatically. You still need to include CSS or any other files manually.
component	includes	View component reference. Points to a view component used by this view. Sider will pass URI references to the view component file to be used with the view.	@id - View component ID. @version - View component version. Works similarly to the type version reference. Read @this/ViewComponentReference for details. import - View component transformation to import.
import	component	Indicates that a view component transformation should be imported in the view transformation. Import takes place automatically when view transformation is being loaded.	@href - Transformation name. Use "/" as path separator. "\" will result in import not being loaded.

Edit

Transformation

Transformation style sheet is essential for the view to function normally. It takes XML document and generates HTML to show and manipulate it. Sider tries to make writing view transformations simple and all provides most commonly used templates to help you with page generation.

Edit

Transformation chain

View generation doesn't actually start with the view XSLT. It starts with a Foundation.xslt Sider system transformation. View XSLT is imported to it. It is responsible for generating automatic references and inserting parts generated by the view transformation to correct places (page head and body).

Transformation sequence
If a cell in the table has a dash ( - ) that means the value is the same as in the row above (same column). This is often used to indicate same template and transformation file name.

To show template calls template name on the second row will be different from the name on the first row. On the third row it will be the same as it was on the first two indicate code running in the main template.

>

Step title	Description	Template name	File name
Start	Initiates view generation.	match="/"	Foundation.xslt
Start head	Initiates page head generation	-	-
No body edges style	Add style to remove body padding and margins.	noBodyEdges	-
Include resources	Includes essential resources for the view to function correctly: Types script files View script files (view only, not view components) Sider view component (provides classes to work with document and type).	match="/"	-
Frames initialization script	Adds JavaScript to run on page load to initialize all frames. `{Sider`} object with references to all document, type and view objects is copied to each frame.	-	-
generate custom head	View specific transformation generates custom HTML for the head. This is when view initialization script, CSS and JS references and so on will be inserted.	generateHead	[view].xslt
Insert XML	Insert XML using XML Island by coping document to it.	match="/"	Foundation.xslt
Finish head	At this point HTML head is completed.	-	-
generate body	Generates page body or frames set. This is completely up to the view developer.	generateView	[view].xslt
Process HTML page	At this point the page is processed. This is done to all HTML pages before they are saved to be loaded to the browser.	createHtmlPage	utils.xslt
Begin processing	Copies HTML source, adding and updating it as needed. `utils.xslt` will provide more details on what's happening here.	-	-
Show the view	At this point the resulting HTML is saved in a temporary folder and loaded in the browser.

Edit

System transformations

There are two system transformations that take part in the view generation process. foundation.xslt is responsible for automatic generation of HTML required by every view to function correctly. It generates tags that would have to be generated by most of the developers in their views.

utils.xslt provides useful templates for generating HTML page. Essentially it's a collection of utilities to help write better view XSLT code.

Edit

view.xslt

View needs to have at least one transformation (and at most one for now). This transformation will be invoked when the user requests to show a document using the view. When view transformation is loaded all view component transformations mentioned in the view.xml are imported automatically into the view XSLT. You can use component template name at the correct place to generate relevant XML.

You should use functionality provided by the utils.xslt. It includes templates to generate different tags to load or include CSS and JavaScript and so on.

Edit

Required templates

View needs to provide two templates that will be invoked during view generation process. They are used to generate parts of the HTML page. These templates are named XSLT templates:


<xsl:template name="generateHead">

...

</xsl:template>

<xsl:template name="generateView">

...

</xsl:template>

generateHead (optional)

This template is optional and can be omitted. If it is not specified nothing is put in its place.

This template is invoked to place code in the HTML page head. Usually initialization script and references to different files (load CSS and JS) is placed there.

Since result code is placed inside tags you shouldn't have them in this templat.

generateView

This template is required and is used to generate the main portion of the web page (body or frameset). You need to provide all HTML that will be visible to the user, including or tags. This will also let you configure them as you see fit.

utils.xslt provides details on how to generate frames.

Edit

Arguments

When view transformation is started it is passed a collection of arguments. All of the arguments are passed to foundation.xslt since this is where transformation starts. It then generates several variables to help make access to some of the arguments easier.

Emerald Hand Wiki