View source for Documentation:MDriven designer overview Part 1

{{message|Write the content here to display this box.}}

You can use '''MDriven Designer''' to create a model, organize it with diagrams, and document classes, processes, and state in one repository; this introduction is for new users following the first Designer overview.

MDriven Designer is a modeling environment in which you define a model of your application. A diagram is a visual representation of model elements, such as classes. The same class can appear on more than one diagram without becoming a different class.

For the complete sequence of overview sessions, see [[HowTos:MDriven Designer Overview Series]]. For a broader introduction to the product, see [[Documentation:Introduction to MDriven Designer]].

A video walkthrough of the key concepts is available below.
<p class="video-warn">
<em>To make your experience smooth, we set the main tags mentioned in the video to the right bar menu of this mini-player. Choose an interesting subtitle on the list and immediately get to the exact theme navigation item place in the video. Now you can pick any topic to be instructed on without watching the whole video.</em>
</p>
 <div class="video">
  <div class="video__wrapper">
 <iframe src="https://www.youtube.com/embed/RxBhb0K6ibo?rel=0&autoplay=0" frameborder="0" allowfullscreen></iframe>
  </div>
  <div class="video__navigation">
    <span data-video="RxBhb0K6ibo" data-start="35" tabindex="0"> <strong> MDriven Designer Installation</strong> </span>
== Start MDriven Designer ==
MDriven Designer is distributed through Microsoft ClickOnce. ClickOnce starts the application from its published location and updates it when an update is available.

# Go to [https://mdriven.net/designer the MDriven Designer site].
# Select '''Run with ClickOnce'''.
# If your browser does not recognize the <code>.application</code> file type, configure a ClickOnce handler or use a browser and environment that supports ClickOnce.
# Start the application after the browser has handed the ClickOnce file to its handler.
# When Designer opens, it starts with the default or starting model. Create a new model when you want to begin the walkthrough from an empty starting point.

To launch MDriven Designer, follow these steps:
[[File:MDriven Designer Overview .jpg|thumb|319x319px|MDriven Designer overview screen with the default model.]]
To outset the guidance we need:
# Go to the https://mdriven.net/designer site and open MDriven Designer by clicking  "Run with ClickOnce"'''.'''
# '''Note!''' For Chrome and Firefox, you may need a plugin to associate the ''.application extension'' with ClickOnce ([https://chrome.google.com/webstore/detail/meta4-clickonce-launcher/jkncabbipkgbconhaajbapbhokpbgkdc?utm_source=chrome-app-launcher-info-dialog plugin for Chrome] / [https://addons.mozilla.org/en-US/firefox/addon/meta4clickoncelauncher/ plugin or Firefox]).
'''Click Once''' is the distribution technology from Microsoft. It updates every time there's a need; otherwise, the application stays in your internet cache, so that's a safe way to execute the application.
== Understand the overview screen ==

The overview screen shows the diagrams in the current model. The '''Repository tree''' also lists the model content and is the primary place to select and organize it. When you select an item in the Repository tree, its properties are shown in the '''Object Inspector''', below the tree.

For example, a new model can contain one class diagram named <code>Diagram1</code>. That diagram is visible both on the overview screen and in the Repository tree.

