Xform implementation screenshots

I've shown a few people my js/dom xforms implementation now - and have
got favourable feedback. I'm just working on obfuscating the inner
workings of the engine a bit - then I'll put up some public demos. For
now here are some screenshots:

Here is a picture of my current demo running under IE6:

http://www.ripcord.co.nz/demo.gif

Same page running under Mozilla 1.3:

http://www.ripcord.co.nz/demo-moz.gif

My implementation of the xforms spec is mostly complete, I will be
licensing the technology on a per-domain basis. Contact me for further
information.

As an aside: I posted some thoughts I had about XSD's to
www.ripcord.co.nz.

Here is the partial source to the demo listed above:

	<xforms:bind id="subtotalIncome"
calculate="concat('$',sum(/loan/income/value[.>0]))" />
	<xforms:bind id="subtotalExpense"
calculate="concat('$',sum(/loan/expense/value[.>0]))" />
	<xforms:bind id="customername"
calculate="concat(/loan/customer/firstName,' ',/loan/customer/lastName)"
/>
	
	<div style="width: 66%; padding: 20px; border-right: 3px outset;
border-bottom: 3px outset; background: buttonface;">
		<h3>Data entry for <xforms:output
bind="customername"/></h3>
		
		<h5>Customer details:</h5>
		
		<div xmlns="http://www.w3.org/2002/xforms/cr"
class="indent">
			<input ref="/loan/customer/firstName">
				<label style="font-weight: bold">First
name:</label>
			</input>
			
			<input ref="/loan/customer/lastName">
				<label>Last name:</label>
			</input>
			
			<input ref="/loan/customer/preferredContact">
				<label>Preferred contact method:</label>
			</input>
			
			<input style="width: 250px"
relevant="/loan/customer/preferredContact='E-mail'"
ref="/loan/customer/email">
				<label>Email address:</label>
			</input>
			
			<input ref="/loan/customer/phone"
relevant="'false'">
				<label>Phone number:</label>
			</input>

			<input ref="/loan/customer/fax"
relevant="/loan/customer/preferredContact='Phone'">
				<label>Fax number:</label>
			</input>
			
		</div>
		
		<h5>Living address:</h5>
		
		<div class="indent"
xmlns="http://www.w3.org/2002/xforms/cr">
			<input style="width: 40px"
ref="/loan/customer/address/streetNumber">
				<label>Street address:</label>
			</input>
			<input style="width: 200px"
ref="/loan/customer/address/streetName"/>
			<select style="width: 100px"
ref="/loan/customer/address/streetType"/>

			<input style="width: 346px"
ref="/loan/customer/address/suburb">
				<label>Suburb:</label>
			</input>
			
			<input style="width: 50px"
ref="/loan/customer/address/postCode">
				<label>Postcode:</label>
			</input>
			
			<input ref="/loan/customer/address/city">
				<label>City:</label>
			</input>
			
			<select ref="/loan/customer/address/state">
				<label>State:</label>
			</select>
		</div>
			
		<h5>Monthly Income:</h5>
		
		<table class="order">
			<thead>
				<tr>
					<td>Income source</td>
					<td>Value</td>
				</tr>
			</thead>
			<tbody>
				<xforms:repeat nodeset="/loan/income">
					<tr>
						<td>
							<xforms:select
style="width: 300px" ref="incomeType"/>
						</td>
						<td>$<xforms:input
ref="value"/></td>
					</tr>
				</xforms:repeat>
			</tbody>	
			<tr>
				<td>
					<a
href="javascript:xforms.insert('/loan/income[position()=last()]')">Add
new item</a> |
					<a
href="javascript:xforms.remove('/loan/income[position()=last()]')">Remov
e last item</a>
				</td>
				<td style="font-weight: bold">
					Total: <xforms:output
bind="subtotalIncome"/>
				</td>
			</tr>
		</table>
		

Regards,
Ben Nolan

Phone: +6421 210 5200
Web: www.ripcord.co.nz

Received on Tuesday, 8 April 2003 00:40:18 UTC