[deng-dev] styling the <repeat> toolbar

[Claus W. <cl...@co...>]

for the archives:

the <repeat> toolbar

this is a hack, as we are not able to render unrolled repeats yet (this 
is due to a missing live dom in deng, and planned for the 1.5 release). 
so for now we add a toolbar to the repeat element, allowing the user to 
browse the items and see the current index and total number of items.

the <repeat> toolbar is internally created from this markup:

<table class='_xforms_repeat'
    xmlns='http://www.w3.org/1999/xhtml'
    xmlns:dengxf='http://www.w3.org/2002/xforms/cr'
    xmlns:dengev='http://www.w3.org/2001/xml-events'>
  <tr>
   <!-- "prev" trigger -->
   <td class='_xforms_repeat_td_prev'>
    <dengxf:trigger>
     <dengxf:label>&lt;</dengxf:label>
     <dengxf:setindex repeat='$rI'
        index='if(index(\"$rI\")=1,1,index(\"$rI\")-1)'
        dengev:event='click'/>
    </dengxf:trigger>
   </td>
   <!-- current index -->
   <td class='_xforms_repeat_td_index'>
    <dengxf:output value='index(\"$rI\")' />
   </td>
   <!-- "of" -->
   <td class='_xforms_repeat_td_of'><span>of</span></td>
   <!-- total -->
   <td class='_xforms_repeat_td_total'>
    <dengxf:output value='last()' />
   </td>
   <!-- "next" trigger -->
   <td class='_xforms_repeat_td_next'>
    <dengxf:trigger>"
     <dengxf:label>&gt;</dengxf:label>
     <dengxf:setindex repeat='$rI'
        index='if(index(\"$rI\")=last(),last(),index(\"$rI\")+1)'
        dengev:event='click'/>
    </dengxf:trigger>
   </td>
  </tr>
</table>

it thus can be styled by css.
here's a default stylesheet for the repeat toolbar:
http://claus.packts.net/css/deng_xforms.css

real life example using repeat:
http://claus.packts.net/deng/deng_test.php?f=examples/xforms/foaf/foaf.html
css used in this example:
http://claus.packts.net/deng/examples/xforms/foaf/foaf.css

that very same example, ignoring all author styles and adding the 
default stylesheet for the repeat toolbar as user stylesheet:
http://claus.packts.net/deng/deng_test.php?f=examples/xforms/foaf/foaf.html&u=/css/deng_xforms.css&ias=1

cheers,
claus.
côdeazur.com

[Announcement: DENG Developer Chat on July 1st, co-hosted by Steven 
Pemberton (chair of the W3C XHTML and XForms working groups). Details: 
http://claus.packts.net/w3blog/index.php?id=109]