No edit summary |
No edit summary |
||
| Line 35: | Line 35: | ||
|} | |} | ||
=== | === Placing Containers - Responsive UI Introduction === | ||
238 Find the ViewModel Person and | 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 | 239. Rename the Diagram1 as DiagramOfPersonAndCar. | ||
240 Go to ViewModel Person and | 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 | 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 | 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 | 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 | 246. Set the HistoricOwnership to Grow equals 2 to make it fill the available space. | ||
247 Check the Hide-SideBar on the | 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 Expression selfVM.Save | 248. Add a new ViewModel column - call it save and give it Expression selfVM.Save | ||
249 Move the save button to the top of the placing container | 249. Move the save button to the top of the placing container. Save and test the web. | ||
250 | 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 save button. | ||
251 Set the | 251. Set the visible expression to selfVM.Dirtylist->notempty - save and test the web. Test change data and save. | ||
252 Clear the | 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 | 253. Add 2 child-placing containers to the root-placing container. | ||
254 Move the HistoricOwnership into the lower one | 254. Move the HistoricOwnership into the lower one. | ||
255 Set the Lower placing container to grow = 2 and Direction=Column | 255. Set the Lower placing container to grow = 2 and Direction=Column | ||
256 | 256. Set Align Items to stretch on lower placing container. | ||
257 Move other columns into the top child placing container | 257. Move the other columns into the top child-placing container. | ||
258 Set the top | 258. Set the top child-placing container to Wrap=true | ||
259 Set Top margins on buttons in the UI to align buttons more width edit boxes in the web UI | 259. Set Top margins on buttons in the UI to align buttons more width edit 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 | 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 | 261. On the Grid Nesting HistoricOwnership, add a placing container and a child-placing container. | ||
262 Move in the columns in HistoricOwnership into the child placing container so that they are part of the row | 262. Move in 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 | 263. Make the root-placing container in HistoricOwnership a Direction = column in order to render rows. | ||
264 Set root placing container in HistoricOwnership to direction row , and Wrap=true | 264. Set the root-placing container in HistoricOwnership to direction row, and Wrap=true. Test what happens as you have multiple rows. Make the windows bigger and smaller in the web. | ||
'''Chapter 9''' | |||
[[The_1000_steps_program_to_MDriven_Chapter_9]] | |||
[[Category:1000 Steps Program]] | [[Category:1000 Steps Program]] | ||
Revision as of 06:56, 20 January 2023
This is Chapter 8 of the training material. If you want to start from the top: The_1000_steps_program_to_MDriven, The 7th chapter is here
The Chapter 8 video is here: https://youtu.be/8JM380mEsWA
Video 8: MDrivenEducationVideo Steps 238 - 264: Responsive Design and Placing Containers
| Title | Content | Time(segment start) |
| Introduction | 00:00 | |
| Responsive Design | 07:00 | |
| Save | 14:00 | |
| Stretch | 20:21 | |
| Placing Containers | 27:48 | |
| Wrap | 33:20 |
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 DiagramOfPersonAndCar.
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 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 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 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 Top margins on buttons in the UI to align buttons more width edit 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 in 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 direction row, and Wrap=true. Test what happens as you have multiple rows. Make the windows bigger and smaller in the web.
Chapter 9