Canvas Modelling Toolkit - Getting into the Details

## Getting into the Details

The main components and concepts that constitute a Canvas are Blocks, Stickies, Images, Connections, Hints and Locking. A Canvas template typically consists of a number of (locked) Blocks and Images onto which the user can add Stickies, Images, Connections and additional Blocks if required. The following sections will describe each of these concepts in detail starting with a description of the Canvas Palette and an example of constructing an imaginary Canvas.

### The Canvas Palette

When working with a Canvas, the Palette presents you with the tools that you need to create these objects.

The Canvas Palette

Select a tool in the Palette and draw it onto the Canvas. The coloured squares represent "Stickies". Note that you are not restricted to the provided colours as you can change the colour of the Sticky in the Properties Window. Similarly with the provided Connections, you can change the line and arrow head style of a Connection in its Properties Window.

### Constructing a new Canvas - an Example

Let's work through the process of constructing our own Canvas based on mapping Past, Present and Future concepts.

Assuming that you have a model selected in the Model Tree follow these steps:

1. Right click on the "Views" folder of your model on the Model Tree and select "New->Blank Canvas":
2. The Blank Canvas View will automatically open. You can rename it at this point in the Model Tree if you wish.
3. From the Palette select the Block tool and draw a tall rectangular Block on the Canvas. Edit its text content by clicking on it and changing it to "Past":
4. Create two more Blocks named "Present" and "Future" adding them to the Canvas so that they line up as follows:
5. Now let's add some icons to these Blocks to make them visually more appealing. Double-click on the first Block to open the Properties Window. In the Properties Window select the "Image" tab. Then select the "Choose..." drop-down box and the "Set Image..." item:
   When the "My Images" Image Manager dialog window opens, select the "Open from File..." option and choose an appropriate image from your computer's file system. Do the same for the other Blocks.
6. Here's how it looks so far with the images that we have selected for the three Blocks:
7. Now that we have constructed our three main Blocks we could take this opportunity to change their background colour, their text fonts and positions in the Properties Window. But for now let's add an Image underneath the Blocks. From the Palette select the Image tool and draw a rectangular Image place-holder on the Canvas right underneath the Blocks. Double-click on the Image place-holder to open the Properties Window. In the Properties Window on the "Main" tab select the "Choose..." drop-down box and the "Set Image..." item, as you did before for a Block, and select an appropriate image from your computer's file system. Then from the "Appearance" tab set the border to "None". The Canvas now looks like the following:

Adding Hints and Locking

For the finishing touches let's add some Hints to the Blocks and then lock them so that we can re-use the Canvas as a Template. Why do we want to add Hints to the Blocks? Well, as with the other objects in Archi models it's extremely helpful to provide a rubric that suggests to the end user the intent of the object and how it can be used in the model. Let's add the hints:

1. First ensure that the Hints Window is open. You can open it from the main "Window" menu.
2. Double-click on the first Block (the "Past" Block) in order to open the Properties Window.
3. In the Properties Window select the "Hint" tab.
4. Type "Past" for the Hint title, and some text for the Hint Content. Note that you can use HTML to mark up your content text. Here's what it looks like now:
5. Add Hints for the other Blocks.
6. Now let's lock all these objects so that we can use the Canvas. Select each Block and the Image in turn. In the Properties Window tick the "Locked" checkbox:

Now that we have created the Blocks, added an Image, provided the Hints and locked the objects we can save the whole thing as a Canvas Template and then create new instances of the Canvas from the template. See the sections "Saving a Canvas as a Template" and "Creating a New Canvas from a Template" to do this.

Creating a new Canvas instance from the template means we can now start using it for real:

Our imaginary Canvas

For more ideas, look at how the built-in Canvas templates are constructed for further examples. See the section "Creating a New Canvas from a Template".

Archi uses a different file format for "*.archimate" files when adding images.
Normally Archi saves "*.archimate" files as single plain text XML format files. However, when images are used the file format used is a binary archive file (zip format) that contains both the model's XML file and the image files. This is to keep all related files together.