Setting the presentation properties in the View Model, introducing Modal View Model action.
To make your experience more comfortable, we set the main tags mentioned in the video to the right bar menu of this mini player. Choose the interesting subtitle on the list and immediately get to the exact theme timeplace in the video. Now you can pick any topic to be instructed without watching the whole video.
Raw subtitles text
I am welcome back this will be part 4 of the MDriven design overview and let's
look a bit closer on view models so and the "ViewModelEditor", the "HouseView"
what we want to do in the "HouseView" is probably to set the immediate properties
but we would also like to show some more information about the links it has
so we could add a "nested" that you want the class to see all the lease contract
these so following this link
and so this is the ocl for that and this is the nesting that was added so this is
how this work that and you nesting can be added, we could add
an empty nesting like this and once we have it we could say that it uses a
certain type like "person" and if we had added a generic column we could have
written the expression "self" to follow some association of house I say
this contract and if we want to connect this one to show and to show the details
of each object in this one we would say "associated" to that one and that we get
this arrow we would give this a name and we would add some properties to show
some specific things about that
and that would be rendered as a green "with this name" and again the same thing that
we saw in the action dialogue that we hack up the name on camel case if you
have left the name as the presentation as stating "use the name" because that's
quite a common case, but you could do something else here now it uses the name
and add the things we added or you could just have your own thing all together as
we resize this
it gets more apparent that this is grid and if we were to add columns they end
up as columns in this grid, but that was just an example we're going to remove
that and remove this for now, instead we have the "lease contract" list and we want
to add some of the properties of the lease contract, like the apartment number
like the "start date" and "end date" maybe
and if we now would want to allow for edit of these things and in wpf we
actually allow for implace edit of the grid so that's not an issue but
suppose that we would want to have a master-detail where we pick one row and
do details of that then we could do a new nesting from here so the nesting is
unlimited to just one we can have any depth
let's do this as a single link
to "self" so now it's just added an ocl expression "self" to a new listing, to a
new nesting and this these are many if they are integrate, these are many in
a collection
we render the grid, but here again we pick one so this is actually rendered as
a single field
ok, so for each one
I've picking the grid it will show the a asstring value here, as I have the type
information of the lease contract I also get hints that you might want to add the
apartment number and this list reduce as I already added the apartment
number it's abbreviated, but I want to add "start date" and the "end date" and the "rent"
of course I've could add these manually generic column and give it a name and
I'm free to use any kind of ocl expression that I see fit
here are the obvious once the attributes of the class in question and here are the
roles, so I can follow the role to "tenant"
and get the "last name"
we did that again and fix that ok notice that whenever we add a column
this the role for replacing hints that we use to render this and usually
adds new columns under the last one you added, so if I had moved this one over
here, then that one got placed on Row1 and if I were to add another one
generic column with a unique name let's call it too it would be added under as
because it's convenient and often the case that you want to stack them on top
of each other, if you hadn't, if they were to end up at the same spot, we would get
information about the "new column 2" occupies the same spaces new column
and then I could drag them apart like that
and I could call this "TenantsLastName" maybe I want to add at last and remember as
before I don't want this one to touch the edge, because then it would be
dragged out in the prototype, let's see how that would look, so heading over to
the prototype, refresh model, use, show all house, open up one, you see then
it's drive down all the way fills up the screen, depending on what you do you
might want to do this because, it's multi-row and it will follow along and
actually when we do this multi-row on purpose like this it's a signal to the
rendering engine in the prototyping to accept the returns etc to
to handle multiple line input, but if we make it like this and it doesn't touch
the bottom edge
it will look like this and that's more like what we want but it does touch
the right edge, so they are dragged out and follow along with this edge, if we
were to make one of these longer like this, then only this one touches the edge,
so if we refresh and view only this one follows along with the resize, this might
be what we want
but not in this case, as we see here the grid seems a bit crammed how can we give
more space to the column and these are the column definitions to give them more
space we would say that columns when in gri, let's set that to "2" instead then
there's more space given to this and that too as well, and that too as well
ok and we can drop this one showing the grid lines, we see that it's still only
occupies two columns, which make these things sort of expand, so what we can do
is insert column in the UI, like this and make this one expand over rows
and then everything relaxes and isn't as tense, this cell seems a bit stretch
because of the street number here, let's do something similar
how can we make this one stretch over here these, well that's that presentation
span, it uses one column now
so instead, let's as instructed to use 2 now it's relaxed and the UI will scale
and behavior better
so show all houses, model refresh, show all houses like that and as these types
were of date time, remember when we did the model "date time" the rendering engine will
choose to render these as a "date time" picker
so these are set this way, but it's all kind of strange to show these if there
isn't a particular lease contract selected and how can we control when to
show these, well we do that with a visible expression, so should it be
visible or not and again this is an OCL so all of these, let's remove this one
all of these should only be visible if there's something selected in this grid
so how do we know it now if there's something selected here
well this nesting is called lease contract list and in the visible
expression or in the ocl editor we see there are variables available
in this view model and all these v current and we selected are
automatically created by the viewmodel to allow you to have access to what is
the current object, the focused object of lists, or the list of selected objects in
the list, if you allow for multi-select so since our nesting was called lease
contract list we expect to find a vcurrent lease contract list and what we
want to do for the visible expression is to make sure that this is null
that returns a boolean true or false
so if it is not null then we want to show the UI widget
whoops where did I set that I set it on the grid and that would be contract
product it I'm gonna set it on all these like that, so if I head back to the
prototyper, re-read, I'm a bit stumped
I thought I removed it from the grid and apparently I did not and it didn't okay
I need to leave the expression box for it to apply that seems a bit and kind of
a bug I would enter fix request for that, but now it's like what I wanted it
to be in the first place, so now they are not show, how do we get a lease
contract in here
yeah
we'll get back to that, but and we will focus on the street for now, we have
create street, but that is not actually very practical to create the street
every time a new building is added or maintained, it would be more
appropriate to use a selector combobox, something with a picklist and that's a
very common case, so there's a quick action for that for that in the
viewmodel dialogue, it's under here we call it a "singlelink with setter", so
what do you want to do, you want now since the modeler has access to your
model it knows that you have two singlelinks from the building from the the
house class and one goes to owned by person and the other one goes to the
street, so let's pick for the street and three things we added: this column
and this column and that one
so what do we have here
well first it said that the street "self.TheStreet"
this is actually the singlelink value you know the one what we set with the
"create street" action that we will eventually remove and then we for this
we have a chosen a column for picklist so this is the column that will make up
our picklist the street pick list and that has the ocl expression "street.allinstances"
that in turn goes to, let's point this one, this nesting that says how
to present the street and all this is interpreted by the UI engine as to be
rendered as a picklist and it added it here but we can move it around
okay how come it's so long
well it's so long because the last thing we change was this grid and that was
just the same length and except for the label
so let's make that too like this and put it over here
so how will this look in prototype, re-read, show all houses, so the street now
it shows subs and we have several streets to choose from but they're all called
just "street", so why is that, well it's because the presentation is "self.asstring"
and if we look at street and the "default string
representation" for a street is well it's not defined so if it's not defined it
just uses the class name but a good way to denote the street might be just to state
the street name right, but actually it might be a good idea to add, since
the street had an association - a road to City, we might want
to add the city and the name of the city before we add
name of the street, that might be a good presentation of the street, so when we
have set that just going to save all this so have it
I'm refreshing re-reading the model, show all houses and now I see and the name of
the street and in front of here it should be the name of the city, but we
haven't set that on anything, so that won't be available until they're
actually is a city set in in this association here
ok, so that's a very important design pattern you can do it manually
you just state
the association end and you describe how the list of picked items should be
created and you associated to with the column for pick list of the first one
if you want to control how this is rendered, you can do that by
adding the nesting and this set an OCL expression, so since this is an
expression you put just as well have solved the issue here having "self.city.
"self.city.name+self.name" but then you would need to repeat it every time you were to
use
a street or that definition of street presentation, but just to prove a point,
let's add a string here with something like this and heading over to refreshing
the model and then there will be just the thing we added behind every row right
not gonna use that, so as we define the picklist, we have an option to
say that there is a there should be an a null option in
this picklist should the null option be first last or only if it's empty, so
that's the option that we can have an empty row, that's the null option
now we haven't set the street and now we have, ok, and if we have a null option
we might want to inform the user that this is the null option, maybe we would say
something like "please pick a street" and re - reading, do you want to save?
no, show all houses, please pick a street
ok
right, so we might not need this action any longer, going to drop that, delete
I'm gonna move this one in, like that and then we see that these labels
on grid and lining because these has presentation span "2" and this has
presentation span "1", just one column we are going to change that, at the "2" as well
ok better, to get something here we really need to have a list of
tenants, so there is lease contracts let's add a quick action here now
"add column prepared for action"
I might as well add a generic column to show you that an action is actually
nothing special, it's just that it has this check box checked, so now the new
column looks like this, but if I check that is action it would be rendered as
a button instead
so in this button, let's do a quick and dirty way to add some tenants or one
tenant
so in the role tenants we would like to add a person, but we don't have any
person, so we're going to create one person
create, so that would be one way to add a tenant and if we add a tenant, then uml
states that there must be at lease contract as well, that's implicit so
reloading, show all houses, press the new column and there is attendant
and let's say this one is in apartment number 1 and this one is in apartment
number 2 and this one moved in that day - that hasn't moved out and going to
pay me or pay the owner a thousand things in rent
alright a thousand things
this is a very common case that we have the need for a unit behind an attribute
that we present, so there's actually an option to have a presentation unit, this
is just a property, that you can set "per" attribute, so let's say this is dollar
if it is and you're going to save these and show all houses pick the same
house and what I would have expected was to rep dollars so that's
their this UI engines way to help me with the unit some things and that's
really important for uses to get things right, and remember we follow the
association to these rows are actually the lease contracts so as we added a new
person to the tenants, this one was implicitly created and as I select here I
can see that this is a master-detail 1212 on the apartment number
actually, I'm allowed to change things straight in the grid apartment "32", but
depending on how I want to have my users use this information I might want to
shut this off, how would I go about that?
well in the view model designer on each column each view model column and
these are the ones that build up the grid columns, I can set a readonly
expression, again these are ocl, so they can be very complex, if I want to, but they
can also be extremely simple, if I want to, readonly - true
oh I was over here
true and the Start Date - read only -true like that, and if I then save re-read, views
show, this is not editable even if I press f2 I can't go into edit mode for these
and the same is true, if I were to set the readonly expression here
since I added the association to the last name for the tenant I can
actually set the tenants last name here
but that might not be what I want to do so
one option is to state that this edit box is actually a static and
when it's a static it's rendered as a label only, so the effect would be like that
how come this is right just, well is all a matter of styles and
we can actually define this style to use in the view model, but
if I were to change this to something else I probably need to reopen it to be
the rendering is completely different, want to use that one
so how do we set styles in the view model well it's a style reference and then
there is a couple of styles defined, like the normal HTML style - h1 for heading
then this one got little larger or the h2 for not so much larger and having that
refreshing its rendered differently, but of course these are just the name of the
style and this style itself is defined in a xml file for wpf rendering and
that's xml file you are free to elaborate on as you please
initially we only had the naming reference to this styles, but then it became
apparent that some of styles might be data dependent, like if you have a number that
if it goes to negative it should be red, so there's the checkbox to say that the
style is actually not the name of the style
it's an expression and if you check that one, you immediately get an error here
that the column tenants last name has a styleref expression that does
not evaluate to string because h2 is not valid ocl expression so here you
could go things like, if the tenants name
let's say, we do something really stupid like the street number, if the street
number is larger than 10, and in OCL you are free to to use if-then-else syntax
and it looks like this, if-then so if its larger then 10 then we're going to return
it in the style name that h1, else - we're going to return this file name that is
h3 and "endif", so that's a valid expression, what's important when
we use the "if "syntax in OCL is that both the parts that are possible have
the same type, so if this would return an integer it would say
"parameters of this operation have no common superclass system and integer, because
since ocl is a functional language it really needs to evaluate to something
common to work, so in this case if the street number is over 10, we will use
the h1 style
otherwise we will use the h3 style I don't even know if we added the street number
oh it's over here
yeah
so this style works on the root rather than the selected objects, that's also
something you need to keep in mind, so the street number of the house
let's see how that would play out in our example, so the tenants last name is
Karlsen, it seems to be rendered in h1, but if we change this to 9, it's randered in
h2 and since you are free to elaborate with the styles, you can do a
lot with this kind of the control right
so we have seen edit boxes and date time pickers and other kind of
the pickers to pick a certain value, combo boxes as I like to call them and
as you can see the
viewmodel builds up and it isn't entirely necessary to have set all the
UI hints, but it helps the thought of how the information is structured, I
believe, so even if we are just going to use the data as such, the UI hints
are a good way to structure the information for your eyes
in this you could potentially want to control the tab order how the user would move to
get around the UI using the tab key, the default way is to
the default way is to use to "display order x before y", but one can choose here to
to have a different and strategy for the tab order
so the default is "display order y before x", but you could go another way
or column design order, if you really want to have full control of how it would
look as your view model builds up it gets, it touches a lot of the parts
of your model and it might be hard to get an overview of exactly what is it
that it touches, so there's a button over here called "analyze expressions" so what
it will look through all the expressions that you have, and even
the read-only expressions and the style reference and everything
cook it down to what you actually have used in from your model, so that looks
like this, so this is apparently what we use here, so this is rather useful
way to, another way to look at the information that we touched by the viewmodel
actually it's an possible to maintain separate UML diagram for the
information in the view model you see this
the house has a lot of attributes in our model, but it just shows the
ones that we actually use in this view model, so if we
want we could add or update a diagram with used model elements, and what
happened then is that we got a new diagram with all the data
from the "HouseView" and that's just setting there like this and if you're on
the diagram you might want to get some help to lay it out if it's all messed up
and I don't know if that really helped us but if you have a lot of information
that's how you would do it and the good thing about this strategy is that if we
were to add things like in that we were to add, well we almost have everything
but I'm going to add attributes 7 to this one and if I stand here and choose this
one "add or update... " again then I expect attribute 7 to be added to my diagram here
so that's a way to maintain a specific diagram for a specific view
good to know, but we're going to head back here
ok and as I said I thought that the action we added here to add a tenant was a
quick and dirty way, we need to find a better way to pick tenants for
our house and let's start with adding a new view model that lists all existing
persons, so let's call this one "allpersons" and to give it a type
let's say it's person, but like before we could use a nested singlelink or
multilink and
use the person.all instances, let's do that as a first, add a column first name
and last name and drop the default one
I'm going to design it to be there and drag it out the bed and as this touches
the edges it will expand to view, if I see here there are no ways to get here
no actions leading here and now actions available here and that is a good example
of finding in this view, that I talked about in the other video, actions and
navigations, refresh, we find that, that's not reachable from any action, let's find
we right-click it and choose to do a global action for show and now
it has an action here but as we can see it's not the in any action group or menu group
so let's click that one up and set the menu group to views, so heading back to
the prototyper and refreshing we will find we have a show all persons we have
the two that we added from before
okay that's a start but what we really wanted to do was to be able to pick tenants
to our house, so how would we go about doing that and if we look at the actions
definitions for this one we need some kind of action to bring up the
all persons in a model way, pick a few of them and say that they should be tenants
that would be the best way to treat potentially large amount of
persons to browse between, so we're gonna use that now, action definitions
this is the filter view of the "ViewModel" actions and the class actions that are
available from this view, since there are few more view model actions in House View here
going to add a view model action and we're going to call this "pick tenants"
only in this we say that's under the root nesting, that we want to show this action
and we're going to bring up the all persons view, but now we're going do
something special
we're going to say that this view model that will bring up all persons
should be modal, modal is that we can move away from it before we have chosen
"OK" or "cancel, so when I check that box I get an enable expression for modal - OK
when should be OK to dismiss this box with OK and also an expression of
their modal OK, so this is good, because in the enable expression for modal OK
which of course, is an OCL expression I will see that I'm in context of the all
persons view and I get the selected all person, so these are
the collection of person that are selected in the grid, so if this
one "not empty" I guess then it should be ok to press OK, so that's
really what I stated here "enable expression for Modal OK- yes
if there are any selected persons, so this variable we want to use it
on the expression that we're going to execute, when
the user presses ok, we don't do anything on "cancel" or "dismiss"
but on "ok", we want to do something and what we want to do is because this is interesting
now we're in the context of the calling view model, which was the house view
but we also have access to the modal view model because it isn't fully
closed yet, so we get the model result we selected all persons, so these are the
persons that the user has selected in the modal dialog, let's make these two tenants
are going to do that
wanna have that in the copy buffer for a minute
we are in the context of, we have the current house view
so this will be house that we have selected
this is our house and then from there we should add a tenant
let's call that tenant "t" where do we get these tea from, well we had it from
iterating over result we selected or persons, because even if it's
just one and this is where they will be, an iteration in OCL is commonly done
with collect and collect and has possibility to have a look variable
as we described before or if I haven't described before you should look
the playlist on OCL expressions, there will be describing
so "t" for the look variable and a pipe sign to separate the
loop variable from the expression and we will need an ending
the "tenants" is just the association and we need to use the operator "add"
to actually add the "t", so for each "t" in this variable we do on our
house tenants.add alright so now we have declared an action that was model and we
have expression to see, if it's okay to press ok on it and when we press ok
we have an action to do stuff
alright, that should be enough for us to head back to the prototyper, model refresh
so if are in the house, this one and we want to pick tenants
let's go back and pick another house that hasn't any tenants we want to pick
tenants here and what should happen now is that the all persons dialog show
up with an ok/cancel, you see the ok isn't enabled because we haven't
selected any persons, going to select that one, now it's okay because now the
selection is large
it's not empty, ok
when I press OK it was added here,I can see that it's the one tenants last name
the last name of
yeah it isn't fully visible and so that's one way, if I cancel that, discard
yes, one should have been removed
let's see all houses I'm going to pick this one as a house, pick tenants want to
select both and since we iterate over we get both Smith and Karlsen right okay
good, now we have done a modal view model and with these design patterns we can do a
lot of things, of course, but and we're not going to do anything more just now
going around this off and I will get back to you