2 XForms Getting Started
This chapter briefly describes XForms, but not all of the features of XForms is not described. For XForms Complete Description, please refer to subsequent documents. The following section provides a complete instance of the XForms application embedded in the XHTML document, instance in E.1 XForms in XHTML.
2.1 Separate the purpose or intent from the expression
A typical form is integrated with the integration of the data set, intended by creating an interactive expression instantiation that allows the user to provide the required information, and completes the form return result data.
intention
Expression
data
Data collection
Form control
registration message
Work time list
Collect user interface for working hours
Work days, hours
Shopping application
Shopping user interface
Order, transportation, payment information
Information Collection
WWW page integration form interface
User contact information
The HTML form cannot be separated from the expression, and only limited data captured by the form, the main advantages of XForms are listed below:
Stronger input
Submitted data is verified by code authentication, valid data automatically generated by the input verification rule, will help client authentication.
Existing architecture reuse
Using the XForms application can eliminate a copy and ensure that the update verification rules caused by changes within the business logic definition can not need to recreate the verification rules.
External architecture added
The XForms creator can provide additional constraints outside the basic constraint collection and as part of the XForms model while enhancing the global availability of the Web application results.
XML submission
The demand for custom server-side logic will be eliminated for the conversion of data, and the received XML instance document can be authenticated and processed directly by the application backend.
globalization
Apply an instance of XML 1.0 to ensure that the submitted data is international.
Enhanced availability
XForms separation content and expression, the user interface control encapsulates all relevant media data (such as: label), will enhance the availability of different form applications. XForms User Interface Controls are general, stand-alone.
Multi-device support
Advanced User Interface Controls and intention-based user interface creation makes users interact between different devices.
Announced event handle
Different from the current use of interactive scripts, multi-XForms documentation can be static by defining XML-based published event handles (such as: setfocus, message, and setvalue) suitable for general transactions.
2.2 Current Method: HTML
Assuming a simple HTML-based S e-commerce form is created as follows:
Example: HTML form
Ecommerce Form </ Title></p>
<p></ hEAD></p>
<p><body></p>
<p><form action = "http://example.com/submit" Method = "post"></p>
<p><Table Summary = "Payment Method Selector"></p>
<p><tr></p>
<p><TD> <P> SELECT Payment Method: </ P> </ td></p>
<p><TD> <label> <input type = "radio" name = "as" value = "cash" /> cash </ label></p>
<p><label> <input type = "radio" name = "as" value = "credit" /> credit </ label> </ td></p>
<p></ TR></p>
<p><tr></p>
<p><TD> <label for = "cc"> credit card number: </ label> </ td> <td> <input type = "text" name = "cc" ID = "cc" /> </ td></p>
<p></ TR></p>
<p><tr></p>
<p><TD> <label for = "exp"> eviration date: </ label> </ td></p>
<p><TD> <input type = "text" name = "exp" id = "exp" /> </ td></p>
<p></ TR></p>
<p><tr></p>
<p><TD COLSPAN = "2"> <input type = "submit" /> </ td></p>
<p></ TR></p>
<p></ table></p>
<p></ form></p>
<p></ body></p>
<p></ html></p>
<p>A user agent may display:</p>
<p>This form failed to be divided into the meaning of the meaning (data set), the result of the value of the value obtained, and the XForms is different, and XForms greatly enriches the connotation of the electronic form.</p>
<p>2.3 Transition to XForms</p>
<p>In the XForms syntax, the form consists of a unit (called: XForms model) that describes the form behavior and the unit that describes how the form is expressed. XForms 1.0 defined XForms user interface, Which is A device independent, platform independently suitable common-use form control collection, through the XForms binding mechanism, XForms model implements constraints to the user interface, this structure allows users to put their own users The interface is added to the XFORMS expression, the structure form is as follows:</p>
<p>The simplest form allows users to create new XForms form controls without implementing other units of forms, convert HTML forms to XForms form, need to define model elements within the head unit of the document:</p>
<p><XForms: Model></p>
<p><XForms: SubmitInfo Action = "http://examples.com/submit" ID = "Submit" /></p>
<p></ XForms: Model></p>
<p>With this conversion, the previous example can be written: (this example assumes the default XForms namespace prefix):</p>
<p><Selectone Ref = "AS"></p>
<p><Caption> SELECT payment method </ caption></p>
<p><choices></p>
<p><item></p>
<p><CAPTION> Cash </ CAPTION></p>
<p><value> Cash </ value></p>
<p></ item></p>
<p><item></p>
<p><Caption> Credit </ CAPTION></p>
<p><value> Credit </ value></p>
<p></ item></p>
<p></ choices></p>
<p></ selectone></p>
<p><Input Ref = "CC"></p>
<p><Caption> Credit Card Number </ CAPTION></p>
<p></ input></p>
<p><Input Ref = "Exp"> <CAPTION> Expiration Date </ CAPTION></p>
<p></ input></p>
<p><Submit Submitinfo = "Submit"></p>
<p><Caption> Submit </ CAPTION></p>
<p></ submit></p>
<p>This design has the following features:</p>
<p>The radio button is not difficult to encode, so it can be implemented on different devices (such as: Voice Browser) in an appropriate manner.</p>
<p>Form controls typically have associated headline elements (CAPTION), which is a key function designed to achieve ease of use.</p>
<p>Similar to the HTML language, the Form element cannot be used nested. (About the details of the creation multi-form document can be referred to 2.6 multi-form documentation)</p>
<p>Simplify the definition of the form control.</p>
<p>Data can be submitted in XML.</p>
<p>After the above change, the XFORMS processor can directly submit the XML instance data (INSTANCE DATA), the sub-node name of the XML instance data is defined by the form controls attribute REF, and the data submitted in this example may be as follows:</p>
<p><instancedata></p>
<p><as> credit </ as></p>
<p><CC> 1235467789012345 </ cc></p>
<p><exp> 2001-08 </ exp></p>
<p></ instancedata></p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-2289.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>)
</div><div></div></div></div><ul class="postlist list-unstyled">
</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="2289" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved
</div><div class="col text-right">Processed:
<b>0.041</b>, SQL:
<b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script>
var debug = DEBUG = 0;
var url_rewrite_on = 1;
var url_path = './';
var forumarr = {"1":"Tech"};
var fid = 1;
var uid = 0;
var gid = 0;
xn.options.water_image_url = 'view/img/water-small.png';
</script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = 'M8TTNubr8yUPB0uw1ysP_2BnTjOaKXUAFBMMaq4VVpp7EQjvfsFYa4hgad_2B7pmYTK3n1LnDhU93ov2ysTkQV7rJQ_3D_3D';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
function resize_image() {
var jmessagelist = $('div.message');
var first_width = jmessagelist.width();
jmessagelist.each(function() {
var jdiv = $(this);
var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width();
var jmessage_width = Math.min(jdiv.width(), maxwidth);
jdiv.find('img, embed, iframe, video').each(function() {
var jimg = $(this);
var img_width = this.org_width;
var img_height = this.org_height;
if(!img_width) {
var img_width = jimg.attr('width');
var img_height = jimg.attr('height');
this.org_width = img_width;
this.org_height = img_height;
}
if(img_width > jmessage_width) {
if(this.tagName == 'IMG') {
jimg.width(jmessage_width);
jimg.css('height', 'auto');
jimg.css('cursor', 'pointer');
jimg.on('click', function() {
});
} else {
jimg.width(jmessage_width);
var height = (img_height / img_width) * jimg.width();
jimg.height(height);
}
}
});
});
}
function resize_table() {
$('div.message').each(function() {
var jdiv = $(this);
jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>');
});
}
$(function() {
resize_image();
resize_table();
$(window).on('resize', resize_image);
});
var jmessage = $('#message');
jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); });
jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); });
$('#nav li[data-active="fid-1"]').addClass('active');
</script>
