Freja v1.0 Documentation

From CSScripting

Overview

Usage Example

var User     = new Model('models/user.xml');
var EditView = new View('views/user_edit.xsl', {placeholder: 'Content'});

Controller.onLoadComplete = dispatcher;
Controller.loadAssets();

function dispatcher(action) {
  if (!action) action = 'init';

  switch(action) {
      case 'init':
         Controller.render(User,EditView);
      
       /* etc.... */
  }
}

Model

Constructor

var model = new Model(url)

Parameter

url: The url of the XML document to be retrieved.

Examples 

• var myUser = new Model('/user.xml');
• var myUser = new Model('authentication.php');

Note: The data returned must be a valid XML document with a 'text/xml' MIME-Type.

Properties

url

The url from which the model was obtained.

document

The DOMDocument containing the XML representation of the model.
This property is only available after the execution of Controller.loadAssets

Note: You cannot access these properties directly. Use the Get and Set methods.

Methods

Get (propertyName)

Returns the value of the given property.

Set (propertyName, propertyValue)

Sets the property with the given value.

_getElementById(id)

This is a utility function that returns the XML element with the given id attribute. Use it instead of model.get('document').getElementById - which probably won't work.

View

Constructor

var view = new View(url, { options } )

Parameters

url: The url of the XSL document to be retrieved.

options: [optional] A javascript object with any of the following properties:

• placeholder: Either the id of the HTML element or the element itself where the view should be rendered.
• onRenderComplete: The function to be executed after the view is rendered. Use it to add behaviors to a view.

Example 

var myView = new View('/userDisplay.xsl', { placeHolder:'userDiv', onRenderComplete:myFunction } );

Note: The data returned must be a valid XML document with a 'text/xml' MIME-Type.

Properties

url

The url from which the view was obtained.

document

The DOMDocument containing the XSL template. You shouldn't need to access this property.

placeholder

Either the id of the HTML element or the element itself where the view should be rendered.

onRenderComplete

The reference to a function to be executed after a rendering is complete.

Note: You cannot access these properties directly. Use the Get and Set methods.

Methods

Get (propertyName)

Returns the value of the given property.

Set (propertyName, propertyValue)

Sets the property with the given value.

Controller

Controller is a static object (no constructor necessary) that provides the core functionalities of the framework. The important ones being loadAssets, render, update and save.

Properties

pageLoadComplete

True / False : True when the HTML page is fully loaded.

assetsLoadComplete

True / False : True when all models and views have been loaded.

throbberHtml

Code to be inserted while a server-side XSL Transformation takes place.

Default is: <p style='text-align: center'>Loading, please wait...</p>

xsltServiceUrl

Url of the Server-side XSL Transformation service. Used when no client-side XSLT Processor is available.

Default is: srvc-xslt.php

onPageLoadComplete

Reference to a function to call when the page is fully loaded. You shouldn't need this property. Use onLoadComplete instead.

onLoadComplete

The function to call when everything is ready to go.

onLoadError

The function to call if an asset (model or view) couldn't be loaded.

Note: Access and set the properties using javascript's object notation (no Get and Set here). For instance:

Controller.onLoadComplete = dispatcher;

Core Methods

loadAssets()

Loads all declared models and views and triggers the onLoadComplete handler when done.

reloadAsset(asset, callback)

Loads (or reloads) the specified asset (either a model or a view).

• callback: optional parameter. The function to call when the load is complete. If not provided, Controller.onLoadComplete is used.

render (model, view, {options} )

Performs the XSLT transformation (client-side if possible, server-side otherwise) and insert the results in the HTML document.

options is an optional javascript object with any of the following properties :

• onRenderComplete : the function to call after the rendering. If set, it overrides the view's onRenderComplete property.
• xslParams: an array of name/value pair to be used a XSL parameters for the transformation.
• placeholder: Either the id of the HTML element or the element itself where the view should be rendered. If set, this property override the view's placeholder property.

Note: render is an asynchronous operation on browsers without XSLT support. Use the onRenderComplete property to set a callback function.

update (model, view [, contextNode])

This method will go through every form field in the rendered view and automatically update the model. For update to work you need to :

1. Have one-to-one relationship between form fields and model elements or attributes.
2. Follow the Freja Update Notation convention for the form field name.
3. Set the form id attribute to match the model's element id attribute.

As an alternative to #3, you can provide the contextNode argument to indicate which part of the model should be updated.

save (model, {options} )

save will send an asynchronous POST request (using XmlHttpRequest) with 2 fields:

• model : Contains the URL used to retrieve the model (which should uniquely identify it).
• data : The serialized XML document.

The optional options object can have any of the following properties:

• url: By default the request is sent to the model's URL. Set this property to post to a different URL.
• onSaveComplete: The function to call back when the save operation is completed.
• onErrror : The function to call if an error occured.

handleSubmit( form, {options} )

This function replaces the normal form submit operation by an asynchronous XmlHttpRequest call.

• form is either the id of an HTML FORM element, or the element itself.

options is an optional javascript object with any of the following properties:

• onSuccess: The function to call upon success of the submit operation. Success is defined by a response with an HTTP Status code lower or equal to 304.
• onError: The function to call if the server reports an error (a response with an HTTP Status code higher than 400).
• updateModel: The model to update upon success. This works only if the server respond with a XML document and the 'text/xml' MIME type. The model will be replaced by the new XML document.

Helper Methods

See Helper Methods

The Undo-History Object

See Undo-History.

Debugging Functions

See Debug