This is Chapter 7 of the 1000 Steps Program.
If you want to start from the top: The 1000 steps program to MDriven Chapter 1, or see Chapter 6 (the previous chapter)
Video 7: Derived Attributes & Editable Grid Cells in Web UI
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 7: First Mention of Derived Attributes; Editable Grid Cells in Web UI
215. CarsIUsedToOwn is actually a poor name. If we change the name to CarsPersonUsedToOwn, it is a better fit as it does not raise questions about whom "I" refers to.
- Type the new name in the Association end.
- Save (that will run the error check) and see the many errors.
216. Change it back to CarsIUsedToOwn temporarily and save. You will see no errors.
217. Instead of changing it, we will use the Rename function that will help to rename it everywhere it is used.
- Right-click the association end, choose rename, new name:
CarsPersonUsedToOwn - Check "Set former name." Whenever you use "Rename," you should check "Set former name" to guide MDriven to help you once your changes also involve the creation of change scripts to a database. Click on Toggle Selected
- Save and verify that you are error-free.
218. Create a note on the diagram by right-clicking "Add note." Double-click the note box and write this in the note:
We will assume that a person always has 1 car at a time and that when they sell the first car, that person immediately gets a new car on the same day.
- Close the note. Resize it and place it somewhere nice.
219. Add a new attribute, DatePurchased of type DateTime?, in class HistoricOwnership.
220. Select DatePurchased and in the property inspector, change the AttributeMode from Persistent (default - means saved in the database) to Derived (means calculated somehow).
221. Stay in the Property Inspector and find DerivationOcl. Click on the OCL Editor with the three dots.
222. We want this DatePurchased to be derived from the first car's DateSold.
- We want to have an expression that from HistoricOwnership (self) goes up to the person (self.Person), and from there, looks at all HistoricOwnership (self.Person.HistoricOwnership), makes sure that this list is in DateSold order (self.Person.HistoricOwnership->orderby(h|h.DateSold)), and checks where in this list THIS HistoricOwnership (self) is (self.Person.HistoricOwnership->orderby(h|h.DateSold)->indexof0(self)).
- Once we have that, grab the one after THIS HistoricOwnership: listinorder->at0(listinorder->indexof0(self)+1).
- We discover that we need the same list twice; it is easier to get it once and use it in the expression twice. This is done in OCL with the "let x=someexpr in someotherexpr" operator.
We can write:
let listinorder=self.Person.HistoricOwnership->orderby(h|h.DateSold) in ( listinorder->at0(listinorder->indexof0(self)+1) )
This expression will return as a HistoricOwnership object, but we want this DatePurchased to be derived from the prior cars' DateSold. We append.DateSold
let listinorder=self.Person.HistoricOwnership->orderby(h|h.DateSold) in ( listinorder->at0(listinorder->indexof0(self)+1) ).DateSold
223. Go to Person ViewModel and add the date purchased in the HistoricOwnershipGrid. Save and test the web.
224. We notice that there is no easy way for us to edit the DateSold; thus, the DatePurchased will get a null result all the time.
- Make the grid Editable by selecting the HistoricOwnership nesting head (blue).
225. Here we will add a tagged value (tagged values are extra meta information we can dress up our model with on most levels, like classes, attributes, and ViewModels). Press the Tagged values button in the ViewModelEditor.
226. In the shown window, press the Refresh from Wiki button.
- Note how many predefined possible values (value store) are shown.
- You are not limited to these tagged values, but the predefined values have a special meaning to the Turnkey (the web front-end engine, or to the WECPOF of the WPF engine).
227. Find Editable in the top selector. Add that, set its value to True, close, and save.
228. To make a cell in a grid editable, it must be in an editable grid - we fixed that just now - but a column must also have a ReadOnly expression that does not result in true (but rather, false or left empty). Clear the DateSold ViewModelColumn in the grid ReadOnlyExpression.
229. Save and test the web. You have an editable date-picker in DateSold.
230. Enter some different dates in the rows. If you don't have rows, add some.
- Notice the instant calculation of the DatePurchase as the DateSold becomes available in the row below.
231. Click the DateSold column head in the grid to verify that you get the correct values.
232. In the column DatePurchased, we want to force the ISO date because we don't trust the browser setting.
- Change the expression to
self.DatePurchased.ToString('yyyy-MM-dd') - Save and test the web.
233. Discover the issue with us taking IndexOf0 +1 when the prior car is at -1 - fix the derivation. Save and test the web.
234. Notice the Name column; it now looks like an edit box. This is because we made the grid editable.
- Set the column to
IsStatic=true. - Save and verify that it now looks like a simple string.
235. We don't want the Name column here since it will always be our own name. Drop it.
236. From class Car, drag out a new association arrow to Person. The Car-end, you name CurrentCar, and the Person-End, you name CurrentOwner.
237. In the Person ViewModel, add a SelectBox by right-clicking in the green tree, add a Nesting ViewModelClass, go to SingleLinkWithSetter, and select CurrentCar. Save and test the web.
238. Clean up the view and remove any bogus columns.
Next Chapter