Skip to content
poffdeluxe edited this page Oct 19, 2012 · 26 revisions

HTML 5 InfoComposer's purpose is to enable dynamic rendering and editing of information compositions in the web browser.

Components

  • composer.js
    • Javascript file which contains the code for dynamically rendering a JSON information composition.
  • composer.css
    • CSS styling for the composition and metadata display.

How To Use

To use HTML5 InfoComposer you will need to include the 2 files (composer.js and composer.css) in your page.

These files are location at: https://svn.ecologylab.net/ecologylabSemanticsJavaScript/trunk/infoComposerLite/release

To build the visual composition object call the function createCompositionVisual(compositionJSON) which takes one parameter, the information composition as a JSON object. This function will return an HTML div object which you can then append into the body of your page.

Feel free to modify the styling in composer.css to suit your needs and designs.

Examples

var compositionJSON = { information_composition: ..... }; <br/><br/> var compositionVisual = createCompositionVisual(compositionJSON); <br/><br/> document.body.appendChild(compositionVisual );

This code calls createCompositionVisual with a JSON composition object. At the moment your web application is responsible for providing this object. The constructed compositionVisual HTML object can then be appended anywhere into your page.



A complete example can be found at: https://svn.ecologylab.net/ecologylabSemanticsJavaScript/trunk/infoComposerLite/release/infoComposerTest

Clone this wiki locally