Documentation:MDriven Designer Overview part 3

Review on the WECPOF prototyper application and continue on prototyping with actions and viewmodels.

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.

Running prototyper application More on WECPOF Action Definitions editor • Global actions Bring Up a View Model • ViewModel root object • Menu groups • Create/Init standart actions • Framework actions Nested ViewModel class • Grid options • Expressions • Global Action for Create/Global Action for show ViewModel action Class action Navigating Actions 3d rendering

Raw video subtitles

I welcome back this is part three of

the MDriven overview

let's have the right back in them on the

day the play button where we have their

system prototyper we have looked at the

the new debugger that look like this but

this button wrong model and continue

modeling is also interesting if we push

that one we get there

this window and that actually is

possibly our running application and

this also has a model refresh, so if we

do changes in our model this one can

re-read to to reflect the changes to

actually execute an application we need

some kind of menu

this is just the administrative manual

way you can issues sties and refreshed

models but how do we get there and a

menu in here so that we could view our

and view model or

rendered view of our view model actually

we do that by adding an action in the

action dialogue so actions editor click

that one up

it looks like this and and that we could

create a new global action global

actions are actions that show up in the

global menu in her in a prototype

0:02:27.780,0:02:35.610

application so I'm going to add a new

global action when I select that in the grid

I get the properties here to change if I need to

so if this is just "Default" name new

global action

it has the ability to have an enable

expression and again it's the ocl it has

the ability to have access groups we're

going to look at that later on and

there's also a possible execute

expression again it's ocl but the action

language remember ocl with side effects

that actually can change data but we are

going to use now is bring up a few more

the house view the one that with it so

let's leave it at that first and we head

back to this window and we re-read the model

for some reason it big again and now we

have the new global action as a menu and

this is as we see it here it's rendered

with spaces between each camel case part

of the world word new global action one

but what we named it too was just a

camel case new global action 1

why is that that is because we left the

presentation as the "Default" and and when

it's the presentation is left like this

just stating that we should use the name

we run this their algorithm to hack up

the name on each capital case so now

this action what it should do is bring

up the house view so let's see if it

does that and it does so we see a couple

of interesting things here and this side

is the view and this side is saved for

any actions that are valid in this view

they will be listed here what we notice

immediately is that they create street

button got really launched and that is

because it's at the end of the at the

bottom of the view mom and anything that

and is at the end of the view model

and rendered by this rendering engine

which uses wpf windows presentation

foundation will be extended to the

bottom so that's actually a feature to

enable us to have you I that fills out

the view and scales with the view we

were to drive like this

so in order to mitigate this we should

make sure that this isn't touching the

end there's couple of ways of doing that

but I'm going to choose to say that

there's a explicit row count in this

view mom if I turn on the grid lines I

can see that it has one two three four

five rows that he Ritt States 00 just

means that it will adapt to the highest

needed position from the things that we

have placed here so if we look at our

action that is rendered as the button

it's actually set its place on road 400

1234 and that's great if we were to move

this to hear it would say row five and

then this one expanse but what we want

to do is to avoid having this at the

body so let's say there's seven rows in

the grid now there's an empty row in

between can move that up again there's

two empty rows and that would be

rendered as if we will work to refresh

the model

like that so that's more like what we

want to see so now what we'll notice

here is that and this won't take any

edits as of yet everything disappears

even if we do the create street nothing

sticks and this was expected because if

we look at that our view model it's

rooted in a house but if we look at the

action the view model root object is

not set so what we see here is an empty

shell it isn't back by the house to

mitigate this we can either create the

house as part of the action

so in the human root object we would do

house create and if we then

if we then we read the model first asked

me since I have changes and the changes

are actually created a street that I try

to tie to an empty house or to the new

house would you like to save it

now and every time

let's see every time I push the model

refresh this view goes really big

why is that let's fix that once and for

all it's actually this one screen size

that we have set to something quite

large if we were to change it to let's

say 800 x 600 and do the model refresh

then it sticks this way

ok but what we were working at at state

new global action is actually backed by

house, so now when I click and the street

number should stake they create street

should state but not about is also that

the Save button is lit up and the cancel

button

so if I were to save this and do a new

global action I actually create a house

by clicking this action

