This tutorial has not yet been re-written to reflect the recent refactoring of the Preferences Framework. Stay tuned...
The Full Page With Preview version of UI Options displays the interface controls in a separate page and includes a Preview pane that is updated automatically as the user adjusts the controls. This tutorial will walk you through the process of setting up the full page with preview version of UI Options.
NOTE that the UI Options component is pretty much useless without the UI Enhancer added to the pages of your site, so we highly recommend you visit the UI Enhancer tutorial to learn how to add the UI Enhancer to the pages of your site.
This tutorial assumes that:
Tutorial - Page Enhancer
Tutorial - Full Page UI Options
Tutorial - Fat Panel UI Options
Working With A Preferences Editor On Your Site
UI Options Instructional Demos
Full Page UI Options (with Preview)
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 create a page for the Infusion UI Options component.
These are the basic steps to create a UI Options page for your site:
The rest of this tutorial will explain each of these steps in detail.
Step 1: Prepare your page
The UI Options component includes templates for its user interface, so you do not need to actually create any HTML if you're happy with the defaults. For the full-page (with preview) version of UI Options, all you need to do is create an HTML page that has:
You might also choose to add a heading to the page. This all might look as shown below:
Note that we've put an ID on the
If you open this page in your browser, you'll only see the header, since UI Options isn't present on the page yet:
Step 2: Add dependencies to the page
You'll also need the UI Options CSS files specific to the Full Page UI Options with the Preview:
Step 3: Write a script to create the UI Options component
We will use the options to tell the component about two things:
Now, when you load your page in your browser, you will see the UI Options controls, but there will be no Preview yet. UI Options will work: If you adjust the controls and click "Save and Apply," your changes will be applied to the page. There's just no Preview.
Step 4: Prepare the Preview template
UI Options does not come with a default Preview template – you must provide your own. Your users will be best served if the preview looks somewhat like your site.
The simplest way to use the Preview is through UI Options' default behaviour. Name your Preview template file as follows:
and place it in the same folder as your main UI Options HTML file. If you follow this convention, UI Options will automatically find your Preview template.
The Preview template file will be loaded into an
Enhancing the Preview
A UI Enhancer will automatically be applied to the page in the preview
Now when you load the page, you'll see your Preview template visible in the right half of the screen:
One last thing!
Don't forget to add a link to the the UI Options page to your site – somewhere easy-to-find, such as your site's header or footer.