Bootcamp:Chapter 6
No edit summary
No edit summary
 
(53 intermediate revisions by 4 users not shown)
Line 1: Line 1:
This is chapter 6 of the training material - if you want to start from the top: [[The_1000_steps_program_to_MDriven]]
<message>Write the content here to display this box</message>
This is '''Chapter 6''' of the training program.


Here is the video for Chapter 6: https://youtu.be/ezJiIIyEy7g
If you want to start from the top: [[Training:Bootcamp:Chapter 1|Chapter 1]], or see [[Training:Bootcamp:Chapter 5|Chapter 5 (the previous chapter)]]


And here are the steps as text:
=== '''Video 6: Picking Values'''  ===
<html>


Chapter 6
<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>


183 Person ViewModel - The Button CarsIUsedToOwn - this does not do anything and can be removed - but let me explain where it came from: When we Adopted the AutoPersonForm and named it Person it first worked since it pointed to the AutoFormPersonCarsIUsedToOwnMultiLink - that show the content of CarsIUsedToOwnMultiLink - but since then we have regenerated the AutoForms - and this action lost its form - and new form was created - that this action is not connected to. Remove the Button, remove the viewmodel action MultiLinkCarsIUsedToOwn
<div class="video">
  <div class="video__wrapper">
    <iframe src="https://www.youtube.com/embed/ezJiIIyEy7g?si=cu-0PuFhPAKG7KJf" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
  </div>
  <div class="video__navigation">
<span data-video="ezJiIIyEy7g" data-start="00" tabindex="0"> <strong> Steps 183 - 214 </strong> </span>
    <span class="navigation-item" data-video="ezJiIIyEy7g" data-start="00" tabindex="0"> Introduction </span>
    <span class="navigation-item" data-video="ezJiIIyEy7g" data-start="52" tabindex="0"> Creating actions </span>
    <span class="navigation-item" data-video="ezJiIIyEy7g" data-start="533" tabindex="0"> Modal actions ViewModels </span>
    <span class="navigation-item" data-video="ezJiIIyEy7g" data-start="1269" tabindex="0"> Functionality in the web application </span>
    <span class="navigation-item" data-video="ezJiIIyEy7g" data-start="1343" tabindex="0"> Fixing a problem </span>
    <span class="navigation-item" data-video="ezJiIIyEy7g" data-start="1523" tabindex="0"> Changing cardinality </span>
    <span class="navigation-item" data-video="ezJiIIyEy7g" data-start="2138" tabindex="0"> Association class </span>
  </div>
</div>


184 Add a ViewModelColumn - mark as IsAction - see that it turns into a Button
</html>


185 Name it AddACarIUsedToOwn
== Chapter 6: Modal Dialog to Pick Values and Return to Caller to Use Picked Values ==


186 Create a ViewModelAction name this AddACarIUsedToOwnAction
'''NOTE:''' Click on the step/number to access the corresponding images.    


