No edit summary |
(Added Edited template with July 12, 2025.) |
||
| (23 intermediate revisions by 4 users not shown) | |||
| Line 1: | Line 1: | ||
This is '''Chapter 8'''. If you want to start from the top: [[ | {{Edited|July|12|2025}} | ||
<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> | |||
== Chapter 8: Placing Containers - Responsive UI Introduction == | == Chapter 8: Placing Containers - Responsive UI Introduction == | ||
'''NOTE:''' Click on the step/number to access the corresponding images. | |||
239. | '''[[Training:Chapter 8 Images#Step 239|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'''. | |||
'''[[Training:Chapter 8 Images#Step 240|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. | |||
'''242''' - '''243'''. Note the changes to your application and how everything looks different compared to before. | |||
'''[[Training:Chapter 8 Images#Step 244|244]]'''. Switch the setting of the PlacingContainer from Row to Column. Save and test the web. | |||
'''[[Training:Chapter 8 Images#Step 245|245]]'''. Make sure your grid displaying the '''HistoricOwnership''' is at the bottom. | |||
'''[[Training:Chapter 8 Images#Step 246|246]]'''. Set the '''HistoricOwnership''' to Grow equals 2 to make it fill the available space. | |||
250. Set the DisableExpression of the save button to <code>selfVM.Dirtylist->isempty</code> | '''[[Training:Chapter 8 Images#Step 247|247]]'''. Check the Hide-SideBar on the ViewModel root level in order to remove the auto-maintained actions list to the left. | ||
'''[[Training:Chapter 8 Images#Step 248|248]]'''. Add a new ViewModel column. | |||
* Call it '''Save''' and give it the Expression <code>selfVM.Save</code> | |||
'''[[Training:Chapter 8 Images#Step 249|249]]'''. Move the save button to the top of the placing container. Save and test the web. | |||
[[Training:Chapter 8 Images#Step 250|'''250''']]. Set the DisableExpression of the save button to <code>selfVM.Dirtylist->isempty</code> | |||
* Save and test the web. | * Save and test the web. | ||
* Make changes to the name; save the change. | * Make changes to the name; save the change. | ||
* Note the enable state of the save button. | * 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 | '''[[Training:Chapter 8 Images#Step 251|251]]'''. Set the visible expression to <code>selfVM.Dirtylist->notempty</code> Save and test the web. Test change data and save. | ||
'''[[Training:Chapter 8 Images#Step 252|252]]'''. Clear the visible expression and set the '''[[Documentation:FollowEnable|FollowEnable]]''' flag of the VisibleExpression to reduce code to maintain. Save and test. | |||
'''[[Training:Chapter 8 Images#Step 253|253]]'''. Add 2 child-placing containers to the root-placing container. | |||
'''[[Training:Chapter 8 Images#Step 254|254]]'''. Move the '''HistoricOwnership''' into the lower one. | |||
'''[[Training:Chapter 8 Images#Step 255|255]]'''. Set the lower placing container to <code>grow = 2</code> and <code>Direction=Column</code> | |||
'''[[Training:Chapter 8 Images#Step 256|256]]'''. Set Align Items to stretch on the lower placing container. | |||
'''[[Training:Chapter 8 Images#Step 257|257]]'''. Move the other columns into the top child placing container. | |||
'''[[Training:Chapter 8 Images#Step 258|258]]'''. Set the top child placing container to <code>Wrap=true</code> | |||
'''[[Training:Chapter 8 Images#Step 259|259]]'''. Set the top margins on buttons in the UI to align the buttons with more width. Edit the boxes in the web UI. | |||
'''[[Training:Chapter 8 Images#Step 260|260]]'''. Give names to your placing containers to help you talk about your UI with more precise words. | |||
'''[[Training:Chapter 8 Images#Step 261|261]]'''. On the Grid Nesting '''HistoricOwnership''', add a placing container and a child placing container. | |||
'''[[Training:Chapter 8 Images#Step 262|262]]'''. Move the columns in '''HistoricOwnership''' into the child placing container so that they are part of the row. | |||
'''[[Training:Chapter 8 Images#Step 263|263]]'''. Make the root placing container in '''HistoricOwnership''' a <code>Direction = column</code> in order to render rows. | |||
''' | '''[[Training:Chapter 8 Images#Step 264|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 06:28, 20 January 2025
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
NOTE: Click on the step/number to access the corresponding images.
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.
242 - 243. Note the changes to your application and how everything looks different compared to before.
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.