Fluid components are reusable user interfaces that take the hard work out of supporting rich interaction in a Web application. Components are often larger than familiar widgets in a UI toolkit, taking into account user workflows and sequences. Examples of Fluid components include file uploaders, content pickers, and smart playlists, portal navigation, and direct manipulation such as drag and drop.

More...

Released Components

		Layout Customizer The Layout Customizer is an implementation of the Reorderer configured for changing the layout of content modules, for example portlets within a portal environment.

		Lightbox The Lightbox is a JavaScript-based user interface component that lets users reorder images within a collection.

		Reorderer The Reorderer is a set of JavaScript objects that can be used by developers to create rich, accessible user interfaces that allow users to directly move around and re-arrange content on the page.

Components in design

Uploader — The Uploader is a file-upload component that supports multi-file uploads, and allows the user to queue files, and start, pause, and resume the upload.

Date Picker

Pager Design Overview — Allow users to break up long lists of items into separate pages.  They should be able to decide if they want paging and how many per page.

Inline Edit — Allow users to edit content within the context of their work rather than going to an "edit mode". Data thus edited tends to be brief, in keeping with the desire for rapid, little changes.

Auto Complete

Navigation Tabs

What is a Fluid Component?

Fluid components are reusable user interfaces that take the hard work out of supporting rich interaction in a Web application. Components are often larger than familiar widgets in a UI toolkit, taking into account user workflows and sequences. Examples of Fluid components include file uploaders, content pickers, and smart playlists, portal navigation, and direct manipulation such as drag and drop.

Fluid components are built from the beginning to be accessible and highly flexible. They can be adapted and modified to suit a particular use case or institutional requirement. They can also be styled and adapted at runtime to meet unique accessibility needs, allowing users to specify personal UI preferences.

From a technical perspective, Fluid components are built using JavaScript, DHTML, and CSS. They cooperate with the server, embracing unobtrusive markup and graceful degradation. Fluid components often take a "decorative" or markup-driven approach, in which they enhance semantic HTML delivered from the server with greater richness and interactivity. Fluid components are built in configurable units, allowing them to be easily modified and customized.

What is the Component Library?

The Fluid component library is a growing collection of reusable, rich, and accessible user interface components that can be used across web applications. Over time, the component library will serve as a trusted source of reliable, inclusive, and easy to use interfaces that can be expanded and contributed to by all.
We're soliciting ideas and suggestions for new Fluid components that will help to improve the user experience of open source web applications. Please add your suggestions to the Potential Component Matrix page.

Components are reusable chunks of UI real estate that can be plugged into compatible web applications. They will be supported by the underlying [Fluid Framework], which is comprised of a number of low-level UI services intended to make user interface development in JavaScript and DHTML significantly easier. Framework services will include drag-and-drop support, reusable AJAX connection strategies, DOM manipulation, keyboard handlers, and more.