187 Hook up the Button AddACarIUsedToOwn to the action AddACarIUsedToOwnAction by selecting it in the picker next to IsAction checkbox
[[Training:Chapter 6 Images#Step 183|'''183''']]. The '''Person''' ViewModel - the button '''CarsIUsedToOwn''' - does not do anything and can be removed, but let me explain where it came from. 
When we adopted the AutoPersonForm and named it Person, it worked at first, since it pointed to the AutoFormPersonCarsIUsedToOwnMultiLink, which shows the content of CarsIUsedToOwnMultiLink. We have regenerated the AutoForms since then so this action lost its form and a new form was created that the previous action is not connected to.
Remove the button and remove the ViewModel action '''MultiLinkCarsIUsedToOwn'''.


188 Press the NewEditor button in the top of the ViewModelEditor - in the new window find the AutoFormCarSeeker
[[Training:Chapter 6 Images#Step 184|'''184''']]. Add a ViewModelColumn and mark it as '''Is Action'''. See that it turns into a button.


189 Adopt the AutoFormCarSeeker to make it your own - name it CarSeeker
[[Training:Chapter 6 Images#Step 185|'''185''']]. Name it <code>AddACarIUsedToOwn</code>.


190 Back to the AddACarIUsedToOwnAction - set BringUpViewModel to CarSeeker. Save Test web
[[Training:Chapter 6 Images#Step 186|'''186''']]. Create a ViewModelAction. Name it <code>AddACarIUsedToOwnAction</code>.


191 When we in the web try to add a new car I have owned we see that the seeker for cars comes up - but we rather just want to show it on top - of the Person form.
[[Training:Chapter 6 Images#Step 187|'''187''']]. Hook up the button '''AddACarIUsedToOwn''' to the action '''AddACarIUsedToOwnAction''' by selecting it in the picker next to the Is Action checkbox.


192 Go back to the AddACarIUsedToOwnAction - find the check box IsModal - check it - save - test web
[[Training:Chapter 6 Images#Step 188|'''188''']]. Press the NewEditor button at the top of the ViewModelEditor. In the new window, find the '''AutoFormCarSeeker'''.


193 A modal dialog OK-button has an enable expression - this must be made true for user to press ok - set it to true (by typing the ocl constant true in the box) - save test web
[[Training:Chapter 6 Images#Step 189|'''189''']]. Adopt the '''AutoFormCarSeeker''' to make it your own and name it '''CarSeeker'''.


194 But we really want to have the user to Search and select cars prior to returning - so open the enableExpressionForModelOk ocl editor on the three dots. Find  vSeekerResult->notempty in the expression helper tree - make sure that the expression is entered- save test web
[[Training:Chapter 6 Images#Step 190|'''190''']]. Back to the '''AddACarIUsedToOwnAction''', set '''BringUpViewModel''' to '''CarSeeker'''. Save. Test the web.


195 Now the Ok button is only enabled if there is a row selected in the search result - works for you? Try to search for cars , select first, then search for some nonses AAAAAAAAA - empty search result - not Ok
'''191'''. When we are on the web and we try to add a new car I have owned, we see that the Seeker for cars comes up, but we want to show it on top of the Person form.


196 The AddACarIUsedToOwnAction also has an Action expression ActionAfterModalOk - this is where we can act on the user wishes once the user press ok - this will not be performed on the Cancel/close box in the modal
'''[[Training:Chapter 6 Images#Step 192|192]]'''. Go back to the '''AddACarIUsedToOwnAction''', find the check box '''Is Modal''', check it, and save. Test the web.


197 Go into ocl editor for ActionAfterModalOk on the AddACarIUsedToOwnAction - and type in the expression: vCurrent_Person.CarsIUsedToOwn.Add(vModalResult_vCurrent_Car) , if you manage to find the words in the three one at the time you see of the tree updates to reduce the options to what fits best
'''[[Training:Chapter 6 Images#Step 193|193]]'''. A modal dialog OK button has an enable expression. This must be made true for the User to press ok. Set it to <u>true</u> (by typing the OCL constant "'''true'''" in the box). Save and test the web.


198 vCurrent_Person is the root of the view we are in - its an object of class Person.
'''[[Training:Chapter 6 Images#Step 194 and 195|194]]'''. We really want to enable the user to Search and select cars prior to returning. 
* Open the enableExpressionForModelOk OCL editor on the three dots. 
* Find <code>vSeekerResult->notempty</code> in the expression helper tree and make that the expression. 
* Save and test the web.
'''[[Training:Chapter 6 Images#Step 194 and 195|195]]'''. The OK button is only enabled if there is a row selected in the search result - does this work for you? 
* Try to search for cars, select first, then search for some nonsense (like "<span class="col-turquoise">'''AAAAAAA'''</span>"). You'll get an empty search result - not OK.
'''[[Training:Chapter 6 Images#Step 196 and 197|196]]'''. The '''AddACarIUsedToOwn''' Action also has an Action expression: '''ActionAfterModalOk'''. This is where we can act on the user's wishes once the user presses OK. It will not be performed on the Cancel/close box in the modal.  


vCurrent_Person.CarsIUsedToOwn is that persons CarsIUsedToOwn
'''[[Training:Chapter 6 Images#Step 196 and 197|197]]'''. Go into the OCL editor for '''ActionAfterModalOk''' on the '''AddACarIUsedToOwnAction''' and type in the expression: <code>vCurrent_Person.CarsIUsedToOwn.Add(vModalResult_vCurrent_Car)</code>. 
* If you manage to find the words in the tree, you will see that the tree updates to reduce the options one at a time to what fits best.
'''[[Training:Chapter 6 Images#Step 198|198]]'''. '''''vCurrent_Person''''' is the root of the view we are in. It is an object of the class '''Person'''.
* <code>vCurrent_Person.CarsIUsedToOwn</code> is that person's '''CarsIUsedToOwn'''.
* <code>vCurrent_Person.CarsIUsedToOwn.Add</code>(argument) is a list operation to add a reference to an association.
* <code>vModalResult_vCurrent_Car</code> is the '''Car''' object that the user chose in the '''Modal CarSeeker'''.
Make sure your expression is <code>vCurrent_Person.CarsIUsedToOwn.Add(vModalResult_vCurrent_Car)</code> . Save. Test the web.


vCurrent_Person.CarsIUsedToOwn.Add(argument) is an list operation to add a reference to an association
'''[[Training:Chapter 6 Images#Step 199|199]]'''. Operations can be canceled or saved. Unsaved things can also be undone and re-done in multiple steps by the user. Try it out.


vModalResult_vCurrent_Car is the Car object that the user chose in the Modal CarSeeker.
'''[[Training:Chapter 6 Images#Step 200|200]]'''. Bring up another browser form. Navigate to '''PersonSeeker'''. We are going to quickly fix a problem I see with the '''PersonSeeker''': when you seek with a blank input, you get nothing when you should probably get all.


Make sure your expression is vCurrent_Person.CarsIUsedToOwn.Add(vModalResult_vCurrent_Car) and save test web
[[Training:Chapter 6 Images#Step 201|'''201''']]. Open up ViewModel '''PersonSeeker''', add another <u>Search Expression</u>, and change the <u>Criteria</u>. 
* Set it to <code>Person.allinstances</code>. 
* Change its Active expression to <code>vSeekParam->isnullorempty</code>. 
* This Criteria will kick in only when the search box is blank. Save and test the web.
'''[[Training:Chapter 6 Images#Step 202|202]]'''. Bring up the person '''SomeOtherDude''' in the browser window 2. What happens when he picks a '''CarIUsedToOwn''' that your browser window 1 person already picked?


199 Operations can be canceled or saved - unsaved things can also be undone and re-done in multiple steps by the user - try that
'''[[Training:Chapter 6 Images#Step 203|203]]'''. We want it to be possible to have multiple previous owners. Change the cardinality from 0..1 to 0..* on '''PreviousOwner'''.


200 Bring up another browser form - Navigate to PersonSeeker - we are going to quickly fix a problem I see with the PersonSeeker: When you seek with a blank input you get nothing - when you probably should get all.
'''[[Training:Chapter 6 Images#Step 204|204]]'''. Save and see errors. Many are from AutoForms, so '''Refresh AutoForms''' and save.


201 Open up ViewModel PersonSeeker, Add another Search Expression, change Criteria, set it to Person.allinstances, set its Active expression to vSeekParam->isnullorempty - this way this Criteria will kick in only when search box is blank. Save Test Web
'''[[Training:Chapter 6 Images#Step 205|205]]'''. Now repeat step 202. How does it work now?


202 Bring up person SomeOtherDude in browser win 2 - what happens when he Picks a CarIUsedToOwn that your browser win 1 person already picked?
'''[[Training:Chapter 6 Images#Step 206|206]]'''. Make it possible to take multiple cars at a time using vSelected: <code>vModalResult_vSelected_Car->collect(pc| vCurrent_Person.CarsIUsedToOwn.Add(pc))</code>


203 We want want it to be possible to have had mutliple Previous owners , change the cardinality from 0..1 to 0..* on PreviousOwner
'''[[Training:Chapter 6 Images#Step 207|207]]'''. While working with many-to-many relationships, it is very common to want an association class. 
* Create a new class in the diagram.
* Call it '''HistoricOwnership'''.
'''[[Training:Chapter 6 Images#Step 208|208]]'''. Click the association-class-connection-tool. Select the '''HistoricOwnership''' class, drag, and hold. Let the mouse go over the many-to-many relation between person and car. You should get a dotted line.


204 Save and See errors - many are from AutoForms - so Refresh AutoForms, save
'''[[Training:Chapter 6 Images#Step 209|209]]'''. Add an attribute, '''DateSold of type DateTime?''', to the class '''HistoricOwnership'''.


205 Now repeat step 202 - How does it work now?
'''[[Training:Chapter 6 Images#Step 210|210]]'''. Set the innerlink names to '''Car''' for navigation to '''Car''' and '''Person''' for navigation to '''Person'''.


206 Make it possible to take multiple cars at a time - using vSelected: vModalResult_vSelected_Car->collect(pc| vCurrent_Person.CarsIUsedToOwn.Add(pc))
'''[[Training:Chapter 6 Images#Step 211|211]]'''. In the ViewModel '''Person''', we add another grid table that shows the link objects.
* Add nested ViewModelClass multilinks. 
* Find '''HistoricOwnership'''.
'''[[Training:Chapter 6 Images#Step 212|212]]'''. Test on the web. Verify that the two lists are maintained automatically.


207 Working with many to many relationsships it is very common to want an association class
'''[[Training:Chapter 6 Images#Step 213|213]]'''. Remove the '''CarIUsedToOwn''' grid, since the other link-class grid has the same and more information.
* This is almost always the case. If you have an association class, you want to show that instead of the end objects.
** This is due to the increased precision that the link-object has, pointing out the exact pair of associated objects.
'''[[Training:Chapter 6 Images#Step 214|214]]'''. On the nesting '''HistoricOwnership''', set the "'''Act As For Actions'''" to <code>self.Car</code>. Save.


Create a new Class in the diagram call it HistoricOwnership
=== '''Next Chapter''' ===
 
[[Training:Bootcamp:Chapter 7|Bootcamp:Chapter 7]]
208 Click the association-class-connection-tool - click HistoricOwnership class, drag and hold, let mouse go when over the many-many relation between person and car - you should get a dotted line
[[Category:Bootcamp]]
 
209 Add an attribute DateSold of type DateTime? to the class HistoricOwnership
 
210 set innerlink names to Car for navigtion to Car and Person for navigation to Person
 
211 In the ViewModel Person  we add another grid-table that shows the link objects, add nested ViewModelClass multilinks - find  HistoricOwnership
 
212 Test on web, verify that the 2 lists are maintained automatically
 
213 Remove the CarIUsedToOwn grid - since the other link-class-grid has the same and more information. This is almost always the case - if you have an association class you want to show that instead of the end objects. This is due the increased precision that the link-object has - pointing out the exakt pair of associated objects
 
214 On the nesting HistoricOwnership, set the "ActAs"ForActions to self.Car
 
Chapter 7 [[The_1000_steps_program_to_MDriven_Chapter_7]]

Latest revision as of 05:50, 16 September 2024

This is Chapter 6 of the training program.

If you want to start from the top: Chapter 1, or see Chapter 5 (the previous chapter)

Video 6: Picking Values

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 183 - 214 Introduction Creating actions Modal actions ViewModels Functionality in the web application Fixing a problem Changing cardinality Association class

Chapter 6: Modal Dialog to Pick Values and Return to Caller to Use Picked Values

NOTE: Click on the step/number to access the corresponding images.   

183. The Person ViewModel - the button CarsIUsedToOwn - does not do anything and can be removed, but let me explain where it came from.

When we adopted the AutoPersonForm and named it Person, it worked at first, since it pointed to the AutoFormPersonCarsIUsedToOwnMultiLink, which shows the content of CarsIUsedToOwnMultiLink. We have regenerated the AutoForms since then so this action lost its form and a new form was created that the previous action is not connected to.

Remove the button and remove the ViewModel action MultiLinkCarsIUsedToOwn.

184. Add a ViewModelColumn and mark it as Is Action. See that it turns into a button.

185. Name it AddACarIUsedToOwn.

186. Create a ViewModelAction. Name it AddACarIUsedToOwnAction.

187. Hook up the button AddACarIUsedToOwn to the action AddACarIUsedToOwnAction by selecting it in the picker next to the Is Action checkbox.

188. Press the NewEditor button at the top of the ViewModelEditor. In the new window, find the AutoFormCarSeeker.

189. Adopt the AutoFormCarSeeker to make it your own and name it CarSeeker.

190. Back to the AddACarIUsedToOwnAction, set BringUpViewModel to CarSeeker. Save. Test the web.

191. When we are on the web and we try to add a new car I have owned, we see that the Seeker for cars comes up, but we want to show it on top of the Person form.

192. Go back to the AddACarIUsedToOwnAction, find the check box Is Modal, check it, and save. Test the web.

193. A modal dialog OK button has an enable expression. This must be made true for the User to press ok. Set it to true (by typing the OCL constant "true" in the box). Save and test the web.

194. We really want to enable the user to Search and select cars prior to returning.

  • Open the enableExpressionForModelOk OCL editor on the three dots.
  • Find vSeekerResult->notempty in the expression helper tree and make that the expression.
  • Save and test the web.

195. The OK button is only enabled if there is a row selected in the search result - does this work for you?

  • Try to search for cars, select first, then search for some nonsense (like "AAAAAAA"). You'll get an empty search result - not OK.

196. The AddACarIUsedToOwn Action also has an Action expression: ActionAfterModalOk. This is where we can act on the user's wishes once the user presses OK. It will not be performed on the Cancel/close box in the modal.

197. Go into the OCL editor for ActionAfterModalOk on the AddACarIUsedToOwnAction and type in the expression: vCurrent_Person.CarsIUsedToOwn.Add(vModalResult_vCurrent_Car).

  • If you manage to find the words in the tree, you will see that the tree updates to reduce the options one at a time to what fits best.

198. vCurrent_Person is the root of the view we are in. It is an object of the class Person.

  • vCurrent_Person.CarsIUsedToOwn is that person's CarsIUsedToOwn.
  • vCurrent_Person.CarsIUsedToOwn.Add(argument) is a list operation to add a reference to an association.
  • vModalResult_vCurrent_Car is the Car object that the user chose in the Modal CarSeeker.

Make sure your expression is vCurrent_Person.CarsIUsedToOwn.Add(vModalResult_vCurrent_Car) . Save. Test the web.

199. Operations can be canceled or saved. Unsaved things can also be undone and re-done in multiple steps by the user. Try it out.

200. Bring up another browser form. Navigate to PersonSeeker. We are going to quickly fix a problem I see with the PersonSeeker: when you seek with a blank input, you get nothing when you should probably get all.

201. Open up ViewModel PersonSeeker, add another Search Expression, and change the Criteria.

  • Set it to Person.allinstances.
  • Change its Active expression to vSeekParam->isnullorempty.
  • This Criteria will kick in only when the search box is blank. Save and test the web.

202. Bring up the person SomeOtherDude in the browser window 2. What happens when he picks a CarIUsedToOwn that your browser window 1 person already picked?

203. We want it to be possible to have multiple previous owners. Change the cardinality from 0..1 to 0..* on PreviousOwner.

204. Save and see errors. Many are from AutoForms, so Refresh AutoForms and save.

205. Now repeat step 202. How does it work now?

206. Make it possible to take multiple cars at a time using vSelected: vModalResult_vSelected_Car->collect(pc| vCurrent_Person.CarsIUsedToOwn.Add(pc))

207. While working with many-to-many relationships, it is very common to want an association class.

  • Create a new class in the diagram.
  • Call it HistoricOwnership.

208. Click the association-class-connection-tool. Select the HistoricOwnership class, drag, and hold. Let the mouse go over the many-to-many relation between person and car. You should get a dotted line.

209. Add an attribute, DateSold of type DateTime?, to the class HistoricOwnership.

210. Set the innerlink names to Car for navigation to Car and Person for navigation to Person.

211. In the ViewModel Person, we add another grid table that shows the link objects.

  • Add nested ViewModelClass multilinks.
  • Find HistoricOwnership.

212. Test on the web. Verify that the two lists are maintained automatically.

213. Remove the CarIUsedToOwn grid, since the other link-class grid has the same and more information.

  • This is almost always the case. If you have an association class, you want to show that instead of the end objects.
    • This is due to the increased precision that the link-object has, pointing out the exact pair of associated objects.

214. On the nesting HistoricOwnership, set the "Act As For Actions" to self.Car. Save.

Next Chapter

Bootcamp:Chapter 7

This page was edited 4 days ago on 09/16/2024. What links here