Documentation:TK Live View: Difference between revisions

TK Live View

Revision as of 03:33, 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

This ability has been available with Assets for a long time, but they were challenging - you had to read the wiki and manually implement it. They are fully functional now and this is where they can fit seamlessly into the overall workflow.

When you turn on AssetsTK Synk, the application ensures an Assets TK folder which has the same name as your model, but with underscore AssetsTK ("_AssetsTK") because that's the trigger for it to be discovered once we upload the model to the cloud, etc. This is just basically a file tree where you can F5 it to to make sure you see everything.

To the right are buttons for common things that we put in the Assets, for example, the tkusercss. If you click on it and press on the AssetsTK folder, you would see a "content" folder which would then open a tkusercss file in Notepad (or you can associate it with a better tool like Visual Studio or Visual Studio code). It's beneficial because the tkusercss file can be made to to sync and discover changes in the Notepad file and when it syncs, it will upload it to the server and make it active for the server immediately.

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.

Watch the video to learn more.

This page was edited 24 days ago on 08/27/2024. What links here

@@ Line 1: / Line 1: @@
 <message>Write the content here to display this box</message>
-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.
+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.
-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.
-=== The Turnkey Live Editor ===
+'''NOTE:''' The Turnkey application has to be running inorder to use the TurnKey Live View.
-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>
+==== 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===
-If you choose to fold down the Live Edit tab, you get the view model tree, and a few, interesting settings per ViewModel column.
+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.
-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 MDriven 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 new things, and save those.
+For editing and designing, Live Edit has three sections:
-=== 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 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.
-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 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,
-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 starts with your application in the browser.
+* 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
 This ability has been available with Assets for a long time, but they were challenging - you had to read the wiki and manually implement it. They are fully functional now and this is where they can fit seamlessly into the overall workflow.