|
Key
This line was removed.
This word was removed. This word was added.
This line was added.
|
Changes (14)
View Page History
...
{note}This tutorial applies to {color:purple}v1.3 and earlier{color}. For tutorials explaining how to use UIOptions v1.4 and later, please see the [docs:How-to Guides] in the new documentation space.{note} {column:width=60%}
This page will walk you through an example of adding the Fluid [UI Options and UI Enhancer|User Interface Options] Enhancer|fluid:(Floe) UI Options (2008-2009)] 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|User Interface Options] Enhancer|fluid:(Floe) UI Options (2008-2009)] 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|User Interface Options] Options|fluid:(Floe) UI Options (2008-2009)] see [fluid:User Interface Options Version A Design Overview]. For technical API documentation, see [UI Options API] and [UI Enhancer API].
h1. Tutorial: How to Use UI Options and UI Enhancer
...h2. 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 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|User Interface Options] in a dialog to do this.
You'd like to allow visitors to customize the presentation of 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|fluid:(Floe) UI Options (2008-2009)] in a dialog to do this.
These are the basic steps to add [UI Options and UI Enhancer|User Interface Options] to your application:
The basic steps to add [UI Options and UI Enhancer|fluid:(Floe) UI Options (2008-2009)] to your application are:
* [fluid:Setup |#setup]
* [Step 1: Prepare your markup |#step1]
* [Step 2: Add dependencies to the markup |#step2]
* [Step 2: Add dependencies to the markup |#step2]
...{column}
{panel:title=Status|borderStyle=solid|borderColor=#321137|titleBGColor=#aab597|bgColor=#fff}
{panel:title=Status|borderStyle=solid|borderColor=#321137|titleBGColor=#aab597|bgColor=#fff}
This component is in [Preview status|fluid:Component Status]
{panel}
...{panel}
{panel:title=See Also|borderStyle=solid|borderColor=#321137|titleBGColor=#c1b7c3|bgColor=#fff}
{panel:title=See Also|borderStyle=solid|borderColor=#321137|titleBGColor=#c1b7c3|bgColor=#fff}
* [User Interface Options]
* [fluid:(Floe) UI Options (2008-2009)]
* [UI Options API]
* [UI Enhancer API]
* [UI Enhancer API]
...h2. Step 2: Add dependencies to the markup
UI Options and UI Enhancer depend upon [Fluid Skinning System (FSS)|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|#step3] (note the CSS files go first):
{code:html}
...{code}
Now we will modify the {{initUIOptions}} function we created in [fluid:step 4|#step4]. 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}}.
{code:javascript}
...h2. Step 8 (Optional): Add UI Enhancer to other pages on your site
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|#step3].