[uf-rest] Microtemplates

[Stephen Farrell]

Hi Dan,

I have a prototype of exactly what you described, but I haven't 
documented or blogged about it yet.  The syntax is close to what you 
wrote, but a little simpler b/c I use the 'name' attribute instead of 
the 'class' attribute in form elements:

<fieldset class="vcard">
   <div>
     <label for="contact_name">Full Name</label>
     <input type="text" id="contact_name" name="fn" />
   </div>
   <div>
     <label for="contact_url">URL</label>
     <input type="text" id="contact_url" name="url" />
   </div>
   <div class="adr">
     <label for="contact_street_address">Street Address</label>
     <textarea id="contact_street_address" name="streetAddress"></textarea>
   </div>
</fieldset>

You also get a callback when something changes.

Also, the class attribute is still useful in forms, e.g.,

<select name="state" class="states">
  <option class="name"></option>
</select>

will use the value of "state" to select the current option, and in the 
callback.  It'll use the Array called "states" to populate the options.

All of the details of this mapping are in an extension called 
et4a-forms.js that's included in the zipfile distribution.

Dan Kubb wrote:
> -----BEGIN PGP SIGNED MESSAGE-----
> Hash: SHA1
> 
> Hi Stephen,
> 
>> I've been working on something lately I call "microtemplates" that might
>> be of interest to folks on this list.
> 
> I think this is a really cool idea.  I can see some definite uses with AJAX
> enabled applications.
> 
> What would be nice is if it did what you suggest, but it also had some 
> knowledge
> of how to pre-fill HTML forms.  So given a data structure like:
> 
> {vcard:{fn:"John Doe",url:"http://example.com"},adr:{streetAddress: "123 
> Main Street"}}}
> 
> And a template like this:
> 
> <fieldset class="vcard">
>   <div>
>     <label for="contact_name">Full Name</label>
>     <input type="text" class="fn" id="contact_name" name="contact[name]" />
>   </div>
>   <div>
>     <label for="contact_url">URL</label>
>     <input type="text" class="url" id="contact_url" name="contact[url]" />
>   </div>
>   <div class="adr">
>     <label for="contact_street_address">Street Address</label>
>     <textarea class="streetAddress" id="contact_street_address" 
> name="contact[street_address]"></textarea>
>   </div>
> </fieldset>
> 
> It could fill things in to make it look like this:
> 
> <fieldset class="vcard">
>   <div>
>     <label for="contact_name">Full Name</label>
>     <input type="text" class="fn" id="contact_name" name="contact[name]" 
> value="John Doe" />
>   </div>
>   <div>
>     <label for="contact_url">URL</label>
>     <input type="text" class="url" id="contact_url" name="contact[url]" 
> value="http://example.com" />
>   </div>
>   <div class="adr">
>     <label for="contact_street_address">Street Address</label>
>     <textarea class="streetAddress" id="contact_street_address" 
> name="contact[street_address]">123 Main Street</textarea>
>   </div>
> </fieldset>
> 
> - --
> 
> Thanks,
> 
> Dan
> __________________________________________________________________
> 
> Dan Kubb
> Autopilot Marketing Inc.
> 
> Email: dan.kubb at autopilotmarketing.com
> Phone: 1 (604) 820-0212
> Web:   http://autopilotmarketing.com/
> vCard: http://autopilotmarketing.com/~dan.kubb/vcard
> __________________________________________________________________
> 
> 
> 
> -----BEGIN PGP SIGNATURE-----
> Version: GnuPG v1.4.2.2 (Darwin)
> 
> iD8DBQFEaOom4DfZD7OEWk0RAnpNAKCqgI1dltxnWEt4MYSCu9O6nEbcmgCfQYXo
> JanK4BTaZd9/BxkD2k3wHsA=
> =33Kv
> -----END PGP SIGNATURE-----