The 1000 steps program to MDriven Chapter 12
No edit summary
No edit summary
Tag: 2017 source edit
(One intermediate revision by the same user not shown)
Line 13: Line 13:
   </div>
   </div>
   <div class="video__navigation">
   <div class="video__navigation">
  <span data-video="N4xW-CS02sE" data-start="00" tabindex="0"> <strong> Adding an Image Attribute to a Brand </strong> </span>
  <span data-video="N4xW-CS02sE" data-start="00" tabindex="0"> <strong> Steps 365 - 387 </strong> </span>
     <span class="navigation-item" data-video="N4xW-CS02sE" data-start="00" tabindex="0"> Introduction </span>
     <span class="navigation-item" data-video="N4xW-CS02sE" data-start="00" tabindex="0"> Introduction </span>
     <span class="navigation-item" data-video="N4xW-CS02sE" data-start="32" tabindex="0"> Adopting BrandOfCar Autoform </span>
     <span class="navigation-item" data-video="N4xW-CS02sE" data-start="32" tabindex="0"> Adopting BrandOfCar Autoform </span>
Line 35: Line 35:
367. Remove the “Cars” widget. Delete the “MultilinkCars” and “DeleteThis” actions that now show errors due to the use of <code>vCurrent_<oldname></code>
367. Remove the “Cars” widget. Delete the “MultilinkCars” and “DeleteThis” actions that now show errors due to the use of <code>vCurrent_<oldname></code>


368. Delete all the widgets except the '''Name''' widget.
368. Delete all the widgets ''except'' the '''Name''' widget.


369. Make sure you understand the opt-in/opt-out for actions.
369. Make sure you understand the opt-in/opt-out for actions.
Line 41: Line 41:
370. Add a generic column and call it BrandImage.
370. Add a generic column and call it BrandImage.


·      In the Expression box, write: self.BrandImage
* In the Expression box, write: self.BrandImage
 
* Select “Add new Attribute BrandImage” in the blue highlighted text in the bottom half of the debugger.
·      Select “Add new Attribute BrandImage” in the blue highlighted text in the bottom half of the debugger.
* In the popup window, click on Type, choose “Blob” (add link to page), and click ok.
 
* Press ok to exit the debugger.
·      In the popup window, click on Type, choose “Blob” (add link to page), and click ok.
 
·      Press ok to exit the debugger.


371. Resize the Brand Image widget.
371. Resize the Brand Image widget.


·      Remove the presentation from the BrandImage column.
* Remove the presentation from the BrandImage column.
 
* Delete “<Name>” in the Presentation box.
·      Delete “<Name>” in the Presentation box.
* Resize the widget again.
 
·      Resize the widget again.


372. Back to the model, click on “BrandImage:Blob?” in '''BrandOfCar'''.
372. Back to the model, click on “BrandImage:Blob?” in '''BrandOfCar'''.


·      In the details to the right, look for “Mode” and select the blank box next to '''BlobType'''.
* In the details to the right, look for “Mode” and select the blank box next to '''BlobType'''.
 
* Choose “Image” in the drop-down menu.
·      Choose “Image” in the drop-down menu.


373. Start the application. Once it’s running, select “Auto Form Brand Of Car Seeker”, click on the first car, and navigate to Manage Brand. You’ll see an image widget.
373. Start the application. Once it’s running, select “Auto Form Brand Of Car Seeker”, click on the first car, and navigate to Manage Brand. You’ll see an image widget.


·      Click on the widget to search and upload a brand image from Google.
* Click on the widget to search and upload a brand image from Google.
 
* Do this for each car brand.
·      Do this for each car brand.


374. Add a new ViewModel to seek for BrandOfCar. Name it '''BrandSeeker''' and use the UIFirst to get a copy of SeekerAutoForm logic.
374. Add a new ViewModel to seek for BrandOfCar. Name it '''BrandSeeker''' and use the UIFirst to get a copy of SeekerAutoForm logic.


·      Delete “AsString : self,asString” column in the
* Delete “AsString : self,asString” column in the


375. In the ViewModel for '''BrandOfCar''', click on the Global Action '''BrandSeeker'''. When the Global Actions window pops up, search the items under How the menu looks and where it is placed for “Sort order in Group” and write “x” in the box. Listen to the explanation to make sure you understand how Action order is handled in menus.
375. In the ViewModel for '''BrandOfCar''', click on the Global Action '''BrandSeeker'''. When the Global Actions window pops up, search the items under How the menu looks and where it is placed for “Sort order in Group” and write “x” in the box. Listen to the explanation to make sure you understand how Action order is handled in menus.


·      Under How the menu looks and where it is placed, search for Menu Group and click on the box with dots. In the EditMenuGroups popup box, write a “z” in the row next to IControltheMenuGrouping/AtAllLevels.
* Under How the menu looks and where it is placed, search for Menu Group and click on the box with dots. In the EditMenuGroups popup box, write a “z” in the row next to IControltheMenuGrouping/AtAllLevels.
 
* Click ok. You’ll see that the menu order has changed.
·      Click ok.
* Go to the BrandSeeker ViewModel and delete the <code>ChangeTime : self.ChangeTime</code>, <code>CreateTime : self.CreateTime</code>, and <code>Guid : self.Guid</code> columns.
 
·      You’ll see that the menu order has changed.
 
·      Go to the BrandSeeker ViewModel and delete the “ChangeTime : self.ChangeTime”, “CreateTime : self.CreateTime”, and “Guid : self.Guid” columns.


376. Drop all the AutoForms from the model. Go to BrandOfCar class and right-click on it. Scroll down to AutoForms and select “Drop AutoForms”. Save.
376. Drop all the AutoForms from the model. Go to BrandOfCar class and right-click on it. Scroll down to AutoForms and select “Drop AutoForms”. Save.


·      Note that many actions and ViewModels are now removed from the app.
* Note that many actions and ViewModels are now removed from the app.
 
* Reload your webapplication to see the changes.
·      Reload your webapplication to see the changes.


377. Note that the logic to jump on the first click is in effect whenever there is only 1 available navigating action.
377. Note that the logic to jump on the first click is in effect whenever there is only 1 available navigating action.
Line 93: Line 81:
378. Right-click on the BrandOfCar class and check the UsedBy list. Find out where BrandOfCar is used.
378. Right-click on the BrandOfCar class and check the UsedBy list. Find out where BrandOfCar is used.


·      Add BrandImage to ProperCarView and delete “<Name>” in the Presentation box.
* Add BrandImage to ProperCarView and delete “<Name>” in the Presentation box.
 
* Place and resize the BrandImage button next to the Registration Number button.
·      Place and resize the BrandImage button next to the Registration Number button.


379. Add BrandImage to '''CarTransferOwnershipDocument'''. Follow the steps in the video on how to add a column from the model. Make sure you try a few of the ways to find the proper expression for showing the '''BrandImage''' from the different contexts:
379. Add BrandImage to '''CarTransferOwnershipDocument'''. Follow the steps in the video on how to add a column from the model. Make sure you try a few of the ways to find the proper expression for showing the '''BrandImage''' from the different contexts:


·       "Add Column"
# "Add Column"
 
# "Add column from model"
·       "Add column from model"
# Type the expression manually.
 
·       Type the expression manually.


380. In the '''CarSeeker''' ViewModel, change the name of “AsString” to Presentation. Add the BrandImage column. Save.
380. In the '''CarSeeker''' ViewModel, change the name of “AsString” to Presentation. Add the BrandImage column. Save.


·      Follow the video to fix the '''NewCar''' action that does not have a view (since it pointed to an AutoForm that we dropped). Make it point to '''ProperCarView'''.
* Follow the video to fix the '''NewCar''' action that does not have a view (since it pointed to an AutoForm that we dropped). Make it point to '''ProperCarView'''.
 
381. In the '''ProperCarView ''' ViewModel, add a nested ViewModel class and select “Singlelinks with setter”, then “BrandOfCar : BrandOfCar” to set the BrandOfCar link.


·      Drag the newly created button and place it above “Car Owner”.
381. In the '''ProperCarView ''' ViewModel, add a nested ViewModel class and select “'''Singlelinks with setter'''”, then “'''BrandOfCar : BrandOfCar'''” to set the BrandOfCar link.


·      Change the name for '''BrandOfCar2''' to <code>BrandOfCarForAdmin</code>.
* Drag the newly created button and place it above “Car Owner”.
* Change the name for '''BrandOfCar2''' to <code>BrandOfCarForAdmin</code>.


382. Note the access issues with ProperCarView - anyone can set the BrandOfCar.
382. Note the access issues with ProperCarView - anyone can set the BrandOfCar.
Line 119: Line 103:
383. Fix the ReadOnly expression to allow only the admin to change the BrandOfCar.
383. Fix the ReadOnly expression to allow only the admin to change the BrandOfCar.


·      Click on the dotted box next to ReadOnly Expression.
* Click on the dotted box next to ReadOnly Expression.
 
* In the popup window, write <code><span class="col-blue-dark">not</span> <span class="col-blue-dark">SysSingleton .oclSingleton.CurrentUser.IsAdmin</span></code>
·      In the popup window, write not SysSingleton .oclSingleton.CurrentUser.IsAdmin
* Save.
 
·      Save.


384. Run the app. Check with your two users - ''a'' and ''b'' - where '''a''' is admin and '''b''' is not. Verify that you understand the ReadOnly expression.
384. Run the app. Check with your two users - ''a'' and ''b'' - where '''a''' is admin and '''b''' is not. Verify that you understand the ReadOnly expression.
Line 129: Line 111:
385. Go back to the app and make the BrandOfCarForAdmin column invisible for anyone who's ''not'' the admin.
385. Go back to the app and make the BrandOfCarForAdmin column invisible for anyone who's ''not'' the admin.


·      Do this by clicking in the FollowEnable box located next to the VisibleExpression. A tick/checkmark will appear.
* Do this by clicking in the FollowEnable box located next to the VisibleExpression. A tick/checkmark will appear.


386. Then, we discover that anyone can change the ''RegistrationNumber''. Fix this by first setting the Access Group ''IsAdministrator'' on the action NewCar.
386. Then, we discover that anyone can change the ''RegistrationNumber''. Fix this by first setting the Access Group ''IsAdministrator'' on the action NewCar.
Line 135: Line 117:
387. Move the read-only expression from combobox BrandOfCarForAdmin to the ReadOnly Expression for the ProperCarView ViewModel.
387. Move the read-only expression from combobox BrandOfCarForAdmin to the ReadOnly Expression for the ProperCarView ViewModel.


·      Select and cut SysSingleton .oclSingleton.CurrentUser.IsAdmin
* Select and cut <code><span class="col-blue-dark">not</span> <span class="col-blue-dark">SysSingleton .oclSingleton.CurrentUser.IsAdmin</span></code>
 
·      Remove the tick/checkmark on the Visible Expression box.
 
·      Click on the ProperCarView ViewModel and look for Readonly Expression.
 
·      Paste the expression.


·      Save and check the changes in your app.
* Remove the tick/checkmark on the Visible Expression box.
* Click on the ProperCarView ViewModel and look for Readonly Expression.
* Paste the expression.
* Save and check the changes in your app.


[[File:ModelAfterChapter12.zip|thumb|none]]
[[File:ModelAfterChapter12.zip|thumb|none]]

Revision as of 06:22, 12 April 2024

This is Chapter 12. Are you looking for the beginning? Find it here: Chapter 1, or link to Chapter 11 (the previous chapter)

Video 12: Adding an Image Attribute to a Brand

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 365 - 387 Introduction Adopting BrandOfCar Autoform Creating BrandImage BrandSeeker Removing the Autoforms Adding BrandImage Setting User Rights

Chapter 12: Adding an Image Attribute to a Brand; Dropping the AutoForms

In this chapter, we'll discuss how to add an image attribute to a brand, confirming that it shows in various places. We'll drop the AutoForms and ensure the access rights for editing checks who can set the brand and registration number.

365. Adopt the Autoform AutoFormBrandOfCar and rename it to ManageBrand.

366. Rename the Class action that brings that form up to have the same name as the form. You will get some errors.

367. Remove the “Cars” widget. Delete the “MultilinkCars” and “DeleteThis” actions that now show errors due to the use of vCurrent_<oldname>

368. Delete all the widgets except the Name widget.

369. Make sure you understand the opt-in/opt-out for actions.

370. Add a generic column and call it BrandImage.

  • In the Expression box, write: self.BrandImage
  • Select “Add new Attribute BrandImage” in the blue highlighted text in the bottom half of the debugger.
  • In the popup window, click on Type, choose “Blob” (add link to page), and click ok.
  • Press ok to exit the debugger.

371. Resize the Brand Image widget.

  • Remove the presentation from the BrandImage column.
  • Delete “<Name>” in the Presentation box.
  • Resize the widget again.

372. Back to the model, click on “BrandImage:Blob?” in BrandOfCar.

  • In the details to the right, look for “Mode” and select the blank box next to BlobType.
  • Choose “Image” in the drop-down menu.

373. Start the application. Once it’s running, select “Auto Form Brand Of Car Seeker”, click on the first car, and navigate to Manage Brand. You’ll see an image widget.

  • Click on the widget to search and upload a brand image from Google.
  • Do this for each car brand.

374. Add a new ViewModel to seek for BrandOfCar. Name it BrandSeeker and use the UIFirst to get a copy of SeekerAutoForm logic.

  • Delete “AsString : self,asString” column in the

375. In the ViewModel for BrandOfCar, click on the Global Action BrandSeeker. When the Global Actions window pops up, search the items under How the menu looks and where it is placed for “Sort order in Group” and write “x” in the box. Listen to the explanation to make sure you understand how Action order is handled in menus.

  • Under How the menu looks and where it is placed, search for Menu Group and click on the box with dots. In the EditMenuGroups popup box, write a “z” in the row next to IControltheMenuGrouping/AtAllLevels.
  • Click ok. You’ll see that the menu order has changed.
  • Go to the BrandSeeker ViewModel and delete the ChangeTime : self.ChangeTime, CreateTime : self.CreateTime, and Guid : self.Guid columns.

376. Drop all the AutoForms from the model. Go to BrandOfCar class and right-click on it. Scroll down to AutoForms and select “Drop AutoForms”. Save.

  • Note that many actions and ViewModels are now removed from the app.
  • Reload your webapplication to see the changes.

377. Note that the logic to jump on the first click is in effect whenever there is only 1 available navigating action.

378. Right-click on the BrandOfCar class and check the UsedBy list. Find out where BrandOfCar is used.

  • Add BrandImage to ProperCarView and delete “<Name>” in the Presentation box.
  • Place and resize the BrandImage button next to the Registration Number button.

379. Add BrandImage to CarTransferOwnershipDocument. Follow the steps in the video on how to add a column from the model. Make sure you try a few of the ways to find the proper expression for showing the BrandImage from the different contexts:

  1. "Add Column"
  2. "Add column from model"
  3. Type the expression manually.

380. In the CarSeeker ViewModel, change the name of “AsString” to Presentation. Add the BrandImage column. Save.

  • Follow the video to fix the NewCar action that does not have a view (since it pointed to an AutoForm that we dropped). Make it point to ProperCarView.

381. In the ProperCarView  ViewModel, add a nested ViewModel class and select “Singlelinks with setter”, then “BrandOfCar : BrandOfCar” to set the BrandOfCar link.

  • Drag the newly created button and place it above “Car Owner”.
  • Change the name for BrandOfCar2 to BrandOfCarForAdmin.

382. Note the access issues with ProperCarView - anyone can set the BrandOfCar.

383. Fix the ReadOnly expression to allow only the admin to change the BrandOfCar.

  • Click on the dotted box next to ReadOnly Expression.
  • In the popup window, write not SysSingleton .oclSingleton.CurrentUser.IsAdmin
  • Save.

384. Run the app. Check with your two users - a and b - where a is admin and b is not. Verify that you understand the ReadOnly expression.

385. Go back to the app and make the BrandOfCarForAdmin column invisible for anyone who's not the admin.

  • Do this by clicking in the FollowEnable box located next to the VisibleExpression. A tick/checkmark will appear.

386. Then, we discover that anyone can change the RegistrationNumber. Fix this by first setting the Access Group IsAdministrator on the action NewCar.

387. Move the read-only expression from combobox BrandOfCarForAdmin to the ReadOnly Expression for the ProperCarView ViewModel.

  • Select and cut not SysSingleton .oclSingleton.CurrentUser.IsAdmin
  • Remove the tick/checkmark on the Visible Expression box.
  • Click on the ProperCarView ViewModel and look for Readonly Expression.
  • Paste the expression.
  • Save and check the changes in your app.

File:ModelAfterChapter12.zip

Next Chapter:

The_1000_steps_program_to_MDriven_Chapter_13

This page was edited 4 days ago on 05/15/2024. What links here