View API (view.js)

View (view.js) is the base class of all view components. This document lists the APIs supported by view.

• In order to write a working component, you must implement the required functions.
• Task functions are those that are called by the system to complete the view's visualization tasks.
• The get functions can be used to determine the view state. They may come in handy for visualization purpose.
• The callback functions can be used to update view immediately after certain actions are taken, e.g. the view gets resized.

Required functions

// abstract, must be implemented by inheriting classes
createHandlers: function() {}

Specifies the classes for loader/controller/renderer.

Task functions

Genotet will return a view object upon its creation. The above functions may be called once the view is ready. For example,

var view = CreateView("my view", "chart");
view.load({...});
view.render();

Notice that a call to view's task function may be initiated from the system. There are 3 task functions to be fulfilled.

load: function(para) {
  // the load call is passed to loader
  this.loader.load(para);
},
control: function() {
  // the control call is passed to the controller
  this.controller.display();
},
render: function() {
  // the render call is passed to the renderer
  this.renderer.render();
},

Pay attention to the default implementations above. It is not required to override task functions and provide your custom implementions. You may choose not to override the above task functions if they cope well with your view's logic/pipeline.

Get functions

The get functions are used to retrieve the view's current state from loader/controller/renderer.

number getJqController: function() // returns the jquery selected node for controller
number getJqHeader: function() // returns the jquery selected node for header
number getJqCanvas: function() // returns the jquery selected node for canvas
number getViewWidth: function() // returns the view width
number getViewHeight: function() // returns the view height, including header
number getCanvasWidth: function() // returns the canvas width
number getCanvasHeight: function() // returns the canvas height, without view header

Callback functions

Callback functions are called when certain conditions are met, either on a single view or on the entire system. Currently there is only 1 supported callback.

// callbacks
void onResize: function() // fired when the view is resized

Others

There are other functions available for customization, though usually they don't need to be touched.

void prepareView: function() // defines the view's html elements
void prepareHeader: function() // defines the view's header
void prepareHeaderButtons: function() // defines the view's header button
void prepareCanvas: function() // defines the view's canvas
void prepareInteraction: function() // defines the view's interaction, e.g. clicking activates the view
void showDocument: function() // defines the document to be shown upon clicking the document button
void toggleViewHeader: function() // hide/show viewheader, triggered by double click
void close: function(options) // close the view
void highlightHeader: function() // highlight the viewheader (when view is activated)
void unhighlightHeader: function() // unhighlight the viewheader (when view is deactivated, i.e. other view is activated)