This is Chapter 5. You may want to start at the beginning: Chapter 1, or see Chapter 4 (the previous chapter).
Video 5: Different Types of Actions
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.
NOTE: Click on the step/number to access the corresponding images.
146. We have seen how to adopt views from being AutoForms to becoming ViewModels you can control. Now, we will take a look at the actions that bring those views up for a user.
- Look at the PersonSeeker from Chapter 4 in the ViewModelEditor, fold down the yellow Actions button, and note the blue /PersonSeeker link. Click it
147. See the form that defines this action. Note the ActionName and change it to PersonSeekerIAmInControl.
148. Note the generated MenuBar above the ActionName is also updated.
149. Notice the left-hand list in the form. These are the other GlobalActions currently defined. Click the one named AutoFormCarSeeker.
- Note how the right-hand side now shows its name and definition.
150. There are three types of actions; these two actions are of the Global type.
A GlobalAction is called Global since it will be shown in the top-level Global menu.
151. Close the yellow GlobalAction form and go back to the model diagram. Click the Cog-wheels-tool-button; note how this brings up the same form again.
152. Select the AutoFormCarSeeker action. Observe how it does not show in the rendered MainMenu and that it is defined to be in a MenuGroup called AutoForms.
- Change the MenuGroup of the action to none/blank/empty.
- Note that the action now shows next to PersonSeeker.
- Change it back by pressing Ctrl+Z (undo) or do it manually.
153. Select the PersonSeeker action in the list. Press the three-dot button (...) next to the MenuGroup choice - this brings up the EditMenuGroup dialog. Press Add menu group, name it IControlTheMenuGrouping/AtAllLevels, and close the dialog.
154. Set the MenuGroup on the PersonSeeker action to IControlTheMenuGrouping/AtAllLevels.
- Check the top-rendered menu and find the
IControlTheMenuGrouping. - Click it to open it and note the sublevel AtAllLevels.
- Click to open; notice the PersonSeeker action under this submenu.
155. Note that the PersonSeeker action is now gone from the top level - the Global action will only be in one place in the top menu.
156. Note that the PersonSeeker action has a Bring Up View Model setting under the header What the action does.
157. Press the three-dot button next to the Bring Up View Model.
- Note that the ViewModel Editor is brought into focus, showing the ViewModel that was chosen for the action.
- Go back to the Action dialog (step 146, or just alt-tab).
158. Change the Bring Up View Model value to Index. Verify that you get the ViewModel Editor showing the Index ViewModel when you press the three-dots button (...).
159. Go back to the Action dialog and undo the change. Now, go into the rendered top menu, find the PersonSeeker action, and note the ViewModel icon next to it. Click on the icon.
- Note that you get to the ViewModel Editor with the correct form showing.
160. Select the Exit-action in the left list. Now go into the rendered top menu, find the PersonSeeker action, and click - not on the icon, but on the text of the rendered action.
- Note that the GlobalAction form has now selected the PersonSeeker action.
161. Create a new GlobalAction with the top left Add Global Action button. Name it PersonSeekerAgain, set the BringsUpViewModel to PersonSeeker, and set its Menu group to IControlTheMenuGrouping/AtAllLevels.
- Check the rendered menu - where did it show up?
162. Set the BringUpViewModel to PersonSeeker.
163. Save and check in the Browser in your running app.
164. Set the DividerGroupWithinMenu to SomeName on PersonSeekerAgain. Save and check the web app.
165. Set the DividerGroupWithinMenu to SomeName on PersonSeekerIAmInControl. Save and check the web app.
166. DividerGroup introduces sections. To order actions, use Sort order in the group. Set AAA on one and BBB on the other. Save and check the web.
167. Switch the AAA and BBB on the actions. Make sure you understand how to control the order.
168. As stated earlier, there are three types of actions. We have looked at one of them - the GlobalAction. GlobalActions only end up in the GlobalMenu. Now, we will look at Class actions.
Class actions are type specific. A Class action belongs to a Class and all objects of that class can see/use this action.
169. Go back to ViewModel PersonSeeker, fold down actions, note the 2 ShowPerson links in Person-Nesting, and click either one.
170. A new but similar action form shows up, listing all class actions for class Person. There are 2 ShowPerson actions. One is one we got from AdoptThisViewModelAndMakeItOurOwn. This function also copies some of the actions associated with the definition we adopted. Rename the one that does NOT bring up autoform to ShowPersonIAmInControl.
171. Back in ViewModelEditor, note that the name is updated and the parenthesis with the class name Person within - this is how you recognise a Class action. These class actions both belong to the Person class.
172. Change the class of the nesting to Car.
- Ignore the many errors.
- Notice that Person-actions disappear and ShowCar shows up instead. Class actions are automatically shown depending on the type context.
- Change the class of nesting back to Person. Save.
173. Test the web and both actions. They bring up two different forms. In the form called only Person, we see the same Class action again, taking us to the second form and vice versa.
174. Class actions show up directly as long as the type information is correct. This is what we often want, but not always. There is a way to opt-out, showing the action in a place where the type rules say it should show.
- Look at the top of the Action definition - a list of ViewModel-places the type-information matches.
- Notice the checkbox for opt-in. Make sure all levels are checked - on both actions for Person.
- Save and check the web.
175. You can also opt-in/out actions in a ViewModel by pressing the arrow in front of the class action. Try it out.
176. You can opt back in from the ViewModel tree as well. Try this out.
The third type of action is the ViewModelAction (aka ContextAction). These actions are unique to a view.
177. Go to ViewModel Person, fold down actions, and note the DeleteThis action. Double-click it.
178. We can now see the third kind of Action form - still similar to the other two types - but the left side in this form resembles the ViewModel tree structure. This form also shows the matched Class actions for the ViewModel levels. You can only see the difference between Class-actions and true-ViewModelActions by the latter missing the class name behind it.
179. In the DeleteThis ViewModel action, find the AreYouSure setting and set it to "Wow - wanna delete this person?". Save.
- Test the action on the web. Say Cancel on the question to delete.
180. Since ViewModel actions are not limited by class, they can theoretically show up at any level of the ViewModel tree. We rarely want a ViewModelAction to show up on more than one level in the view. This is controlled in the Action editor - top right side - only on this level.
- Change it from Person to Car. Save and test the web.
- Now, the DeleteThis is only available when a car is selected. This is logically strange so change it back to Person.
181. We have looked at the three different types of actions, but there is one more action-like thing: the ViewModel placed button, ViewModelEditor for Person-view. Add a button and name the column DeleteMe. Save. Check the web.
182. Nothing happens since it has no expression in action language that does anything. We will connect this ButtonAction to the ViewModelAction DeleteThis by finding the Is action setting, and next to it, a picker where we optionally can make the button execute one of the actions available to us in the view. Choose DeleteThis. Save. Test the web.