Part 10 MDriven Designer Overview. Actions and navigation
No edit summary
No edit summary
Line 73: Line 73:
for (var i = 0; i < IMG.length; i++) {
for (var i = 0; i < IMG.length; i++) {
   IMG[i].onclick = function() {
   IMG[i].onclick = function() {
     IFRAME.src = 'http://www.youtube.com/embed/' + this.dataset.video + '?rel=0&autoplay=1';
     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.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);
     if(this.dataset.start) IFRAME.src = IFRAME.src.replace(/([\s\S]*)/g, '$1&start=' + this.dataset.start);

Revision as of 12:17, 3 April 2017

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.

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.


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

Raw subtitles text

hi and welcome, I've promised to do a

video on windows and navigation or

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

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