|
|
(14 intermediate revisions by 3 users not shown) |
Line 1: |
Line 1: |
| <html> | | <html> |
| <h4>Setting the presentation properties in the View Model, introducing Modal View Model action.</h4> | | <h4>Setting the presentation properties in the ViewModel and introducing modal ViewModel action.</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 video. Now you can pick any topic to be instructed on without watching the whole video.</em> |
| <style type="text/css">
| |
| 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/jThQodoFy2Y?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="jThQodoFy2Y" data-start="41" tabindex="0"> Nested ViewModel to set the immediate properties </span> |
| }
| | <span class="navigation-item" data-video="jThQodoFy2Y" data-start="271" tabindex="0"> Presentation properties:</span> |
| #video12 iframe {
| | <span class="navigation-item" data-video="jThQodoFy2Y" data-start="521" tabindex="0"> |
| position: absolute;
| | Placing hints |
| min-height: auto;
| | </span> |
| min-width: auto;
| | <span class="navigation-item" data-video="jThQodoFy2Y" data-start="968" tabindex="0"> Visible expressions </span> |
| }
| | <span class="navigation-item" data-video="jThQodoFy2Y" data-start="1256" tabindex="0"> • Singlelinks with setter </span> |
| #video12 div {
| | <span class="navigation-item" data-video="jThQodoFy2Y" data-start="1333" tabindex="0"> • Column for picklist </span> |
| position: absolute;
| | <span class="navigation-item" data-video="jThQodoFy2Y" data-start="1951" tabindex="0"> • Column in action </span> |
| top: 0;
| | <span class="navigation-item" data-video="jThQodoFy2Y" data-start="1990" tabindex="0"> • Presentation Unit property </span> |
| left:760px;
| | <span class="navigation-item" data-video="jThQodoFy2Y" data-start="2101" tabindex="0"> Read-only expressions </span> |
| width: 260px;
| | <span class="navigation-item" data-video="jThQodoFy2Y" data-start="2215" tabindex="0"> • Static Columns </span> |
| height: 100%;
| | <span class="navigation-item" data-video="jThQodoFy2Y" data-start="2265" tabindex="0"> • Prototyper Styles </span> |
| padding-left: 10px;
| | <span class="navigation-item" data-video="jThQodoFy2Y" data-start="2655" tabindex="0"> Tab order </span> |
| overflow-y: auto;
| | <span class="navigation-item" data-video="jThQodoFy2Y" data-start="2767" tabindex="0"> |
| }
| | <strong> ExpressionAnalyze Form: </strong> |
| span {
| | </span> |
| font-size: 18;
| | <span class="navigation-item" data-video="jThQodoFy2Y" data-start="2767" tabindex="0">Diagram with used model elements</span> |
| display:block;
| | <span class="navigation-item" data-video="jThQodoFy2Y" data-start="3251" tabindex="0"> Modal ViewModel </span> |
| 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/8-MKWP8JE1Q?rel=0&autoplay=0" frameborder="0" allowfullscreen></iframe>
| |
| <div>
| |
| <span data-video="8-MKWP8JE1Q" data-start="36" tabindex="0">Nested ViewModel to set the immediate properties </span> | |
| <span data-video="8-MKWP8JE1Q" data-start="266" tabindex="0">Presentation properties:</span> | |
| <span data-video="8-MKWP8JE1Q" data-start="516" tabindex="0"> <em>Placing hints </em> </span> | |
| <span data-video="8-MKWP8JE1Q" data-start="963" tabindex="0">Visible expressions </span> | |
| <span data-video="8-MKWP8JE1Q" data-start="1251" tabindex="0"> • Singlelinks with setter </span> | |
| <span data-video="8-MKWP8JE1Q" data-start="1328" tabindex="0"> • Column for picklist </span> | |
| <span data-video="8-MKWP8JE1Q" data-start="1846" tabindex="0"> • Column in action </span> | |
| <span data-video="8-MKWP8JE1Q" data-start="1985" tabindex="0"> • Presentation Unit property </span> | |
| <span data-video="8-MKWP8JE1Q" data-start="2096" tabindex="0">Read-only expressions </span> | |
| <span data-video="8-MKWP8JE1Q" data-start="2210" tabindex="0"> • Static Columns </span> | |
| <span data-video="8-MKWP8JE1Q" data-start="2260" tabindex="0"> • Prototyper Styles </span> | |
| <span data-video="8-MKWP8JE1Q" data-start="2650" tabindex="0"> Tab order </span> | |
| <span data-video="8-MKWP8JE1Q" data-start="2762" tabindex="0"> <strong> ExpressionAnalyze Form: </strong> </span> | |
| <span data-video="8-MKWP8JE1Q" data-start="2847" tabindex="0">Diagram with used model elements</span> | |
| <span data-video="8-MKWP8JE1Q" data-start="3245" tabindex="0"> Modal ViewModel </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 = '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:Expressions]] |
| I am welcome back this will be part 4 of the MDriven design overview and let's
| | {{Edited|July|12|2024}} |
| | |
| look a bit closer on view models so and the "ViewModelEditor", the "HouseView"
| |
| | |
| what we want to do in the "HouseView" is probably to set the immediate properties
| |
| | |
| but we would also like to show some more information about the links it has
| |
| | |
| so we could add a "nested" that you want the class to see all the lease contract
| |
| | |
| these so following this link
| |
| | |
| and so this is the ocl for that and this is the nesting that was added so this is
| |
| | |
| how this work that and you nesting can be added, we could add
| |
| | |
| an empty nesting like this and once we have it we could say that it uses a
| |
| | |
| certain type like "person" and if we had added a generic column we could have
| |
| | |
| written the expression "self" to follow some association of house I say
| |
| | |
| this contract and if we want to connect this one to show and to show the details
| |
| | |
| of each object in this one we would say "associated" to that one and that we get
| |
| | |
| this arrow we would give this a name and we would add some properties to show
| |
| | |
| some specific things about that
| |
| | |
| and that would be rendered as a green "with this name" and again the same thing that
| |
| | |
| we saw in the action dialogue that we hack up the name on camel case if you
| |
| | |
| have left the name as the presentation as stating "use the name" because that's
| |
| | |
| quite a common case, but you could do something else here now it uses the name
| |
| | |
| and add the things we added or you could just have your own thing all together as
| |
| | |
| we resize this
| |
| | |
| it gets more apparent that this is grid and if we were to add columns they end
| |
| | |
| up as columns in this grid, but that was just an example we're going to remove
| |
| | |
| that and remove this for now, instead we have the "lease contract" list and we want
| |
| | |
| to add some of the properties of the lease contract, like the apartment number
| |
| | |
| like the "start date" and "end date" maybe
| |
| | |
| and if we now would want to allow for edit of these things and in wpf we
| |
| | |
| actually allow for implace edit of the grid so that's not an issue but
| |
| | |
| suppose that we would want to have a master-detail where we pick one row and
| |
| | |
| do details of that then we could do a new nesting from here so the nesting is
| |
| | |
| unlimited to just one we can have any depth
| |
| | |
| let's do this as a single link
| |
| | |
| to "self" so now it's just added an ocl expression "self" to a new listing, to a
| |
| | |
| new nesting and this these are many if they are integrate, these are many in
| |
| | |
| a collection
| |
| | |
| we render the grid, but here again we pick one so this is actually rendered as
| |
| | |
| a single field
| |
| | |
| ok, so for each one
| |
| | |
| I've picking the grid it will show the a asstring value here, as I have the type
| |
| | |
| information of the lease contract I also get hints that you might want to add the
| |
| | |
| apartment number and this list reduce as I already added the apartment
| |
| | |
| number it's abbreviated, but I want to add "start date" and the "end date" and the "rent"
| |
| | |
| of course I've could add these manually generic column and give it a name and
| |
| | |
| I'm free to use any kind of ocl expression that I see fit
| |
| | |
| here are the obvious once the attributes of the class in question and here are the
| |
| | |
| roles, so I can follow the role to "tenant"
| |
| | |
| and get the "last name"
| |
| | |
| we did that again and fix that ok notice that whenever we add a column
| |
| | |
| this the role for replacing hints that we use to render this and usually
| |
| | |
| adds new columns under the last one you added, so if I had moved this one over
| |
| | |
| here, then that one got placed on Row1 and if I were to add another one
| |
| | |
| generic column with a unique name let's call it too it would be added under as
| |
| | |
| because it's convenient and often the case that you want to stack them on top
| |
| | |
| of each other, if you hadn't, if they were to end up at the same spot, we would get
| |
| | |
| information about the "new column 2" occupies the same spaces new column
| |
| | |
| and then I could drag them apart like that
| |
| | |
| and I could call this "TenantsLastName" maybe I want to add at last and remember as
| |
| | |
| before I don't want this one to touch the edge, because then it would be
| |
| | |
| dragged out in the prototype, let's see how that would look, so heading over to
| |
| | |
| the prototype, refresh model, use, show all house, open up one, you see then
| |
| | |
| it's drive down all the way fills up the screen, depending on what you do you
| |
| | |
| might want to do this because, it's multi-row and it will follow along and
| |
| | |
| actually when we do this multi-row on purpose like this it's a signal to the
| |
| | |
| rendering engine in the prototyping to accept the returns etc to
| |
| | |
| to handle multiple line input, but if we make it like this and it doesn't touch
| |
| | |
| the bottom edge
| |
| | |
| it will look like this and that's more like what we want but it does touch
| |
| | |
| the right edge, so they are dragged out and follow along with this edge, if we
| |
| | |
| were to make one of these longer like this, then only this one touches the edge,
| |
| | |
| so if we refresh and view only this one follows along with the resize, this might
| |
| | |
| be what we want
| |
| | |
| but not in this case, as we see here the grid seems a bit crammed how can we give
| |
| | |
| more space to the column and these are the column definitions to give them more
| |
| | |
| space we would say that columns when in gri, let's set that to "2" instead then
| |
| | |
| there's more space given to this and that too as well, and that too as well
| |
| | |
| ok and we can drop this one showing the grid lines, we see that it's still only
| |
| | |
| occupies two columns, which make these things sort of expand, so what we can do
| |
| | |
| is insert column in the UI, like this and make this one expand over rows
| |
| | |
| and then everything relaxes and isn't as tense, this cell seems a bit stretch
| |
| | |
| because of the street number here, let's do something similar
| |
| | |
| how can we make this one stretch over here these, well that's that presentation
| |
| | |
| span, it uses one column now
| |
| | |
| so instead, let's as instructed to use 2 now it's relaxed and the UI will scale
| |
| | |
| and behavior better
| |
| | |
| so show all houses, model refresh, show all houses like that and as these types
| |
| | |
| were of date time, remember when we did the model "date time" the rendering engine will
| |
| | |
| choose to render these as a "date time" picker
| |
| | |
| so these are set this way, but it's all kind of strange to show these if there
| |
| | |
| isn't a particular lease contract selected and how can we control when to
| |
| | |
| show these, well we do that with a visible expression, so should it be
| |
| | |
| visible or not and again this is an OCL so all of these, let's remove this one
| |
| | |
| all of these should only be visible if there's something selected in this grid
| |
| | |
| so how do we know it now if there's something selected here
| |
| | |
| well this nesting is called lease contract list and in the visible
| |
| | |
| expression or in the ocl editor we see there are variables available
| |
| | |
| in this view model and all these v current and we selected are
| |
| | |
| automatically created by the viewmodel to allow you to have access to what is
| |
| | |
| the current object, the focused object of lists, or the list of selected objects in
| |
| | |
| the list, if you allow for multi-select so since our nesting was called lease
| |
| | |
| contract list we expect to find a vcurrent lease contract list and what we
| |
| | |
| want to do for the visible expression is to make sure that this is null
| |
| | |
| that returns a boolean true or false
| |
| | |
| so if it is not null then we want to show the UI widget
| |
| | |
| whoops where did I set that I set it on the grid and that would be contract
| |
| | |
| product it I'm gonna set it on all these like that, so if I head back to the
| |
| | |
| prototyper, re-read, I'm a bit stumped
| |
| | |
| I thought I removed it from the grid and apparently I did not and it didn't okay
| |
| | |
| I need to leave the expression box for it to apply that seems a bit and kind of
| |
| | |
| a bug I would enter fix request for that, but now it's like what I wanted it
| |
| | |
| to be in the first place, so now they are not show, how do we get a lease
| |
| | |
| contract in here
| |
| | |
| yeah
| |
| | |
| we'll get back to that, but and we will focus on the street for now, we have
| |
| | |
| create street, but that is not actually very practical to create the street
| |
| | |
| every time a new building is added or maintained, it would be more
| |
| | |
| appropriate to use a selector combobox, something with a picklist and that's a
| |
| | |
| very common case, so there's a quick action for that for that in the
| |
| | |
| viewmodel dialogue, it's under here we call it a "singlelink with setter", so
| |
| | |
| what do you want to do, you want now since the modeler has access to your
| |
| | |
| model it knows that you have two singlelinks from the building from the the
| |
| | |
| house class and one goes to owned by person and the other one goes to the
| |
| | |
| street, so let's pick for the street and three things we added: this column
| |
| | |
| and this column and that one
| |
| | |
| so what do we have here
| |
| | |
| well first it said that the street "self.TheStreet"
| |
| | |
| this is actually the singlelink value you know the one what we set with the
| |
| | |
| "create street" action that we will eventually remove and then we for this
| |
| | |
| we have a chosen a column for picklist so this is the column that will make up
| |
| | |
| our picklist the street pick list and that has the ocl expression "street.allinstances"
| |
| | |
| that in turn goes to, let's point this one, this nesting that says how
| |
| | |
| to present the street and all this is interpreted by the UI engine as to be
| |
| | |
| rendered as a picklist and it added it here but we can move it around
| |
| | |
| okay how come it's so long
| |
| | |
| well it's so long because the last thing we change was this grid and that was
| |
| | |
| just the same length and except for the label
| |
| | |
| so let's make that too like this and put it over here
| |
| | |
| so how will this look in prototype, re-read, show all houses, so the street now
| |
| | |
| it shows subs and we have several streets to choose from but they're all called
| |
| | |
| just "street", so why is that, well it's because the presentation is "self.asstring"
| |
| | |
| and if we look at street and the "default string
| |
| | |
| representation" for a street is well it's not defined so if it's not defined it
| |
| | |
| just uses the class name but a good way to denote the street might be just to state
| |
| | |
| the street name right, but actually it might be a good idea to add, since
| |
| | |
| the street had an association - a road to City, we might want
| |
| | |
| to add the city and the name of the city before we add
| |
| | |
| name of the street, that might be a good presentation of the street, so when we
| |
| | |
| have set that just going to save all this so have it
| |
| | |
| I'm refreshing re-reading the model, show all houses and now I see and the name of
| |
| | |
| the street and in front of here it should be the name of the city, but we
| |
| | |
| haven't set that on anything, so that won't be available until they're
| |
| | |
| actually is a city set in in this association here
| |
| | |
| ok, so that's a very important design pattern you can do it manually
| |
| | |
| you just state
| |
| | |
| the association end and you describe how the list of picked items should be
| |
| | |
| created and you associated to with the column for pick list of the first one
| |
| | |
| if you want to control how this is rendered, you can do that by
| |
| | |
| adding the nesting and this set an OCL expression, so since this is an
| |
| | |
| expression you put just as well have solved the issue here having "self.city.
| |
| | |
| "self.city.name+self.name" but then you would need to repeat it every time you were to
| |
| | |
| use
| |
| | |
| a street or that definition of street presentation, but just to prove a point,
| |
| | |
| let's add a string here with something like this and heading over to refreshing
| |
| | |
| the model and then there will be just the thing we added behind every row right
| |
| | |
| not gonna use that, so as we define the picklist, we have an option to
| |
| | |
| say that there is a there should be an a null option in
| |
| | |
| this picklist should the null option be first last or only if it's empty, so
| |
| | |
| that's the option that we can have an empty row, that's the null option
| |
| | |
| now we haven't set the street and now we have, ok, and if we have a null option
| |
| | |
| we might want to inform the user that this is the null option, maybe we would say
| |
| | |
| something like "please pick a street" and re - reading, do you want to save?
| |
| | |
| no, show all houses, please pick a street
| |
| | |
| ok
| |
| | |
| right, so we might not need this action any longer, going to drop that, delete
| |
| | |
| I'm gonna move this one in, like that and then we see that these labels
| |
| | |
| on grid and lining because these has presentation span "2" and this has
| |
| | |
| presentation span "1", just one column we are going to change that, at the "2" as well
| |
| | |
| ok better, to get something here we really need to have a list of
| |
| | |
| tenants, so there is lease contracts let's add a quick action here now
| |
| | |
| "add column prepared for action"
| |
| | |
| I might as well add a generic column to show you that an action is actually
| |
| | |
| nothing special, it's just that it has this check box checked, so now the new
| |
| | |
| column looks like this, but if I check that is action it would be rendered as
| |
| | |
| a button instead
| |
| | |
| so in this button, let's do a quick and dirty way to add some tenants or one
| |
| | |
| tenant
| |
| | |
| so in the role tenants we would like to add a person, but we don't have any
| |
| | |
| person, so we're going to create one person
| |
| | |
| create, so that would be one way to add a tenant and if we add a tenant, then uml
| |
| | |
| states that there must be at lease contract as well, that's implicit so
| |
| | |
| reloading, show all houses, press the new column and there is attendant
| |
| | |
| and let's say this one is in apartment number 1 and this one is in apartment
| |
| | |
| number 2 and this one moved in that day - that hasn't moved out and going to
| |
| | |
| pay me or pay the owner a thousand things in rent
| |
| | |
| alright a thousand things
| |
| | |
| this is a very common case that we have the need for a unit behind an attribute
| |
| | |
| that we present, so there's actually an option to have a presentation unit, this
| |
| | |
| is just a property, that you can set "per" attribute, so let's say this is dollar
| |
| | |
| if it is and you're going to save these and show all houses pick the same
| |
| | |
| house and what I would have expected was to rep dollars so that's
| |
| | |
| their this UI engines way to help me with the unit some things and that's
| |
| | |
| really important for uses to get things right, and remember we follow the
| |
| | |
| association to these rows are actually the lease contracts so as we added a new
| |
| | |
| person to the tenants, this one was implicitly created and as I select here I
| |
| | |
| can see that this is a master-detail 1212 on the apartment number
| |
| | |
| actually, I'm allowed to change things straight in the grid apartment "32", but
| |
| | |
| depending on how I want to have my users use this information I might want to
| |
| | |
| shut this off, how would I go about that?
| |
| | |
| well in the view model designer on each column each view model column and
| |
| | |
| these are the ones that build up the grid columns, I can set a readonly
| |
| | |
| expression, again these are ocl, so they can be very complex, if I want to, but they
| |
| | |
| can also be extremely simple, if I want to, readonly - true
| |
| | |
| oh I was over here
| |
| | |
| true and the Start Date - read only -true like that, and if I then save re-read, views
| |
| | |
| show, this is not editable even if I press f2 I can't go into edit mode for these
| |
| | |
| and the same is true, if I were to set the readonly expression here
| |
| | |
| since I added the association to the last name for the tenant I can
| |
| | |
| actually set the tenants last name here
| |
| | |
| but that might not be what I want to do so
| |
| | |
| one option is to state that this edit box is actually a static and
| |
| | |
| when it's a static it's rendered as a label only, so the effect would be like that
| |
| | |
| how come this is right just, well is all a matter of styles and
| |
| | |
| we can actually define this style to use in the view model, but
| |
| | |
| if I were to change this to something else I probably need to reopen it to be
| |
| | |
| the rendering is completely different, want to use that one
| |
| | |
| so how do we set styles in the view model well it's a style reference and then
| |
| | |
| there is a couple of styles defined, like the normal HTML style - h1 for heading
| |
| | |
| then this one got little larger or the h2 for not so much larger and having that
| |
| | |
| refreshing its rendered differently, but of course these are just the name of the
| |
| | |
| style and this style itself is defined in a xml file for wpf rendering and
| |
| | |
| that's xml file you are free to elaborate on as you please
| |
| | |
| initially we only had the naming reference to this styles, but then it became
| |
| | |
| apparent that some of styles might be data dependent, like if you have a number that
| |
| | |
| if it goes to negative it should be red, so there's the checkbox to say that the
| |
| | |
| style is actually not the name of the style
| |
| | |
| it's an expression and if you check that one, you immediately get an error here
| |
| | |
| that the column tenants last name has a styleref expression that does
| |
| | |
| not evaluate to string because h2 is not valid ocl expression so here you
| |
| | |
| could go things like, if the tenants name
| |
| | |
| let's say, we do something really stupid like the street number, if the street
| |
| | |
| number is larger than 10, and in OCL you are free to to use if-then-else syntax
| |
| | |
| and it looks like this, if-then so if its larger then 10 then we're going to return
| |
| | |
| it in the style name that h1, else - we're going to return this file name that is
| |
| | |
| h3 and "endif", so that's a valid expression, what's important when
| |
| | |
| we use the "if "syntax in OCL is that both the parts that are possible have
| |
| | |
| the same type, so if this would return an integer it would say
| |
| | |
| "parameters of this operation have no common superclass system and integer, because
| |
| | |
| since ocl is a functional language it really needs to evaluate to something
| |
| | |
| common to work, so in this case if the street number is over 10, we will use
| |
| | |
| the h1 style
| |
| | |
| otherwise we will use the h3 style I don't even know if we added the street number
| |
| | |
| oh it's over here
| |
| | |
| yeah
| |
| | |
| so this style works on the root rather than the selected objects, that's also
| |
| | |
| something you need to keep in mind, so the street number of the house
| |
| | |
| let's see how that would play out in our example, so the tenants last name is
| |
| | |
| Karlsen, it seems to be rendered in h1, but if we change this to 9, it's randered in
| |
| | |
| h2 and since you are free to elaborate with the styles, you can do a
| |
| | |
| lot with this kind of the control right
| |
| | |
| so we have seen edit boxes and date time pickers and other kind of
| |
| | |
| the pickers to pick a certain value, combo boxes as I like to call them and
| |
| | |
| as you can see the
| |
| | |
| viewmodel builds up and it isn't entirely necessary to have set all the
| |
| | |
| UI hints, but it helps the thought of how the information is structured, I
| |
| | |
| believe, so even if we are just going to use the data as such, the UI hints
| |
| | |
| are a good way to structure the information for your eyes
| |
| | |
| in this you could potentially want to control the tab order how the user would move to
| |
| | |
| get around the UI using the tab key, the default way is to
| |
| | |
| the default way is to use to "display order x before y", but one can choose here to
| |
| | |
| to have a different and strategy for the tab order
| |
| | |
| so the default is "display order y before x", but you could go another way
| |
| | |
| or column design order, if you really want to have full control of how it would
| |
| | |
| look as your view model builds up it gets, it touches a lot of the parts
| |
| | |
| of your model and it might be hard to get an overview of exactly what is it
| |
| | |
| that it touches, so there's a button over here called "analyze expressions" so what
| |
| | |
| it will look through all the expressions that you have, and even
| |
| | |
| the read-only expressions and the style reference and everything
| |
| | |
| cook it down to what you actually have used in from your model, so that looks
| |
| | |
| like this, so this is apparently what we use here, so this is rather useful
| |
| | |
| way to, another way to look at the information that we touched by the viewmodel
| |
| | |
| actually it's an possible to maintain separate UML diagram for the
| |
| | |
| information in the view model you see this
| |
| | |
| the house has a lot of attributes in our model, but it just shows the
| |
| | |
| ones that we actually use in this view model, so if we
| |
| | |
| want we could add or update a diagram with used model elements, and what
| |
| | |
| happened then is that we got a new diagram with all the data
| |
| | |
| from the "HouseView" and that's just setting there like this and if you're on
| |
| | |
| the diagram you might want to get some help to lay it out if it's all messed up
| |
| | |
| and I don't know if that really helped us but if you have a lot of information
| |
| | |
| that's how you would do it and the good thing about this strategy is that if we
| |
| | |
| were to add things like in that we were to add, well we almost have everything
| |
| | |
| but I'm going to add attributes 7 to this one and if I stand here and choose this
| |
| | |
| one "add or update... " again then I expect attribute 7 to be added to my diagram here
| |
| | |
| so that's a way to maintain a specific diagram for a specific view
| |
| | |
| good to know, but we're going to head back here
| |
| | |
| ok and as I said I thought that the action we added here to add a tenant was a
| |
| | |
| quick and dirty way, we need to find a better way to pick tenants for
| |
| | |
| our house and let's start with adding a new view model that lists all existing
| |
| | |
| persons, so let's call this one "allpersons" and to give it a type
| |
| | |
| let's say it's person, but like before we could use a nested singlelink or
| |
| | |
| multilink and
| |
| | |
| use the person.all instances, let's do that as a first, add a column first name
| |
| | |
| and last name and drop the default one
| |
| | |
| I'm going to design it to be there and drag it out the bed and as this touches
| |
| | |
| the edges it will expand to view, if I see here there are no ways to get here
| |
| | |
| no actions leading here and now actions available here and that is a good example
| |
| | |
| of finding in this view, that I talked about in the other video, actions and
| |
| | |
| navigations, refresh, we find that, that's not reachable from any action, let's find
| |
| | |
| we right-click it and choose to do a global action for show and now
| |
| | |
| it has an action here but as we can see it's not the in any action group or menu group
| |
| | |
| so let's click that one up and set the menu group to views, so heading back to
| |
| | |
| the prototyper and refreshing we will find we have a show all persons we have
| |
| | |
| the two that we added from before
| |
| | |
| okay that's a start but what we really wanted to do was to be able to pick tenants
| |
| | |
| to our house, so how would we go about doing that and if we look at the actions
| |
| | |
| definitions for this one we need some kind of action to bring up the
| |
| | |
| all persons in a model way, pick a few of them and say that they should be tenants
| |
| | |
| that would be the best way to treat potentially large amount of
| |
| | |
| persons to browse between, so we're gonna use that now, action definitions
| |
| | |
| this is the filter view of the "ViewModel" actions and the class actions that are
| |
| | |
| available from this view, since there are few more view model actions in House View here
| |
| | |
| going to add a view model action and we're going to call this "pick tenants"
| |
| | |
| only in this we say that's under the root nesting, that we want to show this action
| |
| | |
| and we're going to bring up the all persons view, but now we're going do
| |
| | |
| something special
| |
| | |
| we're going to say that this view model that will bring up all persons
| |
| | |
| should be modal, modal is that we can move away from it before we have chosen
| |
| | |
| "OK" or "cancel, so when I check that box I get an enable expression for modal - OK
| |
| | |
| when should be OK to dismiss this box with OK and also an expression of
| |
| | |
| their modal OK, so this is good, because in the enable expression for modal OK
| |
| | |
| which of course, is an OCL expression I will see that I'm in context of the all
| |
| | |
| persons view and I get the selected all person, so these are
| |
| | |
| the collection of person that are selected in the grid, so if this
| |
| | |
| one "not empty" I guess then it should be ok to press OK, so that's
| |
| | |
| really what I stated here "enable expression for Modal OK- yes
| |
| | |
| if there are any selected persons, so this variable we want to use it
| |
| | |
| on the expression that we're going to execute, when
| |
| | |
| the user presses ok, we don't do anything on "cancel" or "dismiss"
| |
| | |
| but on "ok", we want to do something and what we want to do is because this is interesting
| |
| | |
| now we're in the context of the calling view model, which was the house view
| |
| | |
| but we also have access to the modal view model because it isn't fully
| |
| | |
| closed yet, so we get the model result we selected all persons, so these are the
| |
| | |
| persons that the user has selected in the modal dialog, let's make these two tenants
| |
| | |
| are going to do that
| |
| | |
| wanna have that in the copy buffer for a minute
| |
| | |
| we are in the context of, we have the current house view
| |
| | |
| so this will be house that we have selected
| |
| | |
| this is our house and then from there we should add a tenant
| |
| | |
| let's call that tenant "t" where do we get these tea from, well we had it from
| |
| | |
| iterating over result we selected or persons, because even if it's
| |
| | |
| just one and this is where they will be, an iteration in OCL is commonly done
| |
| | |
| with collect and collect and has possibility to have a look variable
| |
| | |
| as we described before or if I haven't described before you should look
| |
| | |
| the playlist on OCL expressions, there will be describing
| |
| | |
| so "t" for the look variable and a pipe sign to separate the
| |
| | |
| loop variable from the expression and we will need an ending
| |
| | |
| the "tenants" is just the association and we need to use the operator "add"
| |
| | |
| to actually add the "t", so for each "t" in this variable we do on our
| |
| | |
| house tenants.add alright so now we have declared an action that was model and we
| |
| | |
| have expression to see, if it's okay to press ok on it and when we press ok
| |
| | |
| we have an action to do stuff
| |
| | |
| alright, that should be enough for us to head back to the prototyper, model refresh
| |
| | |
| so if are in the house, this one and we want to pick tenants
| |
| | |
| let's go back and pick another house that hasn't any tenants we want to pick
| |
| | |
| tenants here and what should happen now is that the all persons dialog show
| |
| | |
| up with an ok/cancel, you see the ok isn't enabled because we haven't
| |
| | |
| selected any persons, going to select that one, now it's okay because now the
| |
| | |
| selection is large
| |
| | |
| it's not empty, ok
| |
| | |
| when I press OK it was added here,I can see that it's the one tenants last name
| |
| | |
| the last name of
| |
| | |
| yeah it isn't fully visible and so that's one way, if I cancel that, discard
| |
| | |
| yes, one should have been removed
| |
| | |
| let's see all houses I'm going to pick this one as a house, pick tenants want to
| |
| | |
| select both and since we iterate over we get both Smith and Karlsen right okay
| |
| | |
| good, now we have done a modal view model and with these design patterns we can do a
| |
| | |
| lot of things, of course, but and we're not going to do anything more just now
| |
| | |
| going around this off and I will get back to you
| |