Navigation

Welcome,

• Main Page
• Cavan
• Sider
  • Download
  • Development
  • Design
• Xelog

• About us
• Front page
• Forums

• Our coding conventions

• Categories
• Recent updates
• New pages
• All pages

Management

• Create a new Page
• Practice in a sandbox
• Editing help

• File Management

• Login/Logout
• Language Selection
• Your Profile
• Create Account

• Administration

Quick Search

Advanced Search »

Back to tutorials section

Table of Contents [Hide/Show] Introduction View folder View declaration (view.xml) View transformation (view.xslt)     generateHead     generateView View script (view.js)     Script comments     Class declaration Conclusion

Edit

Introduction

This tutorial covers creating a blank view from a scratch and describes how to create a view skeleton. This is a starting point for all new views and most other view tutorials rely on you to create a blank view using this tutorial.

Edit

View folder

New view needs to be located somewhere. Typically it's in the views\viewName\viewVersion\ folder. viewVersion is the version in x.x.x.x format (each x is an integer) and viewName is its name.

For example if you would want to create "Notes" view 0.5.0.0 version you would have {Sider\views\Notes \0.5.0.0\} folder structure.

To assist with creating a new view we supply blank view files (attached to this page) and each one is described bellow. You probably want to download them all for to the view folder and customize them for the view.

view.xml file name has to remain unchanged (Sider looks for it), but other files can and should be renamed. I prefer to change view.xslt to viewName.xslt (notes.xslt) and view.js based on the functionality it provides (if script in the file interacts with a tree control it would be tree.js).

There can be only one view.xml and probably you will have only one viewName.xslt, but you could easily have more than one view.js. Complex views with many controls can end up with one script file for each control, and sometimes more files to manage them.

Edit

View declaration (view.xml)

Each view is described by the view.xml file. It provides all information about the view. This file should be edited first, but before you can do it you need to have some idea about the what you will have to supply:

• View name
• View unique GUID
• View version
• Supported type IDs
• View files names (transformation and script files)
• View components IDs (and possibly their transformations) (optional)

I'm going to go through steps you would take to when customizing a new view. All of them are applied to the view.xml.

1. In the first line you insert view name (

   @name

   ), GUID (@id) and version (@version).
2. Skip the properties tag. Properties are not used right now.
3. Change view.xslt to the viewName.xslt in the transformationFile.
4. Add IDs for all supported types (type/@id). There's a single type element for each type reference in supportedTypes element.
5. Insert references to the view script files.
   1. Change view.js to tree.js (for example) in the includes/file/@href.
   2. For each additional file you will need to copy-paste file element and update its @href.
6. Add references to the view components.
   1. Update comment to reflect view component name.
   2. Add component ID component/@id.
   3. Optionally you would add reference to the transformation file relative to the view component folder. If you don't want to use transformation remove import tag.
   4. Now you would just copy/paste/fill out component element for each additional component you need to use.

That's it. view.xml is done. Right now Sider will find the view and all information about it, but it will fail to load it. Most likely the view transformation and script files are missing or invalid. If that's the case and you were to launch Sider you would get an error message on start-up.

Edit

View transformation (view.xslt)

View XSLT file (view.xslt) generally transforms document from XML to HTML for the browser. Resulting HTML page will be supplied with the copy of the document in an XML island. When the document is saved, Sider extracts it from the XML island. So, for the view to change the document in response to the user interaction it needs to update XML in the island.

Typical view transformation will supply two templates. generateHead to generate HTML for the head and generateView to supply HTML for the body (or frameset if the view needs frames). When writing transformation you could call templates provided by Sider/SDK/View/Utils or by any transformations supplied by view components.

Edit

generateHead

This transformation provides HTML for the head section on the page. Typically, all scripts and file references are located here. You could also supply page title and other HTML.

When the view is generated the actual page head will contain XML island, type scripts, Sider initialization scripts and so on, in addition to what this template supplies.

Edit

generateView

Most of the HTML will be generated by it. It could provide either body or frameset. In either case this is HTML that user sees.

Just like with generateHead, when the view is generated, there will be more that just what you supply. For example, there will be a common toolbar, visible in every view.

Edit

View script (view.js)

Script files (view.js) can be loaded with the view page to make view interactive and allow user to manage the document. Each script file should have a single view class declaration (to simplify editing the view). Provided that you use Sider features to declare your view classes, view objects are created automatically and are available through sider.views.objecName.

Let's walk through a typical view declaration. All steps bellow are related to a single script view file.

Edit

Script comments

Start editing script file my updating its header and class comments. This will simplify understanding the file at a later date and assist with automatic documentation generation.

1. We update the header first
   1. Replace sider.views.ViewName with sider.views.FileName.
   2. Right bellow it add file description.
   3. Go ahead and fill out rest of the header. You can add your own copyright notice right under it.
2. Update class description in a similar manner, adding ClassName and its version.

Edit

Class declaration

You start by giving your class a name. It will be used to access a single instance of this class. For example Tree class will be available through sider.views.tree.

Actual class declaration is done through anonymous object syntax.

sider.views.addView( null, "ViewName",

{

	/*

		Constructor: initializer

		Initializes new view object.

	*/

	initializer: function()

	{

	},

	field1: "fieldValue",

	function1: function( args )

	{

	}

});

Notice that last member declaration isn't followed by a coma, but all other members are.

Edit

Conclusion

You should now have a basic skeleton for your view and be prepared to move on to more interesting things.

Sider should be able to load the view, but if you haven't customized transformation it won't show much in the view. And until you provide scripts for the view, it's going to be static (which would work in some cases, but usually user expects at least some form of interaction).