User:Karman chan/sandbox

Fluid Infusion is an open source software project that aims to develop and design “easy to use” and “easy to build” user interfaces. Infusion consists of the JavaScript Infusion Framework and a collection of ready-to-use Web components that are highly accessible, customizable and reusable. A growing number of production applications are using Infusion, such as CollectionSpace, uPortal, OER Commons, and the Global Public Inclusive Infrastructure.

Partners & Contributors


The Infusion Framework and components are designed and built by an international cross-disciplinary team of developers, designers and Web accessibility experts.

Infusion is part of Fluid, an open source software committee with the goal of “improving the user experience of community and open source web applications” Fluid is a project of the Inclusive Design Research Centre at OCAD University and funded by a grant from The Andrew W. Mellon Foundation.

List of current Fluid committers and contributors

Infusion JavaScript Framework
The Infusion Framework is an Inversion of Control-driven component system. It uses a Model-View architecture where the underlying models are transparent allowing users to take advantage of building their own UI components. Other features include backwards compatibility and multiple version support, full namespace support, workflow support, custom theme support, and A-Grade browser support. Infusion was also designed to complement and work alongside the jQuery toolkit.

Unlike other open source frameworks and components, the design of Infusion focuses on user-centered design, Web usability and Web accessibility. To date, all out-of-the-box components are fully keyboard accessible. Also, the Infusion Framework is extensively tested with adaptive technologies, such as a screen reader.

The Infusion Framework consists of three core modules: (1) Renderer, (2) Fluid Skinning System, and (3) Keyboard Accessibility Plugin.

Renderer
The Infusion Renderer module allows developers to create user interface templates in pure HTML and render the pages entirely on the client-side. The Renderer separates the Model and View through an internal component tree that is independent of the mark-up.

Fluid Skinning System
The Fluid Skinning System module is a modular CSS framework that allows styling content and layouts quickly and easily. The modular design allows developers to add, remove and mix classes.

Keyboard Accessibility Plugin
The Keyboard Accessibility Plugin module is a jQuery Keyboard Accessibility Plugin that makes it easy for developers to add keyboard handlers to their code.

Infusion Components
Infusion components are built on top of the Infusion Framework and developed with a combination of HTML, CSS and JavaScript. Some components contain subcomponents and some are standalone. By compartmentalizing the Infusion components, the developer has easier control of the behavior, styling and markup. Depending on the component, it can support: (1) Event, (2) Model, (3) View, and (4) Renderer.

The following are examples of this infrastructure:

(1) Event: An Event is an action that is triggered by the user or application. For example, the Uploader component triggers an afterUploadComplete event once a file upload has completed. Developers have the ability to attach a listener to this event that displays a message to users, such as an "Upload Complete" message.

(2) Model: A Model contains the logical structure of data and business rules. For example, in the Pager component, a Model allows users to break up long lists of items into separate pages, maintain the Model including what the current page is, show how many items are on each page, and display how the list is sorted.

(3) View: A View exposes the Model and the Event to the user through the user interface. In other words, a View represents the data output the user sees on screen. For example, in the Pager component, a View might contain a 'Next' button, which when the user selects, updates the screen with a new set of data.

(4) Renderer: A Renderer is like a View except it allows for a greater separation between the Model and the View. It allows data binding and creation of an HTML template. For example, if your UI allows users to select from a number of choices, your component tree will define the choices, but will be independent of whether the selection is rendered using checkboxes, a pull-down list, or another method.

Infusion components are assigned a production-level, preview-level or design-level status. Production-level status indicates a stable release that has been thoroughly tested for usability and accessibility and supports a wide range of Web browsers. Preview-level status indicates a component currently in development and supports a limited number of Web browsers. Design-level status indicates a component that has completed design but has not started development.

Simple Text Inline Edit
The Simple Text Inline Edit component allows the user to edit text directly on the page without the need to change screens. This component contains two subcomponents. The first subcomponent makes the input field editable (edit mode). The second subcomponent displays a hint/tooltip indicator (view mode).

Features :


 * Switch to a text field by selecting the editable text area
 * Display the original text in a text field when in edit mode
 * Save text changes by deselecting the text field
 * Support undo and redo

Reorderer Components
The Reorderer Component is a parent object with a collection of four types of reorderer components (List Reorderer, Grid Reorderer, Image Reorderer and Layout Reorderer). See below for details of each component.

List Reorderer
The List Reorderer component allows the user to reorder elements in a vertical or horizontal list with the mouse or keyboard.

