Server-driven UI

> > >

Server-driven applications are one way to design rich web applications. Instead of having the client handle all the data and UI presentation, letting the server drive means that the client can be much more of a dumb terminal. This style of application can be very useful when designing very dynamic applications where it would be impossible have all the UI information resident on the client.

Many application will need to employ both a a client-centric and a server-driven application.

Example Application

Take a product configurator application where the user is presented a wizard like UI. One the first screen the user will pick a product from a list of 1000. Then based on the product choice, the next several screens will give the users configuration options of the products.

In our sample we only have three products but if this was a "Home Depot" application, it would have 10,000+ products that could easily be looked up and configured.

Step 1 of 2

Choose your product

Configure Product

 
<script>
function forward(){
    var pString = dojo.byId("product").value;
    dojoe.includeRequest({url:"markup/"+pString+".xml"}, 
               "div[id='configure']", "replace-children");
}
</script>
<table width="100%" height="100%">
<tr><td valign="middle" align="center"
<script type="dojoe/xml" dojoType="dojoe.XmlScript">
   <ui>
      <dojox.widget.Wizard id="wizard2" hideDisabled="true" 
            style="width: 50%; height: 200px;" onForward="forward()">
		<dojox.widget.WizardPane>
			<h1>Step 1 of 2</h1>
			Choose your product
			<div><select id="product">
			<option value="wrench">Wrench</option>
			<option value="screwdriver">Screw driver</option>
			<option value="hammer">Hammer</option>
			</select></div>
		</dojox.widget.WizardPane>
		<dojox.widget.WizardPane>
			<h1>Configure Product</h1>
			<div id="configure"></div>
		</dojox.widget.WizardPane>
     </dojox.widget.Wizard>
   </ui>
</script>	
</td></tr></table>