Charles Olet (talk | contribs) No edit summary |
Charles Olet (talk | contribs) No edit summary |
||
Line 40: | Line 40: | ||
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. | 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. | ||
This sections provides options for creating asset files for customizing the Turnkey application UI and merging mergeable models into the current running Model. | |||
===== The AssetsTK Synk features: ===== | |||
'''Ensure Content/tkuserCss.css''' | * '''Refresh file tree:''' This is for refreshing the [[Documentation:AssetsTK|AssetsTK file]] tree to view all content currently in the folder. | ||
* '''Ensure Content/tkuserCss.css:''' Creates the [[Documentation:Tkusercss|tkusercss file]] for creating personalized css that can be merged into the Turnkey applications | |||
'''Ensure Content/theme-user.css''' | * '''Ensure Content/theme-user.css:''' Creates the [[Documentation:MDriven Turnkey theming|theme-user css file]] for editing the default Turnkey theme properties. | ||
* '''Ensure EXTScripts/appwideangularscriptincludes.html:''' Create the [[Documentation:AppWideAngularScriptIncludes|AppWideAngularScriptIncludes html file]] for loading scripts in the page rendering. | |||
'''Ensure EXTScripts/appwideangularscriptincludes.html''' | * '''Ensure ViewAssets/<NameOfViewModel> (css.js):''' Creates ViewModel css and js files for overriding the UI. | ||
* '''Ensure Views/EXTOverridePages/<NameOfViewModel>.tagexpander.cshtml:''' Creates the current ViewModel [[Documentation:Fashion with tagexpander|tageexpander file]] for overriding the default Turnkey UI implementation. | |||
'''Ensure ViewAssets/<NameOfViewModel> (css.js)''' | * '''Ensure EXTComponents/TemplateComponent (css,html,js):''' Creates the folder and files structure for creating an [[Documentation:EXT Components|Angular component]] to integrate in the Turnkey application. | ||
* '''(Re)Download Components from GitHub:''' Downloads the latest MDriven's mergeable models onto your local machine. | |||
'''Ensure Views/EXTOverridePages/<NameOfViewModel>.tagexpander.cshtml''' | * '''Components to choose from:''' This section provides MDriven mergeable Models available for merging into the current model. These include examples and patterns for integrating other MDriven functionality into the app. ''First '''Download Components from GitHub''' before using this feature.'' | ||
'''Ensure EXTComponents/TemplateComponent (css,html,js)''' | |||
'''(Re)Download Components from GitHub''' | |||
'''Components to choose from''' | |||
=== Debug Information === | === Debug Information === | ||
The | The Debugger UI provides access to the Model using the '''Server Setup''' settings used to start the Turnkey application. This section adopts all the functionality of the Model debugger to check for errors, creating, reading and updating Model data including testing ViewModels. | ||
=== Watch the video to learn more. === | === Watch the video to learn more. === |
Revision as of 05:02, 24 August 2024
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.
This sections provides options for creating asset files for customizing the Turnkey application UI and merging mergeable models into the current running Model.
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: Creates the tkusercss file for creating personalized css that can be merged into the Turnkey applications
- Ensure Content/theme-user.css: Creates the theme-user css file for editing the default Turnkey theme properties.
- Ensure EXTScripts/appwideangularscriptincludes.html: Create the AppWideAngularScriptIncludes html file for loading scripts in the page rendering.
- Ensure ViewAssets/<NameOfViewModel> (css.js): Creates ViewModel css and js files for overriding the UI.
- Ensure Views/EXTOverridePages/<NameOfViewModel>.tagexpander.cshtml: Creates the current ViewModel tageexpander file for overriding the default Turnkey UI implementation.
- Ensure EXTComponents/TemplateComponent (css,html,js): Creates the folder and files structure for creating an Angular component to integrate in the Turnkey application.
- (Re)Download Components from GitHub: Downloads the latest MDriven's mergeable models onto your local machine.
- Components to choose from: This section provides MDriven mergeable Models available for merging into the current model. These include examples and patterns for integrating other MDriven functionality into the app. First Download Components from GitHub before using this feature.
Debug Information
The Debugger UI provides access to the Model using the Server Setup settings used to start the Turnkey application. This section adopts all the functionality of the Model debugger to check for errors, creating, reading and updating Model data including testing ViewModels.
Watch the video to learn more.