Part 10 MDriven Designer Overview. Actions and navigation
No edit summary
(Automatically adding template at the end of the page.)
 
(12 intermediate revisions by 3 users not shown)
Line 1: Line 1:
<html>
<html>
<h4>In depth overview on how to navigate between views with actions and how root object expression works. You will find this pattern recurring over and over, while trying to solve real business problems. You will get the access to the data as we show the objects and navigate into various views for more detailed information. This skills help you develop efficient model infrastracture once it grows.</h4>
<h4>This is an in-depth overview of how to navigate between views with actions and how root object expressions work. You will find this
  pattern recurring over and over while trying to solve real business problems. You will get access to the data as we
  show the objects and navigate into various views for more detailed information. These skills help you develop an efficient
  model infrastructure once it grows.</h4>


<p>
<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
<style type="text/css">
    video. Now you can pick any topic to be instructed on without watching the whole video.</em>
p {
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/fiuwP-KTmls?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="fiuwP-KTmls" data-start="111" tabindex="0">Actions </span>
}
      <span class="navigation-item" data-video="fiuwP-KTmls" data-start="125" tabindex="0"> &bull; Global actions</span>
#video12 iframe {
      <span class="navigation-item" data-video="fiuwP-KTmls" data-start="633" tabindex="0"> &bull; ViewModel Action </span>
  position: absolute;
      <span class="navigation-item" data-video="fiuwP-KTmls" data-start="775" tabindex="0"> &bull; Class actions </span>
  min-height: auto;
     <span class="navigation-item" data-video="fiuwP-KTmls" data-start="179" tabindex="0"> ViewModel Root Object </span>
  min-width: auto;
     <span class="navigation-item" data-video="fiuwP-KTmls" data-start="367" tabindex="0"> Create Repository Researcher </span>
}
     <span class="navigation-item" data-video="fiuwP-KTmls" data-start="605" tabindex="0"> Action Definitions </span>
