to specify self-contained components which consist of HTML5 code, CSS code
just as easily as linking an HTML5 page to another. It also helps combining
multiple reusable component within the same single page application.
The main focus of renderJS is graphic user interface (GUI) components such
as editors, viewers, fields or widgets. renderJS can also be used to define
reusable components with no GUI such as translators or format converters.
Let us suppose we want to add a text editor to an HTML5 page,
here is how we proceed:
<p>Text editor displays below:</p>
renderJS takes care of managing all dependencies and rendering.
This walkthrough is designed to get you started using a basic renderJS instance.
Download renderJS library, renderJS core as well as the dependencies required to start using core components.
The renderJS library
A custom version of RSVP to add cancellation support
Add the renderJS script to your HTML head:
The renderJS script provides HTML5 attributes which can be added to any HTML5 page.
<div data-gadget-url="hello-layout.html" data-gadget-scope="hello"></div>
Associates a gadget to a namespace which can later be used to retrieve a gadget programmatically
<div data-gadget-url="hello-layout.html" data-gadget-sandbox="iframe"></div>
Defines the sandboxing type of a gadget (iframe, public, etc.).
Get the currently loading gadget class (based on the HTML URL).
callback function with one parameter representing the gadget instance
GadgetKlass (to allow method chaining)
Declares an init function called at the gadget instance creation.
Declares a public asynchronous method of a gadget.
Declares an asynchronous callback executed when a gadget is included into the DOM.
Declares an asynchronous acquisition callback.
Declares an asynchronous method to acquire method from parent.
Returns the DOM element used by the gadget
Returns a newly created subgadget
Returns a previously created subgadget
Drop a reference to a previously created subgadget
A full renderJS application is a composition of multiple gadgets rendered
in the same page. More than this, a gadget URL can be rendered
simultaneously inside the page.
In order to achieve a working state, the gadget code should strictly
follow some rules:
renderJS inter gadget communication is always asynchronous. Promise
pattern is used to simplify the code and error handling. Take a coffee,
and read the
RenderJs has been successfully used for by
OfficeJs and SANEF.
RESILIENCE W3C Lightning Talk
or download as PDF.
> git clone https://git.erp5.org/repos/renderjs.git
> npm install
> grunt server
renderJS is an open-source library and is licensed under the LGPL license. More
information on LGPL can be found