Part 11 ViewModel Designer Updates
No edit summary
(Automatically adding template at the end of the page.)
 
(22 intermediate revisions by 4 users not shown)
Line 1: Line 1:
<html>
<html>
<p>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.</p>
<h4>ViewModelDesigner Updates: What happens when you click widgets and columns? Plus, the addition of "Rendered By" on actions. This opens up a few new view patterns for you to take advantage of.</h4>


<p class="warn">
  <p class="video-warn">
<em>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.</em>
  <em>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.</em>
<style type="text/css">
p.warn {
opacity: 0.7;
text-align: justify;
width: 90%
}
</style>
</p>
</p>


<style>
<div class="video">
#video12 {
   <div class="video__wrapper">
  position: relative;
<iframe src="https://www.youtube.com/embed/ed617YOxSO8?rel=0&autoplay=0" frameborder="0" allowfullscreen></iframe>
  height: 500px;
</div>
  width:560px;
<div class="video__navigation">
  padding-bottom: 10px;
  <span class="navigation-item" data-video="ed617YOxSO8" data-start="41" tabindex="0"> Styles</span>
}
  <span class="navigation-item" data-video="ed617YOxSO8" data-start="100" tabindex="0"> Winform rendering engine </span>
#video12 iframe {
  <span class="navigation-item" data-video="ed617YOxSO8" data-start="136" tabindex="0"> New edition interface improvements </span>
  position: absolute;
  <span class="navigation-item" data-video="ed617YOxSO8" data-start="285" tabindex="0"> ViewModel grid </span>
  min-height: auto;
     <span class="navigation-item" data-video="ed617YOxSO8" data-start="565" tabindex="0"> &bull; Show tab-order </span>
  min-width: auto;
     <span class="navigation-item" data-video="ed617YOxSO8" data-start="638" tabindex="0"> &bull; Screen size marker </span>
}
     <span class="navigation-item" data-video="ed617YOxSO8" data-start="700" tabindex="0"> &bull; Suggested zoom </span>
#video12 div {
  <span class="navigation-item" data-video="ed617YOxSO8" data-start="809" tabindex="0"> "The column SomeValue occupies the same space as SomeString" warning </span>
  position: absolute;
  <span class="navigation-item" data-video="ed617YOxSO8" data-start="905" tabindex="0"> Actions in UI </span>
  top: 0;
  <span class="navigation-item" data-video="ed617YOxSO8" data-start="1420" tabindex="0"> "Rendered by" on actions. Checkbox column </span>
  left:760px;
  width: 260px;
  height: 100%;
  padding-left: 10px;
  overflow-y: auto;
}
span.time {
    font-size: 18;
    display:block;
  padding: 2px 10px 2px 10px;
    padding-bottom: 0.5;
    padding-top: 0.5;
  opacity: 0.7;
}
span:hover {
  color: #0000FF;
  cursor: pointer;
}
span.time:focus {
   color: blue;
</style>
</br>
<div id="video12">
<iframe width="740" height="500" src="https://www.youtube.com/embed/-5UBcfxRvZE?rel=0&autoplay=0" frameborder="0" allowfullscreen></iframe>
  <div>
    <span class="time" data-video="-5UBcfxRvZE" data-start="36" tabindex="0">Styles</span>
    <span class="time" data-video="-5UBcfxRvZE" data-start="95" tabindex="0">Winform rendering engine </span>
    <span class="time" data-video="-5UBcfxRvZE" data-start="130" tabindex="0"> New edition interface improvements </span>
    <span class="time" data-video="-5UBcfxRvZE" data-start="280" tabindex="0"> ViewModel grid </span>  
     <ul> <span class="time" data-video="-5UBcfxRvZE" data-start="560" tabindex="0"> &bull; Show tab-order </span>  
     <span class="time" data-video="-5UBcfxRvZE" data-start="633" tabindex="0"> &bull; Screen size marker </span>  
     <span class="time" data-video="-5UBcfxRvZE" data-start="695" tabindex="0"> &bull; Suggested zoom </span> </ul>  
    <span class="time" data-video="-5UBcfxRvZE" data-start="804" tabindex="0"> "The column SomeValue occupies the same space as SomeString" warning </span>
    <span class="time" data-video="-5UBcfxRvZE" data-start="900" tabindex="0"> Actions in UI </span>
    <span class="time" data-video="-5UBcfxRvZE" data-start="1415" tabindex="0"> "Rendered by" on actions. Checkbox column </span>


  </div>
</div>
</div>
 
</div>
<script>
var IMG = document.querySelectorAll('#video12 span'),
    IFRAME = document.querySelector('#video12 iframe');
for (var i = 0; i < IMG.length; i++) {
  IMG[i].onclick = function() {
    IFRAME.src = 'http://www.youtube.com/embed/' + this.dataset.video + '?rel=0&autoplay=1';
    if(this.dataset.end) IFRAME.src = IFRAME.src.replace(/([\s\S]*)/g, '$1&end=' + this.dataset.end);
    if(this.dataset.start) IFRAME.src = IFRAME.src.replace(/([\s\S]*)/g, '$1&start=' + this.dataset.start);
    this.style.backgroundColor='rgba(0,0,0,.2)';
  }
}
</script>
</html>
</html>
 
[[Category:View Model]]
'''Raw subtitles text'''
{{Edited|July|12|2024}}
 
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

Latest revision as of 15:44, 10 February 2024

ViewModelDesigner Updates: What happens when you click widgets and columns? Plus, the addition of "Rendered By" on actions. This opens up a few new view patterns for you to take advantage of.

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.

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 98 days ago on 02/10/2024. What links here
Retrieved from "https://wiki.mdriven.net/index.php?title=Documentation:Part_11_ViewModel_Designer_Updates&oldid=16648"

© MDRIVEN . All Rights Reserved

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

© MDRIVEN . All Rights Reserved