#video12 div {
     <span class="navigation-item" data-video="fiuwP-KTmls" data-start="650" tabindex="0"> Execute Expression </span>
  position: absolute;
     <span class="navigation-item" data-video="fiuwP-KTmls" data-start="715" tabindex="0"> Change the root of the View </span>
  top: 0;
     <span class="navigation-item" data-video="fiuwP-KTmls" data-start="1010" tabindex="0"> "VM does not require a root object" </span>
  left:760px;
     <span class="navigation-item" data-video="fiuwP-KTmls" data-start="1131 " tabindex="0"> Execute expression OnShow </span>
  width: 260px;
      <span class="navigation-item" data-video="fiuwP-KTmls" data-start="1173" tabindex="0"> vSender variable </span>
  height: 100%;
  padding-left: 10px;
  overflow-y: auto;
}
span {
    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:focus {
  color: blue;
</style>
</br>
<div id="video12">
<iframe width="740" height="500" src="https://www.youtube.com/embed/-kJdpTsCadw?rel=0&autoplay=0" frameborder="0" allowfullscreen></iframe>
   <div>
     <span data-video="-kJdpTsCadw" data-start="106" tabindex="0">Actions </span>
    <ul> <span data-video="-kJdpTsCadw" data-start="120" tabindex="0"> &bull; global actions</span>
    <span data-video="-kJdpTsCadw" data-start="628" tabindex="0"> &bull; ViewModel Action </span>
    <span data-video="-kJdpTsCadw" data-start="770" tabindex="0"> &bull; class actions </span> </ul>
     <span data-video="-kJdpTsCadw" data-start="174" tabindex="0"> ViewModel Root Object </span>
     <span data-video="-kJdpTsCadw" data-start="362" tabindex="0"> Create Repository Researcher </span>
     <span data-video="-kJdpTsCadw" data-start="600" tabindex="0"> Action Definitions </span>
     <span data-video="-kJdpTsCadw" data-start="645" tabindex="0"> Execute Expression </span>
     <span data-video="-kJdpTsCadw" data-start="710" tabindex="0"> Change the root of the View </span>
     <span data-video="-kJdpTsCadw" data-start="1005" tabindex="0"> "VM does not require a root object" </span>
     <span data-video="-kJdpTsCadw" data-start="1126 " tabindex="0"> Execute expression OnShow </span>
    <ul> <span data-video="-kJdpTsCadw" data-start="1168" tabindex="0"> vSender variable </span> </ul>
   </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 = 'https://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:MDriven Designer]]
'''Raw subtitles text'''
[[Category:MDriven Designer Sessions]]
 
[[Category:View Model]]
hi and welcome, I've promised to do a
[[Category:Navigation]]
 
[[Category:Expressions]]
video on windows and navigation or
[[Category:Actions]]
 
{{Edited|July|12|2024}}
views and navigation, now, let's start from the beginning
 
let's say we have nothing and we have
 
this single class with an attribute, this is all we have and
 
well we have the definition of information
 
but we have nothing else, so in order to view this information
 
we need a view model and let's do that
 
so that's the view this and we say what
 
kind of class it is and when we have
 
done that, we can add attribute1 that
 
would be our view, since the debugger
 
or the prototyper, when the field is next to the end like this,
 
it's expanded, so let's make this a little bigger
 
so it's not next to the end, 2 by 3, like that
 
ok, so now we have information and a view
 
but we don't have any way to get here
 
that's where the actions come in
 
they should be here, of course this is called repetition, so far
 
let's do a global action, which are the
 
actions, that show up in the main menu
 
and this global action, let's make it
 
bring up the ViewModel1, so all we have
 
said now is that the main menu
 
should have a action called new global action
 
and it should bring a ViewModel1
 
let's see what happens and when around
 
that, so we have the new global action 1
 
and it brings up a viewmodel, but this is a bit treacherous
 
it's a viewmodel, but we don't have any object in it
 
we know, it should be of class1
 
but there really isn't any object of class1
 
as of yet and why is that, well it's
 
because the viewmodel root object expression is empty, so we really need to
 
provide object, so that this expression
 
has something to work with and let's
 
make this a bit clearer by adding a
 
generic column with a expression, that we say
 
self.isnull, that would be bulean
 
if in end show the checkbox
 
that would be checked, if this is null
 
so, is this really null and let's make
 
a little bit bigger  then
 
so re-fresh the model and new global action, is this really null
 
yeah, so that one is checked, so that's a
 
problem for us right now, we need to fill
 
the root object, but what should we fill
 
it with, well let's try first to just
 
do class1.create, that will be ok then we
 
at least would have one, so, when the action is executed it should
 
bring up ViewModel1, but the root of
 
ViewModel1 should be set to the
 
result of this expression class1.create
 
so what happens then refreshing the model and then it isn't
 
null anymore, so we're okay to wright here
 
and then that will show, right, but
 
we can do as many of these as we want
 
holding down ctrl, while I press
 
the action brings up another tab, so I
 
can do this one and that one and this one, etc
 
that won't help much, because there is
 
actually no way to see them all or
 
to open up perform with an existing class1 right
 
the only thing we can do is actually
 
just create new one in this view, so
 
normally all applications and
 
all system has some kind of repository
 
researcher, where you could find things
 
to start with and maybe you browse all
 
the things you have and you grab one of those
 
so let's do a view that is our browser
 
add a viewmodel and since it's
 
gonna be our browser, let's call it BrowserView
 
and give it the type Class1
 
and that's the only class we have currently
 
so why not and as add a nested view model class
 
we'd fast pick class1.allinstunces
 
what it does is generic column with class1.allinstunces
 
and it states something showing class1
 
soб change these expression to, what do we
 
have, we have attributes, like that
 
so this would be a good view to show
 
from the main menu, so, if we just stand
 
on it and say add a global action for
 
show what happens then is that this action was created
 
let's see, what it does actually what did
 
I do, I think the wrong thing and you want
 
to press ctrl+z for undo, I take it by
 
the menu, so you see what I do, undo and
 
then it disappeared, what I wanted to do
 
was to add not the class action for show
 
I wanted to add a global action for show
 
like that, so what it what happened was
 
show browser view it's named and then it
 
brings up the browser view and this one
 
doesn't have a root object expression
 
because it doesn't need one, because it
 
shows all class1 instances, so returning here and refreshing the model
 
and now show browser view, this one will
 
show al, since I restarted the system
 
with the model refresh, let's see
 
what happens if I press the one that creates, aaa, abb
 
then we see that there really are two objects
 
of class1 and we can change this one
 
here and see that they are realy the same
 
but then this was a limitation we really
 
want to be able to create things here
 
so, let's head back here and add
 
but I press this button action
 
definitions, that same action edit or
 
action definitions for shows, but it's
 
filtered on the view, I stand on and it
 
only shows the viewmodel actions and the
 
class actions that match, so this is
 
a good way to reduce the amount of
 
actions as they might be many/ yet
 
so what I want to do is to add a view
 
model action here and say that this one
 
can create new class1 object, like that
 
and the execute expression should just do what
 
we saw before class1.create
 
so if I refresh the model and show the browser view I have
 
a action that actually can create things
 
and now it shows on two levels and we'll
 
do the same thing, it's obvious here is
 
the only browser view level and also on
 
the allclass1 here, but I want to
 
opt that out because that is unnecessary and
 
so now we're on one object and we could
 
write something here what we want to do
 
now is to open up one of these in our
 
other view, so this one that we did that
 
first new global action, this one will
 
just create yet another one, see we have
 
no way currently to open up this one in this
 
well, if you really use the properties of
 
the prototype you can drag this one to
 
this green dot and then it will show it
 
so this is a way to change the root of
 
of the overview, like this and you can
 
see that it really changed
 
switch to object, like that, right, but and
 
we really want to add an action
 
available whenever we have class1 and
 
that kind of action is class actions
 
so new class action, class actions will always pop up whenever
 
you have a context of that class so
 
let's call this one create new, no
 
that wasn't what we wanted to do, what I am to do, it it's view class1
 
ok, that was what I wanted to do and that
 
this action should be on this class1, what should it do,
 
it should bring up the ViewModel1
 
in fact, let's rename the viewmodel1 to
 
let's call it the class1 object view
 
class1 object view, so it should
 
bring it up and now we have a chance to
 
set the road object, what we
 
want and what do we want
 
well we know that this is
 
class action, so it will only be in the context
 
of the class1 objects, so that would be
 
great just to set itself in this case
 
and the required type, required return type
 
is class1, because that is what
 
the form of you expect and the context is also class1
 
because that was the class that we
 
made an action for, so now we have a way to
 
let's do this again, model refresh
 
show browser view, now we're able to
 
this one is disabled, because there is
 
nothing selected, we can create one and
 
if I selected I can view it, also this
 
class action is in two places and I see
 
this here and that's because it's on
 
this level and since this is class1
 
even though it is not assigned,
 
it doesn't require a root object, but it also on this level
 
so this first level will always be null
 
also I will opt that out and refresh and show
 
browser view, so now I can create a new
 
class and when I select it
 
I can view that class and I can write
 
something and I can go back, like that, create
 
and view it and go back, like that,
 
so this is how you root and why you root windows or views
 
if, we were to check his model, we will get
 
some warnings and they are fairly long
 
let's see if I can get them on screen
 
so there's a new global action warning
 
the view model does not require root object
 
so this is just the information to help
 
us out doing the right thing, new global object
 
new global action, let's go to this one new global action
 
it brings up class1 object view
 
sets the view model root object, if we go to
 
this view, we see that we will
 
assign root today's but it hasn't
 
checked the check box requires root object
 
and that is what that warning is about
 
so, if I do that and head back and
 
check again, there's alone, super, so and
 
this is how basic navigation works when
 
you work with the MDriven and there
 
are a few other things you can do with
 
actions, but these, this is how you use
 
them for navigation, you state what the
 
view model to open up and what root object
 
if any it should have, of course we can do
 
few other things, so if we use the show
 
browser view or other, the view class1 object
 
let's take this one, it sets the root object to cell
 
but there's also an expression
 
execute expression on show and what it
 
will do is to execute this expression
 
whenever the view shows, so let's
 
experiment, self and we
 
in this case we will be in the context of
 
the sending, of the receiving form
 
so, the form  as vCurrent class1 object view
 
it's the root to the variable representing the root, but
 
we also have this strange variable vSender
 
that state context from their calling action
 
so this is actually this self
 
that since this is a class action
 
is a class1 so sender self and this
 
is what we set as the root, what if we
 
were to set attribute1 and we
 
would simply sign itself plus one, what
 
would happen then, refresh model, show
 
the browser, create a new one this is
 
empty, but as we selected and she was the
 
new one, it says one and if we go back
 
and show it again it says 11, because we have this
 
execute expression on show, what it is
 
what I'm supposed to use this for
 
well, maybe you have some variable that
 
you want to set, some context where you
 
come from that you want to set in the view
 
when you open it then this expression is great, but it does not in
 
any way replace the root object expression
 
the root object expression is
 
really important with working with view that are rooted
 
it's the only way to set the root on the object
 
well, as you know now it's not the only way
 
because you can also change
 
the root by draging to this dot and ok so
 
I'm going to wrap this up, feel free
 
to test these things out

Latest revision as of 15:44, 10 February 2024

This is an in-depth overview of how to navigate between views with actions and how root object expressions work. You will find this pattern recurring over and over while trying to solve real business problems. You will get access to the data as we show the objects and navigate into various views for more detailed information. These skills help you develop an efficient model infrastructure once it grows.

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.

Actions • Global actions • ViewModel Action • Class actions ViewModel Root Object Create Repository Researcher Action Definitions Execute Expression Change the root of the View "VM does not require a root object" Execute expression OnShow vSender variable

This page was edited 96 days ago on 02/10/2024. What links here