Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 9 Next »

Work in Progress

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

 

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/
npm install infusion
cd node_modules\infusion\
npm install
grunt
cd products
unzip infusion-all-2.0.0.zip
mv 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.

 

  • No labels