development codebase

Getting around the codebase

Building

Building takes all the development files then concatenates and minifies them into 2 files - kiwi.js and kiwi.min.js. Each file is wrapped into a closure to prevent runtime access.

If modifying the build script please take note of the order the scripts are processed - some scripts have previous dependancies that must be processed beforehand!

To build production ready code from the development files, run: $ node client/assets/dev/build.js

Kiwi boot-up process

Kiwi uses a simple script loader to load all javascript files asynchronously to help speed things up. Just as with the build script the order that the files are loaded are important as many have previous dependancies that must be met.

The script loader is included within index.html along with the loading of the correct javascript files, ie. development or production. Development files are loaded if a debug value is found in the query string otherwise kiwi.min.js will be loaded.

For third party use, an API interface is created at window.kiwi to allow plugins to extend kiwi. This contains multiple methods to interface with specific kiwi internal objects.

Components

Panels kiwi.model.Panel

Panels are the basic containers for displaying content within the Kiwi application. They manage the tabs to access the content, the positioning of content on the window and the opening/closing of the content. Tabs for a panel are not displayed until the panel has been added into the panel collection via kiwi.app.panels.add(my_panel). Several helper objects exist that extend the Panel functionality for common purposes.

Applets kiwi.model.Applet

An applet is either an internal or external module loaded into a Panel, stored and cached at kiwi.applets. Built in applets include the Settings applet. Extending the Backbone.Model object, the applet may take full use of backbone functionality. If a view element exists in the applet, the $el property of this is added into its containing Panel when/if displayed. Applets may or not may not include UI components.

var applet = new kiwi.model.Applet();        // Create an applet instance

applet.load(new kiwi.applets.Settings());    // Load a cached applet <br/>
applet.load('http://url/to/applet.js');      // External applets may be loaded at runtime by passing a url instead
kiwi.app.panels.add(applet);                 // Optionally add the applet to the tabs to display a UI

Message kiwi.app.message

An instance of kiwi.view.StatusMessage, this allows status and important warnings to be given to the user in the form of a drop down bar underneath the toolbars. You can either apply plain text or HTML to be displayed via kiwi.app.message.text('Alert text') or kiwi.app.message.html('<i>Alert text</i>') respectively.

You may pass an object as the second parameter to either of these methods to specify multiple further options. For example - the length of time message is to be displayed: kiwi.app.message.text('Alert text', {timeout: 10000});

Supported options are:

• timeout The length of time in MS the message is to be displayed
• type The classname to be added to the HTML element for custom styling

To be continued..