Re: [Xsltforms-support] xsltforms 1.6 - the standalone form example
Brought to you by:
alain-couthures
Menu
▾
▴
Re: [Xsltforms-support] xsltforms 1.6 - the standalone form example
|
From: Alain C. <ala...@ag...> - 2022-11-27 10:37:38
|
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
Hello Habs,
</div>
<div class="default-style">
</div>
<div class="default-style">
First, please let me explain what made a standalone form possible:
</div>
<div class="default-style">
</div>
<div class="default-style">
Because XForms Specifications define their own elements to be mixed within some host language such as HTML, any XForms implementation to be used within a web browser has to HTML elements and attributes. Since XSLTForms 1.5, HTML5 custom elements have replaced plenty of DIVs and SPANs. Such custom elements are immediate images of XForms ones ("xf:*" becoming "xforms-*") but various sub elements had to be been introduced (such as "xforms-body", "xforms-repeat-item", ...) and extra attributes too (such as "xf-bound" which allows CSS styling without Javascript instructions). These sub elements and extra attributes are XSLTForms specific and they are added automatically when constructing the form with Javascript.
</div>
<div class="default-style">
</div>
<div class="default-style">
As a consequence, the new XSLT stylesheet is much lighter and, because XPath parsing is now also performed in Javascript, it is even faster. Because NodeJS is currently used to develop XSLTForms, a Javascript function was easily written to mimic the new transformation from XHTML+XForms to HTML5.
</div>
<div class="default-style">
</div>
<div class="default-style">
This new approach also allows authors to directly write forms in HTML5 pages with an XForms-like syntax so the initial XSLT transformation has not to be performed at client-side (there is always a blank page effect when the browser XSLT engine is running and some browsers don't support XSLT 1.0!) nor at server-side (which has always to be powerful enough for all its clients).
</div>
<div class="default-style">
</div>
<div class="default-style">
BTW, it is now also possible, with Javascript only, to read and write local files with file pickers. So, any machine can store files and open them with a browser. With embedded minified "xsltforms.css" and "xsltforms.js", within an HTML5 page with XSLTForms custom elements, a form can be fully executed locally with its own data. Saving modified instances in local files is an option but it could be required to load them back when using the form again. XSLTForms comes with a specific function named "form-source()" to save the source elements of the form with modified instance data into a standalone file to be reopened later.
</div>
<div class="default-style">
</div>
<div class="default-style">
XSLTForms 1.6 does not include a simple form to load an XForms file, transform it to (X)HTML5+custom elements, and save it as a standalone file. Is it what you are looking for?
</div>
<div class="default-style">
</div>
<div class="default-style">
About your questions:
</div>
<div class="default-style">
</div>
<div class="default-style">
1) A standalone form could, as well, be written in XHTML5. It appears that "document.documentElement.outerHTML" (used by the "form-source()" function) is returning serialized well-formed XML for an XHTML5 page: this should work (not tested)!
</div>
<div class="default-style">
</div>
<div class="default-style">
2) Minified "xsltforms.js" and "xsltforms.css" are, of source, lighter but they could be replaced by original ones. If they are in separate local files, it means that the browser has to load them itself. This has not been tested yet but there might security issues blocking this.
<br>These minified sources have not yet been tested for XHTML insertion and issues about <, > and & characters, or CDATA separators, are surely to be fixed.
</div>
<div class="default-style">
</div>
<div class="default-style">
3) Instance data can be saved, as well, using "resource='file:'" (the Javascript File API does not allow to provide a filename to be used but forces use of file pickers).
</div>
<div class="default-style">
</div>
<div class="default-style">
Kind regards,
</div>
<div class="default-style">
</div>
<div class="default-style">
--Alain
</div>
<blockquote type="cite">
<div>
Le 23/11/2022 20:44 CET, Habs <<a href="mailto:ge...@us...">ge...@us...</a>> a écrit :
</div>
<div>
</div>
<div>
</div>
<div>
hello supportlist, Alain
</div>
<div>
</div>
<div>
re: hello-standalone.htm
</div>
<div>
</div>
<div>
At the moment, I am not understanding well enough the method(s) and
</div>
<div>
technology used to save the whole form in the above example form supplied
</div>
<div>
with 1.6, so please forgive me when I ask the following.
</div>
<div>
</div>
<div>
The example standalone form is HTML (html5).
</div>
<div>
</div>
<div>
The forms I tend to use are XHTML forms (1.0 strict), using the v1.6
</div>
<div>
xsltforms.xsl in a processing instruction at the top (client side
</div>
<div>
transformation) and with the data instance and the styles pulled in from
</div>
<div>
externally linked files. These forms work well.
</div>
<div>
</div>
<div>
1) is it possible to replicate the standalone html form example in an
</div>
<div>
xhtml based form ie. saving the whole xhtml form ?
</div>
<div>
</div>
<div>
2) if the answer to 1) is yes, then is it possible to put the script and
</div>
<div>
style sections in separate files (rather than in the xhtml form file) and
</div>
<div>
if someone has a quick and dirty example that would be excellent ?
</div>
<div>
</div>
<div>
3) out of interest, is it possible to save just the instance data and not
</div>
<div>
the whole form in either the standalone example or in the xhtml ?
</div>
<div>
</div>
<div>
As a test so far, I pinched the 'submission' from the standalone example
</div>
<div>
and hooked it up in an existing xhtml form to a submit button. I was
</div>
<div>
expecting that the necessary functionality used directly coded in the
</div>
<div>
standalone form header, would be in the xsltforms.js via the xsltforms.xsl
</div>
<div>
transform and would therefore work without much alteration of the existing
</div>
<div>
xhtml forms used.
</div>
<div>
</div>
<div>
</div>
<div>
It did not work out, with this error prior to the 'file save' dialogue
</div>
<div>
being shown, where 'saving' saved nothing:
</div>
<div>
</div>
<div>
</div>
<div>
XSLTForms Exception
</div>
<div>
--------------------------
</div>
<div>
</div>
<div>
Error evaluating the following XPath expression :
</div>
<div>
</div>
<div>
form-Source()
</div>
<div>
</div>
<div>
TypeError
</div>
<div>
</div>
<div>
this.compiled is undefined
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
In the interim from sending this message, I will create a simplified
</div>
<div>
bare-bones xhtml and test to see if I can get it to work.
</div>
<div>
</div>
<div>
What I do know already is that the style and script content in the
</div>
<div>
standalone example form, leave the xhtml based form as not well-formed ...
</div>
<div>
even when enclosed in a CDATA block.
</div>
<div>
</div>
<div>
</div>
<div>
Regards
</div>
<div>
Habs
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
--- Sent using Alpine/Pine, probably the best MUA ---
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
_______________________________________________
</div>
<div>
Xsltforms-support mailing list
</div>
<div>
<a href="mailto:Xsl...@li...">Xsl...@li...</a>
</div>
<div>
<a href="https://lists.sourceforge.net/lists/listinfo/xsltforms-support" target="_blank" rel="noopener">https://lists.sourceforge.net/lists/listinfo/xsltforms-support</a>
</div>
</blockquote>
</body>
</html>
|
