TK Live View
    No edit summary
    (Updated Edited template to July 12, 2025.)
     
    (25 intermediate revisions by 3 users not shown)
    Line 1: Line 1:
    I have been showing what has been growing slowly in the designing of the web UI and while the app is running. This is more of the same. We have taken it a bit further and consolidated some of the functions that I think one needs when fine-tuning the look and feel of a web application.  
    <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.  


    There are four foldup sections in the TK Live View: Live Edit, Server Setup, Assets TK Synk, and Debug Information.
    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]]
     
    '''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


    === Turnkey Live Editor ===
    We have an icon that calls the Turnkey Live Editor. This is sort of a hybrid between the ViewModel Editor, where you change the definition of the views, but this way, you can run the application. It is a combination of the run button which we had before - where you prototype and start the system in either WPF or in the local Turnkey prototyper. When the icon is pushed, you get a corresponding ViewModel connected to it because they share some of the logic. <blockquote>It is basically an embedded browser, the new WebView2, Microsoft's embedded Edge browser, which is replacing the old Internet Explorer and Edge. </blockquote>
    === Server Setup ===
    === Server Setup ===
    When you click on Server Setup, it has a similar look to that of the play button for the system prototyper. You can check if you have the current Turnkey core installed. It is optional; you can either run it towards a local XML file or use the MDriven Server which will use the settings from the cloud connection for data.  
    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]]
     
    === 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
    [[File:turnkey-live-editor-live-edit-section.png|alt=Turnkey Live Editor Live Edit Section|none|thumb|881x881px]]


    If you choose the MDriven Server, the "Settings for MDrivenServer" button will light up in blue when you hover over it. Click on it and a new window labeled CloudForm will open. This is where you can set the server you want to run against.
    ===== 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.


    Or you can choose to use the XML. "Re(Start) MDriven Turnkey Core", and you may see new text that highlights in red when it discovers that there is a server running, or the settings from before don't match the file you are actually working on (you may be working on a file that's stored in the internet cache  -  a sample model for association). Restart the server, and once that is done, fold the Server Setup tab again, and then the popup window is started with your application in the browser.
    ===== 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.


    === Live Edit===
    ===== The Web UI =====
    If you choose to fold down the Live Edit tab, you get the view model tree, and also a few of the settings that are interesting per view model column.
    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:


    When you click something in the ViewModel tree, you can see where it is positioned on the X and Y axis. You don't have to refresh and that's the beauty of running within a harness like this, because we can do the push and refresh for you to make things move smoother. You can also move things around, and since it is a running application, you can, for example, expect to find actions, create a new thing, and save that.
    * 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===
    === AssetsTK Synk===
    it has been available with assets for a long time but they have been a bit hard to work with because you had to read in the wiki on how to do it and then you had to do it yourself in order to get it to work and I've always thought that we should be able to do that give it a bit more service to get these working because I think they are really good so and this was a good place where they fit in the overall workflow.
    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.


    so when you turn on this you get the application and ensures a assets TK folder which is named the same as the the model that you have with underscore assets TK because that's the trigger for it to be discovered once we upload the model to the cloud etc and this is just basically a file tree where you can F5 it to to make sure that you see everything and then I added these buttons for common things that we put in the in the assets so for example the TK user CSS so if I click that one and press I would have expected to yeah I got a content folder and I got a TK user CSS so this one I can just open and I got a notepad for that of course you can associate this with a better tool like Visual Studio or Visual Studio code something like that but what's good is that this can be made to to sync and discover changes in this file and what it will do when it syncs is to upload it to the server to make it active for the server immediately so let's see how that works I'm going to turn on sync here and then I'm gonna like write the HTML ground yellow and once I've saved that my whole application turned turned yellow so no matter which screen I'm at it will have a yellow background and to if I were to change this to purple and save without doing anything else this is shown for me so this is there's quite a lot of things going on to make this happen but the important thing is that it will be much easier for us to maintain or to see the result of a CSS like this so that's one type of asset to change the whole applications CSS but then working from experience Alex and Dennis we know that TK user CSS that addresses the whole application isn't always the perfect fit because quite often when we have a specific UI we want to pinpoint that only and not destroy anything else and it's really hard when you can't be sure that a view is isolated. So Dennis you added this view assets thing to make it possible to have sort of a TKUser CSS but per view model and this is also allowing for JavaScript. And this actually checks which view you have active at this point.
    This section provides options to create asset files for customizing the Turnkey application UI and merging models into the current running Model.


    So I'm going to go into this view and then I'm going to go here and then I'm going to press this view assets button and pressing F5 here I see that I got a view assets folder and I got a view one thing folder for this view model and I got these two CSS and JavaScript empty files currently. But I'm going to sync that one and I'm going to open that one and apparently I'm doomed to edit all my CSS in notepad and so this is the view one thing and this was the TKUser so I can set this one to maybe green. So now this one is green but this one is still purple.
    ===== 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 ===
    === Debug Information ===
    === Watch the video to learn more ===
    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.   
    (Video)
     
    {{Edited|July|12|2024}}
    === 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>
     
    {{Edited|July|12|2025}}
    [[Category:MDriven Designer]]
     
    [[Category:TOC]]

    Latest revision as of 06:04, 20 January 2025

    This page was created by Stephanie@mdriven.net on 2023-06-14. Last edited by Edgar on 2025-01-20.


    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

    Retrieved from "https://wiki.mdriven.net/index.php?title=Documentation:TK_Live_View&oldid=25496"

    © MDRIVEN . All Rights Reserved

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

    © MDRIVEN . All Rights Reserved