ok and normally you wouldn't like the

action to be placed like this this is

more like you expect the submenu from it

to create the the submenus we could

assign the global action to the menu

group menu group we don't have any as of

yet so we could create some pick up this

dialog and add a menu group let's call

this one and five

that's add another one called views and

we want to sort these so that five let's

add not want and hey we want to have

this one first and this one second and

this one third so now we have some

groups that are global to our model and

we can assign our action to a group

going to assign it to the views group

and if I now reload their model I got

the views with the new global action

under it so that's better but I didn't

get the file or the edit menus because

those are just groups without any

actions in

there's actually a button here create

and eat it

standard actions let's see what it does

so it says you already have some actions

defined you still want to create

standard actions

yes, he added some actions

maybe it also added some groups

yes it's added one group but that's fine

so let's look at what the actions were

that it added the same action

that's not back by anything but a

framework action framework actions are

safe refresh undo/redo exit business

delete and do model ok so those are the

choices for the framework work actions

same is actually just saving the state

of the view the Refresh will in an

environment where we work against at

persistence server like the am driven

server or turkey application refresh

will re-read data that has changed in the

database since we read it to the view

exit will try and exit the application

undo and redo obvious they will try to

undo the latest changes that the usage

has done or redo them and then we have

our new global action that we started

so refreshing the the prototype will

give us five exit refresh safe and add

it will have redo an undue and the views

will have the new global action and the

Stice allow us to optionally and set

another vpf style

ok so new global action and we could

create street and set something here now

we could go edit undo or added reading

or we could go safe like this right

and normally redo an undue is backed by

control set and control y so if we would

want to do something like that we could

say that down here menu group the on

this is the undo

it's in the menu group edit and shortcut

key set and control and the redo should

have a shortcut key like and control

let's see that that stuff yeah and then

if we were to re-read the model we see

that they have been back by these

shortcut keys so view new global action

undo that wasn't what I was supposed to

show I should press ctrl + set like that

alright if I now save the changes that

we have so far I will notice there's an

error showing up and what it says is

there's a new global action that sets a

root object for the house view but the

house view doesn't require the root

object so why do we set one this is just

a helper to make our design consistent

so to address this warning we should

open up the house

view and say that it requires root topic

because this view is no good without a

packing house so if we were to shake

this one it quick

it requires a root object and save again

that triggers the error finding in the

model we could have pushed that one as

well of course and we see that there

the warning is gone

ok so

our model looks kind of weird

we're going clean it up a bit and and

remember if I'm just press delete and

not control the elite I only remove

things from view press Delete deep I

only remove these from from this diagram

and this one is not squared line and I

would like it to be squared so I press

the shortcut key for that control our

this and this one as well that and class

2 doesn't really help us anything

let's say that this is a person with a

first-name lost like that and the

association class between person and

house could be yeah lease contract that

we have a lease on and department in the

house maybe so that would state a hard

then number as an integer that's

possibly inaudible and maybe it should

state the rent

is that double now I just press ctrl

while using the thumb thumb wheel on the

mouse to scroll in scroll up with scroll

where my mouse is pointing so if I pump

. here and scroll it will stay in you

strong out I want to look closer to this

one pointed and control and mouse wheel

in a root so on the lease contract it

will be important to also give some

dates so gonna add a start and this is

actually featured at them when we parts

the the data that you put in to this

edit we start from left to right so in

order to be quick so if you just start

to write start date and then continue

with colon day time ? and that's what

you will get a little bit faster

and they question like that so that

might be a good lease contract

so we should probably em call this one

and this is Bella way I don't know going

to pounce and group should be one that

and I would call this and apart man so

the person can have multiple rented

apartments multiple each one is backed

by a lease contract and the house can

have multiple tenants that are persons

and that makes sense to me and now when

I'm doing this model but of course

depending on the requirements each maybe

we'll look totally different when

meeting an actual domain doing actual

work so that's the the point of modeling

finding the requirements that are right

for a particular use case so what about

this link what you mean maybe if we

change this one to owned houses and we

would change this one to both

so now the rules say that house only has

one owner owned by but a person can own

many houses

ok so now we have just cleaned up a

little bit gonna move in this tree

closer that didn't turn out very well

that and the location so what about the

