TK Live View
No edit summary
No edit summary
 
(34 intermediate revisions by 3 users not shown)
Line 1: Line 1:
So I'm just going to use the standard model to show these things. And what has happened from before is that we have a new icon here that calls the turnkey live editor. And this is the view model editor.  
<message>Write the content here to display this box</message>
The Turnkey Live View enables you to design the web UI while your app is running. It makes changes to the different interfaces of the application through the different ViewModels and allows you to view the results of the changes in real time. It is useful for designing and testing the app's UI responsiveness and testing UI concepts.  


So they resemble each other. And it's a combination of the run button, which we had from before, where you prototype and start the system in either BPF or in the local turnkey prototyper. So this is sort of a hybrid between the view model editor, where you actually change the definition of the views, and this way you actually run the application.
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.
[[File:turnkey-live-editor-button-in-designer.png|alt=Turnkey Live Editor Button in the MDriven Designer|none|thumb|933x933px]]


So if I push this one, I always get a corresponding view model connected to it, because they share some of the logic. So if you don't want to see it, you don't need to look at it, but it's there.
'''NOTE:''' The Turnkey application has to be running in order to use the Turnkey Live View.  


And this is basically a embedded browser, the new WebView2, Microsoft's embedded Edge browser, which is replacing the old Internet Explorer and Edge. So what happened there was they said that, well, there's no connection to the target machine. So what we want to do is to set up a server.
=== Turnkey Live View Features: ===
* Server Setup
* Live Edit
* AssetsTK Synk
* Debug Information


So this is something that looks very much as it did in the play button, that we can check if we have a current turnkey core installed, we need one of those, and that we can use. So this is new, and particularly Eulage has been asking for the ability to connect it to a M-driven server instead. So this is optional.
=== Server Setup ===
The Server Setup section starts the Turnkey application. You can either use the local Turnkey prototyper (default) or use the MDriven Server setting to start the app.
[[File:turnkey-live-editor-server-setup-section.png|alt=Turnkey Live Editor ServerSetup Section|none|thumb|905x905px]]


You can either run it towards a local XML file, or you can use the M-driven server, and that will use the settings from the cloud connection for data. Sweet. So, and if you that one, this button lights up, and you get to this one where you actually can set the server that you want to run against.
=== 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.


But for now, I'm going to use the XML. So what I want to do is to restart the turnkey core, and this new text highlights in red when it discovers that if there is a server running, or the settings from before doesn't match the file that we're actually working on. So I'm working on a file that's stored in the internet cache here, so sample model for association.
For editing and designing, Live Edit has three sections:


I'm going to restart the server, and once that is done, I can fold this tab again, and then this one is started with our application. So this is basically just the application in the browser, nothing to it so far. But when we choose to fold down this live edit tab, we get the view model tree, and also some of the few of the settings that are interesting per view model column.
* The ViewModel tree
* The Web UI
* Advanced Edit
[[File:turnkey-live-editor-live-edit-section.png|alt=Turnkey Live Editor Live Edit Section|none|thumb|881x881px]]


So when I click something here, like this, all things, I can see that this is positioned at the position 0x and 0y, and if I were to change this to like 10 instead, this would immediately jump, and I don't have to refresh or anything, and that's the beauty of us running within a harness like this, because we can do the push and refresh for you, so to make things move smoother. And as I've shown before, we can also move things around like this, and since this is the running application, I can expect to find the actions, I can create a new thing, and I can save that, and if, well, this is small screen, so I'm gonna view one thing.
===== The ViewModel tree =====
The ViewModel tree provides access to the ViewModel Editor interface of a ViewModel. It provides all the options and settings of the ViewModel Editor such as adding and rearranging columns, adding nestings, placing containers and more.


So that's pretty much all what we prior to view models did with handles and the cursor manager handlers to point out which object was currently in a hierarchy and things like that everything of that type is encapsulated in the view model implementation and of course you could just as well have done a transient class called view one thing and added these derived attributes or have them as their own properties and that that would sort of solve the same problem but this is fewer clicks and and less things to maintain.
===== Advanced Edit =====
The Advanced Edit section is for ViewModel and ViewModel column properties settings and constraint settings. This is also another feature adopted from the ViewModel Editor.
 
===== The Web UI =====
This section shows you the  UI as it will be seen by users. Direct editing is available in this section for dragging and repositioning UI widgets:
 
* Turn on '''Edit''' to edit in Web UI
* Turning on the '''Live Update''' feature enables you to view ViewModel changes in real time.
[[File:turnkey-live-editor-live-edit-section-additional-settings.png|alt=Additional Settings of Live Edit in Turnkey Live View|none|thumb|912x912px]]
 
=== AssetsTK Synk===
This section of the AssetsTK folder shows configurations for the current running Model. When this section is expanded, the AssetsTK folder is automatically created if it does not exist.
 
This section provides options to create asset files for customizing the Turnkey application UI and merging models into the current running Model.
 
===== The AssetsTK Synk features: =====
 
* '''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:''' 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 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 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 mergeable models onto your local machine.
* '''Components to choose from:''' This section provides MDriven 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.''
[[File:turnkey-live-editor-server-assetstk-synk-section.png|alt=Turnkey Live Editor Server AssetsTK Synk Section|none|thumb|866x866px]]
 
=== 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 this video to learn more ===
<html>
<div class="video">
  <div class="video__wrapper">
    <iframe src="https://www.youtube.com/embed/1eLE21j69Jo?si=zZgxayaarFvQ9LHv" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
  </div>
 
</html>


=== Watch the video to learn more ===
(Video)
{{Edited|July|12|2024}}
{{Edited|July|12|2024}}
[[Category:MDriven Designer]]
[[Category:TOC]]

Latest revision as of 06:18, 27 August 2024


The Turnkey Live View enables you to design the web UI while your app is running. It makes changes to the different interfaces of the application through the different ViewModels and allows you to view the results of the changes in real time. It is useful 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.

Turnkey Live Editor Button in the MDriven Designer

NOTE: The Turnkey application has to be running in order to use the Turnkey Live View.

Turnkey Live View Features:

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

Server Setup

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

Turnkey Live Editor ServerSetup Section

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
Turnkey Live Editor Live Edit Section
The ViewModel tree

The ViewModel tree provides access to the ViewModel Editor interface of a ViewModel. It provides all the options and settings of the ViewModel Editor such as adding and rearranging columns, adding nestings, placing containers and more.

Advanced Edit

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

The Web UI

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

  • Turn on Edit to edit in Web UI
  • Turning on the Live Update feature enables you to view ViewModel changes in real time.
Additional Settings of Live Edit in Turnkey Live View

AssetsTK Synk

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

This section provides options to create asset files for customizing the Turnkey application UI and merging 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 mergeable models onto your local machine.
  • Components to choose from: This section provides MDriven 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.
Turnkey Live Editor Server AssetsTK Synk Section

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 this video to learn more

This page was edited 24 days ago on 08/27/2024. What links here
Retrieved from "https://learn.mdriven.net/index.php?title=Documentation:TK_Live_View&oldid=22855"

© MDRIVEN . All Rights Reserved

API Docs
MDriven World | Portal | Blog | YouTube | StackOverflow | Facebook

© MDRIVEN . All Rights Reserved