Features :
 * Drag-and-drop elements in a list to reorder the list
 * Use the keyboard to reorder the list (e.g., arrow keys and Enter key)
 * Configurable option to include numbering of list items
 * Automatic renumbering of items as the list changes
 * Customizable visual cues (e.g., selected item and pre-committed ordering)

Known issues:
 * Component does not work well using a Mac keyboard.

Grid Reorderer
The Grid Reorderer component allows the user to reorder elements inside a structured grid (or table) containing rows and columns.

Features :
 * Drag-and-drop elements in a list to reorder the list
 * Use the keyboard to reorder the list (e.g., shortcut keys)

Image Reorderer
Similar to the Grid Reorderer Component, the Image Reorder component allows the user to reorder a collection of images.

Features :
 * Drag-and-drop elements in a list to reorder the list
 * Use the keyboard to reorder the list (e.g., shortcut keys)
 * Screen reader support
 * Screen magnifier support
 * Low screen resolution support
 * Linear layouts support

Layout Reorderer
The Layout Reorderer component allows the user to reorder the contents of a portlet or among several portlets in a portal interface.

Features :
 * Drag-and-drop elements within the portlet or between portlets
 * Keyboard navigation capabilities
 * Configurable option to "lock" content
 * Customizable drag handles
 * Customizable colour contrast themes

Preview-Level Components
Preview-Level components are currently in development and have limited browser support.

User Interface Options
The User Interface Options component is a collection of presentation options that allows the user to personalize the Web page. This component comes with a built-in in-page preview, which allows the user to view the changes before applying it to the Web page.

Features :
 * Change a Web page’s text size, text style, line spacing and color contrast
 * Display a table of contents
 * Automatically emphasize links (bold, larger font size and underline)
 * Automatically make input features larger (buttons, drop down menu, text fields)
 * Manage cookies

Uploader
The Uploader component allows the user to upload a file. This component contains several subcomponents: (1) a file queue view to allow the user to upload multiple files at once, (2) a total progress bar view to show the processing status, and (3) a file details view to show the filename and file size.

Features :
 * Allows selecting multiple files in a single OS-specific file dialog
 * Shows the selected files in a queue
 * Allows adding or removing files from the queue
 * Provides complete progress information as the files upload
 * Shows whether the files have been uploaded successfully or not
 * The user interface is completely customizable in HTML. With the exception being the OS specific file open dialog.

Progress
The Progress component is a progress bar that displays the progress of an operation. Progress information is displayed visually and textually (e.g., 88% complete). The Progress component can be used as a standalone component or integrated with other Infusion components, such as the Uploader control.

Features :
 * Component is fully customizable
 * Accessible with ARIA support
 * Customizable hide and show animations
 * Used as a standalone component or integrated with other Infusion components

Pager
The Pager component shows the user how many pages/items are left in a list of items. The component is fully customizable allowing the developer to control how items are displayed and the type of navigational features available to the user.

Features :
 * Allow users to change the number of items shown per page
 * Allow users to jump to the first, last, and the "middle" pages easily
 * Allow users to jump to an item or a certain set of records (e.g. students with a last name starting with "L")
 * Be aware of the length of list and do not display widget when there is only one page
 * Show users how many items there are and where they are in the list (i.e. viewing 11 - 20 of 2,356)
 * Remember users' paging settings and save it across visits to the site

Release History
The Infusion project started on May 20, 2007. The first version was released in 2009. According to GitHub, there are currently 27 contributors who are managing the code-base.

Browser Compatibility
As of version 1.4:

Mac OS X 10.6: * Safari 5 * Firefox

Windows XP: * Firefox * Internet Explorer 6 * Internet Explorer 7 * Internet Explorer 8 * Google Chrome

Windows 7: * Firefox * Internet Explorer 8 * Internet Explorer 9

Licensing
Fluid Infusion is released under the Educational Community License (ECL 2.0) and Berkeley Software Distribution License (BSD licenses).

Public Response
The User Interface Options component is a WAI-ARIA Enabled UI Options Plugin for WordPress. No ratings information available.

Further Readings

 * Infusion
 * Infusion Current Releases
 * Infusion Licensing
 * Infusion Documentation - API and Demos
 * Infusion - How to Guides
 * Fluid Project Blog

Related Tools

 * Fluid
 * Fluid Projects
 * jQuery
 * Mozilla Developer Network - Web applications and ARIA
 * The Paciello Group - Popular JavaScript UI Libraries