Hans Karlsen (talk | contribs) No edit summary |
No edit summary Tag: 2017 source edit |
||
| (36 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
This is | 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)]] | ||
=== '''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> | |||
239 | <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 == | |||
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>. | |||
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 <code>selfVM.Save</code> | |||
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 <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. | |||
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. | |||
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. | |||
Next | 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''' | |||
[[The_1000_steps_program_to_MDriven_Chapter_9]] | |||
[[Category:1000 Steps Program]] | |||
Latest revision as of 07:45, 26 April 2024
This is Chapter 8. If you want to start from the top: The 1000 steps program to MDriven 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.
Next Chapter