Bootcamp:Chapter 8
(Adding message template to the top of the page)
No edit summary
 
(8 intermediate revisions by 3 users not shown)
Line 1: Line 1:
{{message|Write the content here to display this box}}
<message>Write the content here to display this box</message>
This is '''Chapter 8'''. If you want to start from the top: [[The 1000 steps program to MDriven Chapter 1]], or see [[The 1000 steps program to MDriven Chapter 7|Chapter 7 (the previous chapter)]]
This is '''Chapter 8'''. If you want to start from the top: [[Training:Bootcamp:Chapter 1|Chapter 1]], or see [[Training:Bootcamp:Chapter 7|Chapter 7 (the previous chapter)]]


=== '''Video 8: Responsive Design and Placing Containers''' ===
=== '''Video 8: Responsive Design and Placing Containers''' ===
Line 27: Line 27:


== Chapter 8: Placing Containers - Responsive UI Introduction ==
== Chapter 8: Placing Containers - Responsive UI Introduction ==
239. 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. 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.  


* Rename the Diagram1 as <code>Diagram Of Person And Car</code>.
* Rename the Diagram1 as '''Diagram Of Person And Car'''.


240. Go to ViewModel Person and add a Root Placing container. Note the errors.
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.
241. Move the ViewModelColumns into the placing container to get rid of the errors. Save and test the web.
Line 37: Line 37:
244. Switch the setting of the PlacingContainer from Row to Column. 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.  
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 ViewModel root level in order to remove the auto-maintained actions list to the left.
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.  
248. Add a new ViewModel column.  
* Call it Save and give it the Expression <code>selfVM.Save</code>
* Call it '''Save''' and give it the Expression <code>selfVM.Save</code>
249. Move the save button to the top of the placing container. Save and test the web.
249. Move the save button to the top of the placing container. Save and test the web.


Line 53: Line 53:
251. Set the visible expression to <code>selfVM.Dirtylist->notempty</code> Save and test the web. Test change data and save.
251. Set the visible expression to <code>selfVM.Dirtylist->notempty</code> 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.
252. Clear the visible expression and set the '''[[Documentation:FollowEnable|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 <code>grow = 2</code> and <code>Direction=Column</code>


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


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


258. Set the top child placing container to ''Wrap=true''
258. Set the top child placing container to <code>Wrap=true</code>


259. Set the top margins on buttons in the UI to align the buttons with more width. Edit the boxes in the web UI.
259. Set the top margins on buttons in the UI to align the buttons with more width. Edit the boxes in the web UI.
Line 71: Line 71:
260. Give names to your placing containers to help you talk about your UI with more precise words.
260. Give names to your placing containers 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.
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.
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.
263. Make the root placing container in '''HistoricOwnership''' a <code>Direction = column</code> 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.
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'''  
=== '''Next Chapter''' ===
 
[[Training:Bootcamp:Chapter 9|Bootcamp:Chapter 9]]
[[The_1000_steps_program_to_MDriven_Chapter_9]]
[[Category:Bootcamp]]
[[Category:1000 Steps Program]]

Latest revision as of 05:48, 11 September 2024

This is Chapter 8. If you want to start from the top: Chapter 1, or see Chapter 7 (the previous chapter)

Video 8: Responsive Design and Placing Containers

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 239 - 264 Introduction Responsive Design Save Stretch Placing Containers Wrap

Chapter 8: Placing Containers - Responsive UI Introduction

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

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

Bootcamp:Chapter 9

This page was edited 8 days ago on 09/11/2024. What links here