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 5 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: Building Infusion

  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. Get Infusion via npm
  4. Build Infusion
  5. Copy the built Infusion libraries to your project

Part 2: Integrating

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

  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. 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.
  3. 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.
  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. 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.
  7. 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.
  8. Now build Infusion by typing "npm install" (without quotes) and press Enter. Once that is done, type "grunt" without quotes and press Enter.
  9. The
  • No labels