Example simple form with model overrides

From W3C XForms Group Wiki (Public)

Describe Example simple form with model overrides here.


~-

<?xml version="1.0" encoding="utf-8" ?>
<html
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:br="http://www.x-port.net/bindingresolver/"
	xmlns:xf="http://www.w3.org/2002/xforms"
	xmlns:sxf="http://www.w3.org/2008/simplexforms"
	xmlns:xs="http://www.w3.org/2001/XMLSchema"
>
	<head>
		<title>Simple XForms</title>
	</head>

	<body>
		<h1>Construct XForms MVC from simple HTML-like forms</h1>
		
		<!-- form as authored... -->
		
		<sxf:form method="..." action="..." src="..."> 
			<xf:bind nodeset="field2" calculate="../field1 + 50" />  <!-- additive to implied model -->
			
			<xf:input ref="field1">
				<xf:label>Field 1:</xf:label>
			</xf:input>
			
			<xf:output ref="field1">
				<xf:label>Field 1 echo:</xf:label>
			</xf:output>
			
			<xf:output ref="field2">
				<xf:label>Field 2:</xf:label>
			</xf:output>
			
			<xf:trigger>
				<xf:label>Set field 2</xf:label>
				<xf:action ev:event="DOMActivate">
					<xf:setvalue ref="field2">300</xf:setvalue>
				</xf:action>
			</xf:trigger>
						
			<xf:submit> <!-- additional submission attributes could go here -->
			  <xf:label>Submit</xf:label>
			</xf:submit>
		</sxf:form>			
		
		<!-- implied model as generated... -->
		
		<xf:model id="model_one">
			<xf:instance src="from form element"> <!-- provides default values as though inlined in form -->
				<instanceData xmlns="">
					<field1>100</field1>
					<field2>200</field2>
				</instanceData>
			</xf:instance>
			
			<xf:bind nodeset="field2" calculate="../field1 + 50" />
			
			<xf:submission id="submit1" method="from form" action="from form" />
		</xf:model>	
		
		<!-- UI as generated -->

		<xf:group model="model_one"> 
			
			<xf:input ref="field1">
				<xf:label>Field 1:</xf:label>
			</xf:input>
			
			<xf:output ref="field1">
				<xf:label>Field 1 echo:</xf:label>
			</xf:output>
			
			<xf:output ref="field2">
				<xf:label>Field 2:</xf:label>
			</xf:output>
			
			<xf:trigger>
				<xf:label>Set field 2</xf:label>
				<xf:action ev:event="DOMActivate">
					<xf:setvalue ref="field2">300</xf:setvalue>
				</xf:action>
			</xf:trigger>
						
			<xf:submit> 
			  <xf:label>Submit</xf:label>
			</xf:submit>
		</xf:group>	

	</body>
</html>

-~