This project is read-only.


The characterization of 5Widgets as an MVC framework does not refer to ASP.NET MVC. It refers to the architectural and coding approach used. Below is an overview of the architecture of the framework.


The controller functionality is implemented in the UIController object in UIController.js file. The controller's public interface consist of Properties, Methods, & Events. It's role, in harmony with the MVS design pattern we use, is:

  • Intercepting user actions on the canvas and translating them into events on parts
  • Keeping a record of which part currently has focus
  • Registering and de-registering parts
  • Rendering parts when necessary by calling their render() method

Host Page

An HTML5 host page is required to stage and run 5Widgets. A sample host page (in index.html) is included to illustrate how to construct such a page. This host page references external JS files for each part it uses, includes an HTML5 canvas element. In a script, it instantiates both an HTML5 canvas 2D Context object, and a UIController object from the 5Widgets library. With these in place, the host page acts as a controller of sorts, passing page events on the Context object to the UIController object.


  •  Part implement Properties, Methods, and Events.
  • They must be registered with controller to function properly at all.
  • Some parts (ScrollPanel) are containers that can contain other parts as child parts
  • The role of parts is to implement widget functionality
  • Most of such functionality can (and preferably should) be implemented with public Properties and Events rather than public Methods
  • Controller expects parts to implement an interface, which is described in the parts interface section

Parts Interface

Member Category Comments
keyDown (key) Method for control character key events
mouseUp (x coordinate, y coordinate)    
mouseOut ()   no coordinates needed
mouseDown (x coordinate, y coordinate)    
click (x coordinate, y coordinate)    
mouseMove (x coordinate, y coordinate)    
mouseOver (x coordinate, y coordinate)    
keyPress (key)   for printable character key events
render ()   called by controller


Last edited Jun 8, 2012 at 8:40 AM by prmph, version 6


No comments yet.