{| class="wikitable"
! Area
! What you use it for
! Example
|-
| Overview screen
| See and open diagrams in the model.
| You can see <code>Diagram1</code> as a diagram on the screen.
|-
| Repository tree
| Select, create, and navigate model content.
| Select <code>Diagram1</code>, or add another class diagram.
|-
| Object Inspector
| View and edit properties of the selected item.
| Change the selected diagram's '''Name''' property to <code>MyFirstDiagram</code>.
|}
== Create and name class diagrams ==

A class diagram displays classes and their relationships. Use diagrams to make separate views of a model; do not treat each diagram as a separate model.

# In the Repository tree area, choose '''Add Class diagram'''.
# Designer adds a new diagram, such as <code>Diagram2</code>, to both the Repository tree and the overview screen.
# Select the new diagram in the Repository tree.
# In the Object Inspector, edit the '''Name''' property. For example, rename <code>Diagram2</code> to <code>MyNewDiagram</code>.
# Select the original diagram and rename it to <code>MyFirstDiagram</code> if you want the names to describe their purpose.

A diagram has properties that control its behavior. You do not need to set these properties to begin modeling, but they let you control how diagrams are organized and used.
=== Categorize diagrams ===

A category is a named label that you can apply to diagrams.

# In the Repository tree area, choose '''Add a category'''.
# Select the new category and enter a name in its '''Name''' property, for example <code>Important</code>.
# Add another category if needed, for example <code>LessImportant</code>.
# Select a diagram and set its category to organize it. For example, apply <code>Important</code> to <code>MyFirstDiagram</code> and <code>MyNewDiagram</code>.

Use categories to identify the diagrams that matter to a particular discussion or area of the system. They organize diagrams; they do not change the classes shown on those diagrams.
== Navigate between diagrams ==

# Double-click a diagram to enter it.
# Use the switch-back arrow to return to the overview screen.
# You can also select or double-click diagrams in the Repository tree to move between them.

When diagrams are empty, switching between them can be hard to notice. Rename diagrams early and add a small amount of content so that each view is recognizable.
== Add classes and reuse them on diagrams ==

A class represents a type in your model. Classes live in a '''package''', which is a way to divide a software system into sections, similar to a namespace. A model can have multiple packages, but you do not need multiple packages for a small starting model.

# Enter <code>MyNewDiagram</code>.
# Right-click in an empty area of the diagram and choose '''Add a class'''.
# Name the class <code>Class1</code>.
# Add a second class named <code>Class2</code> if you want a second example element.

The new classes appear on <code>MyNewDiagram</code> and in the Repository tree. They do not automatically appear on <code>MyFirstDiagram</code>, because each diagram controls which model elements it displays.
=== Show an existing class on another diagram ===

# Return to the overview screen and enter <code>MyFirstDiagram</code>.
# Locate <code>Class1</code> in the Repository tree.
# Drag <code>Class1</code> from the Repository tree onto <code>MyFirstDiagram</code>.

<code>Class1</code> now appears on both diagrams. It remains one class in the model, with two visual representations. For example, you can use <code>MyNewDiagram</code> to show classes being developed and <code>MyFirstDiagram</code> to show a higher-level view containing the same classes.

You can also drag one diagram onto another diagram. Designer shows the inserted diagram as a small diagram image, which helps you build navigation and overview diagrams.
== Capture processes ==

A process records a workflow: the order in which work is performed. Process information can document the domain you are designing before or alongside implementation details.

# Add a process definition from the Repository tree area.
# Name the process, for example <code>Fetching Mail</code>.
# Double-click the process in the Repository tree to open its process view in the Enterprise window.
# Add the steps that describe the workflow.
# Add a process diagram when you need a visual representation of the process and enrich it as you learn more about the domain.

For example, <code>Fetching Mail</code> can document the steps involved in retrieving mail. As the model evolves, the process can be connected to the information, actors, and classes that describe how the work is performed.
== Add a StateMachine ==

A '''StateMachine''' describes the states of a class. Unlike a class diagram or process diagram, creating a StateMachine requires a class attribute that represents state.

# Select <code>Class1</code>.
# Add a StateMachine.
# Designer creates a state attribute named <code>State</code> on <code>Class1</code> and opens the new StateMachine.
# Use the switch-back navigation to return to the class diagram when you want to continue modeling the class.

For example, a class can use its <code>State</code> attribute to represent the current state managed by its StateMachine. Keep the StateMachine focused on the lifecycle of that class rather than using it as a general process diagram.
== Continue learning ==

This page covers the initial repository and diagram concepts. Continue with the overview series for topics such as [[Documentation:MDriven designer overview Part 4|modal ViewModels]], actions, navigation, and prototyping. See [[Documentation:Designer]] for the Designer documentation entry point.
== Setting a New Diagram ==

The overview screen presents these key user interface elements:
[[File:Overview screen.jpg|thumb|UI elements]]

== Processes ==

Processes appear in the Repository tree and can be visualized in the Enterprise Window:
 [[File:Processes.jpg|thumb|224x224px|Processes]]
A process is just a workflow of the order in which you should do things. Double-click it on the repository tree and you will get the view of “Processes“ in the “Enterprise Window”.

== See also ==

* [[HowTos:MDriven Designer Overview Series]]
* [[Documentation:MDriven Designer Overview Series]]
* [[Documentation:Introduction to MDriven Designer]]
* [[Documentation:Designer]]
* [[Documentation:MDriven designer overview Part 4]]
* [[Documentation:Part 10 MDriven Designer Overview. Actions and navigation]]

[[Category:Beginner-Friendly]]
[[Category:MDriven Designer Overview Series]]
[[Category:Priority 20]]
[[Category:Tutorials & Learning Paths]]