Matter and Motion, Inc.


First Diagramming Introductory Tutorial

This tutorial covers the features found in First Diagramming release 0.9 Beta. It is not exhaustive, but gives a broad overview of the applications capabilities. We're going to be taking a step-by-step tour that follows the creation of a very simple Concept Map diagram.

1. Starting the Application

2. Setting-up Object Defaults

3. The Shape Library

4. Inserting Objects

5. Quick Text Editing

6. Selecting Objects

7. Formatting Objects

8. Copy and Paste

9. Linking Objects

10. Links to Links

11. Object Properties

12. Viewing (Finding) Objects

13. Shape Substitution

14. Undo/Redo

15. Saving Files

16. Application Options

17. Summary

1. Starting the application

A shortcut to first can be found in the Windows CE 'Programs' directory, accessed by tapping the logo in the upper-left corner of the screen and selecting 'Programs'.


When First is used for the first time, it will automatically create a new document and start editing, so you should be seeing something like the figure below:

The window layout is very conventional for a Windows CE application: A title bar at the top, command bar at the bottom containing menus and icons, and the main editing area (the area showing the grid) in the area between the title bar and command bar.

The document is empty at this point, so let's get started and make it a little more interesting.

2. Setting-up Object Defaults

Concept Maps are made up of only Node, Arrow (connecting nodes) and Notes. Additionally, most of the time all Nodes are formatted and sized the same, differing only in the text they contain. Similarly, Arrows and notes share a lot of the same properties.

To avoid having to set the properties for each node as it is inserted, we're going to setup the defaults in advance. To get started, select 'Tools | Object Defaults…' in the command bar.

A dialog should appear that contains a drop-down list of shape names (Note, Ellipse, etc.) and a table with property names and values arranged in rows. In the drop down list, select 'Note' if it is not already selected. We're going to set the defaults for the note objects in our diagram, starting with the text they display.

Click on the row labeled 'Text' under the column labeled 'Value.' That cell in the table should read 'Text.' Clicking on the cell should cause it to become active, allowing you to enter new text using the standard Windows CE input panel at the bottom of the screen.

Set the value of the Note property to 'Note…' and then select the value cell for the property 'Background Color.' Notice that this cell gives you a choice between several values, as well as allowing you to type in text. Enter the value 'Light Light Green' into the value of the Background Color property.


Your property dialog should now look something like the one below, notice that the color field has been converted to a 'red, green, blue' representation. That is because the color entered is not one of the standard colors.

Next, we're going to set the default properties for ellipse objects, so select 'Ellipse' from the type drop-down list. We want our ellipses to be small red circles with the text 'Concept' by default. So, edit the values of the 'Bounds', 'Text' and Background colors properties to match what is shown below.

Finally, we want the arrows between nodes to be direct and have the text 'Label.' To do that, set the 'End Arrow' property to 'Open' the 'Start Arrow' property to 'None' and the 'Text' property to 'Label'.

Once that's done, hit the 'Ok' button at the top right of the screen to confirm the changes. This should bring you back to your empty document.

3. The Shape Library

Since we won't be using shapes other than Nodes, Arrows and Notes in this document, we can go to the Shape Library and deselect the unneeded options. So, select 'Tools | Shape Library…' from the command bar, deselect 'Diamond', 'Jump' and 'Rectangle' and hit the 'Ok' button to confirm.


4. Inserting Objects

You should be back in the empty document now, and ready to add some objects. From the command bar, select the 'Insert' menu and notice that only the shapes that were checked in the shape library are available to be inserted. Let's add an Ellipse by tapping 'Insert | Ellipse'.

A new ellipse object should appear in the upper-left area of the screen. Notice that the ellipse is round, red and labeled 'Concept', just as we indicated in the Object Defaults dialog.

5. Quick Text Editing

To quickly edit the text of an object, simply select it and start writing. First supports all of the standard Pocket PC input methods, as well as 3rd Party input methods that confirm to Microsoft's specifications.

6.  Selecting objects

Tap on the new concept node to select it. A selected object will show a number of hollow handles. Tap one of the handles to select it. A selected handle turns from hollow to full.


To change the size of the ellipse, you can drag on any of the four handles. To relocate the ellipse, drag anywhere else on the object.


7. Formatting Objects

To quickly format objects, use the Tools | Format menu item to activate the formatting menu. Activate that menu now.

The commands in the formatting toolset allow you to quickly change the foreground, background, text and arrow styles of a selected object. Go ahead and experiment with those options a bit.


8.  Copy and Paste

You can create duplicates of existing objects or copy objects from one diagram to another using copy and paste. To copy an object, simply select it and tap the copy button (or select 'Edit | Copy') in the command bar. To paste a copy of the object, tap the paste button (or select 'Edit | Paste').

9. Linking Objects

Since we now have two objects in the document, let's link them together. Drag one of the two nodes away from the other. Next, 'Tap and Hold' one of the objects to show its context menu.


