// Create a UMLClass and UMLClassView

var options1 = {
 id: "UMLClass",
 parent: diagram1._parent,
 diagram: diagram1,
 x1: 100,
 y1: 100,
 x2: 200,
 y2: 200
}
var classView1 = app.factory.createModelAndView(options1)

// Create another UMLClass and UMLClassView

var options2 = {
 id: "UMLClass",
 parent: diagram1._parent,
 diagram: diagram1,
 x1: 400,
 y1: 100,
 x2: 500,
 y2: 200
}
var classView2 = app.factory.createModelAndView(options2)

// Create an association connecting the two classes

var options3 = {
 id: "UMLAssociation",
 parent: diagram1._parent,
 diagram: diagram1,
 tailView: classView1,
 headView: classView2,
 tailModel: classView1.model,
 headModel: classView2.model
}
var assoView = app.factory.createModelAndView(options3)

Creating a view element of an existing model element

Call createViewOf function of app.factory to create a view element of an existing model
element with an option object.

The option object may have following fields:

model : A model element referenced by the created view element.

diagram : A diagram element where the created view element to be contained.
viewInitializer (optional) : A function to initialize the created view element.
x , y (optional) : Position of the created view element.
containerView (optional) : A view element where the created view element to be
contained.
 var options = {
 model: classView1.model,
 diagram: diagram1,
 x: 500,
 y: 500,
}
app.factory.createViewOf(options)

You will see the one more class view element at (500, 500).

Adding tags to an element

If you want to extend an element with additional tags, you can create tags by calling
createModel function with Tag parameter of app.factory . There are five kinds of Tag: String,
Number, Boolean, Reference, and Hidden. Hidden tags are not shown in diagrams, but other tags
are shown as properties. (Check Format > Show Property menu). Following code will create a
string tag to the selected element.

// Get a selected element

var selected = app.selections.getSelected()

// Options for creating a tag

var options = {
 id: "Tag",
 parent: selected,
 field: "tags",
 modelInitializer: function (tag) {
   tag.name = "Tag1";
   tag.kind = type.Tag.TK_STRING; // or TK_BOOLEAN, TK_NUMBER, TK_REFERENCE,
TK_HIDDEN
   tag.value = "String Value...";
   // tag.checked = true; // for TK_BOOLEAN
   // tag.number = 100; // for TK_NUMBER
   // tag.reference = ...; // for TK_REFERENCE
}
}

// Create a tag to the selected element

var tag1 = app.factory.createModel(options)

Modifying elements

Change property value

You should not modify a property of an element directly like class1.name = "New Name"
because all changes should be done via operations which supports by undo and redo.

To change property value, use app.engine.setProperty() function as below:

// Get a selected element

var selected = app.selections.getSelected()
// Change property value
app.engine.setProperty(selected, 'name', 'New Name')
Examples

Sequence Diagram
Here is an example to create a Sequence Diagram including two Lifelines and a Message.

var project = app.repository.select("@Project")[0]

var model1 = app.factory.createModel({ id: "UMLModel", parent: project })

// Create a Sequence Diagram

var options = {
 id: "UMLSequenceDiagram",
 parent: model1,
 diagramInitializer: function (dgm) {
   dgm.name = "MyDiagram";
}
}
var diagram1 = app.factory.createDiagram(options)

// Create a Lifeline
var options1 = {
 id: "UMLLifeline",
 parent: diagram1._parent,
 diagram: diagram1,
 x1: 50,
 y1: 20,
 x2: 50,
 y2: 20
}
var lifelineView1 = app.factory.createModelAndView(options1)

// Create another Lifeline

var options2 = {
 id: "UMLLifeline",
 parent: diagram1._parent,
 diagram: diagram1,  
 x1: 150,
 y1: 20,
 x2: 150,
 y2: 20
}
var lifelineView2 = app.factory.createModelAndView(options2)

// Create a Message connecting the above two Lifelines

var options3 = {
 id: "UMLMessage",
 parent: diagram1._parent,
 diagram: diagram1,
 x1: 50,
 y1: 100,
 x2: 150,
 y2: 100,
 tailView: lifelineView1,
 headView: lifelineView2,
 tailModel: lifelineView1.model,
  headModel: lifelineView2.model
}
var messageView1 = app.factory.createModelAndView(options3)
Working with Selections
In this chapter, we're going to learn how to get selected elements, force to select particular
elements, and do something by listening to selection changed events.

Getting selected elements

Users can select elements in a diagram or in Model Explorer. Sometimes we may need to access
only the selected elements.

We need to distinguish between selected views and selected models. If you select the Book
class in a diagram, then there is a selected view ( UMLClassView ) and a selected model
( UMLClass ). If you select the Author class in Model Explorer, then there is a selected model
( UMLClass ) and no selected views.

We can access selected elements using app.selections as following:

var selectedViews = app.selections.getSelectedViews()

var selectedModels = app.selections.getSelectedModels()
var selected = app.selections.getSelected() // === selectedModels[0]

Enforce to select particular elements

To select a model element in Model Explorer, use ModelExplorerView module. (Assume that
Book.mdj used in Accessing Elements were loaded)

var book = app.repository.select("Model::Book")[0]

app.modelExplorer.select(book)

To scroll automatically so as to show the element, pass true value as the second parameter.

app.modelExplorer.select(book, true)

To select a view element in diagram, use app.diagrams . You can find more functions about
selection in API Reference.

var diagram = app.repository.select("@Diagram")[0]

var view1 = diagram.ownedViews[0]

app.diagrams.selectInDiagram(view1)

Listening selection changed event

Now we will show how to listen and handle a selection change event. An array of selected model
elements and an array of selected view elements are passed to the second and the third
parameters respectively to the callback function.