implementing forms and form renderers in the open source portfolio
DESCRIPTION
Implementing Forms and Form Renderers in the Open Source Portfolio. David McPherson, Chris Maurer Will Trillich, Janice Smith Materials by Sean Keesler. Objectives. Understand the XML technology stack (XML, XSD, XSL) Understand the role of XSD and XSL in OSP forms - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/1.jpg)
Implementing Formsand Form Renderers
in the Open Source PortfolioDavid McPherson, Chris Maurer
Will Trillich, Janice SmithMaterials by Sean Keesler
![Page 2: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/2.jpg)
Objectives• Understand the XML technology stack (XML,
XSD, XSL)• Understand the role of XSD and XSL in OSP
forms• Understand how to manipulate form schema
in an XML IDE• Be able to capture the stored XML from an
OSP form• Be able to change a form’s appearance
through form schema and XSL renderers
July 2009 210th Sakai Conference - Boston, MA, U.S.A.
![Page 3: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/3.jpg)
Form Design and Use
![Page 4: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/4.jpg)
THE XML TECHNOLOGY STACKA little background…
July 2009 10th Sakai Conference - Boston, MA, U.S.A. 4
![Page 5: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/5.jpg)
XML
• A “Correct” XML document is a text file that is:• Well formed • Opening and closing tags that do not overlap
• Optionally validated against a set of rules• DTD and XML Schema
July 2009 10th Sakai Conference - Boston, MA, U.S.A. 5
![Page 6: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/6.jpg)
Parts of a Form XML document
• File MetaData• File ID and Display Name• Created and modified dates
• Structured Data• The form data for each field
• Schema information• Instructions and validation rules
• CSS information for styling
July 2009 10th Sakai Conference - Boston, MA, U.S.A. 6
![Page 7: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/7.jpg)
Explore Form XML in Oxygen IDE
• You do it!• Open “sampleFormXML.xml”• Identify the parts of the XML document• Identify what fields were filled out• Identify the form instructions when this form
was completed• Use OxygenXML to identify the set of
elements in the XML to get the “displayName” of this file
July 2009 10th Sakai Conference - Boston, MA, U.S.A. 7
![Page 8: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/8.jpg)
XPATH
• Expressions that are used by many technologies (including XSLT) to specify one or more parts of an XML document (a node set) that meet a set of conditions
• Can be an absolute path:• /formView/formData/artifact/metaData/
repositoryNode/created
July 2009 10th Sakai Conference - Boston, MA, U.S.A. 8
![Page 9: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/9.jpg)
XPATH
July 2009 10th Sakai Conference - Boston, MA, U.S.A. 9
Can be an absolute path:/formView/formData/artifact/metaData/repositoryNode/created
… refers to:“<created>Thu Jul 02 17:03:00 UTC 2009</created>”
![Page 10: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/10.jpg)
XPATH
• Can be a relative PATH:../../displayName
July 2009 10th Sakai Conference - Boston, MA, U.S.A. 10
…refers to “<displayName>Test Feedback</displayName>”
if used from the “created” element
![Page 11: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/11.jpg)
XPATH
• Can include conditions in “predicates”//element[@name=‘value’]/
• …refers to all “element” node sets that have their “name” attribute set to “value”
July 2009 10th Sakai Conference - Boston, MA, U.S.A. 11
![Page 12: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/12.jpg)
Finding an XPATH with OxygenXML
July 2009 10th Sakai Conference - Boston, MA, U.S.A. 12
XPATH expressions can be generated and tested by using the XPATH functionality in Oxygen
![Page 13: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/13.jpg)
XPATH
• You do it!• Find the XPATH to the <displayName>
element of the formView XML• Generate an XPATH expression that will refer
to the “value” field in the form’s structured data• Generate an XPATH expression that will refer
to the last date the form data was modified
July 2009 10th Sakai Conference - Boston, MA, U.S.A. 13
![Page 14: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/14.jpg)
What is an XML Schema?
• An XML document• Describes other XML data files• Structure• Data types• Data validation rules
• Provides a means to “validate” another XML document
14
![Page 15: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/15.jpg)
XSD Example
Form requirements:3 fields• Evaluation – Numeric value from 0 – 3• “Short” Rich text field – 1200 characters
max• Rich text field – “no limit”
July 2009 10th Sakai Conference - Boston, MA, U.S.A. 15
![Page 16: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/16.jpg)
XSD Example• One way to represent the “Value” field<xs:element name="value"><xs:simpleType><xs:restriction base="xs:integer"><xs:minInclusive value="0"/><xs:maxInclusive value="3”/></xs:restriction></xs:simpleType></xs:element>
July 2009 10th Sakai Conference - Boston, MA, U.S.A. 16
![Page 17: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/17.jpg)
XSD in OSP
• XSD describes “valid” dataAND
• Provides information to form presentation tool about how to render the HTML form
• Uses “ospi” extensions• Form field labels and descriptive text • Use of rich text editor• “Subform keys”
July 2009 10th Sakai Conference - Boston, MA, U.S.A. 17
![Page 18: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/18.jpg)
XSD in OSP Examples
This XSD snippet:<xs:element name="value" minOccurs="0">
<xs:annotation><xs:documentation source="ospi.label">Evaluation </xs:documentation>
</xs:annotation><xs:simpleType>
<xs:restriction base="xs:string"><xs:enumeration value="3"></xs:enumeration><xs:enumeration value="2"></xs:enumeration><xs:enumeration value="1"></xs:enumeration><xs:enumeration value="0"></xs:enumeration>
</xs:restriction></xs:simpleType>
</xs:element>
July 2009 10th Sakai Conference - Boston, MA, U.S.A. 18
Produces this HTML form field:
![Page 19: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/19.jpg)
Explore XSD in OSP• You do it!• Open “schemaEnumeratedTextValue.xsd”• Identify the form elements and validation rules• Change the “value” scale to include 5 values• Reorder the fields so that the “value” field is last
on the form• Make the “value” a required field• Add a new field that prompts user for an
evaluation date of the type “xs:date”• Create a new form with this new schema and
see the results by “Previewing” the form.
July 2009 10th Sakai Conference - Boston, MA, U.S.A. 19
![Page 20: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/20.jpg)
Questions about:
XMLXSD
XPATH
July 2009 10th Sakai Conference - Boston, MA, U.S.A. 20
![Page 21: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/21.jpg)
FORM RENDERING LOGIC
![Page 22: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/22.jpg)
An XSL Primer
• An XML document can be “transformed” into a new XML document by a set of instructions written in XSLT (Extensible Stylesheet Language Transformation)
• Sakai includesXalanJ - an XSLT processor
![Page 23: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/23.jpg)
A “passthrough” XSL file
• Instructs the XSL processor to send a copy of the input as its output.
• Useful because we have no way to see the raw XML “behind the scenes” that we want to transform.
• Included in handouts as “passthrough.xsl”
23
![Page 24: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/24.jpg)
Passthrough XSL
• Note the use of the XPATH expression in the match attribute
• Specifies we are taking a “copy-of” everything below the “root element”
July 2009 10th Sakai Conference - Boston, MA, U.S.A. 24
![Page 25: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/25.jpg)
Form Rendering XSL
• When Sakai renders a form, it assembles an XML document behind the scenes.
• Form XML is rendered using the default renderers (formCreate.xslt/formFieldTemplate.xslt) or your custom renderers.
• Use a “passthrough” xsl as a custom renderer to capture the raw form XML
• Use that as your XML input in an XML IDE to create your own form renderers.
![Page 26: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/26.jpg)
Capture “Raw” form XML • You do it!• Create a form using the the “practice” schema in your
handouts. Upload the passthrough XSL file to resources and use it as a form view renderer for this form.
• Fill the form out in resources.• Click on the form name in resources• Capture the form XML (you need to “view source” since it
isn’t HTML).• Copy and paste it into a new XML document in Oxygen• Use Oxygen “Format and Indent” ( ) feature to format
the file.• Save the file as “formPassthrough.xml”
26
![Page 27: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/27.jpg)
“Import” Rather than “Include”
• The default formCreate.xslt renderer “includes” the formFieldTemplatestylesheet.
• If you want fields to be rendered differently than the defaults, import formFieldTemplate.xslt and override form field templates locally.
• Use “customFormCreate.xslt” from the handouts.
27
![Page 28: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/28.jpg)
Oxygen and XSL
• Oxygen is shipped with XalanJ• “Transformation Scenarios” can be
established to transform one XML document with an XSL stylesheet
• Allows for quicker iterative development than repeatedly uploading your XSL stylesheets into Sakai
28
![Page 29: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/29.jpg)
Configure Transformation Scenario• Start with the document
you wish to transform• Establish a new project
scenario• Inputs
• XML URL: ${currentFileURL} (the default)
• XSL URL: browse to locate your new stylesheet
• Transformer: Xalan• Extensions: add the xslt-
façade.jar (in handouts)
July 2009 10th Sakai Conference - Boston, MA, U.S.A. 29
![Page 30: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/30.jpg)
Configure a Transformation Scenario
• Outputs:• Save As: “out.html”• “Open in Browser”
and “Saved File”: if you want to view it in a browser
• “Open in Editor” to view the XML output
July 2009 10th Sakai Conference - Boston, MA, U.S.A. 30
![Page 31: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/31.jpg)
Create a Custom Form Renderer
• Watch me! • Using the “practice” form from earlier• Set up a scenario with the raw XML and the
“formCustomCreate.xslt” in the handouts• Add a prompt for the “shortText” field and view
the results of a transformation.• Switch the “import” of the formFieldTemplate to
import from Sakai rather than your desktop.• Upload the file and attach it as your custom
renderer for this form.
July 2009 10th Sakai Conference - Boston, MA, U.S.A. 31
![Page 32: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/32.jpg)
Create a Custom Form Renderer
• You do it! • Using the “practice” form from earlier• Set up a scenario with the raw XML and the
“formCustomCreate.xslt” in the handouts• Add prompts for the “description” and “value” fields
only and view the results of a transformation• Change their order and transform it.• Add descriptive text somewhere on the form about
the meaning of each “value” and transform it.• Upload the new renderer and attach it as your custom
renderer for this form.
July 2009 10th Sakai Conference - Boston, MA, U.S.A. 32
![Page 33: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/33.jpg)
Other Ideas for Renderers
• Adding your own CSS files to change the look of a form
• Attachment of custom JavaScript files to change the form behavior
• Addition of “default” text to form fields• Others?
July 2009 10th Sakai Conference - Boston, MA, U.S.A. 33
![Page 34: Implementing Forms and Form Renderers in the Open Source Portfolio](https://reader036.vdocuments.site/reader036/viewer/2022070404/56813bd4550346895da4f913/html5/thumbnails/34.jpg)
Questions about:
OxygenXMLXSL
Form rendering processForm renderers
July 2009 10th Sakai Conference - Boston, MA, U.S.A. 34