Select 'Link to ->' from the context menu, and then select the other object (not the one that you 'tap and held' for the context menu). A labeled arrow should now connect the first object to the second. Try dragging the objects around a bit to see how the arrow follows.


10. Links to Links

Links can connect shapes to shapes, links to links or shapes to links. One complication exists with creating links to links: links can be a little difficult to select. Let's create a note and associate it with the link between the nodes.

First, select 'Insert | Note' from the command bar.


Relocate and resize the note to your choosing.

As in the example above, 'Tap and Hold' the note object and select 'Link to ->'. Next, tap at the center of the arrow connecting the nodes. You may have to try more than once to pick just the right location (right in the middle). This selection issue will be resolved in the next release of First. With the new link, your document should look something like this:

11. Object Properties

Now we're going to edit the properties of the note and change its line style from solid to dashed. The object properties dialog can be reached using the 'Tap and Hold' menu for an object, or using the 'Edit | Properties…' menu in the command bar when an object is selected.

Activate the object properties dialog, change the 'Line Style' property to 'Dashed' and tap 'Ok'. The stroked edge of the note object should now be dashed instead of solid.


12. Viewing (Finding) Objects

First includes simple, yet powerful, tools for finding objects in large or complicated diagrams. You can search for objects based on their shape, property name, or property value (or a combination thereof). To search for an object activate the viewing toolbar using 'Tools | View'.


As an example, we're going to search for shapes with the text 'Concept'. So, tap the search button to bring up the search dialog then enter 'Text' in the property name field and 'Concept' in the property value field. Leave the shape name field blank, and tap Ok. The selection and view area will change to center on the first shape with the text 'Concept'. Also notice that one of the search arrow buttons ('Next') is enabled. Tapping the next and previous buttons will change the selection to the next or previous (respectively) shape that matches the search criteria. In this case there are two shapes that do, so you can bounce back and forth between them.

13. Shape Substitution

The Shape Library can be used to add and remove shape templates to and from the document at any time. If a shape that is used in the document is removed, a substitute shape must be specified and all uses of the removed shape will be converted to the specified substitute.

To see how this works, select 'Tools | Shape Library…' from the command bar. In the shape library dialog, uncheck 'Ellipse' and check 'Diamond'.

After hitting 'Ok', the shape substitution dialog will appear. For each shape that is being removed and in use you will have to specify a substitute or the '<Leave>' option. If you specify '<Leave>', the shape template will not be removed. For this example, select 'Diamond' as the 'To' value and tap 'Ok'.


All of the ellipse objects in the document should be converted to diamonds, as shown below:

14. Undo/Redo

In the event that a command has an undesirable result, it can be undone using the Undo button or 'Edit | Undo' menu in the command bar. An unlimited number of commands can be undone, up to the point at which the document was created. For example, we can return the converted diamonds to ellipses by undoing the 'Edit Library' command.

After the 'Edit Library' command has been undone, we can move further back in time ('Undo Edit Properties') or forward again ('Redo Edit Library'), as shown below.

15. Saving Files

To save our work so far, tap the document 'Ok' button. The diagram will be saved with a default name, in this case 'Diagram.dia'. The name of the file can be renamed and/or relocated using the 'Tap and Hold' menu on the document name.

Open the newly create file by tapping the file in the file list. Open the 'Edit' menu in the command bar, and notice that even after saving and reopening the file, all of the command history is still available. Select 'Redo Edit Library' to redo the conversion of ellipse shapes to diamonds.


16. Application Options

The Application Options dialog is available using 'Tools | Options…' in the command bar. This dialog gives you control over settings that apply across all documents, or relate to how the application handles files. Using our example document, let's see how some of these options work. Open the Application Options dialog.

With the dialog open, change the Grid drop-down selection from 'Lines' to 'Dots', 'None' or 'Both' – whichever you prefer. Uncheck the 'Auto Save' and 'Save Undo/Redo' boxes and tap 'Ok'.

Grid Settings

The first change you notice should be that the grid draw style has changed from lines to dots, a combination or nothing at all depending on the option you selected. Using the Grid Snap and Handle Size options you can also control the size of object selection handles and the spacing of the grid. Note that small grid settings result in a lot of lines or dots being draw, which can significantly reduce display performance.

Auto Save

Since we unchecked 'Auto Save' in the application options dialog, hitting the document 'Ok' button will no longer automatically save the document. Instead, if the document has been modified you will be prompted to decide if you want to save the changes.

Tap the document 'Ok' button, and select 'Yes' to save the changes we've made.

Undo/Redo Persistence

You should be back in the document list. Notice that the size of the document has been reduced from 6K to 3K. The reduction in size is a result of un-checking 'Save Undo/Redo' in application options. Open Diagram.dia and open the 'Edit' menu in the command bar. Notice that the command history is not available and both Undo and Redo are disabled.

17. Summary

This tutorial covered the basics of using First, demonstrating Object Default, the Shape Library, Linking, Copy/Paste, Undo/Redo and Application Options. If you have any questions regarding First, please feel free to contact Matter and Motion, Inc. at We'll be happy to help any way we can.

Revision: 2.0