Documentation:TK Live View

I have been showing what has been growing slowly in the designing of the web UI and while the app is running and then this is more of the same we have taken it a bit further and consolidated some of the functions that I think one needs when fine-tuning the look and feel of a web application.

We have a new icon that calls the Turnkey Live Editor. It resembles the ViewModel Editor and is a combination of the run button which we had before where you prototype and start the system in either WPF or in the local Turnkey prototyper. When the icon is pushed, you get a corresponding ViewModel connected to it because they share some of the logic.

The new button helps you check if you have the current Turnkey core installed.    

what we  want  to  do  is to  set  up a  server  so this  is  something that  is  Looks very  much  as it  did  in the  play  button that  we  can check  if  we have  a  current turn  key  Core installed we need  one  of those and  that we  can use.  So  this is  new  and the  ability to  connect  it to  an MDriven  server. This is  optional - you can either  run  it towards a  local  XML file  or  you can  use  the M  driven  server and  that  will use  the  Settings from  the  cloud connection  for data.  If you  choose  that one  this  button lights  up  and you  get  to this  one  where you  actually  can Set  the  server that  you  want to  run  against but  for  now I'm  gonna  use the  XML  So what I want  to do  is to restart the  turnkey core  and  This New  text  highlights in  red  when it's  Discovered  that the  if  there's a  server  running or  the  settings from  before  doesn't match  the  file that  we  actually Working  on  so I'm  working  on  a file  that's  stored in  the  internet cache  here.  

So sample  model  for associations  and  Restart the  server  and once  that  is done  I  and Can  fold  this tab  again  and then  this  one is Started  with  our application.  So  this is  basically  Just the  application  in the  browser  nothing to it  so  far but  when  we choose to  Fold  down this  live  edit tab  we  get the  the  view model  tree  and also  some  of the  View  of the  settings  that are  interesting  Per view  model  column. So  when  I click  something  here Like  this  all things  I  can see  that  this is  position  that the  position  0x and  0  y and  if I  were to To  change this  to like  10  instead This  would immediately jump  and I  don't  have to  Refresh  anything and  that's  the beauty  of  us running  within  Harness like  this  because we  can  do the  Push  and refresh  for  you so  to  To make  things  move smoother  and  then As  I've  shown before  we  can also  move  things around  like  this And  since  this is  the  running application  I  can expect  to  find the  actions  I can  create  a new  thing  and I  can  save that  and  If this  is  small screens,  I'm  gonna You  One thing  Hans if  you're  editing at  the  user level  like  this Most  applications  if the  user  hits control  Z  it'll go  backwards  a step  in  there editing  is  that supported?  The  said Escape  or  no Control C  it's  usually copy isn't  it?  No, that's  control  C hasn't cat  Z  is in  zebra  Nope, that's  not  something that  we  currently have  but  and then  it's  maybe okay,  maybe  it's not  on  screen There's  a  It's  a bit of a  challenge  catching special  characters in  in  web applications  You  can but  then  you have  to  catch them  or  sort of  speak  so  It's  like this  when  you right  click  you have  a  menu, but  maybe  you want  to  replace that  menu  I don't  think  that supported  at  the moment  But  but if  the user  wanted to roll  back their  entire transaction  Okay,  okay, so  you're  talking about  the  normal undo  thing.  Yeah, yeah,  okay  Yeah, I  miss  Red you  so  the undo  is  highlighted and  if  you undo  That's  rolled back  correct  and there's  also  a redo  if  the user  wants  to undo  the  undo Yes,  and  that behaves  pretty  much on  on  everything so if  you  do undo  and  That is in effect until you save because once you saved the  undo buffer is cleared and we have made it that way due to  It's actually  something  that we  have  chosen to  avoid  Conflicts with  other  users editing  the  same things.  

I'm  not  sure if  it's  necessary To  be  so harsh  harsh  as we  are  to um  But  the currently you  save  the undo  redo  is cleared  so  then it's  fixed  So in  the  old  tool  what I  would  do if  I  needed the  ability  for  a  user to  work  in a  sandbox  I would  create  a transient  class  for them  to  Do they're editing probably  have some  business  logic attached  to that  and  then a  composting  that  would  post into  the  Persisted classes.  Yeah,  but I'm  assuming  that that's  just  part of  the  view model  world  the view  model  is basically  making  a Generic  sandbox  for whatever  user,  you know  if  they were  editing  a You  know  a customer  file  or an  invoice  or whatever  they're  editing that  that's  done in  a  sandbox that  then  Get posted.  They  say so  that's  pretty much  all  what we  Prior to  view models  stayed  with the  handles  and the  Curse  and manager  handlers  to to  point  out which Obiet  was currently  in a hierarchy  and  things like  that  everything of  that  type is  and  captured in  the  the view model implementation  and  Of  course you could  just  as well  have  done  a transient  class  called view  view  one thing  and  added these  derived  attributes or  have  them as um  properties  and That  that  would sort  of solve  the same  problem  But this  is  fewer clicks  and  and less  things  to maintain  I  would think  for  sort of basic  editing  of You  know  like user  preferences  or client  name  or something  like  that you  would  just use  a  view model  Yeah,  but if  you  needed a  functionality  attached where  maybe  there's some  quality  checking of  the  data as  it  centered or  something  then that  logic  would be  um  built into a transient class to Manage  what the  user's doing.  Yeah,  so Usually  I  avoid a  transient  class as  for  anything that  holds  Important use  of  data for  any  For for  longer  than like  two  seconds because  you  never know  when  The user  is  called away for a call or someone  pulls them away from  the desk top  so  and  I tend  to  go with  track  with the  persistent  things and  but  but what  you  say I  agree  with that  It's  okay to  model  a lot  of  things for  the  process itself.  

So not only the result.  It's  Even a  good idea  to model  a intermediate  information that  is  needed to  actually  Finish the process  and  if especially if  the  user if  the  transaction if  I  can call  it  that requires  updating  multiple Persisted  classes  and you  you  don't want  to  partially update  no,  so  so  and also what  we  frequently use  is  state machines  to  have the  whole  System watch  if  This information  that  is currently  available  is it  okay  to use  or  is it  in  a draft?  state so  that's a  very  very common  that  we have  like  draft and  approved  things for  complex  the the  complex  business things  that  are moving  along  a process  and  Of course  you  can have  as  many state  machiners  you need  I  have a  few  throwaway indexes  for  temporary sorting  stuff  as intermediate  steps  as you  said  They are  also  transient in  my  UML model.  That's  not in  the  database. Yeah  So typically  where we use transients  is when we  really want  to  make One  example is  when we  do  reports we  do  really complex  excel  reports of  word  reports and  we  want to  data  structure in  a  completely different  way  than and  maybe  handle a  lot  of different  type  of classes,  but  we still  want  them to  and  be in  the  same resulting  list  So then  we might  just harvest  data  from all  over  the model  and  port into  some  kind of  print  objects that  makes  up the  rows  and then  we  send that  to  the report  and  then it's  easy  to to  manage  the report  from  there to to mix and  match things that's  probably  where I  first started  using transient  classes  If you're  generating  some kind  of  a management  report  Yeah, pull  a lot  of data together  do  some computations  displayed  in a  grid  But it's  trans  it's very  low  cost for  you  as a  developer  to make  the  transient persistent  so  that's also  an  option that so even if you think  it's transient you  can  just as  well  do it  persistent  and then  but  they are  separate  they are  not  main the  main  data source  they  are just  Steps  in  a  process that  will  fill in  something  else later  on  the good  thing  about that  is  if you  have  a multi-step  Visub  with 10  screen  to do  this  and maybe  there's  a no  Different  kinds of  objects  depending on  The  choices you make  in  the first  screen  and then  it fans  out and  it  turns that  they're  different if you  make  choices in  the  first screen  etc  in the  end  you have  something  that could  have  taken hours  to  To finish up  for  the user  and  and You  don't  want to  force  the user  to  do everything  in  those hours  it  takes and  maybe  they want  to  do a  Bit  of it  today  and a  bit  of it  tomorrow  Yeah, the  downside  is that  you're  and this  is  kind of  more  classic software  development  that isn't  as  rigid today,  but  breaking Database  normalization  rules basically  because they're  storing  something twice  Yeah,  but it  ends  as a  customer  and maybe  I  misspell his  name  Well if  I'm  persisting this  report  his name  will  remain misspelled  in  that report.  So  it's a  It's  actually I  don't  wouldn't say  that  it violates  normalization  rules if  you  have a  specific  need For  because if  you sort of think of it as you  do  an invoice and  you put the  address on  the  invoice And  then  you want to save  the  invoice for  eternity  You don't  want the  address to  be  updated once  the  customer Moves  you want  it to  be  the old  address  on the  old  invoice So  then  you have  to to  make a  copy  so that's  a  a Totally valid  because  you might  think  it's the  same  address, but it  isn't  The invoice address  is  actually not  the  customer's address.  It's  the customer address  at  the time  of  the  invoice  So it's  important  to Discover  that  even if  you  think stuff  is  the same.  It's  not necessarily  the  same once  you  and Think  about it  two and  three  and four  times  And also  when  collecting information  you're  actually collecting  information  and you're  not  Doing the  thing  so this  is  the same  as  Like you  do  a survey  out  on on  town  and you  have  some guy  Asking  you  to  fill in a  paper  If you fill in the paper  that's  one piece  of information  and that's just the  order  to do  something  else once the  My  name ends  up  in the  resulting  system Then  I  have bought  something  and or  then  I'm gonna get  something  delivered so  so  this is  actually  Not a  Breaking  of  the normalization rule. It's  just  that I need to  separate the order from  the delivery  And not  every  order ends  up  in a  delivery  so Yes  Good  questions feel  free  to Ask  me  stuff or  shoot  out so  we  can discuss  I  Can just  other  think on the initial thing you said  undo and redo  and  so I  think  it's like  in  memory Transactions  so if  anyone would  want  to expand  on  that whole  scope  of course  it  could use  code  rest to  access  and work  more  on that  And  I'm a bit  surprised  I mean  that  you I  can't  even remember  how  long ago  that  was there  So I  mean halls  haven't  read that like  yeah  minimum 10  years  So with  ECO  you don't  have  that that's  a  one  of  the big  differences  between ECO  and  M driven  and  probably ECO  and  capable objects  So  when you're  editing data  if you  do  it, you  know  the defined  way  you're in  live  real data  if  you're looking  at  persistent classes  You're  changing it  right  now Yeah,  let's  not get  stuck  on that  one Moving  Yeah, so  the  placing containers  of  course Show  some  warning here  that  every column  should  really be  in  a placing  container  once you  start  to use  them  and And  we  need to  dry  them in  a  bit of  a  hassle, but  that's  okay And  these are  rendered also in  the  edit mode.

So  if I  turn  off the  edit  I see  it  as it  will  really be  but  turning on  the  edit mode  or  Everything is  a  bit shrink,  but  still You can  See  how it works  Let's  see And  and if  I were  to  pick this  one  and say  that  this should  actually  not  be  a row  it  should be  a  column I can  see  how it  behaves  and if  I  pick this  one  and say  that  this should  actually  be allowed  to  grow  I will grow  in  the other  direction,  so I'm  still  learning placing  containers,  but what  I  would do  here  is  to And  add  a shy  placing  container and  move  the details  grid  into that  one  And  so here  we will  get  a different  color  on each  level  of the  placing  container So  what  I probably  want  to do  is  to mimic  these  colors somehow  in  the view  mode  tree So  help  the eye  to  see where  things  are a  bit  easier so  I'm  gonna And  say that  this placing  container  should be  allowed  to So  now  this one  is  taking up  all  the space  that's  good that  was  what I  wanted  And then  We  can move  A  whole let's move  something  into this  just  to prove  a  point So now that  Now that I'm  gonna  move that  up  so now  we  have this  Vigit  here and  then  we have  this  and we  can  grab the  whole  placing container  and  move That's  about  in the  application  as well  And  no way  to  move it,  but  I can  add  some additional  And  So  if  I were  to  move And  this  one into  That  one And  I  missed it  Okay,  I don't  I'm  gonna move  this  one Yeah,  and  so if  we  move Yeah  This  is actually  by  design, but  this  is tricky  so  I forgot  And if  you move  like  this, there  are  two options either  you  want to  change  their order  Or  you want  to  move inside  to  move inside  you  must actually  hold  down the  control  key So  I'll  trick myself  So  now that  one  moved inside  and  you can  see  that that  moved  inside here  as  well So  and if  I take  This  outer one  and  hold  the control key and move inside  Now  it won't highlight  I'm  gonna move  something  into this  to  make it  bigger  Um This  blue one  and I  want  to move  it  inside So  I don't  understand why  that  doesn't highlight  at  this point.  It  should Anyway,  if  we are  we  can always  work  in the  tree  as well  So  I'm gonna  drag  this one  and  pull that  into  this one  And  then other  multiple  levels like  this  And if  I  don't want  the  mic and should  be  able to  move  it up  And  I guess  So  that's um  A  good way and  Of  course we  only  show a  limited  set of  settings  here And  that's  what this  advanced  edit button  is  for You  can  fold that  one  down and  then  you get  the  the full  um  settings from  the  view mode  editor  but I've  chosen  to make that  advanced  edit because  it  takes so  much  rooms and  we  are running  the  whole application  So  it becomes  a  nuisance if if  you  don't need it  so  Maybe we  can  get the  By  by just  using  these so  let  me know  if  there are  Things  that really  should  be in  this  part that  currently  only are  available  in this  part  so there's  um  sort of  a  Um We  need to  Think about what  to  put where  because  there's limited  space

Also  if you're  doing  a targeting  um  Mobile development um  there's  a checkbox  and  this only  Sort of uh  resizes the  screen  it will  Once  I figure out  exactly  how also  um  Enable the  the  drag  and drag  events  rather than  the  Mm Yeah,  what's  the call the call  not something  else not  to  point to  events  the other  events  that are  there  for Mobile  phones  Um, sorry  Maybe  yeah, yeah  the  touch events  yeah  Mm-hmm so  So  so we  have  covered live  edit  and the  service  setup now  let's  head to  this  uh assets  TK  sync and  it  has been  Available  with assets  for  a long  time  but uh  They  have been a  bit  Hard to  work  with because  you  had  to  read in  the  Vicky on  how  to do  it  and then  you  had to  do  it  yourself  in order  to  get it  to  work and  the  i've always  Thought  that we should  be  able to  do  that uh  give  it a  bit  more service  to  get this  working  because I  think  they are  really  good And this  was  a  good  place where  they  fit in  the  overall workflow  So  when you  Turn  on this  you  get uh  Application  ensures a  assets  tk folder  which  is Name  the  same as  the  the  model  that you  have  With the underscore assets as  a  tk because  that's  the the  trigger  for it  to  be discovered  once  we upload  the  model to  the cloud etc  and then  This  is just  basically  a file  tree  where you  can  Five it to  to  make sure  that  you see  everything  And then I added these  buttons for  common  things that  we  put in  the um  In  the assets  so  for example  the  tk user  css  So  if  I click  that  one and  press  I would  have  expected to  yeah,  I got  a  content folder  and  I got  a  tk user  css  So this  one  I  can  Open and  I  got a  note  pad for  that  of course  you  can associate  With  a  a  better tool  Like  uh vicious  studio  or vicious  studio  code something like  that  But What's  good  is that  This  uh can  be  made to  to  sync and  discover  changes in  this  file um  What  you will  do  when it  syncs  is to upload  it  to  the  server to  make  it active  for  the server  Immediately  so let's  see  how that  works.  I'm gonna  turn  on sync  here  And then  I'm  gonna like write the  HTML  Right Ground Yellow  And  once I've  saved  that And  my  whole application  Um  turned Oh  turn  yellow so no  matter  which screen  um  At  it  will have  a  yellow background  And  to If  I  were to  change  this to  Uh  purple and  save  Uh without  doing  anything else  this  is um  um  Shown for  me  so so  this  is um  There's  quite a  lot  of things  going  on to  to  make this  happen  but um  the  important thing  is  that it  will  be much  easier  for us  to  Um maintain  Um to  see the  result  of a  css  like this  So that's  one type  of  uh Asset  to  change the  whole  applications css  but  then Um working  from  experience um  Alex  and then  is  we know  that  um TK  user  css that  Addresses  the whole  application  isn't always the  perfect  fit because  Quite  often when we have a  specific  UI we  want  to Uh  pinpoint  that only  and  then not  um  Destroy anything  else  and it's  really  hard when  you  can't be  sure  that the  uh  View is  isolated  so Then  as  you added  this uh  view assets  thing  to make  it  possible to  have  sort of  a  tk user  css  But  per  view model  and  this is  also  allowing for  and  Your basket And  this  actually shakes  which  view you  have  Active at  this  point.

I'm  gonna go  into  This view  and  then I'm  gonna  go here and  then  I'm gonna  press  uh um This  view  assets button  And  pressing f5 here.  I see  that I  got a  view  assets folder  and  I  got  a view  one  thing folder  for  this view  model  these two  uh  css and  your  script empty  files  currently I'm  gonna  sync that  one  and I'm  gonna  open that  one  and Apparently  um  doomed to  edit  all my  css  in notepad  and  This is  the  view one  thing  and uh  this  was the  tk  user so  I  can set  this  one  to uh maybe  a green  so now  this  one is  green  but um  this  one is  still  purple so  that's  a way  to  um Pinpoint  a  specific view  so  of course  I'm  just doing  silly  things with  background  because I  don't  want to  mess  up my  or  Disclose my  poor  css abilities  to  Everyone  uh, I'm  sure  you can  figure  out how  to  use this  Like  for example  when  to use  it  How do  you  know how  what  to target?  Well  this uh  built  in browser  is  uh just  like  any other  browser  so you  can  do inspect  and  that you  get  a uh  the  f12 window  from uh  um The  edge  browser which  is  pretty good  um  and here  you  can do  debugging  of the  JavaScript  things that  you  do or  just  find out  the  How do  I  pinpoint this  label?  Apparently it's  on  the tk  label  text so  Maybe  I want  to  do that  this  view only  When  this rule  is  hit  I want  to do  Back  Ground Yeah  And  then of course  it  targets all  the  um Labels  and if  I wanted  to  target one  specific  then  I  would need  to  check Further  things  to to  get  the specific  one  So that  enables  you  to  have full  control  over  a single view  and  also full control  of  the whole  application Hmm  So I  also  added the  button  for the  content  theme and  the  thing like  changing  the background  color  might be  better  to control  by  the theme  uh rather  than the  tk  user so  the  theme is  uh  setting variables  to  uh Effect  buttons  and and  um  The standard  Uh  background colors  that  we use  for  different things um  

Also  There's a thing  for the angular  up  or  straight includes  but  a better  one  is the  x  components This  I've added  a  new wiki  page  or rather  No,  I don't  think  it's new  yeah,  maybe I  forgot  to implement  that  one but  um  There's a  wiki  page that describes  that  there's now  a  days a  um  I uh get  the  hub location  where  we keep  the  components So  Our  ambition is to  make  it Very  easy  to inject  the  components into  your  web application  and  bring you  things  like well,  let's  see if  I  can quickly  find  uh and  The  components Yeah,  good  good so  it's  it's here and  and  And what  I've  put here currently  is the  Board  the  trailer  board thing  the  cards that  we  did for  one  project the  flipping  cards the  the  shat thing  that  we did  for  another So  that's  not a  shat  per se  it's  just the  visualization  of um  You  and someone  else  the dragon  drop  upload the google  map  the live  pole  bars that  we  did for  a  demo with  the  live Paul  application  and the  word  cloud for  that  the papers  check  out the  svg  component where  It's  a template  for  doing really  anything  that you  want  to move  around  with svg  graphics  And the  free  ds that  we  used for  the  um 3d  rendering  and the tiny emc  and  the tk  content  is Gantt  short  that's in  the  some of  the  examples So  the ambition  is to  make  further Examples  Building  much more complex  application  Utilizing the  components  and What  I  want to  do  is  to  sort of  um  Practice this  to  to be  able  and also  Really  refine the  tools  So that  we  can do  a  complex application  for  under 10  minutes  or 15  minutes  and Have  that  as demo  cases  because Things  turn  pretty advanced  pretty  fast if you  can  combine a  trello  board with  a  gantt short  with  a google  map  With  a drag  drop  upload and  a  3d  viewer if  you  can do  that  with under  15  minutes a  i  just Think  it  might impress  someone  to Think  ahead  and actually  see  What we do  for free  because that's  what  we miss  out  a lot  of  clients today.  No  one really  understands  um complexity  of  of doing  these  things and  Because  we don't  take  it all  the  way and  push  it in  their  face But  that  would be  one  way to  sort  of  A  goal for  20  20 free  to  to have  that  uh ability  for any  one of  us  being able  to  do an  application  And with  at  least two  or  three components  under  15 minutes  Yes,  and also  um,  I would  welcome  ideas for  future  components because  there's  lots of  things  that we  um  sort of  could  do and  feel  it you  have  been doing  the  diagram thing  and  i uh  Steered  you away  from  using a  component  and instead  you  did with  html  over right  and  that's fine  but  What we Want  to  do is  to  Use some  of  the established  the  yawascript libraries  for  diagrams in  For  for a  component  so that  we  can use  for  other things  like  plotly or  something  like that  I  think we have  a  used to  some  diagram components  and  heat maps  things  that i've  done  and So  and  bar charts so we  could  probably just  yeah  so so  you  know we  you  recruit them  into  this Yeah, just  push  them into  here  and and  also  what i  Um  want to  do  once i  get  the  grasp  of everything  is  to  Make  use of  the  ability to  to  create snippets  um  In  in  the m  driven  designer snippets  are  basically small  um  descriptions of  things 

And  well i  might  as well  show  you If  you  have something  like  this and  uh  And let's  see  yeah, this  is  how you  do  it um  Snippets  edit snippets there  are  no snippets  so  i'm gonna  create  one and  that's  called a  new  snippet uh  so  and what  we  can do  here  is to  say  that This  is  a pattern  But  that we have  this  view model  call  you that's  a  pattern so  i'm  gonna paste  that  one in  um  So i'm  gonna  say that it  has  view model  calls and  i'm gonna  Now  i have  that  column here  and  also that  it  has uh  this  one um  That's  also part  of  the pattern  So  now this new  snippet  is um  We  can use  that  in another  view  model uh uh  Like um  I think  maybe  we need  i  call you  Isn't  it snippets? Yeah,  all  right i  didn't  see So  now  a new  snippet  is  available  so if  i  push that  one  It sort of  pops  up  and  i can  um  If i  had  defined it  to  have replacements  I  could put in the values  here then  i  just apply  and  then i  get  those two  here.  So  the  aim is  for  each Component  to have  a snippet  file describing  what's important  for  for that  component  what the  naming  is in  a  view model  having  that If  the  snippets file  is  discovered in  the  component folder  it  should immediately  be  merged And  to the  designer so  that  it would  be  really easy  to  actually know  what  Data to  to  provide to  this  component to  make  it fly  So  that's one  of  the things  that  Doned on  me  that we  already  have all  these  things we  just  need to  tie  them together  to  To be able  to  to build  a  complex application under  15  minutes So  then the  next extension  of  that is  that  this thing  will  pop a  looking  guitar and  say  hey you  have  these two  pickprop  And  they  just boom put  the  component and  the  snippet and  everything  Yeah, so  um  Yeah, so  in  the end  that  we will  um  probably Yeah  um  It would  be  um A  lot  of questions  Sorry,  just going  off  track here  but  you know  that  seemed to  be  what you  were  thinking but  haven't  said it  yet  um So  and  the snippets  are actually  good for  your  own  uh  reoccurring Patents  for  different things  and snippets  are not  just  for view  models  there also  for  anything in  the  model so  um  Of course  whenever  there's a  pattern  you think  that  that's probably  a  class and  the  class should  be  uh Reused  but  that's not  always  the case  um  It could  be  the case  but  it's not  always  the  case  so patterns  it's  Like  a  structured copy  paste  that Sort  of  can help  us  to  reduce  um reoccurring tasks  Especially for components  it  will be super  uh  helpful So  that's  about the  asset  tk sync  and  i'm really  happy  about us Being  able  to put  that  front and  center  within the  m  driven designer  and  i'm given  a  framework designer  because  It wasn't  good  placed before  Another  important aspect  is  since the  Whole  application now  is  running on  a  server and  we  have copied  this  uh for  example  tk user  css  To that  server  That's a  server  has been  tainted  with this  tk  user css  So  if i  would  run the  same  server With  another  model it  would  sort of  have  this  tk  user css  so  That reason  we  added the  delete  asset that  actually  deletes it  From  my local  spot  but also  reaches  into the  server  and deletes  it  from the  server  So  so that's  uh  also really  helpful  to to  get  this to  um  um really  Have  an effect  So  if i  delete  this asset  it  will remove  the  Give me  a  warning that  or  you're really  sure  that you want to  do  that and  i  am  and  Then This  one it has  turned back  to  white because  that  that file  isn't  there anymore  makes it  easier to  To  switch between  models  and make  sure  that you  have  you see  what  you really  have  and the fourth  tab  in in this um All  this  is under  the  button the  turkey  live editors.  I  guess that's  what  we call  it  um is  the  bug information  because  um um Yeah,  so  this is  the  same to  the  bugger that's  available  from here  but  once you  run  it from  um  if you  use  the server setup and  and run  it for against an m  driven server  then  you  of  course also  want to  uh Run  the debugger  against that  m  driven server  and  have access  to  the same  data  And this  made  it just  easier  to make  sure  that the  settings  are the  same  for for  everyone  so all  in  all um  i  would say  that  um the  um  this whole live  edit  thing it's  uh  It's not  really  a place  where  you start  to  design your  whole  application because  there's  sort of  hard  to to  get  started but  it's  a place  where  you can  find  you in  your  application and  certainly  work with  the  styling and  the  bugger and um  Definitely  with the  JavaScript  files because  it's  uh uh,  it's  really good  to  use the  chrome  debugger to  to  step the  JavaScript  files where  you're  going wrong  and  So  i think  this  is a  step  forward in  and um  um  and  uh taking  care  of the  whole  process to  actually  get  a  finished system  

Yeah  and that's  pretty  much what  i  had on  my  mind and  any  um questions  on that  Let's see  um  for me  uh  it's uh  really  interesting to  see  that it  can  be used  now  uh  towards  an embedded  server like  that um  because  it usually  it  feels like  i  have too  much  data to  keep  it locally  and  now the  is  a  huge  application can  also  be uh  worked  on the  design  without having  to  recreate data  locally  yeah uh  exactly  so huge benefit  so  this sort  of  alludes to the  same  thing as  we  had before  here  with the  the  ability to  get  real data  from  the M  driven server  so this  also helps  when seeing  the  model and  you're  able to  pull  the the  real  data from  the  M driven  server  but this  one  is even  stronger  in actually  showing  the the data  in  context and  the  views how  it  was designed  yeah and  of course  if  if you  run  against the  M  driven server  you  have all  the  possibilities to  break  it by  changing  the model  in  such a  way  that you  can't  uh that  they  aren't compatible  anymore  but that's  uh  something that  you  need to  learn  and to  once  that happens  you  just evolve  and  that takes  a  bit longer  than  just changing the  view  model so  and  but um  it's  all within  five  seconds so  i'm  really interested  um  chalice script  application  for well  what  what was  for  my the  graph  i'm building  i'm  building maybe  not  split it  out  now but  as  a  future  point to  develop  because it's  easier  to well  i  find it  easier  to work  with  that type  of  data in the  yavascript  model yeah  good  so um  it  will be  um  easy to  add  this space  for  having the  yavascript  and also the template HTML  to  for for  the  angular stuff  and  uh what  we  want to  do  is to  have  good introduction  to  how to  make  these components  and  uh it's  it's  not at  all  difficult it's  really  doable once  you  and know  where to  put them  and  get  everything  up and  play  and  i  think all  this live  added things  has  really made it much much  easier  to get  everything  to play  um  so that  you  can verify  your  um and  and  there to  get  started to  to  to change  things  good  so  uh so  very  interesting you  need  to try  it  out  to  give you  more  feedback i  guess  because now  it's  lifted it  when  you try to  sell  it over more feedback  yeah  but what's  the  sinkage between  the  design around  you  can  actually  in  the browser  you can  look at  any  of you  yes  the  part  that one  is  designed so  there's no harm  tie there  yes  no so  so  what happens  in  the background  is  that the  um  once the  m  driven designer sees  a um  turnkey  view it  index  a bit  of  its own script  uh  vn api  in the browser  so all  these drop dots are  sort of  injected  etc so  the  drop dots  are  are like  these  gray things  yeah  and that  once  we discover  what  your intention  is  to  move  this one  we uh  catch that information  and update the  designer information  and from that  designer  information we  re-render  a  new  um spans  file  um an  xml  file describing  the whole  view  model and  that  xml file  is  then um  um we  are  a new  rest api  injected  into the  running  turnkey server  that  um discovers  that  the one  of  his view  models  should be  replaced  with another  definition  and that in  turn uh invalidates the the render  cache  for for that  view model  that calls on the  uh  the renderer  um  on the  server  side reconstructing  the angler page  and  that as  the  angler page  is  reconstructed reconstructed  on the server  side uh we also send  a  signal or message to  the  browser that  says  that hey  uh  something happened  you  better reload  your  page so  when  the client  reloads  the page  it gets  the new um  your  wascript or  the  new angler  rendered  page um  and  there you  have  it so it's  not a  restart of  the  server it's  just  the specific  um  view model  based  operations to  um  and  we use  all the  abilities  that we  have  implemented before  like  the the  being  able to tell  the  client to  refresh from the server  depending on  server  events okay i  was  more thinking if uh  moving  in the  website  could it  be  aligned with  what's  what uh  your  model is  shown  so now  if  you also  i  mean if  you  show your  model  one in  the  browser side  of  the application  um  wouldn't the  designer  move it on  yeah  so um  um  when i  turn  on edit  and  uh then uh  see  if i  understand  the question  here  so it  once  i flip  the  side this  update  and also  this  update so  okay  so that's  the  end of the update  stuff yeah  so  uh  we  sort of  look  at what  page  we are at and  try  to  to  um follow  along  with the  with  these things  okay they  look behind  the  route of  sync so  yeah okay  yeah  so if  you  want to  do  heavier changes  in  the vpf  that's  also fine  and  the and  doing  that would  require  that you  sort  of upload  it  um so  now  i  have done  a lot  of  style changes  that  are in CSS  only  of course  what  i could  have  done and  uh  maybe in  these  cases should have  done  is to  use  the um  styles  in model  yeah so  it depends  and so  if you want to have the styles reflected  in  WPF as well. 

Watch the video to learn more

(Video)