Page Comparison

Info

title	Work in ProgressDeprecated documentation

This is a working space for creating documentation on integrating UI Options for end users who are not traditional "developers". The intent is to create and refine this documentation so it can be integrated into the official Infusion documentation.

Please leave feedback in the comments section, or send email to: jhung (at) ocadu.ca

documentation has been deprecated and is not up to date with the current code base.

For the most up to date documentation for UI Options, see "Setting up User Interface Options" on the Infusion Documentation website.

Overview of Steps

Part 1: Preparing

...

Add the UIO HTML snippets to your project's HTML pages
Add the UIO Javascript snippets to your project's HTML pages

Part 4: Tweaking and Customizing UI Options

Tweaking your site's styling and structure to work with UI Options

...

Now that Infusion has been built and copied into your project, you can now add UI Options into your project.

Adding the Sliding Panel

The UI Options component includes HTML templates for all the controls, so you don't need to create any HTML for them. You only need to add a small amount of markup to the top of your webpage to tell UI Options where to render itself.

As an example, let's start with a simple HTML page:

Code Block

language	xml

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>My Project</title>
    </head>
    <body>
        <h1>This is my project</h1>
        <p>This is a paragraph.</p>
    </body>
</html>

Add the following markup at the very beginning within your <body> tag to your page html:

Code Block

language	xml

<!-- UI Options Sliding Panel -->
<div class="flc-prefsEditor-separatedPanel fl-prefsEditor-separatedPanel">
    <!-- This is the div that will contain the Preference Editor component -->
    <div class="flc-slidingPanel-panel flc-prefsEditor-iframe"></div>
    <!-- This div is for the sliding panel that shows and hides the Preference Editor controls -->
    <div class="fl-panelBar">
        <span class="fl-prefsEditor-buttons">
            <button id="reset" class="flc-prefsEditor-reset fl-prefsEditor-reset">
                <span class="fl-icon-undo"></span>
                Reset
            </button>
            <button id="show-hide" class="flc-slidingPanel-toggleButton fl-prefsEditor-showHide">
                Show/Hide
            </button>
        </span>
    </div>
</div>

So our example will look like this now:

Code Block

language	xml

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>My Project</title>
    </head>
    <body>
        <!-- UI Options Sliding Panel -->
        <div class="flc-prefsEditor-separatedPanel fl-prefsEditor-separatedPanel">
            <!-- This is the div that will contain the Preference Editor component -->
            <div class="flc-slidingPanel-panel flc-prefsEditor-iframe"></div>
            <!-- This div is for the sliding panel that shows and hides the Preference Editor controls -->
            <div class="fl-panelBar">
                <span class="fl-prefsEditor-buttons">
                    <button id="reset" class="flc-prefsEditor-reset fl-prefsEditor-reset">
                        <span class="fl-icon-undo"></span>
                        Reset
                    </button>
                    <button id="show-hide" class="flc-slidingPanel-toggleButton fl-prefsEditor-showHide">
                        Show/Hide
                    </button>
                </span>
            </div>
        </div>
        <h1>This is my project</h1>
        <p>This is a paragraph.</p>
    </body>
</html>

The Table of Contents

One of the UI Options controls allows users to add a Table Of Contents to the top of the page. You need to add a placeholder <div> to your page for the Table Of Contents. It should have a class of "flc-toc-tocContainer" like this:

Code Block

language	xml

<div class="flc-toc-tocContainer"> </div>

Where exactly on your page you put this is up to you, but it will depend on the exact layout of your page. It should be pretty close to the top, so that it's easily visible and accessible quickly for keyboard-only users. You can, of course, add additional classes of your own to style the Table Of Contents to fit in with the look of your site.

The example will now look like this with the table of contents container added:

Code Block

language	xml

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>My Project</title>
    </head>
    <body>
        <!-- UI Options Sliding Panel -->
        <div class="flc-prefsEditor-separatedPanel fl-prefsEditor-separatedPanel">
            <!-- This is the div that will contain the Preference Editor component -->
            <div class="flc-slidingPanel-panel flc-prefsEditor-iframe"></div>
            <!-- This div is for the sliding panel that shows and hides the Preference Editor controls -->
            <div class="fl-panelBar">
                <span class="fl-prefsEditor-buttons">
                    <button id="reset" class="flc-prefsEditor-reset fl-prefsEditor-reset">
                        <span class="fl-icon-undo"></span>
                        Reset
                    </button>
                    <button id="show-hide" class="flc-slidingPanel-toggleButton fl-prefsEditor-showHide">
                        Show/Hide
                    </button>
                </span>
            </div>
        </div>

        <!-- Table of Contents -->
        <div class="flc-toc-tocContainer"> </div>

        <h1>This is my project</h1>
        <p>This is a paragraph.</p>
    </body>
</html>

Add CSS and Javascript Links

In the <head> of your HTML file, you now need to link to the UI Options CSS and Javascript. To do this, the following should be added to <head>:

Code Block

language	xml

<!-- UI Options CSS -->
<link rel="stylesheet" type="text/css" href="infusion/src/lib/normalize/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="infusion/src/framework/core/css/fluid.css" />
<link rel="stylesheet" type="text/css" href="infusion/src/framework/preferences/css/Enactors.css" />
<link rel="stylesheet" type="text/css" href="infusion/src/framework/preferences/css/PrefsEditor.css" />
<link rel="stylesheet" type="text/css" href="infusion/src/framework/preferences/css/SeparatedPanelPrefsEditor.css" />'

<!-- The Infusion Library -->
<script type="text/javascript" src="infusion/infusion-all.js"></script>

Note: In the above snippet, it assumes the Infusion directory is sibling to the location of the HTML file. You may have to adjust the path in the <link> and <script> elements to match your particular directory structure.

