<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xf="http://www.w3.org/2002/xforms" xmlns:ev="http://www.w3.org/2001/xml-events">
   <head>
      <title>Incremental Model Loading</title>
      <style type="text/css">
            @namespace xf url("http://www.w3.org/2002/xforms");
            body {font-family: Helvetica, sans-serif;}
        /* style each individual tab */
        #tab-bar xf|trigger {
        color: black;
        border: 3px outset gray; 
        border-bottom: none;
        font-weight: bold;
        margin-right: 5px;
        padding: 0.2em;
        /* round the top corners - works only with FireFox */
        -moz-border-radius: .5em .5em 0em 0em;
        }
 
        .log {
        background: lavender;
        border: solid blue 1px;
        padding: 3px;
        }
        </style>
      <xf:model>
         <!-- unconditionally loaded when the form loads -->
         <xf:instance id="people" src="people.xml">
            <null />
         </xf:instance>
         <xf:instance id="places">
            <null />
         </xf:instance>
         <xf:submission id="get-places" method="get" action="places.xml" replace="instance" instance="places" />
         <xf:instance id="things">
            <null />
         </xf:instance>
         <xf:submission id="get-things" method="get" action="things.xml" instance="things" replace="instance" />
         <xf:instance xmlns="" id="log">
            <data>
               <event>log initialized</event>
            </data>
         </xf:instance>
      </xf:model>
   </head>
   <body>
      <h1>Incremental Model Loading</h1>
      <p>Each tab will independantly load its model data.  Only the first tab has the data loaded when
    the form starts up.  The log file will show that the data for each tab is only loaded a single time reguardless
    of how many times you select that tab.</p>
      <div id="tab-bar">
         <xf:trigger appearance="minimal">
            <xf:label>People</xf:label>
            <xf:toggle case="people-case" ev:event="DOMActivate" />
         </xf:trigger>
         <xf:trigger appearance="minimal">
            <xf:label>Places</xf:label>
            <xf:toggle case="places-case" ev:event="DOMActivate" />
         </xf:trigger>
         <xf:trigger appearance="minimal">
            <xf:label>Things</xf:label>
            <xf:toggle case="things-case" ev:event="DOMActivate" />
         </xf:trigger>
      </div>
      <xf:switch>
         <xf:case id="people-case">
            <h2>People</h2>
            <xf:group ref="instance('people')">
               <xf:repeat nodeset="person">
                  <xf:output ref="name" />
               </xf:repeat>
            </xf:group>
         </xf:case>
         
         <xf:case id="places-case">
             <xf:action ev:event="xforms-select" if="not(instance('places')/place)">
               <xf:send submission="get-places"/>
               <xf:insert nodeset="instance('log')/event" at="last()" position="after" />
               <xf:setvalue ref="instance('log')/event[last()]" value="'loading places into model'" />
            </xf:action>
            <h2>Places</h2>
              <xf:group ref="instance('places')">
               <xf:repeat nodeset="place">
                  <xf:output ref="name" />
               </xf:repeat>
            </xf:group>
         </xf:case>
         
         <xf:case id="things-case">
            <xf:action ev:event="xforms-select" if="not(instance('things')/item)">
               <xf:send submission="get-things"/>
               <xf:insert nodeset="instance('log')/event" at="last()" position="after" />
               <xf:setvalue ref="instance('log')/event[last()]" value="'loading things into model'" />
            </xf:action>
            <h2>Things</h2>
            <xf:group ref="instance('things')">
               <xf:repeat nodeset="item">
                  <xf:output ref="name" />
               </xf:repeat>
            </xf:group>
         </xf:case>
      </xf:switch>
      
      <div class="log">
      <span>Event Log:</span>
      <xf:repeat nodeset="instance('log')/event">
         <xf:output ref="." />
      </xf:repeat>
      </div>
   </body>
</html>
