The Turnkey Live View is for designing the web UI while the app is running. It is for making changes to the difference interfaces of the application through the difference ViewModels and view the results of the changes in real time. This is used for designing and testing the app's UI responsiveness and testing UI concepts.

The Turnkey Live View is accessible through the Turnkey Live View Editor button. It is an embedded browser within the designer for editing the UI.

NOTE: The Turnkey application has to be running inorder to use the TurnKey Live View.

Turnkey Live View Features:

• Server Setup
• Live Edit
• AssetsTK Synk
• Debug Information

Server Setup

The Server Setup section is for starting the Turnkey application. You can either use the local Turnkey prototyper (default) or use MDriven Server setting to start the app.

Live Edit

The Live Edit section is where the actual fine tuning of the UI is done in real time, either from the ViewModel tree or the the actual generated UI.

For editing and designing, Live Edit has three sections:

• The ViewModel tree
• The Web UI
• Advanced Edit

The ViewMode tree

The ViewMode tree provides access to the ViewModel Editor interface of a ViewModel. It provides all the options and settings of the ViewModel editor. Addings columns, rearranging columns, adding Nestings, placing containers and so much more.

Advanced Edit

Advanced Edit section is for ViewModel and ViewModel column properties settings and constraint settings. This also another feature adopted from the ViewModel editor.

The Web UI

This section shows you the UI as it will be seen by users. Directing editing is available in this section for dragging and repositioning UI widgets,

• Turn on Edit to edit UI
• The Live update feature turned on is for viewing ViewModel changes in real time.

AssetsTK Synk

This section for AssetsTK folder configurations for the current running Model. When this section is expanded, the AssetsTK folder is automatically created if it does not exist.

The AssetsTK Synk features:

Refresh file tree: This is for refreshing the AssetsTK file tree to view all content currently in the folder.

Ensure Content/tkuserCss.css

Ensure Content/theme-user.css

Ensure EXTScripts/appwideangularscriptincludes.html

Ensure ViewAssets/<NameOfViewModel> (css.js)

Ensure Views/EXTOverridePages/<NameOfViewModel>.tagexpander.cshtml

Ensure EXTComponents/TemplateComponent (css,html,js)

(Re)Download Components from GitHub

Components to choose from

Debug Information

The fourth tab under the Turnkey Live Editor button is the Debug Information. It is the same debugger that's available from pressing the play button (select XML, click on Select system, then choose Debugger). If you use the server setup and run it against an MDriven server, then you will want to run the debugger against that MDriven server and have access to the same data. This feature made it easier to make sure that the settings are the same for for everyone.

All in all, the Turnkey Live Edit is not where you start to design your whole application because it can be difficult to get started. However, it is a place where you can finetune your application and certainly work with the styling, the debugger, and with the Javascript files because it's really good to use the Chrome Debugger to to step the Javascript files to see where you're going wrong. This is a step forward in taking care of the whole process to get a finished system.