location maybe to motivate the

generalization of location maybe we just

should add a city like that and a name

of the city that also is back but that

has a position property and then it

would be appropriate to have that street

is in 101 city and the city has multiple

sweet that would make sense

say we haven't done any thing to

actually change the views so adding back

to their prototype which we often

referred to as like path and why is it

called wake up off

well when we started m/m driven

framework was named eco enterprise core

objects ec ok and then when we found

that it was a good match to render

things in vpf we sort of much and the ID

to enterprise core objects and the wpf so

that's the story behind the crazy name

that and bothers some but hey it's just

a name it's not important but when you

hear us refer to the engine back of we

often talk about the the idea to take

purely decorative design with the view

models to running application and

actually the idea to do this is

implemented in many more ways than just

the wpf windows presentation foundation

it's implemented in like in turn key

with the angularjs and MVC for the web

and and actually we have it all over the

place it's also in in windows for us and

I speed of that so the idea is larger

than windows presentation foundation

let's add a slightly more day and

another view model to give us an access

point to the houses

let's call this one "AllHouses"  to start

with and we say that it's in the type

context of house but now we can add the

column or then the nested viewmodel

column multiple links get a problem with

this showing outside of the screen house

all instances, let's see what happens if

we just follow the model so that and

this pops out because we said it was of

glass house so then and there

view model editor suggest that maybe you

want to use house or instances in all

instances is an OCL operator to show

everything of that particular class so

that's a practical way to start on in

information sets that there are small

and initially everything is small so

it's a good start

so what happened here

it added the this view model call you

with the ocl expression house all

instances and if we were to look at the

resulting type of days it's a collection

of house so it's basically houses and

then it added this blue nesting

viewmodel claws and it connected this

column to this one so how come the sound

connected it should look like this as

was a new one I haven't seen that before

so the house all instances points out

associated to all house so these are all

made up names that let's call this one

house grit and whenever they're in the

view rendering engine seized this type

of construction there's something that

is creating a list and you have

properties on each object for in the

list it will suggest that we should

render it as a great and to make they're

going to switch off the grid lines the

grid lines are for the complete the area

that we rendering and this is a rented

great if we switched the designer style

of the render that they take might be

more clear what happens all that in work

as expected

let's see if I switch

yeah like this I had to switch back and

forth to make it stick

so this is and rendered as a grid and if

I add properties I can either just add a

eunuch volume and then I will have to

write my expression ocl expression what

should be in it myself where I can just

pick from what the view model editor

suggest based on the based on the type

information so let's pick the street

number and now did the street number and

up here and it ends up as a column in

the grid so if I continue like this at

the state than the state ends up here

and I'm gonna add a unary call you that

I can name to something but first we're

going to do the expression so what it

wouldn't do

maybe we want to em list who owns it so

as we are in context of house we have

access to the roles of the associations

of house house has an association owned

by as we see here so let's follow that

one and then we are in context of the

resulting type is person and person has

a first name and lost me

ok so let's take the the last name of

that wasn't

let's take the the last name like that

so self owned by and last name and this

is really easy to navigate through

associations like this we can navigate

as far as we want and need in ocl so

that is really great when designing a

fully normalized information model where

everything is stored only once and

reused whenever needed so that forces us

to collect things together to present

the needed information in one context or

as we would like to call it in one view

model so now when I have the last name

of the owner I can name the call you

los name of home

so this is another view and I would like

to have a global action for bringing up

this view this view actually isn't

backed by doesn't need to be backed by a

specific house because it doesn't make

use of anything of the root

the root object it just use the class and use the

class operator all instances if I right

click this one I get an option to add a

"Global Action for Create" or a global

action for show

so this is just a shortcut to let's see

what happens if I do it is and in the

action dialogue and you action was

created "show.allhouses" so that was what

that helper method did show all

houses it brings up the viewmodel all

houses but what it didn't do is sorted

into a menu group so I will add that

myself

it should be in the views like that so

that would mean that if I had back here

and refresh the model I should have

another one called "show.allhouses" that

shows a grip where all the houses that I

have created before are available all

right

so now something interesting happens

what we really wanted to do with showing#

a single house that we have in our other

viewmodel this one

ideally we would just like to point and

one here and have this one backing this

