Documentation:TK Live View

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.

There are four foldup sections in the TK Live View: Live Edit, Server Setup, Assets TK Synk, and Debug Information.

The 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.

It is basically an embedded browser, the new WebView2, Microsoft's embedded Edge browser, which is replacing the old Internet Explorer and Edge.

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.

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.

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.

Live Edit

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.

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.

AssetsTK Synk

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 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.

Watch the video to learn more

(Video)