You may want to start at the beginning: The 1000 steps program to MDriven Chapter 1, Chapter 2 (the previous chapter)
This is Chapter 3.
Here is the video: https://youtu.be/NK92g2wX7js
Video 3: MdrivenEducationVideo Steps 76 - 105: Creating a Webapplication
| Title | Content | Time(Segment Start) |
| Introduction | Introduction | |
| Changing the model into webapplication | How to turn your model into a webapplication | Changing the model not webapplication at 01:35 |
| ViewModels | Changing a webapplication with Viewmodels and Autoforms | ViewModels at 06:26 |
| Adopt an Autoform | Autoform actions, adopt an Autoform and make it your own | Adopt an Autoform at 15:03 |
| Naming and presentation | Adding columns(attributes) to adopted Autoforms, naming, and presentation of ViewModels. | Naming and presentation at 19:53 |
| Nested ViewModel class | Adding nested ViewModel class | Nesting ViewModel class at 28:34 |
Starting a Local WebApplication
76. Now, we will take our model - that is the complete specification of what we want so far - and turn it into a webapplication. Press play. Choose LocalTurnkeyPrototype. Press "Check MDriven Turnkeycore." This will download the latest MDriven Turnkey version for .net core. Wait for it to download. You only use this step when you want to download the newest version of the Turnkey.
77. Once downloaded, "Start local MDriven Turnkeycore". A terminal window should show with a few lines of text; if the terminal seems off/broken, this is due to some file-lock from the installation - in that case, restart MDriven Designer and repeat this (Step 77).
Update: The UI has updated since the video - there is a possibility to choose MDrivenServer as datasource now - you should stick with XML for these steps
78. Note the portnumber - default is 8182 - this will be the address of the webapplication. Go to a web browser and navigate to http://localhost:8182 (of your port number). Make sure you see the index page.
79. Navigate the web app menus and familiarize yourself with them. Observe that this is the same functionality as in the WECPOF prototyper we saw in Chapter 2.
80. Change the text label on ViewModel named index to: "I am in control - I own this" - save and go back to web app - F5, if needed, to see the updated text.
81. In the tree, find the ViewModel AutoFormPerson - double click to go into the ViewModel editor. Change The root object class to Car. Note the Errors at the bottom. This is due to the static TypeChecking performed by MDriven which always wants the model to be rule compliant. Change it back to Person and the error will disappear. All ViewModels MUST state what class they will have as a root class.
82. Uncheck the Requires Root checkbox. We have said that this ViewModel does not expect an object - it is okay with just knowing the class Person - but no actual person is expected. Save the model and you will discover the red-error dot. All errors are on autoform-generated-actions that currently feed in a Person-object to this view - and we did not expect that. Hence the errors. Fix the error by checking the Requires Root checkbox again. Save and verify that it is error-free.
83. Check the ShowGridLines box in the middle bottom of the screen. By dragging and dropping, switch places on Name-widget and Button. Save. Go to the web app and navigate to the same screen in runtime. See that it has changed.
84. Do another small change in Preview. Save. Switch to Browser - note it updates automatically without the need to refresh. This is due to the fact that the web application is not just static HTML - it is a sophisticated application that discovers changes on the server and refreshes automatically.
85. Go back to the diagram - Refresh AutoForms. Notice that your changes to ViewModel AutoFormPerson disappear. This is the nature of Autoforms - they are regenerated on command.
86. Fold down the Yellow-Action button in the Green ViewModelTree. Note the header; actions leading here - we find actions that in this case, have all been created from AutoForm logic that brings this view up. Click the ShowPersonAction. Action-definition shows up.
87. Right-click the menu on the Green Viewmodel-header and click menu AutoForm. Adopt this Autoform, and make it your own.
88. Do a change to the UI widgets again. Save - check the web.
89. Check Actions-Leading here - note AutoForm-prefix is dropped.
90. Check Model Tree, ViewModel Person is there and AutoFormPerson is gone.
91. Now regenerate Autoforms again - AutoFormPerson is back and Person- ViewModel is left intact.
92. Add attribute Age of type Integer to class Person.
93. Regenerate Autoforms - Person-viewmodel does not have the new Attribute age, but AutoFormPerson does.
94. In the ViewModel editor Person-ViewModel, right-click the ViewModel columns in the ViewModel tree - add column - find Age - add Age ViewModel column.
95. In the ViewModel editor Person-ViewModel, select a ViewModel column - Do addColumn/Generic column, or press Alt+C to execute the menu.
96. Notice the new ViewModel column.
97. Add another ViewModel column; note the unique name.
98. Rename NewColumn to NewColumn2 - note the errors and name it back.
99. Save. Check the view in the web.
100. Change the name on NewColumn to CamelCaseMeansWePutInSpaces, Save, Check the web - note the presentation of the column.
101. On the CamelCaseMeansWePutInSpaces ViewModel column, find presentation property note <Name> and change it to <Name>Extra. Save and verify the result in the web.
102. Change the presentation to I am in control. Save and verify on the web.
103. Go back to attribute age on Person class, find property PresentationUnit, and set it to text: years. Save and Check ViewModelEditor, check the web.
104. Add Nested ViewModel Class / CarsIUsedToOwn by right-clicking in the ViewModel tree; note the result.
105. In the nesting, add a new column and set its expression to self.RegistrationNumber. Save and check the web.