Creating and modifying your own theme
The previous section demonstrated a few predefined themes that are included with the product. It is very likely though that you will need to create your own themes that suit your taste, or that are useful for making your diagrams more clear.
A theme can be created, or an existing user-defined theme can be modified, from the Theme Details dialog. For different ways to access the Theme Details dialog, see the Applying a theme section. For a sample image of this dialog, see Figure 4. Before starting, let us explore the Theme Details dialog a bit more.
The name selected in the drop-down list on top of the dialog shows the name of the theme whose definition is in the table underneath it. You can select any of the themes from the drop-down list to work with.
The option next to the theme name drop-down lets you restrict the elements in the list to only those elements relevant to the diagram type whose context was used when opening the dialog. Note that if the dialog was opened from the Project Explorer context, then this option is not present. If you want to work with all elements, for example when defining a theme that works for all diagram types, you need to un-check this option.
Figure 7. Name drop-down and check box on Theme Details dialog
The theme definition table has three columns: one for the appearance assigned to a specific element type, another one for the element type, and a third column for the palette drawer. This last column shows where you can find the element of given type if you wanted to create it on diagram. Each of the three columns in the themes definition table can be sorted by clicking on the column header.
Figure 8. Columns of the theme definition table
Let us say that you want a theme that is similar to the Brown theme, but you want the Orthogonal State to use bold font and a different fill color. Start by selecting the Brown theme in the name drop-down. Then click in the Brown 5 appearance cell next to the Orthogonal State, and click on the "…" button that shows up. The list of existing appearances opens, as you can see in the figure below.
Figure 9. Changing appearance in the theme definition table
Just like there is a set of predefined themes, there is also a set of predefined appearances that are included in the product. At this point, you can either choose one of these, or create a new one. To create a new appearance, scroll to the bottom of the list and select the "Appearance Details…" option. The Appearance Details dialog opens up, initialized to the Brown 5 appearance.
Figure 10. Appearance Details dialog
Since Brown 5 is a predefined appearance, you cannot modify it directly, but you can create a new appearance based on it. For example, set the font to bold and set the fill color to orange. Then click on "Save As…". In the dialog that pops up, enter a unique appearance name, for example "Orange bold". Press OK, and your custom appearance is saved. If you examine the Name drop-down list, you will see that your newly created appearance is listed. User-defined appearances are listed on top, and do not have the bold font like predefined appearances do. This is shown in Figure 11 below.
Figure 11. Appearance list after creating a new appearance
Now just click on Apply button at the bottom of the dialog and your new appearance will be set as the one for the Orthogonal State in Brown theme. Tip: you can change the appearance selection for several element types at once. For example, to change the appearance of both the Orthogonal State and the Composite State, select both of these rows, and then proceed as described previously.
You can test out your modification by clicking on the Apply button at the bottom of the Theme Details dialog and examining the diagram. At any point, you can click on the Revert button at the bottom of the dialog, which will remove all your changes since the last save.
You can easily add new elements to the theme definition. For example, if you want to define a specific appearance for the Join State and the Final State, you need to click on the Add button on the right side of the themes definition table.
Figure 12. Add button on the Theme Details dialog
You will see a dialog with the list of all element types that have not been added to the definition of the current theme yet. Remember that if the "Show only elements relevant to Statechart" option on the Theme Details dialog is selected, you will only see element types related to the Statechart diagram, as shown below.
Figure 13. Choosing element type(s) to add to theme definition
You can sort the list by any of the three columns by clicking on the column header. Sort by Element type, and select Final State and Initial State. The Next button becomes enabled. Click on it to get to the next page, which lets you choose the appearance for the selected elements.
Figure 14. Choosing an appearance for selected element type(s)
At this point, you can either select from the list of existing appearances, or create a new one by selecting the "Appearance Details…" option. Creating a new appearance was discussed previously, so now just select an existing appearance, for example "Red with red border", and click Finish. Two new rows appear in the theme definition table – one for Initial State and one for Final state. Note: you could also click Finish without selecting an appearance. In that case, two new rows would be added to the theme definition table, and their appearance could be selected later.
Let us assume that you want the Composite State to have Brown 1 appearance, which is assigned to the Shape element type. This means that you no longer need customization row for the Composite State, and you can delete that row by selecting it and clicking on Delete button. You can also select several rows (keep Control button down while selecting) and delete them all at once.
If, when creating a new theme, you want to start with a blank theme definition, unselect the check box on top of the dialog (so that a complete definition of the theme is considered) and click the Delete All button. All rows are deleted, except the ones for Shape and Edge element type.
Figure 15. Deleting appearance-element type pairs from theme definition
In previous sections, we started from the Brown predefined theme and made the following changes:
- Created new appearance Orange bold and assigned it to Orthogonal State instead of Brown 5 appearance
- Added the Initial State and the Final State element types to the theme definition and assigned the Red with red border appearance to them.
- Deleted the Composite State row from the table.
Here is how our sample diagram looks like after applying all of these modifications.
Figure 16. Sample diagram after applying modified Brown theme
You are now ready to save the theme. You started from a predefined theme, so you cannot update it (i.e., you cannot use the Save button). But you can create a new theme that will contain all the modifications made. Click on the Save As… button and in the dialog that appears, enter a unique theme name, e.g., My Theme, and click OK. Your theme is saved and ready to use. If you look at the Name drop-down menu, you will see My Theme at the top. User-defined themes are listed on top, and unlike predefined themes, do not use bold font. Later on, you can modify this theme, and use the Save button to save the changes. If you no longer need it, you can delete it by clicking on Delete button on the bottom of the Theme Details dialog. Note that you cannot delete predefined themes.