Log in

The 1000 steps program to MDriven Chapter 8

From MDrivenWiki

This is Chapter 8 of the training material. If you want to start from the top: The 1000 steps program to MDriven Chapter 1, or see Chapter 7 (the previous chapter)

The Chapter 8 video is here:

Video 8_MDrivenEducationVideo Steps 238 - 264: Responsive Design and Placing Containers

Title Time(Segment Start)
Introduction Introduction
Responsive Design Responsive Design at 07:00
Save Save at 14:00
Stretch Stretch at 20:21
Placing Containers Placing Containers at 27:48
Wrap Wrap at 33:20

Chapter 8: Placing Containers - Responsive UI Introduction

238. Find the ViewModel Person and drag it out on Diagram 1. Try to use the placed ViewModel as a fast navigation tool to get to the ViewModel for editing.

239. Rename the Diagram1 as Diagram Of Person And Car.

240. Go to ViewModel Person and add a Root Placing container. Note the errors.

241. Move the ViewModelColumns into the placing container to get rid of the errors. Save and test the web.

244. Switch the setting of the PlacingContainer from Row to Column. Save and test the web.

245. Make sure your grid displaying the HistoricOwnership is at the bottom.

246. Set the HistoricOwnership to Grow equals 2 to make it fill the available space.

247. Check the Hide-SideBar on the ViewModel root level in order to remove the auto-maintained actions list to the left.

248. Add a new ViewModel column.

  • Call it Save and give it the Expression selfVM.Save

249. Move the save button to the top of the placing container. Save and test the web.

250. Set the DisableExpression of the save button to selfVM.Dirtylist->isempty

  • Save and test the web.
  • Make changes to the name; save the change.
  • Note the enable state of the save button.

251. Set the visible expression to selfVM.Dirtylist->notempty Save and test the web. Test change data and save.

252. Clear the visible expression and set the FollowEnable flag of the VisibleExpression to reduce code to maintain. Save and test.

253. Add 2 child-placing containers to the root-placing container.

254. Move the HistoricOwnership into the lower one.

255. Set the Lower placing container to grow = 2 and Direction=Column

256. Set align Items to stretch on the lower placing container.

257. Move the other columns into the top child placing container.

258. Set the top child placing container to Wrap=true

259. Set the top margins on buttons in the UI to align the buttons with more width. Edit the boxes in the web UI.

260. Give names to your placing containers in order to help you talk about your UI with more precise words.

261. On the Grid Nesting HistoricOwnership, add a placing container and a child placing container.

262. Move the columns in HistoricOwnership into the child placing container so that they are part of the row.

263. Make the root placing container in HistoricOwnership a Direction = column in order to render rows.

264. Set the root placing container in HistoricOwnership to the direction row, and Wrap=true. Test what happens when you have multiple rows. Make the windows bigger and smaller on the web.

Next Chapter