If you open this page in your browser now, you'll only see that the button has been styled differently: it is in the upper right corner and the font has been changed. You can also see the bar of the sliding panel. The button still doesn't do anything, since we still haven't added the UI Options component to the page.

Our example should now look like this:

Code Block

language	xml

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>My Project</title>
		<!-- UI Options CSS -->
        <link rel="stylesheet" type="text/css" href="infusion/src/lib/normalize/css/normalize.css" />
        <link rel="stylesheet" type="text/css" href="infusion/src/framework/core/css/fluid.css" />
        <link rel="stylesheet" type="text/css" href="infusion/src/framework/preferences/css/Enactors.css" />
        <link rel="stylesheet" type="text/css" href="infusion/src/framework/preferences/css/PrefsEditor.css" />
        <link rel="stylesheet" type="text/css" href="infusion/src/framework/preferences/css/SeparatedPanelPrefsEditor.css" />'

        <!-- The Infusion Library -->
        <script type="text/javascript" src="infusion/infusion-all.js"></script>
    </head>
    <body>
        <!-- UI Options Sliding Panel -->
        <div class="flc-prefsEditor-separatedPanel fl-prefsEditor-separatedPanel">
            <!-- This is the div that will contain the Preference Editor component -->
            <div class="flc-slidingPanel-panel flc-prefsEditor-iframe"></div>
            <!-- This div is for the sliding panel that shows and hides the Preference Editor controls -->
            <div class="fl-panelBar">
                <span class="fl-prefsEditor-buttons">
                    <button id="reset" class="flc-prefsEditor-reset fl-prefsEditor-reset">
                        <span class="fl-icon-undo"></span>
                        Reset
                    </button>
                    <button id="show-hide" class="flc-slidingPanel-toggleButton fl-prefsEditor-showHide">
                        Show/Hide
                    </button>
                </span>
            </div>
        </div>

        <!-- Table of Contents -->
        <div class="flc-toc-tocContainer"> </div>

        <h1>This is my project</h1>
        <p>This is a paragraph.</p>
    </body>
</html>

Initialize the UI Options JavaScript

We will now need to initialize UI Options. To do this you will need to add the following <script> block before the closing </body> tag in your HTML file.

Code Block

language	xml

<script type="text/javascript">
    $(document).ready(function () {
        fluid.uiOptions.prefsEditor(".flc-prefsEditor-separatedPanel", {
            tocTemplate: "infusion/src/components/tableOfContents/html/TableOfContents.html",
            terms: {
                templatePrefix: "infusion/src/framework/preferences/html",
                messagePrefix: "infusion/src/framework/preferences/messages"
            }
        });
    })
</script>

So in our example, the HTML should now look like this:

Code Block

language	xml

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>My Project</title>
		<!-- UI Options CSS -->
        <link rel="stylesheet" type="text/css" href="infusion/src/lib/normalize/css/normalize.css" />
        <link rel="stylesheet" type="text/css" href="infusion/src/framework/core/css/fluid.css" />
        <link rel="stylesheet" type="text/css" href="infusion/src/framework/preferences/css/Enactors.css" />
        <link rel="stylesheet" type="text/css" href="infusion/src/framework/preferences/css/PrefsEditor.css" />
        <link rel="stylesheet" type="text/css" href="infusion/src/framework/preferences/css/SeparatedPanelPrefsEditor.css" />'

        <!-- The Infusion Library -->
        <script type="text/javascript" src="infusion/infusion-all.js"></script>
    </head>
    <body>
        <!-- UI Options Sliding Panel -->
        <div class="flc-prefsEditor-separatedPanel fl-prefsEditor-separatedPanel">
            <!-- This is the div that will contain the Preference Editor component -->
            <div class="flc-slidingPanel-panel flc-prefsEditor-iframe"></div>
            <!-- This div is for the sliding panel that shows and hides the Preference Editor controls -->
            <div class="fl-panelBar">
                <span class="fl-prefsEditor-buttons">
                    <button id="reset" class="flc-prefsEditor-reset fl-prefsEditor-reset">
                        <span class="fl-icon-undo"></span>
                        Reset
                    </button>
                    <button id="show-hide" class="flc-slidingPanel-toggleButton fl-prefsEditor-showHide">
                        Show/Hide
                    </button>
                </span>
            </div>
        </div>

        <!-- Table of Contents -->
        <div class="flc-toc-tocContainer"> </div>

        <h1>This is my project</h1>
        <p>This is a paragraph.</p>

		<!-- Initialize UI Options JavaScript -->
        <script type="text/javascript">
            $(document).ready(function () {
                fluid.uiOptions.prefsEditor(".flc-prefsEditor-separatedPanel", {
                    tocTemplate: "infusion/src/components/tableOfContents/html/TableOfContents.html",
                    terms: {
                        templatePrefix: "infusion/src/framework/preferences/html",
                        messagePrefix: "infusion/src/framework/preferences/messages"
                    }
                });
            })
        </script>
	</body>
</html>

Congratulations!

UI Options is now fully functional on your page. Now, when you load your page in your browser and click on the "Show Display Preferences" button, you will see the UI Options controls. If you adjust the controls, you will see the effects being applied to the page.

Part 4: Customizing and Optimizing Your Site for UI Options

To get the most out of UI Options, see this guide "Working with UI Options". It is a starting point for customizing and optimizing your site for UI Options, and also addresses some common integration issues.

Versions Compared

Old Version 10

New Version Current

Key

Overview of Steps

Adding the Sliding Panel

The Table of Contents

Add CSS and Javascript Links

Initialize the UI Options JavaScript

Congratulations!

Part 4: Customizing and Optimizing Your Site for UI Options