CoCoViLa — Model-Based Software Development Platform

Creating a simple package

In this tutorial, the creation of a very simple visual language for logical circuits is shown.

After opening the Class Editor, choose File -> Create package to create a new package.

Creating a package

You will be prompted with dialog box to set a name and a description of the package.

Naming a package

After pressing OK, you are prompted to give a location where the package will be saved. It's a good idea to put it into a new subdirectory of the packages directory.

You can then start drawing your visual classes; in this case, we can just draw a simple triangle, representing the logical OR element.

Drawing a visual class

After the class is drawn, its ports can be added. In this case, the object has 3 ports — two for input and one for output. Add a port using the Port icon in the palette, and set the name and type of the port.

Adding a port

The properties of the visual class should also be set, this can be done through the Edit -> Class Properties menu.

Setting class properties

Class properties include its name, its short description, and the name of the icon of the class that will be shown in the toolbar. Note that the icon of the class is not automatically generated, but it should be created in a bitmap editor and saved in the directory of the package in .gif or .png format. The fields of the class are those which we can later edit in the scheme editor.

Editing class fields

Now the visual class is almost ready, the final thing before exporting it into the package is to set its bounding box — the area in which mouse clicks will be registered in the Scheme Editor when an object of this visual class is drawn.

Defining a bounding box

After the bounding box is set, the visual class can be exported to the package created earlier.

Exporting a class to a package

The visual class is built, we can now attach semantics to it. An OR element takes two inputs, and returns the maximum of them, we will write a suitable Java class for this in a text editor.

Editing a metaclass in external editor

The comments between /*@ and @*/ tags denote the meta-interface of the class. It states that the component has three interface variables in1, in2 and out, and knowing in1 and in2, we can compute out using the method calc (the method is simply an appropriate Java method). Note that we use the same names for variables as we used for ports in the visual class; this way we can make the relation between the ports and the variables explicit. When the Java file is ready, it should be save in the same directory as the package was saved, the name of the Java class should be the same as the name of its corresponding visual class.

The (extremely simple) package is now ready to be used. See the tutorial on using the Scheme Editor for further details.