User:Karman chan/sandbox

Fluid Infusion
Developer(s)	Fluid Community
Initial release	April 9, 2009
Stable release	1.4 / August 13, 2011
Written in	HTML, CSS and JavaScript
License	Educational Community License (ECL 2.0) and Berkeley Software Distribution (BSD licenses)
Website	fluidproject.org

This is the user sandbox of Karman chan. A user sandbox is a subpage of the user's user page. It serves as a testing spot and page development space for the user and is not an encyclopedia article. Create or edit your own sandbox here.

Other sandboxes: Main sandbox | Template sandbox

Finished writing a draft article? Are you ready to request review of it by an experienced editor for possible inclusion in Wikipedia? Submit your draft for review!

Fluid Infusion is an open source software project that aims to develop and design “easy to use” and “easy to build” user interfaces ^[1]. 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

Fluid

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” ^[2] 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 ^[3]. 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.

Production-Level Components

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 ^[4]:

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 ^[5] :

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 ^[6] :

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 ^[7]:

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 ^[8] :

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 ^[9] :

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 ^[10] :

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 ^[11] :

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

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 ^[12] :

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.

Version number	Release date	Additional notes
1.4	October 13, 2011	Major update.
1.3.1	February 23, 2011
1.3	December 23, 2010	Sneak Peek at the new Inversion of Control (IoC) system.
1.2.1	September 7, 2010
1.2	April 14, 2010	Mobile friendly upgrade.
1.1.3	August 31, 2010
1.1.2	October 15, 2009
1.1.1	August 12, 2009
1.1	June 2, 2009	Ability to create custom builds.
1.0	April 9, 2009

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.

Related Tools

References

^ "Fluid Infusion". Fluid. Retrieved 22 September 2012.
^ "Fluid - Our Mission". Fluid. Retrieved 30 September 2012.
^ "Accessible UIs with JQuery and Infusion Presentation". Colin Clark. Retrieved 22 September 2012.
^ "Infusion Component - Simple Text Inline Edit". Fluid. Retrieved 22 September 2012.
^ "Infusion Component - List Reorderer". Fluid. Retrieved 30 September 2012.
^ "Infusion Component - Grid Reorderer". Fluid. Retrieved 30 September 2012.
^ "Infusion Component - Image Reorderer". Fluid. Retrieved 30 September 2012.
^ "Infusion Component - Layout Reorderer". Fluid. Retrieved 30 September 2012.
^ "Infusion Component - User Interface Options". Fluid. Retrieved 30 September 2012.
^ "Infusion Component - Uploader". Fluid. Retrieved 30 September 2012.
^ "Infusion Component - Progress". Fluid. Retrieved 30 September 2012.
^ "Infusion Component - Pager". Fluid. Retrieved 30 September 2012.

Category:Free software projects Category:Software using the BSD license Category:Software using the ECL license Category:OCAD University

[infusion-1] "Fluid Infusion". Fluid. Retrieved 22 September 2012.

[fluidMission-2] "Fluid - Our Mission". Fluid. Retrieved 30 September 2012.

[frameworkDetail-3] "Accessible UIs with JQuery and Infusion Presentation". Colin Clark. Retrieved 22 September 2012.

[infusionComponentSimpletextInline-4] "Infusion Component - Simple Text Inline Edit". Fluid. Retrieved 22 September 2012.

[infusionComponentListReorderer-5] "Infusion Component - List Reorderer". Fluid. Retrieved 30 September 2012.

[infusionComponentGridReorderer-6] "Infusion Component - Grid Reorderer". Fluid. Retrieved 30 September 2012.

[infusionComponentImageReorderer-7] "Infusion Component - Image Reorderer". Fluid. Retrieved 30 September 2012.

[infusionComponentLayoutReorderer-8] "Infusion Component - Layout Reorderer". Fluid. Retrieved 30 September 2012.

[infusionComponentUserInterfaceOptions-9] "Infusion Component - User Interface Options". Fluid. Retrieved 30 September 2012.

[infusionComponentUploader-10] "Infusion Component - Uploader". Fluid. Retrieved 30 September 2012.

[infusionComponentProgress-11] "Infusion Component - Progress". Fluid. Retrieved 30 September 2012.

[infusionComponentPager-12] "Infusion Component - Pager". Fluid. Retrieved 30 September 2012.

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]