Part 11 ViewModel Designer Updates
No edit summary
mNo edit summary
Line 80: Line 80:
</script>
</script>
</html>
</html>
'''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 turnkey
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

Revision as of 22:01, 15 April 2017

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

This page was edited more than 11 months ago on 02/10/2024. What links here
Retrieved from "https://newwikicopy.mdriven.net/index.php?title=Documentation:Part_11_ViewModel_Designer_Updates&oldid=887"

© MDRIVEN . All Rights Reserved

Glossary API Docs
MDriven World | Portal | Blog | YouTube | StackOverflow | Facebook

© MDRIVEN . All Rights Reserved