WARNING: This documentation refers to an earlier version of Infusion.
View this page in the latest stable release documentation, or visit the latest release documentation home.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

...

Section
Column
width60%

This page will walk you through an example of adding the Fluid UI Options and UI Enhancer to a website.

This tutorial assumes that:

  • you are already familiar with HTML, Javascript and CSS
  • you are familiar with what the UI Options and UI Enhancer are and do
  • now you just want to know how to add them to your application.

UI Options requires UI Enhancer in order to apply the settings a user selects. UI Enhancer could be used alone in order to apply some effects to a page however its real power is when used in conjunction with UI Options. For more general information about UI Options see User Interface Options Version A Design Overview. For technical API documentation, see UI Options API and UI Enhancer API.

Tutorial: How to Use UI Options and UI Enhancer

Scenario

You're putting together a website that you know will have a diverse audience. You'd like to allow your visitors to customize the presentation of the site your website to their individual needs, such as enlarging the text, or increasing the visual contrast. This tutorial will show you how to use the Fluid UI Options in a dialog to do this.

These are the The basic steps to add UI Options and UI Enhancer to your application are:

The rest of this tutorial will explain each of these steps in detail.

Column
Panel
bgColor#fff
titleBGColor#aab597
titleStatus
borderStylesolid
titleStatus
borderColor#321137

This component is in Preview status

Panel
bgColor#fff
titleBGColor#D3E3C4
borderStylesolid
titleOn This Page
borderStylesolid
borderColor#566b30
Table of Contents
maxLevel5
minLevel2
Panel
bgColor#fff
titleBGColor#c1b7c3
borderStylesolid
titleSee Also
borderStylesolid
borderColor#321137
Panel
bgColor#fff
titleBGColor#cccccc
borderStylesolid
titleStill need help?
borderStylesolid
borderColor#321137

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

...

Anchor
setup
setup

Include Page
Infusion13:Tutorial SetupInfusion13:
Tutorial Setup

...

Anchor
step1
step1

...

UI Options and UI Enhancer depend upon Fluid Skinning System (FSS) so the CSS files will need to be included. You'll also need to add the Fluid Infusion JavaScript to your HTML file. In the header of the file, link to the CSS files with <link> tags and the JavaScript files with <script> tags. Let's also link to a JavaScript file that we will create in fluid:step 3 (note the CSS files go first):

...

NOTE that the InfusionAll.js file is minified - all of the whitespace has been removed, so it isn't really human-readable. If you're using the source distribution and you want to be able to debug the code, you'll want to include each of the required files individually. Instead of including InfusionAll.js you would include this:

Include Page
Infusion13:UI Options DependenciesInfusion13:
UI Options Dependencies

But all of these individual files are not necessary to make it work - the InfusionAll.js file has everything you need.

...

Now we will modify the initUIOptions function we created in fluid:step 4. We will add an afterRender listener to the UI Options component and include there the declarations needed to decorate the component with an accordian. Don't forget to pass the newly created options variable to uiOptions.

...

Your site may not have the UI Options interface available on every page, however, you do want your users settings to be applied to your entire site. In order to do this you will need to add a UI Enhancer to every page by following the instructions in fluid:step 3.