Renderer

Overview

Fluid Infusion includes a client-side Renderer that allows users to create user interface templates in pure HTML, and render the pages entirely on the client side.

The Renderer offers a clean separation of Model and View: it works with internal component trees that are independent of the mark-up, supporting the Fluid goal of DOM agnosticism.

The diagram shown provides a high-level overview of the fluid:basic renderer process. The Renderer works with a number of objects provided by the integrator:

• Component Tree
• Templates
• Data Model (optional)
• Decorators (optional)

Each of these objects, and what the Renderer does with it, is described below (and in related documents).

Component Trees

A Component Tree is a JavaScript object that specifies the abstract properties of the View to be rendered and the behaviour of its components, independent from the rendering technology to be used.

For example, if your UI is going to allow users to select from a number of choices, your component tree will define the choices, but will be independent of whether or not the selection is rendered using checkboxes, a pull-down list, or some other method.

For more detailed information about component trees, see Renderer Component Trees.

Templates

A Renderer Template is an HTML file or snippet that provides guidance to the Renderer regarding how to render the component tree.

For more detailed information about templates, see Renderer Templates.

Data Binding

The Renderer is capable of binding your data model to the rendered markup, so that any changes made by the user through the interface are reflected in the model.

For more detailed information about data binding, see Renderer Data Binding.

Decorators

Decorators allow users of the Renderer to attach various things, such as functions, class names, etc., to the components at render time. A number of different types of decorators are currently supported.

For more detailed information about decorators, see Renderer Decorators.

API

For technical API documentation, see Renderer API.

Basic Renderer Process