No edit summary |
No edit summary |
||
| (32 intermediate revisions by 4 users not shown) | |||
| Line 1: | Line 1: | ||
This is Chapter 8 | <message>Write the content here to display this box</message> | ||
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''' === | |||
<html> | |||
<p class="video-warn"> | |||
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. | |||
</p> | |||
<div class="video"> | |||
<div class="video__wrapper"> | |||
<iframe src="https://www.youtube.com/embed/8JM380mEsWA?si=cRrU8PytIXwgpI4K" title="YouTube video player" frameborder="0" allowfullscreen></iframe> | |||
</div> | |||
<div class="video__navigation"> | |||
<span data-video="8JM380mEsWA" data-start="00" tabindex="0"> <strong> Steps 239 - 264 </strong> </span> | |||
<span class="navigation-item" data-video="8JM380mEsWA" data-start="00" tabindex="0"> Introduction </span> | |||
<span class="navigation-item" data-video="8JM380mEsWA" data-start="420" tabindex="0"> Responsive Design </span> | |||
<span class="navigation-item" data-video="8JM380mEsWA" data-start="840" tabindex="0"> Save </span> | |||
<span class="navigation-item" data-video="8JM380mEsWA" data-start="1221" tabindex="0"> Stretch </span> | |||
<span class="navigation-item" data-video="8JM380mEsWA" data-start="1668" tabindex="0"> Placing Containers </span> | |||
<span class="navigation-item" data-video="8JM380mEsWA" data-start="2000" tabindex="0"> Wrap </span> | |||
</div> | |||
</div> | |||
</html> | |||
239. | == 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. | |||
240. Go to ViewModel Person and add a Root Placing container. Note the errors. | * 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. | 241. Move the ViewModelColumns into the placing container to get rid of the errors. Save and test the web. | ||
| Line 53: | 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> | |||
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. | ||
250. Set the DisableExpression of the save button to selfVM.Dirtylist->isempty | 250. Set the DisableExpression of the save button to <code>selfVM.Dirtylist->isempty</code> | ||
* Save and test the web. | |||
251. Set the visible expression to selfVM.Dirtylist->notempty | * Make changes to the name; save the change. | ||
* Note the enable state of the save button. | |||
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 | 255. Set the lower placing container to <code>grow = 2</code> and <code>Direction=Column</code> | ||
256. Set | 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. | ||
260. Give names to your placing containers | 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 <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. | ||
[[ | === '''Next Chapter''' === | ||
[[Category: | [[Training:Bootcamp:Chapter 9|Bootcamp:Chapter 9]] | ||
[[Category:Bootcamp]] | |||
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.
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.