Documentation:Part 11 ViewModel Designer Updates

ViewModelDesigner updates - what happens when you click widgets and columns. And a brand new addition "Rendered By" on actions. This opens up for a few new view patterns for you to take advantage of.

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.

Styles Winform rendering engine New edition interface improvements ViewModel grid

• Show tab-order • Screen size marker

• Suggested zoom "The column SomeValue occupies the same space as SomeString" warning Actions in UI "Rendered by" on actions. Checkbox column

Raw subtitles text

hi and welcom, we're going to take a look at the

view model designer, there's a few updates and

also a bit of frustration we have had

through email and it's great that you

communicate what you think is strange

and so we can fix and do better

thank you very much for that, so

the view model editor looks like this

the first thing about the styles, here you

can actually add your own styles, if you

have done better, but I think there is two set along

default it's the bubbly and it's the

MDriven designer default and this is only

for your own pleasure, what you like, it

will remember what you have chose

and show that for all the view models you have in this particular model

so change that to whatever you think is appropriate for you and we have few

I've done a few other styles, there's not

that much difference to them, but we can

go with this one for now and it sort of

mimiks the winform preview pretty much

and this is how things would look where

if it would be rendered by the

winforms rendering engine that we also have

but we don't really recommend you

to use that one because it's old and we

don't attend to it as much as the wpf or the turnkey ones ok

so and a new addition is that the

highlighting of the columns here are

made a little different color, so that

you see them better and there's a

resizer here that makes it

possible to resize placed columns

we call these columns, viewmodel columns

we call these the view model and the

head of the view model and these are

nestings to the viewmodel, we have done a

few other things as when you click one

here this one is highlighted the

corresponding item is highlight, so it

will be easier for the eye to see

what it is that you clicked on and let's

make this bit smaller, so that you see if you were

to have it like this and you select

something out of screen it will now zoom or rather pen to the

correct item and this is also true vice versa

so if you have it like this

well it's hard to see now I guess if

this were to be scrolled, let's add some

things that's going to copy and paste

paste paste paste...like that and

described out of view and I'm gonna click this one

so then its scroll and select, so it will

be easier for you to to find it with the eye

ok, so what is it that happens when we

going to do ctrl+z here to remove this things

what it is it that happens when we move around fix

well the view model is just a grid it's

a logical grid and we place things like this

if we look at this we can see that

the column is 1, so this column1 and

the row is 0 this is row 0, if I were to

move it here, it would update to column 2

and then the span how many

columns it would expand, if I change this

to 2 it jumps, if I change it to 3, 4

like that and I could also grab it

by the handle, the resize handle in the

bottom here and change it that way

then it would go back, so we place a label in

front of all the placed widgets and

the label is just defaulted to this

the name and when we find this will try

to decount case what we have in the

name, but you can actually override this

and set something else I got

or you could write that manually

some date but the fastest way is to

just have it like the default and it

will decount case your name, if you

don't want to label at all, you can actually

remove this and it won't be rendered

you see, it's now not taking up any space

there so you could have something else

there without a collision, but if this

one were to have the name and you moved up

that one, it wouldn't look very good

it's not actually a collision, but it's crap, so avoid that

yeah, and at the very end here

we have an area which will extend it

if you drop on this it will extend

but you can't drop outside, so why is the

great desize is, well it takes the max

and the min of what you have placed

unless, you select the top level of your

model level and explicitly say that it

should be 10 columns and 10 rows

they would be that until something forces it

to be even bigger, like this, but these are usually set to zero and we

interpret that as set and sizing it to

to what you have placed ok and so in

this case the label takes up one column

but if I would like it to take up more

columns. I can do it like that, now it

takes up 2, now it takes up 3

there's really no to widget resize

thing to set this in the UI you need to change it here

we also have some few other things

show the gridlines I've talked about and the

show tab order it s in what order the

key navigation will try to use and we

can control this by changing the strategy

now its display order y before x but

maybe it should be the other way around

x before y or maybe it should be the

column design order, so if this one would

be at the very bottom and it would jump

around like this and I know we have a

some kind of bug here with the arrows

denoting how things are connected, but

we haven't got around to fix it, it's

just a rendering, ok, so to do this we

have the zoom in and zoom out and the

fit and nothing strange about that but

this thing screen size marker it

says 1920 x 1080 and what that control

is actually the size of the prototyper,

so when we started it comes up really big

but if I were to set this, this is a

global setting, so if I set it to 800 x 600

and start a prototyping it comes up a lot smaller, ok so

we have this suggested zoom

it's a variable that will be the value

that will be streamed along with the

other data of the view model and that we

have had used for it when the screens

are too big for this, so to avoid scroll

bars showing on the user's monitors, but

it's only implemented for wpf really

ok and we have the actions tab

which denotes how we can come here

and we can double-click them bring up

the actions dialogue like that and we

have seen that before and then also if

there is a view more action in here or

other navigating action it would show up

like a little icon, so when I click this

action view one thing I can see that it

brings up the viewmodel, view one thing

but I can just as well jump to it

straight here so this is actually a

great way to navigate around your application in design time

and of course you can opt out and opt-in

the actions as we have talked about before

so whenever you design and make things end up

on top of each other you will get

these warnings the column some value

occupies the same space at some string and

this you should never run like this

you should avoid it, this will also show when

you save and the model validation is run

as part of the save operation and it

will state that this is a problem

actually you should always make sure, that this is empty

never run with the things not sold here

it's really not supported it could

be any kind of the issue with your model

that will be probably problematic for the framework to deal with

so when things end up on top of each other

there's actually no super good way to

know which one you click you just have

to move them around to see if this is

what you want or maybe that is what you want

the view model editor has been

stable for quite a while which is good

it sort of tells us that it is doing

