A user interface (UI) is how users interact with your MDriven application or with MDriven Designer; this page helps you choose and design the appropriate interface.
UI in MDriven
In MDriven, UI can mean two related things:
| Interface | Who uses it | What you use it for | Example |
|---|---|---|---|
| MDriven Designer UI | Model developers | Create and maintain the model, diagrams, ViewModels, actions, styles, and settings. | Select a class in a diagram and use the Property Inspector to set its name and attributes. |
| Application UI | Application users | View and work with information from your model through web or desktop applications. | A user opens an Order ViewModel, edits its delivery address, and runs an action. |
Build application UI with ViewModels
A ViewModel is a perspective on information in your model. You use ViewModels to define an application UI, the information available through a REST API, or report data.
Every ViewModel has a type: the model class it represents. It is also either rooted or not rooted:
- A rooted ViewModel receives one specific instance of its typed class. Use it for a document screen. For example, an
OrderViewModel rooted in one Order can show that order's number, customer, and order rows. - A not rooted ViewModel finds information at type level. Use it as a seeker. For example, an
Orderseeker can list orders so that the user can select one and open its rooted document screen.
You can use AutoForm to rapidly create ViewModels that browse all information in the current model. Before you prototype, verify that the model is coherent and has no errors.
Put actions in the right place
User actions define what users can initiate from the UI. Choose the scope based on where the action belongs.
| Action type | Where the user finds it | Use it for | Example |
|---|---|---|---|
| Global action | Main menu | Starting a task or opening a UI based on a ViewModel | Open an unrooted Order seeker from the main menu. |
| Class action | Left-side menu when an object of its class is available | An operation on an object of a specific class | Run an action for a selected Order. |
| ViewModel action | One specific view | An operation that belongs only to that ViewModel | Add a row from an Order editing view. |
Design web UI with Turnkey
MDriven Turnkey renders web UI from your ViewModels. Use Turnkey Live View when the Turnkey application is running and you want to design and test the running web UI.
To make a UI change in Turnkey Live View:
- Start the Turnkey application. Turnkey Live View is not available until the application is running.
- In MDriven Designer, open the Turnkey Live View Editor button.
- In Server Setup, choose the local Turnkey prototyper or the MDriven Server setting.
- In Live Edit, use the ViewModel tree to add or rearrange columns, add nestings, and place containers.
- To position widgets in the rendered application, turn on Edit in the Web UI section and drag the widgets.
- Turn on Live Update to see ViewModel changes in real time.
The AssetsTK Synk section manages UI asset files for the running model. For example, Ensure Content/tkuserCss.css creates a CSS file for personalized CSS, while Ensure Content/theme-user.css creates a file for changes to default Turnkey theme properties.
For web customization and styling topics, start with UI & Styling Documentation.
Design desktop UI
MDriven also supports desktop UI using WPF and WinForms. The UI & Styling Documentation section covers WPF styling, tagged values, debugger tools, menu shortcut keys, and Material Design in WPF.
Use desktop UI guidance when your application is built for WPF or WinForms rather than a Turnkey web application.
Use modal views for focused tasks
A modal view is a dialog or window displayed above the main application UI. It blocks interaction with the underlying UI until the user completes or dismisses it.
Use a modal view for a short, focused task. For example:
- Confirm deletion of an Order before the delete action runs.
- Show an error or warning that requires acknowledgement.
- Collect input in a small form, such as creating a new account.
- Ask the user to log in before opening a protected area.
Do not use modal views for long or complex workflows. A modal view restricts the rest of the application until the user closes it.
MDriven Designer provides the tools you use to build the model and its UI definitions.
| Designer element | Purpose | Example |
|---|---|---|
| Main Menu Bar | Access commands under File, Edit, View, and Help. | Use File to open or save a project. |
| Tool Bar | Open frequently used tools. | Select View Model Editor to organize how the client displays webpages. |
| Model Tree | Navigate classes, diagrams, and other model elements. | Expand nodes to locate a class in the project. |
| Property Inspector | View and edit details of the selected model element. | Select a class and set its name, type, or attributes. |
To create a class, select New Class on the Tool Bar, click the diagram area to place the class, and then use the Property Inspector to define its name and attributes.
UI and MDrivenServer
MDrivenServer provides access to database data through several interfaces. MDriven Framework-built applications can use the PersistenceMapper API. MDrivenServer also exposes data as JSON objects, enabling non-MDriven applications to perform CRUD operations on data in your model.
For example, you can define an Order ViewModel for a Turnkey UI while a separate application uses MDrivenServer JSON interfaces to create or update Order data.