one so maybe this one shouldn't be

brought up by a global action at all is

that it should be brought up by and

either an action of of this object or an

action of this view

alright so we have two options we could

either do a viewmodel action that is

endemic to a specific view let's try

that first in the old houses that we can

push this button actions action

definitions with which just applies a

filter to the actions definitions that

is this show you model actions only

not the global actions and not the class

actions and filter on this human all

houses so the only thing this did was to

fill three days that initially looked

like this shows all actions and

incidentally we can push this one to

show all actions but from here action definitions for this view

are these

show all actions but we want to do it

for this view

alright so we want to do a new view

model action that's an action

that only exists in a certain view so when I

create one, I get a new view model action

that only in viewmodel all houses and

within all houses I only wanted to show

in-house grid and when it's executed

I wanted to bring up the house view and

the view model root object for the house view

should be, yeah, what should it be

let's bring up the ocl editor it should

be the current object of the house grid

that would make sense, we're going

to get back to the vCurrent and vSelected soon

so now we have created a new action

that's only visible in the "AllHouses"

view model and only four objects of the

house grid and will bring up the

viewmodel house view and setting the

root of the house

view to the current row of the house

grid let's see how that plays out in

the prototyper refreshing the model, views

"show.allhouses", so when I select one here

this one should bring up just the

one on pointing it so this is did one with

let's go back and now I see that the

street number 444 new yeah that's the

street number 444, back so if I were to

bring this one up like that and set the

street number 123 save that, hit back and

then I see it's 123 so this is a way

to tie view models or views roller

together so this is a really bad name

for this action let's name it "ShowHouse"

model refresh, views, "show.allhouses", show house

just a few short notes on how

the back of engine works if we were to

down "ctrl" and while we press the action show house it would actually

add another tab to show the date so this way we could bring up another one like that

and notice this green "." it's actually

the it signals that there's a object

root connected to this view

so this one doesn't have a green dot

because that doesn't have a rooted house

to start with but these stood

and also double-click on a row in the

grip will check the actions list for

actions that navigates like this one it

will take the first navigating enabled

action and executed so if I were to

double click on this one while holding

"ctrl" it would bring that one up and I

don't need to use the action that's a

practical way to navigate and

double-clicking without holding control

of course will replace the content in

this view like this but the back will

bring me once that back just like in a

web browser so I'm back to the old

houses like that so these are some of

the functionalities of the UI engine

that we use here

also notice that the text on the tabs

here are actually the "asstring"

representation of the rooted object and do

you remember from part one where we got

that from in the house we had set the

"Default" string representation as

an OCL expression to the street name and

this stree has street number "asstring" and

just to prove a point we could add

something else here "ForReal" like that

and heading back to here and refreshing the model and showing "AllHouses"  we have the

"ForReal" representation here and if we

were to double click one you have the

"ForReal" representation there okay

as I said with the action that we added

we had two options either do in action

that's also the actions are visible here

and you use this one to fold it or to

show it

we could either have done an action and

endemic to this view as within the

viewmodel action and if we will

double-click this we would get that

selected and see that it is a viewmodel

action, action type navigates from "AllHouses"  to house view

and if we were to click this it will

actually show us the view model that it

navigates tool and that's the house you

and then we could click there to jump

back to the ones that we have looked at

before and this I can actually to

opt it out not to show it in this scenario

and opted out are available here and we

can opt back in up here we see all the

actions that leads to a certain view so

actions leading here or from the main

menu views of you group views and show

all house and if I were to jump to the

house viewmodel

I can see there are two actions leaving here either one of views new global action

that we did as a starter action or the viewmodel action

in "AllHouses"  called show house and I

can navigate to these two by clicking them

actually we might as well drop

this global action from the main menu

that created "House" it's not really

the correct way to do it

delete action, which leaves us in an

interesting situation we have no way to

create new house currently and we

will need to add that to the

maybe to the "AllHouses"  view so in here

we might as well add a new view model action

with a different purpose

add new house and instead of having

navigate that it should do if we

have set to bring up the view model we

might as well give it and execute

expression instead, execute expression

and what we wanted to do is just house.create

and that would be enough

so not saying only in this will give us this look

"AddNewHouse" is available on the

