View source for Training:Bootcamp:Chapter 8

{{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 ==
'''NOTE:''' Click on the step/number to access the corresponding images.    

'''[[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.

'''[[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.  
* Make changes to the name; save the change.  
* Note the enable state of the save button. 
'''[[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''' ===
[[Training:Bootcamp:Chapter 9|Bootcamp:Chapter 9]]
[[Category:Bootcamp]]