Practice with model examples

You can use these exercises to explore a model example in MDriven Designer and connect its behavior to a concrete user scenario.

A model is a structured representation of a system, including its data, relationships, and behavior. Start with one focused outcome: for example, move a card between lists, update a map marker, or interact with a timeline.

Before you start

1. Choose one example from Documentation:Complete model examples.
2. Download the model file for the example.
3. Work in an empty or incomplete model when you want to add functionality from an example. Use open merge add from the model you want to extend.
4. Keep a note of the behavior you expect to test before you run the example. For example: "I can move a card from one list to another."

When you merge a model file, MDriven combines matching content rather than creating duplicate classes, packages, diagrams, ViewModels, or AssetsTK content. If an incoming ViewModel has the same name as one already in your model, that ViewModel name is skipped.

Exercise 1: Move SVG objects

Use the SVG interaction example when you need objects represented by SVG graphics to react to mouse events.

1. Download SvgInteractionMoveBoxesAround.modlr from Documentation:Complete model examples.
2. Merge it into the model you want to explore.
3. Run the example.
4. Create objects represented by SVG graphics.
5. Move an object with the mouse and save the result.
6. Record what changed after you moved and saved the object.

Result to verify: An SVG object reacts to mouse input, can be moved, and the moved position can be saved.

Exercise 2: Update a position on a map

Use the Google Maps example when your scenario needs a marker whose position can be shown and updated.

1. Download GoogleMapWithMarkers.modlr from Documentation:Complete model examples.
2. Merge it into your model.
3. Run the example and locate the marker on the map.
4. Move the marker.
5. Observe the map setting and the updated marker position.
6. Write down the user action that changes the position and the data you need to keep for that position.

Result to verify: You can place and move a marker while tracking the map setting.

Gotcha: Production use requires your own Google API key.

Exercise 3: Test a board workflow

Use the Trello-like board example when users need to organize work as cards in lists.

1. Download TrelloLikeBoard.modlr from Documentation:Complete model examples.
2. Merge it into your model.
3. Run the example.
4. Add a card to a list.
5. Move the card to another list.
6. Open a card.
7. Describe one workflow from your domain using the same pattern. For example, move a support request from "New" to "In progress".

Result to verify: A user can add cards, open a card, and move cards between lists.

Exercise 4: Choose an editor or timeline

Choose one of the following examples based on the information your users need to work with.

Scenario	Example	Task	Result to verify
Users write formatted text, such as a description or article.	HtmlEditor.modlr	Download the Markup Editor TinyMCE example, merge it, and enter rich HTML text.	Users can produce rich HTML text.
Users need to view and interact with scheduled or time-based information.	GanttChartInteractive.modlr	Download the Gantt Chart Interactive example, merge it, and identify the timeline data your scenario must show.	You can show and interact with data in a timeline.

Extend the exercise

After you have verified one example, add one small change in your own model. For a board scenario, create a class that represents the item you want to move, such as a support request. Add the attributes that describe it, then create or refresh AutoForms.

Use OCL when you need model logic. For example, a project can calculate its number of tasks with self.tasks->size. Test the behavior again after your change and confirm that the example still supports the scenario you selected.

See also

• Documentation:Complete model examples
• Documentation:Example Gist
• Documentation:Model
• Training:Bootcamp:Chapter 1