Gift Editor Demo Overview

User Interface Overview

User interface of Gift Editor demo looks like the following screenshot.

Figure 1. Gift Editor Demo

As you can see, it includes four parts:

• Toolbar contains buttons which align v-objects, turn rotate and resize actions on/off, undo and redo user actions, as well as zoom the displayed content in and out.
• Viewport displays a user-designed collage and allows scrolling, panning, and zooming it.
• Layers sidebar contains a tab for each region layer defined by the gift template. Each tab in its turn contains a stack of v-objects added to this layer and provides facilities to add and remove v-objects, rearrange them, and make invisible.
• Gift selector contains a predefined set of images of gifts, such as caps, cups, and t-shirts.

Users just select a gift using the selector on the bottom of the page and a full-size image of this gift is loaded into viewport. Then they add vector images and text labels within predefined rectangle regions. Images and labels are available for further editing, so users can select any v-object and apply all the allowed actions to it.

Viewport

Viewport in this demo is implemented with the CanvasViewer control. This control displays the Canvas which hosts layers and traces user actions. To make displaying multi-layered images more convenient, there are PanNavigator, ZoomInNavigator, and ZoomOutNavigator controllers associated with this CanvasViewer. Read the How to Use AJAX Vector Objects for the detailed information about CanvasViewer and the Using Navigators and Rubberbands (AJAX Controls) to familiarize with navigators.

Layers

All the layers used in this demo can be divided into three groups:

• Background consists of a single layer which hosts a single ImageVObject - the image of the selected gift. This image cannot be moved, resized or rotated as well as this layer is always placed on the bottom of the LayerCollection stack.
• Regions representation consists of a single layer too. This layer hosts RectangleVObject instances which represent regions associated with the selected gift. For example, a cup has one predefined region whereas a t-shirt may have two regions. These regions highlight rectangle areas of the gift where users can place v-objects.
• Regions contains as many layers as there are regions associated with this gift. Each layer in this group is restricted with the RectangleRegion instance and can contain as many image and text v-objects as users wish.

V-Objects

Gift Editor demo shows how to use such v-objects as text, image, and rectangle which are represented by the TextVObject, ImageVObject, and RectangleVObject types respectively. These v-objects can be grouped by their purpose:

• Auxiliary v-objects cannot be modified by users as well as layers which host them are fixed. This group includes an image v-object intended to display the selected gift and rectangle v-objects which highlight regions associated with this gift.
• User-added v-objects are used to personalize gifts. Here customers can use images and text labels. Gift Editor demo provides rich facilities to edit these vector objects via web interface.

History

When developing an editor, it is a common practice to allow users to undo and redo theirs actions. Gift Editor demo provide users with this feature as well. All they need is to click undo and redo buttons on the Toolbar and the corresponded Undo() and Redo() methods of the History object are called.

See Also

Reference

• CanvasViewer Class
• PanNavigator Class
• ZoomInNavigator Class
• ZoomOutNavigator Class
• Canvas Class
• Layer Class
• RectangleRegion Class
• RectangleVObject Class
• ImageVObject Class
• TextVObject Class
• History Class

Manual

• Basic Concepts of AJAX Vector Objects
• Quick Start in AJAX Vector Objects
• How to Use AJAX Vector Objects
• Using Navigators and Rubberbands (AJAX Controls)