Installing and Getting Started with UI Options

Overview of Steps

Part 1: Preparing

1. Prepare your workspace - know where your project is going to be. In this example we will be using Desktop/my-project/
2. Install node.js - this gives you access to npm which is a repository for Open Source projects and libraries. This is how we will get the latest UI Options.
3. Install grunt

Part 2: Getting and Building Infusion

1. Get Infusion via npm
2. Build Infusion using npm and grunt
3. Copy the built Infusion libraries to your project
4. Delete unneeded files

Part 3: Integrating UI Options into Your Project

1. Add the UIO HTML snippets to your project's HTML pages
2. Add the UIO Javascript snippets to your project's HTML pages
3. Tweaking your site's styling and structure to work with UI Options

Part 1: Preparing

1. Before beginning, know where your project files will reside. We will build Infusion (which contains UI Options) and copy its files to your project directory.
2. Install node.js by following the instructions on their website. node.js will give you access to npm which is a repository for Open Source projects and libraries. This is how we will get Infusion and the latest UI Options.
3. In your project directory, create a sub-directory called "temp". We will use this to hold intermediate files which can be deleted once Infusion and UI Options is built.
4. Now open a command line and change directories so you are located in the temp sub-directory in your project directory.
   1. On Windows:
      1. Launch Powershell: Go to Start, then "Run". Type "powershell" into the run text field and press Enter.
      2. In the Powershell window, change directories to your project by typing "cd ~\Desktop\my-project\temp" (without the quotes) and pressing Enter.
   2. On Mac:
      1. Launch Terminal: Go to Spotlight Search (the magnifying glass in the top-right corner), search for "Terminal", and then press Enter.
      2. In the Terminal window, change directories to your project by typing "cd ~/Desktop/my-project/temp" (without the quotes) and pressing Enter.
5. Install grunt by typing in the command line "npm install -g grunt-cli"
   
   1. On MacOS, if you get an "Error: EACCESS: Permission denied..." message, you may have to run "sudo npm install -g grunt-cli" instead. You will have to enter your computer password to proceed with installing grunt.
6. You are now ready to proceed to Part 2.

Sample Mac OS Terminal:

mkdir ~/Desktop/my-project/temp
cd ~/Desktop/my-project/temp
sudo npm install -g grunt-cli

Sample Windows Poweshell:

md ~\Desktop\my-project\temp
cd ~\Desktop\my-project\temp
npm install -g grunt-cli

Part 2: Getting and Building Infusion

Continuing from Part 1.

1. Get Infusion by typing "npm install infusion" in the command line and pressing Enter. The process will run and a new directory called node_modules will be created as a result.
2. Using the command line, change directory into the infusion directory that's been created within node_modules.
   1. On Windows type: "cd node_modules\infusion" (without quotes) and press Enter.
   2. On Mac type: "cd node_modules/infusion" (without quotes) and press Enter.
3. Now build Infusion by typing "npm install" (without quotes) and press Enter. Once that is done, type "grunt" without quotes and press Enter. This will create a "products" directory in the Infusion directory.
4. Within the my-project/temp/node_modules/infusion/products directory, there is now a ZIP file called "infusion-all-2.0.0.zip" (the exact filename may be a little different depending on the release of Infusion available at the time you download it). Unzip this file using your preferred Unzipping program.
5. Now copy (or move) the resulting "infusion" directory into your project's root directory.

Sample Mac OS Terminal:

npm install infusion
cd node_modules/infusion/
npm install
grunt
cd products
unzip infusion-all-2.0.0.zip
mv infusion ~/Desktop/my-project/

Sample Windows Powershell:

npm install infusion
cd node_modules\infusion\
npm install
grunt
cd products
Expand-Archive infusion-all-2.0.0.zip .
move infusion\ ~\Desktop\my-project\

At this point your project directory should look something like this:

my-project/
     |- temp/
     |    |- node_modules/
     |         |- ...
     |         |- infusion/
     |               |- ...
     |               |- products/
     |               |- ...
     |- infusion/

You can now delete the directory "temp" contained inside your project directory. It's no longer needed.

Part 3: Integrating UI Options into Your Project

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:

<!DOCTYPE html>
<html lang="en">
    <head>My Project</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:

<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:

<!DOCTYPE html>
<html lang="en">
    <head>My Project</head>
    <body>
        <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>