allhouses under this one the root but

also in the house grip at new house so

that's not very and intuitive for the

user to see the "AddNewHouse"  in two

places, so we could either opt one of them

out, or we might as well

instruct the action that it should only

show in the "AllHouses" on the root that

said if you think about it it's the only

place where it makes sense - on the root

because, if you have no houses, we still

want to be able to create a house

so even if the grid is empty, so only in

this "AllHouses"

made it disappear from the HouseGrid

heading back to the "Prototyper"

refreshing the model views show all

houses, I now have a new action "add new house"

and as you see house.create was

all it took to create new house and

they all instances picks this up by

subscription and adds a road to the grid

a rendering of the new house that we created and of course I

can immediately double-click it to

execute the first navigate action to

set some properties 456 and head back four five six but I

can just cancel all this out, like that

discard changes, yes please, ok but then

what I actually were about to say is

that we had two options before to either

do view model actions that are endemic to

a certain view or a class action which

are available wherever a class is visible

let's do a class action that does the

same thing as show house just to see

what the difference is "show house

from object"

but it's really from object so it's an action on the

class "house and the bring up the view

model should be "house view and the view

model root object and now it's

interesting because now we are in the

context of the house so we might as well

just to "self", so the root object

expression is just "self", in this case and

if we head back to the view mode left

there we see that show house from object

will show up in these two places and if

we were to re-read the model here and

"show all houses" we see that it's

available here and it's available here

but both are disabled because even if

the action is potentially available, it

needs an object to act on and this one

will never have an object because our

view is not rooted in a house it's null

but this one that supports the grid

should be able to get an object once we've select one

so when I select one this one

is enable and this one will do the same

thing as the other one

here we see an interesting thing that

since this action is available wherever

the object is shown is also available

from here so show house from object will

automatically show up here because this

is the house so heading back to view

model editor we probably first would like

to opt out the show house from object

on the root level because that we always

be disabled away with that now it lives

here

that's fine and in the house

view it's not really helpful to the user

to have an action that points back at

the same object in this case so we want

to opt that out as well the fresh

so once we select one it's enabled and

we can click it and it's not shown here

so that's more like what we want so

keeping track of actions and what's

available and opted out etc can be quite the work in the end and this is

true for all applications what navigates

where we're to track things and how

can you get here at least with our

strategy fully modeled and the fully

decorative, you will have all the

information readily available for you

and also we have a special

view the action

crossref that renders like this so

actions leading here our show house and

show house from object so that's one way

of getting to the house view but and

there is an action show house from

object that is opted out if I would like

to opt it in

I can just click the line and that would

be great so that would mean that this

action is available again from here but

since I don't want that I will opt it out

and then it's gone, so from the old houses

I see that there is an action show "all

houses" that leads here and there are

these actions available to the user from

this UI there's one called "AddNewHouse"

and there is a show house from object

which potentially is available from the

root but in our case it's not we don't

want that so that's opted out red and

there are these two that are available

from objects in the grid

so that's one way to define cross references

for the actions, another way to follow through is 22

let's show all actions here and show

house from object and here we see a hint

that action shows in one place to places

are opted out let's get an overview by

following this view and that it's rendered

like this all the view models where this

action may come into play and remember

that was a class action so it will come

into play wherever the class is viewed

and if it's opted out red or opted-in

green so here we get a a way to see how

the actions interact with each other we

also have closed up one and go

back to the overview if you remember

from part 1 of this series we had the

view models option here in the overview

it didn't show anything when we showed

it before that

now it shows the to view models and we

also have the action navigations and the

ones that we could refresh like this and

then we see that we have a navigation

tree or a storyboard or something like

that

views "show.allhouses" goes to the show

houses from there we have show house and

show house from object but this one is

shown elsewhere

namely here so as your application grows

this tree will grow and if we were to

have any view models that has been stale

not able to reach them from any action

they would show up here and the last one

that live 3d rendering should ok it is

so these are all the classes that are

available in the model and an

auto generated diagram for that and

this is the view models available and

the classes and the diagrams so as I

said this is still working progress

we're going to find a way to make this usable but currently it's just like eye candy

alright, so whenever round this session up it was a session on how action stays

together with view models basically

thank you very much for watching and

then I'll be back