This is Chapter 3 of the Bootcamp.

You may want to start at the beginning: Chapter 1, or see Chapter 2 (the previous chapter)

Video 3: Creating a Web Application

To make your experience smooth, we set the main tags mentioned in the video to the right bar menu of this mini-player. Choose an interesting subtitle on the list and immediately get to the exact theme navigation item place in the video. Now you can pick any topic to be instructed on without watching the whole video.

Steps 76 - 105 Introduction Changing the model into a web application ViewModels Adopt an Autoform Naming and presentation Nested ViewModel class

Chapter 3: Starting a Local WebApplication

NOTE: Click on the step/number to access the corresponding images/GIFs.

76. Now, we will take our model - that is the complete specification of what we want so far - and turn it into a web application.

• Press the (play button) and choose LocalTurnkeyPrototyper.
• 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, click on "Start local MDriven Turnkeycore". A terminal window should show 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 been updated since the video. There is a possibility of choosing MDrivenServer as a data source now, but you should stick with XML for these steps.

78. Note the port number - default is 8182. This will be the address of the web application. 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 the web app. Press F5, if needed, to see the updated text.

81. In the tree, find the ViewModel AutoFormPerson and 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.
  • 15.07.2024 - NOTE: Error may not show after removing require root - it only shows in the ViewModel Editor for Person and not in the Check model and report errors Tool.
    • Trouble shooting: Update the Designer. If that does not work, save the model with require root not checked and restart MDriven Designer. The Check model and report errors Tool may report the error - follow the instructions above again. The error should disappear.

83. Check the ShowGridLines box at 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 the menu AutoForm. Adopt this Autoform, and make it your own.

88. Do a change to the UI widgets again. Save and 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, and add the Age ViewModel column.

95. In the ViewModel editor Person ViewModel, select a ViewModel column. Do AddColumn, then 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 on the web.

100. Change the name on NewColumn to CamelCaseMeansWePutInSpaces. Save and 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 on 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 the 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.

Next Chapter

Bootcamp:Chapter 4