Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Section
Column
width60%

This page describes the Fluid standard conventions for defining components of different types. Following these standards to a greater or lesser extent will result in differing levels of support and interoperability with other parts of the Fluid Framework.

General recommendations

A Fluid component should be

  • DOM agnostic: components should work with a variety of markup, and not make assumptions about the structure of the DOM. Any assumptions made by the component should be expressed in the form of selectors, supported by the framework's DOM Binder.
  • Accessible: components should be equally usable with either the mouse or the keyboard. ARIA roles and states should be used to ensure support for assistive technologies. Use the framework's keyboard-a11y plugin and the jQuery UI ARIA support.
  • this-free: Avoid use of JavaScript's this and new keywords, in favour of units and that-ism .
  • Testable: Components should be readily testable using the jqUnit testing toolkit. Tests should be provided for all component functions.
Column
Panel
borderColor#566b30
bgColor#fff
titleBGColor#D3E3C4
titleOn this Page
borderStylesolid
Table of Contents
minLevel2
maxLevel5
excludeIntroduction*
Panel
borderColor#321137
bgColor#fff
titleBGColor#c1b7c3
titleSee Also
borderStylesolid
Panel
borderColor#321137
bgColor#fff
titleBGColor#cccccc
titleStill need help?
borderStylesolid

Join the infusion-users mailing list and ask your questions there.

...

Property path

Type

Description

selectors

hash of strings

a set of selector strings which, when scoped to the container passed as the first argument, will nominate parts of the DOM which are "of interest" to the component. For information on naming conventions, see Class Name Conventions.

styles (optional)

hash of strings

Unlike selectors, these need to be globally namespaced, since they are expected to be referenced in style sheets to apply styles to parts of the component markup. For information on naming conventions, see Class Name Conventions.

mergePolicy (optional)

object

A "policy object" whose keys are EL paths into the options structure itself, and which encodes any special instructions to the framework to be followed when merging the user's options against any registered defaults. Documented on its own page at Options Merging for Fluid Infusion Components

listeners (optional)

hash of functions

a set of listener funtions to attach to supported events.

strings (optional)

hash of strings

a set of strings to inject into the user interface.

...

A Fluid component may be structured around a "model" (in the MVC sense) - conditions on "reasonable models" are described on Component Model Interactions and API. Model-bearing components have more requirements on the runtime structure of their that - in addition to the two basic members above, they will also possess the following:

...