what it should and we haven't had a lot

of need to change it, but we had this

idea that we think is truly generic and

it's the ability to tie an  action to

another widget in the UI, so if you

remember we could of course add a an

action column, which really only is a button like this and yeah

this might be good to mention here

whenever we add something, the default

position will be the last position you had plus one row, so if I add

another thing, it would end up under the

the one I just placed, so this is practical

and so if you're going to add a lot of

things over here make sure that you

change it there first and then add the

rest, they will end up under it like that

right, but what I was saying was

that the action column MyAction

that's just an ordinary column with the

"is action" checkbox checked, so if I were

to take that away it would render like a

text box, but I wanted as an action and

here's a few new things of course, when

it is an action you might enter the

expression here and then it's an action editor or EA language which is

allowed to have side effects wouldn't be

much fun action if it didn't, but you can

also hook it to a existing viewmodel action

that you have designed here

so that makes it possible for you to

navigate from a button for example or do

framework actions and things that's are

only available in the actions defined here

yep, but what I was speaking about was

the ability to tie an action to another placed widget

so another thing, we have designed this for

let's try to check that was the one

I fixed, so I'm going to add an

attribute. so that we could show an image

because images, is so I have this image

attribute, let's call it image and make

the type a blob

oops, blob and whenever I have a blob

I can set the blog type to help the

rendering engine and say it's an image

and that means that I now have a new

column to add here that's the image

and it ended up here because this was

the one I did last and it just adds the

same height and everything but

I might wanted like this not like that and there

may be like that, so, what I really would like to do, now is to

make this image clickable, that's a common

use case I want the image, but I wanted

I want someone to be able to

click the image in and do something so

but I have my action and this is where I can do things

let's say that my action takes the, well

what should we do take the some string

attribute and depends, like that

and here's my image, so let's just run

this and see what it does the plate and

view all things, create a thing and

save it, have it for later and if I were to click my action it

would makes like that and if I were

to pick my pick my image, I guess I could

go like that have an image and if I were

to click this is nothing what happened

because it's just an image, right yeah

so that's what is cool with this new

feature is that I could point on the

image or rather pointed the action

and on the action row it says rendered by

so here I can say that it's the image

that will render my a action and not

myself and what happens then if I choose

this is that the button shouldn't have a

visual representation, it shouldn't be

available anymore and it disappears and

now it's backed by the image instead, so

that would mean if I refresh is and

bring up the same thing again the button

isn't there, but I can double click the

image and things will happen here, so

and this is the new feature that we have

added to, today I added it to wpf and I

will continue to add it to the turkey

rendering engines as well, so there's

this possibilities also implemented for

things that have, that are static added

boxes stutic labels like this some

string and then I can say that the

action that I have here is actually

rendered by my attribute on my column

called some stream and then it shows up as

hyper link thing and that would

be the same as if I do a refresh and we

navigate back, if I click it would execute

the action and it added an x but

this one doesn't have the action,, so if I

want both I need to add two actions and

say that the what columns stay back

so, this feature also enables us to

do a thing that we have been thinking

about for a while, you know

when you have a grid with the lots of

things and maybe you want to select a few

things of the grid the standard pattern

has been to add another grid with a

couple of action seem in between showing

arrows I want to pick these I want to

remove these from the picked, but much more

compact way of doing it would be to have

a checkbox column you have here that you just

could check to get things and this

renered by action is actually one way to solve it

so if I save this I can just set some

values here so we see that they are different

and if I were to add new generic column here and say that

well actually I need to have something

in my model, so that I can choose many

details let's just add another link and

call that one picked details, like that and

press ctrl+L to make it squared and

whenever I press ctrl L there it will

remain square when I move it around

ok, so just to prove the point I'm going

to add the nested viewmodel multilinks

and grab this one picked details, I know it

was out of screen, I think you get it by

now I'm going to show the attribute one and delete

that column and now it collides with

things move that up here maybe, like so and what about a compact

way to move this one up by dragging it

now its first and I say, call this picked and now

I should get the expression to denote if

it is picked or not, so self and

I'm in the context of a detail remember

the model of detail that is owned by of

thing, so navigate up the thing and says

pick details and pics of self

if this is bigger than -1 then it

actually is a picked, so I guess that could

be my expression, because if I'm not bigger than -1, it will be false

and I will be yeah and I'm not picked

so that could be the expression and

running that would look like this and of

course it's a read-only expression

because it is index off and

it doesn't set anything, change anything

in my model, but what I want to do is

when I click this I wanted to be

selected, so what we can do is to

in the grid add a new column and I'm

going to say it's prepared for action

so it's an action column

this is rather new we haven't allowed

column actions in the grid before and

we still actually more or less done

because it's unclear what they should do

but in this case it's clear, we want this

column, this action to be rendered by the picked column

so whenever you click the picked it should

actually just ignore what it is in this case checkbox and just

execute the action, we are still in the context of a detail

and we navigate up to thing and we

see the selected, picked details, so if

the details is index of self, so its bigger

than -1, than so what we're saying

if we already are pick then we should

actually remove ourselfs we want

to toggle this, so when you check it

it should be picked and when you uncheck it

it should be and removed, when you want to add ourselves to this

association and then we are endif like that

so having done that, we should

re-fresh now when I click the action is

execute and it will render here as a

consequence and if I check it again

click it again it will execute the

action one more time and I see that I'm

already selected and then unselected and

the checkbox is actually just signaling

this state, so this is cool because that

means I don't actually need this grid

to solve the whole problem of picking

few things and of course saving this and

going back and going into it again it

will be correct and even if I had

another way to change which ones are

picked it would be derived to have

the correct view here, pretty cool

so that is what you can do with the new

thing called rendered by, an action can

be rendered by something else