<div dir="ltr"><div><font face="monospace, monospace">To do this using a pure Ur/Web FRP approach (*without* using Ur/Web's JavaScript FFI to talk to a library such as ReactJS or Mithril), I imagine the starting point might be this snippet of code from the demo Crud2, defining a function:</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">Widget = (fn [nm :: Name] => <xml></font></div><div><font face="monospace, monospace"> <select{nm}></font></div><div><font face="monospace, monospace"> <option>Ready</option></font></div><div><font face="monospace, monospace"> <option>Not ready</option></font></div><div><font face="monospace, monospace"> </select></font></div><div><font face="monospace, monospace"></xml></font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">Or, more completely, this record of 6 functions, from crud2.ur:</font></div><div><font face="monospace, monospace"><br></font></div><div><p class="MsoNormal"><font face="monospace, monospace">Ready = {</font></p>
<p class="MsoNormal"><font face="monospace, monospace"> </font></p>
<p class="MsoNormal"><font face="monospace, monospace"> Nam = "Ready",</font></p>
<p class="MsoNormal"><font face="monospace, monospace"> </font></p>
<p class="MsoNormal"><font face="monospace, monospace"> Show = (fn b => if b then</font></p>
<p class="MsoNormal"><font face="monospace, monospace"> <xml>Ready!</xml></font></p>
<p class="MsoNormal"><font face="monospace, monospace"> else</font></p>
<p class="MsoNormal"><font face="monospace, monospace"> <xml>Not ready</xml>),</font></p>
<p class="MsoNormal"><font face="monospace, monospace"> </font></p>
<p class="MsoNormal"><font face="monospace, monospace"> Widget = (fn [nm :: Name] => <xml></font></p>
<p class="MsoNormal"><font face="monospace, monospace"> <select{nm}></font></p>
<p class="MsoNormal"><font face="monospace, monospace"> <option>Ready</option></font></p>
<p class="MsoNormal"><font face="monospace, monospace"> <option>Not
ready</option></font></p>
<p class="MsoNormal"><font face="monospace, monospace"> </select></font></p>
<p class="MsoNormal"><font face="monospace, monospace"> </xml>),</font></p>
<p class="MsoNormal"><font face="monospace, monospace"> </font></p>
<p class="MsoNormal"><font face="monospace, monospace"> WidgetPopulated = (fn [nm :: Name] b =>
<xml></font></p>
<p class="MsoNormal"><font face="monospace, monospace"> <select{nm}></font></p>
<p class="MsoNormal"><font face="monospace, monospace"> <option
selected={b}>Ready</option></font></p>
<p class="MsoNormal"><font face="monospace, monospace"> <option selected={not b}>Not
ready</option></font></p>
<p class="MsoNormal"><font face="monospace, monospace"> </select></font></p>
<p class="MsoNormal"><font face="monospace, monospace"> </xml>),</font></p>
<p class="MsoNormal"><font face="monospace, monospace"> </font></p>
<p class="MsoNormal"><font face="monospace, monospace"> Parse = (fn s =></font></p>
<p class="MsoNormal"><font face="monospace, monospace"> case
s of</font></p>
<p class="MsoNormal"><font face="monospace, monospace"> "Ready"
=> True</font></p>
<p class="MsoNormal"><font face="monospace, monospace"> | "Not ready" => False</font></p>
<p class="MsoNormal"><font face="monospace, monospace"> | _ => error <xml>Invalid ready/not
ready</xml>),</font></p>
<p class="MsoNormal"><font face="monospace, monospace"> </font></p>
<p class="MsoNormal"><font face="monospace, monospace"> Inject = _</font></p>
<p class="MsoNormal"><font face="monospace, monospace"> </font></p>
<p class="MsoNormal"><font face="monospace, monospace">}</font></p><p class="MsoNormal"><font face="monospace, monospace"><br></font></p><p class="MsoNormal"><font face="monospace, monospace">Then I imagine it would be necessary to add Ur/Web syntax such as:</font></p><p class="MsoNormal"><font face="monospace, monospace"><br></font></p><p class="MsoNormal"><font face="monospace, monospace"> dyn</font></p><p class="MsoNormal"><font face="monospace, monospace"> source</font></p><p class="MsoNormal"><font face="monospace, monospace"> signal</font></p><p class="MsoNormal"><font face="monospace, monospace"> set</font></p><p class="MsoNormal"><font face="monospace, monospace"> {[ ]}</font></p><p class="MsoNormal"><font face="monospace, monospace"><br></font></p><p class="MsoNormal"><font face="monospace, monospace">... in order to implement the interactivity - where every time the user adds (or removes or changes) a letter in the field of the drop-down menu, the displayed list of items of the drop-down menu would be instantly updated.</font></p><p class="MsoNormal"><font face="monospace, monospace"><br></font></p><p class="MsoNormal"><font face="monospace, monospace">And of course the values used to populate each 'option' in the 'select' element would not simply be the two values 'true' and 'false', but rather would come from a two-column SQL DML query, eg:</font></p><p class="MsoNormal"><font face="monospace, monospace"><br></font></p><p class="MsoNormal"><font face="monospace, monospace"> select customer_id, customer_name from customer;</font></p><p class="MsoNormal"><font face="monospace, monospace"><br></font></p><p class="MsoNormal"><font face="monospace, monospace">I don't think I could come up with this kind of FRP idiom on my own without seeing an example.</font></p><p class="MsoNormal"><font face="monospace, monospace"><br></font></p><p class="MsoNormal"><font face="monospace, monospace">I also don't have any idea of the syntax that would be used in order to "handle" the event where the user has typed a keystroke, updating the contents of the typeahead/autocomplete drop-down menu.</font></p><p class="MsoNormal"><font face="monospace, monospace"><br></font></p><p class="MsoNormal"><font face="monospace, monospace">Finally, I am unsure whether the "timing" which Ur/Web would use for this kind of code would be efficient, the same way ReactJS efficiently diffs its virtual DOM.</font></p><p class="MsoNormal"><font face="monospace, monospace"><br></font></p><p class="MsoNormal"><font face="monospace, monospace">+++</font></p></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">An example of the overall kind of CRUD generator I'd like to build can be seen here, in the output from a Windows-based CRUD generator called SQL Maestro PHP Generator for Mysql (or Postgresql):</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace"><a href="http://demo.sqlmaestro.com/">http://demo.sqlmaestro.com/</a><br></font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">(Scroll down a bit to see an actual table.)</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">The existing CRUD examples for Ur/Web probably already implement at least half of the functionality of the above S</font><span style="font-family:monospace,monospace">QL Maestro PHP Generator</span><span style="font-family:monospace,monospace"> </span><span style="font-family:monospace,monospace">demo - using a single language which also happens to be typesafe, compact, high-performance, low-memory, extensible, etc. </span></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">I imagine it would take only a few more pages of Ur/Web code - written by someone good at Ur/Web and FRP - to implement the rest of the functionality </font><font face="monospace, monospace">of something like S</font><span style="font-family:monospace,monospace">QL Maestro PHP Generator. </span></div><div><span style="font-family:monospace,monospace"><br></span></div><div><font face="monospace, monospace">And it probably could be done without even taking recourse to Ur/Web's JavaScript FFI.</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">As a FRP beginner myself, I don't think I could figure out the correct idioms on my own, so I hope to eventually find some more pointers on this.</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">But maybe someone could at least confirm whether the approach outlines above would be in the right direction? </font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">Would it make sense to start with something like the functions mentioned above, and then build onto that using syntax involving 'dyn', 'source', 'signal', 'set', and some kind of handler reacting to user keystrokes?</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace">Thank you for any help.</font></div><div><font face="monospace, monospace"><br></font></div><div><font face="monospace, monospace"><br></font></div></div>