Design Surface
The surface editor is shown in the image below:
A design surface displays the following components:
-
Namespace group boxes. They contain types and the group box shows the namespace full name.
-
Entity and Enumeration boxes. They represent types in the CodeModeler model. These boxes are in fact tree view that can be expanded.
-
Relation links. A relation can link a property to an entity, a property to another property, or a property to an enumeration.
-
Sticky yellow notes, that developers can add to a surface to comment something.
Few hints to use the editor:
-
Shapes (types, namespaces, notes) can be moved using a click-and-drag gesture.
-
A context menu appears when right clicking anywhere. Its content depends on the current selection.
-
Using the mouse wheel allows to move the surface up and down.
-
Zoom in and out is possible using the standard CTLR + mouse wheel movement combination.
-
Using Save commands from Visual Studio when working on the editor doesn’t necessarily saves the concepts definitions it holds. The surface itself is a document that only contains the list of shapes it displays, and each shape placement, it’s not the document that contains concepts definitions.
The surface design is using only vector-based shapes and controls, so when you zoom in and out on the surface, it will always look crisp and clear no matter if you’re at 100% or 500%. Here is the surface with a 500% zoom:
The Entity shape is a hierarchical tree view. It can display the following concepts: properties, relations, instances, methods, resources, views, and recursively. For example, in this image we can see a Car entity:
This entity has 13 properties (3 are relation properties), 2 instances, 2 resources (which correspond to the entity name localized), 1 method, 1 rule and 1 view. We can see that concepts also show child concepts: the SerialNumber property has a “RegularExpressionValidate” rule.
The icon before a property name is different if it’s a key property, a blob property, an enumeration-type property, etc.
The Enumeration shape is also a hierarchical tree view. This tree view contains the values of the enumerations and each value node can include resources (messages). It can be used for example to add per-locale texts to enumeration values:
Links can correspond to various model relations:
-
Inheritance: there’s a link between two entity shapes if one entity derives from another. In this case, the link has a name to indicate the other side of the derivation, and the name starts or ends with an arrow (“>”).
-
Composition, Association: there’s a link between the two properties (or between a property and an entity if one end of the relation is not associated with a property). Related properties items in the entity tree view will be shown in the “Relations” tree view item, not in the “Properties” tree view item. Links are associated with a text that describes the relation cardinality (1:1, 1:M, etc.). A link can join the same entity in the case of a self-relation.
-
Type: there’s a link between an entity and an enumeration if a property’s type corresponds to an enumeration in the model. Note it’s also possible to reuse one entity as a type without defining it as a relation in the database way.
By default, the link width varies with the physical distance between the two sides of the relation.
Every type in a CodeModeler model has a namespace, that will ultimately be used as a .NET namespace during C# generation. Namespace shapes in the surface editor corresponds to these namespaces and offer a convenient way to group their contained types. Links between shapes are shown across namespaces.
A namespace shape can by moved, which will move all its contained shapes at the same time and recompute all impacted links, including links to types in other namespaces.
Namespace shapes can also overlap, so the surface rendering engine renders them using transparency, like what’s shown in the following image where we see 3 enumeration in the “CarRental” namespace and two entities in the “CarRental.Inventory” namespace:
It's possible to save the current design surface display out to an image file. It's an easy way to share your model with anyone.
You first need to right-click somewhere in the selected surface. Then, in the context menu, use the “Export Model as Image” item:
The following formats are supported: PNG, BMP, GIF, WDP, JPG, and TIFF.
Note: This command will export the current design surface, so you can create customized surfaces to export part of the model as images, such as namespaces, for example.
The design surface context menu allows you to copy and paste concepts or export them as Xml, which is the native physical format of CodeModeler.
For example, let’s suppose we’ve defined this address-city-country model in some CodeModeler project:
If we select the whole namespace and click on “Copy As Xml” in the context menu, we will get the following Xml (as Unicode text format) in the clipboard (you can check that using the Paste command in Windows’ Notepad for example):
<cm:entity name="Address" namespace="Reusable" categoryPath="/Reusable" xmlns:cm="http://www.softfluent.com/cm/2018/1">
<cm:property name="Id" key="true" />
<cm:property name="ZipCode" />
<cm:property name="Line1" />
<cm:property name="Line2" />
<cm:property name="Name" />
<cm:property name="City" typeName="{0}.City" />
<cm:property name="State" />
</cm:entity>
<cm:entity name="City" namespace="Reusable" xmlns:cm="http://www.softfluent.com/cm/2018/1">
<cm:property name="Id" key="true" />
<cm:property name="Name" />
<cm:property name="Class" />
<cm:property name="Code" />
<cm:property name="Country" typeName="{0}.Country" />
</cm:entity>
<cm:entity name="Country" namespace="Reusable" xmlns:cm="http://www.softfluent.com/cm/2018/1">
<cm:property name="IsoCode" key="true" typeName="string" />
<cm:property name="Name" />
</cm:entity>If we then open another CodeModeler project, say “CarRental”, and click on “Paste” in the surface context menu, the whole namespace (and all its contained concepts, entities, enumerations, properties, methods, etc.) will be pasted (imported) directly in the surface:
From here, we can for example rename the imported namespace using the namespace group shape context menu, to fully integrate it in the target model:
