The 1000 steps program to MDriven Chapter 12
No edit summary
No edit summary
Tag: 2017 source edit
(15 intermediate revisions by 2 users not shown)
Line 1: Line 1:
This is '''Chapter 12'''. Are you looking for the beginning? [[The 1000 steps program to MDriven Chapter 1|Find it here: Chapter 1]], or [[The 1000 steps program to MDriven Chapter 11|link to Chapter 11(the previous chapter)]]
This is '''Chapter 12'''. Are you looking for the beginning? [[The 1000 steps program to MDriven Chapter 1|Find it here: Chapter 1]], or [[The 1000 steps program to MDriven Chapter 11|link to Chapter 11 (the previous chapter)]]


Here's the video link for Chapter 12: https://youtu.be/N4xW-CS02sE
=== '''Video 12: Adding an Image Attribute to a Brand''' ===
<html>


== Chapter 12 ==
<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/N4xW-CS02sE?si=tmEw0AvMvBDtiLmM" title="YouTube video player" frameborder="0" allowfullscreen></iframe>
  </div>
  <div class="video__navigation">
<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="32" tabindex="0"> Adopting BrandOfCar Autoform </span>
    <span class="navigation-item" data-video="N4xW-CS02sE" data-start="300" tabindex="0"> Creating BrandImage </span>
    <span class="navigation-item" data-video="N4xW-CS02sE" data-start="635" tabindex="0"> BrandSeeker </span>
    <span class="navigation-item" data-video="N4xW-CS02sE" data-start="848" tabindex="0"> Removing the Autoforms </span>
    <span class="navigation-item" data-video="N4xW-CS02sE" data-start="958" tabindex="0"> Adding BrandImage </span>
    <span class="navigation-item" data-video="N4xW-CS02sE" data-start="1354" tabindex="0"> Setting User Rights </span>
  </div>
</div>
 
</html>
 
== 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.'''  
'''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 <code>ManageBrand</code>.  
365. Adopt the Autoform ''AutoFormBrandOfCar'' and rename it to <code>ManageBrand</code>.  


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


367. Delete the 2 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 ViewModelColumns except the Name.
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.


370. Add an image - BrandImage:Blob to class BrandOfCar.
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.


371. Add a column that shows BrandImage in the ManageBrand view.
372. Back to the model, click on “BrandImage:Blob?” in '''BrandOfCar'''.


372. Remove the presentation from the BrandImage column.
* 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 and upload images for the different brands.
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.


374. Add a new ViewModel to seek for BrandOfCar. Name it BrandSeeker and use the UIFirst to get a copy of SeekerAutoForm logic.
* Click on the widget to search and upload a brand image from Google.
* Do this for each car brand.


375. Set sortorder on Global Action BrandOfCar and make sure you understand how Action order is handled in menus.
374. Add a new ViewModel to seek for BrandOfCar. Name it '''BrandSeeker''' and use the UIFirst to get a copy of SeekerAutoForm logic.


376. Drop all the AutoForms from the model. Note that many actions and ViewModels are now removed from the app.
* 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 <code>ChangeTime : self.ChangeTime</code>, <code>CreateTime : self.CreateTime</code>, and <code>Guid : self.Guid</code> 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.
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 and add the BrandImage to these places.
378. Right-click on the BrandOfCar class and check the UsedBy list. Find out where BrandOfCar is used.


379. Make sure you try a few of the ways to find the proper expression for showing the BrandImage from the different contexts:
* Add BrandImage to ProperCarView and delete “<Name>” in the Presentation box.
* "Add Column"
* Place and resize the BrandImage button next to the Registration Number button.
* "Add column from model"
* "manual expression typing"
380. Fix up the NewCar action that does not have a view (since it pointed to an AutoForm that we dropped) - make it show view ''ProperCarView''.


381. Add a SingleLinkWithSetter/Picker/Combobox in ProperCarView to set the BrandOfCar link and call the column <code>BrandOfCarForAdmin</code>.
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 from model"
# 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 <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.


383. Fix the ReadOnly expression to only allow 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.
* In the popup window, write <code><span class="col-blue-dark">not</span> <span class="col-blue-dark">SysSingleton .oclSingleton.CurrentUser.IsAdmin</span></code>
* 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.


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 read-only expression.
386. Then, we discover that anyone can change the ''RegistrationNumber''. Fix this by first setting the Access Group ''IsAdministrator'' on the action NewCar.


385. Go back to the app and make the BrandOfCarForAdmin column invisible for anyone who's not the admin. Do this by checking the FollowEnable box behind the VisibleExpression.
387. Move the read-only expression from combobox BrandOfCarForAdmin to the ReadOnly Expression for the ProperCarView ViewModel.


386. Then, we discover that anyone can change the ''RegistrationNumber''. Fix this by first setting the access group ''IsAdministrator'' on the action NewCar.
* Select and cut <code><span class="col-blue-dark">not</span> <span class="col-blue-dark">SysSingleton .oclSingleton.CurrentUser.IsAdmin</span></code>


387. Move the read-only expression from combobox BrandOfCarForAdmin to the read-only expression for the whole ProperCarView.
* 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