Home

Get Started

The simplest way to get started with Juice is to add it to a user interface.  So let's step through it here.

Prerequisites

Firstly, you need a web page or web site that you can access the html code to edit.  This doesn't necessarily mean that you need full editing capability.  The minimum you need is the ability to add a small snippet of html in to the header or the body of the page.

 Secondly, you need a web server where you can load the JavaScript code that Juice uses.  In preference this would be the same server that serves your web site.  If that is not possible you may use an alternative server, but it is recommended that such a server should have a performance profile at least as good as your main server so as not to impact on performance.  Amazon S3 storage has proved to perform well in this regard.

The Steps 

  1. Get Juice - follow the simple instructions on the Get Juice page to download the latest version of the Juice zip file. At this time that is version 0.7.
  2. Unzip the file and upload the files it contains to your chosen web server, placing them in a suitable folder below the web server root directory such as /js.  The rest of these instructions will assume that you use this location.
  3. Copy the examples/talis-prism/extend-simple.js file from the examples directory of the Juice installation in to the /js directory, giving it a name that is relevant to your installation such as extend_my_interface.js for instance. This file is a basic framework that includes a
  4. Next we need to edit the Juice script calls in to your web page.  Below are the three lines you need to add to your page.  You can insert them anywhere, but by preference insert them as near the end of the page as possible.

    <script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script>

    <script type="text/javascript" src="/js/juice.js"></script>

    <script type="text/javascript" src="/js/extend_my_interface.js"></script>

  5. Refresh your browser and you should see 'Extended by the Juice Project' appended to your page.

For more product specific examples check out the following: