A new feature ...

sessions  I  have  been  showing  what  has  been  growing  slowly  the  signing  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  and  consolidated  some  of  the  Functions  that  I  think  one  need  when  fine  tuning  the  the  look  and  feel  of  a  web  application  and  I'm  very  happy  about  how  this  is  turning  out of course  whenever  you  do  something  like  this  and  move  the  front  here  forward  You  see  a  lot  of  possibilities  and  new  things  that  you  can  add  but  we  need  to  pace  it  and  take  Things  in order  to  make  it  usable  so  I'm  very  and  To  see  as  they can  eager  to  hear  the  feedback  on  once  it  gets  used  to  to  see  So that  we  prioritize  the  right  things  to  do  I'm  gonna  talk  a  bit  about  where  we  are  and  what  we  want  to  achieve  so 

You're  just  gonna use  the  Standard  model to  show  these  things  and  What  has happened  from  before  is  that  we  have  a  new  icon  here  that  Costs  the  turn key  live  editor  and  this  is  the  view  model  editor  so  they  resemble  each  other  and  it's  a  combination  of  the  And  the  run  button  which  we  had from before where  you prototype  and start  the  system  in either WPF  or  in  the  the  local  turn  key  prototypers  so  this  is  sort  of  a  hybrid  between  the  the  view  model  editor  where  you  actually  changed  the  definition  of  the  views  and  This  where  you  actually  run  the  application  so  if  I  push  this  one  I  And  always  get  a  corresponding  View  model  Connected  to  it.  So  this is  because  they  share  some  of  the  logic  so  if  you  don't  want to  see  it  you don't  need  to  look  at  it,  but  it's  there  and  this  is  basically  a  Embedded  browser  then  you  And  Value two Microsoft's embedded edge browser  which  is  replacing  the  old  Internet  Explorer  and  edge  so  What  happened  there  was  that  they  said  that  well  there's  no connection  to  the  toy machine 

So  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  Particularly  you  launch  has  been  asking  for  the  ability  to  connect  it  to  a  M  driven  service  that  so  so  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  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 

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  Wiki 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  Javascript  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.