Tutorial - Image Editor

Setup: Download and install the Fluid Infusion library

Download a copy of the Fluid Infusion component library from:
- http://fluidproject.org/index.php/downloads
  You only really need the "Minified deployment package," but if you want to actually look at the code, you should download the "Source package."
Unpack the zip file you just downloaded, and place the resulting folder somewhere convenient for your development purposes.
The folder will have the release number in it's name (e.g. infusion-1.3/). The rest of this tutorial will use infusion-1.3 in its examples, but if you downloaded a different version, you'll have to adjust.
Download the ImageEditor, CropperUI and TaggerUI components and place them in the infusion-1.3/src/components directory.

Step 1: Prepare your markup

There is an HTML template for the Image Editor located in your ImageEditor download bundle at imageEditor/html/ImageEditorDemo.html. This file contains all the markup you'll need to use the ImageEditor. Use this template as a starting point for your own page, or copy/paste the markup within the div id="image-space" into your site as desired.

The template contains all of the elements and class attributes needed by the ImageEditor. Combined with the Image Editor's style sheets, this markup will display the Image Editor on your page.

Let's assume that you're starting with an HTML file, called myapp.html, that will present the user with an interface for image editing. This file will have to include the necessary markup for the Image Editor interface, so copy/paste the <div id="image-space"> element and everything inside it into the body of your myapp.html file.

Step 2: Write the script

You'll need to create a file, say imageEditor.js, to contain your initialization script - the script you write to apply the Image Editor to your markup.

In this file, write a function that calls the image editor constructor. First, you would have to build the inline edits component that would allow the user to modify the the dimensions in the image editor. All the markup for the inline edits is already built into the html file that you copied in the previous step. Write the js as follows to have the image editor added to your markup:


jQuery(document).ready(function () {
    
    // Initialize the Inline Edits component
    var imageEditorMenuInlineEdits = fluid.inlineEdits(".fl-image-editor-menu", {
	selectionEdit: true
    });

    // Initialize the Image Editor
    var myImageEditor = fluid.imageEditor("#image-space", {
	demo: true,
	demoImageURL: "../temp/DemoImage.jpg",
	menuInlineEdits: imageEditorMenuInlineEdits
    });
});

The function passes the following parameters to the constructor:

demo (optional): specifies that the component is being used in the demo mode. Uses the demoImageURL to show an image on load.
demoImageURL (optional): URL of the image to be displayed in the demo mode.
menuInlineEdits: the fluid inline edits object for the inline edits in image editor menu.

Important note about demo mode

The demo and demoImageURL parameters are optional. You can use the setImage method on image editor component to set a new image for the image editor. When the image editor is used without the demo mode, the user should make a call to the setImage method to display an image in the image editor canvas.

Step 3: Write your HTML

You'll need to add your initialization script, along with the Fluid library, to you HTML file. In the header of the file, link to the Javascript files with <script> tags:


<script type="text/javascript" src="infusion/Fluid-all.js"></script>
<script type="text/javascript" src="infusion/src/webapp/components/cropperUI/js/CropperUI.js"></script>
<script type="text/javascript" src="infusion/src/webapp/components/taggerUI/js/TaggerUI.js"></script>
<script type="text/javascript" src="infusion/src/webapp/components/imageEditor/js/ImageEditor.js"></script>

NOTE that the Fluid-all.js file is minified - all of the whitespace has been removed, so it isn't really human-readable. If you're using the source distribution and you want to be able to debug the code, you'll want to include each of the required files individually. This would look like this:


<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-reset-global.css" />
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-base-global.css" />
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-text.css" />
<link rel="stylesheet" type="text/css" href="../../../framework/fss/css/fss-layout.css" />
<link rel="stylesheet" type="text/css" href="../../inlineEdit/css/InlineEdit.css" />
<link rel="stylesheet" type="text/css" href="../css/ImageEditor.css" />
<link rel="stylesheet" type="text/css" href="../../taggerUI/css/TaggerUI.css" />

<!-- Fluid and jQuery Dependencies -->
<script type="text/javascript" src="infusion/src/webapp/lib/jquery/core/js/jquery.js"></script>
<script type="text/javascript" src="infusion/src/webapp/lib/jquery/ui/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="infusion/src/webapp/framework/core/js/jquery.keyboard-a11y.js"></script>
<script type="text/javascript" src="infusion/src/webapp/lib/jquery/plugins/scrollTo/js/jquery.scrollTo.js"></script>
<script type="text/javascript" src="infusion/src/webapp/lib/swfobject/js/swfobject.js"></script>
<script type="text/javascript" src="infusion/src/webapp/lib/swfupload/js/swfupload.js"></script>
<script type="text/javascript" src="infusion/src/webapp/framework/core/js/Fluid.js"></script>
<script type="text/javascript" src="infusion/src/webapp/framework/core/js/FluidDocument.js"></script>
<script type="text/javascript" src="infusion/src/webapp/framework/core/js/FluidView.js"></script>
<script type="text/javascript" src="infusion/src/webapp/framework/core/js/DataBinding.js"></script>
<script type="text/javascript" src="infusion/src/webapp/framework/core/js/FluidIoC.js"></script>
<script type="text/javascript" src="infusion/src/webapp/framework/enhancement/js/ProgressiveEnhancement.js"></script>

<!-- Keyboard accessibility plugin -->
<script type="text/javascript" src="infusion/src/webapp/framework/core/js/jquery.keyboard-a11y.js"></script>

<!-- Inline Edits Dependencies -->
<script type="text/javascript" src="infusion/src/webapp/components/inlineEdit/js/InlineEdit.js"></script>

<!-- Cropper UI dependencies -->
<script type="text/javascript" src="infusion/src/webapp/components/cropperUI/js/CropperUI.js"></script>

<!-- Tagger UI dependencies -->
<script type="text/javascript" src="infusion/src/webapp/components/taggerUI/js/TaggerUI.js"></script>

<!-- Image Editor dependencies -->
<script type="text/javascript" src="infusion/src/webapp/components/imageEditor/js/ImageEditor.js"></script>

That's it! That's all you need to do to add the Image Editor functionality to your document.