Styling Orbeon XForms Inputs

If you Google styling of Orbeon XForms inputs, you will find some newsgroup discussions about using xhtml:class and xhtml:style attributes on your xforms:input elements rather than just class and style.

The trouble is that these are only marginally useful. This is because Orbeon applies the style and class to a SPAN that wraps the INPUT element. Many CSS properties can't be applied to SPANs.

Luckily CSS allows you to style child elements of an element. The solution then is to add something like the following to your stylesheet (this example produces narrow input elements):

.narrow input { width:20px }

and then apply xhtml:class="narrow" to the XForms element. This styles all input elements that are children of elements with class "narrow" to have a width of 20px. Problem solved.

Check out the following link: http://osdir.com/ml/web.xforms.ops.user/2006-12/msg00151.html

Separate Deployment of Orbeon

Orbeon Forms has the slickest implementation of XForms for now. However, integrating it with other apps is a bit rough around the edges. The first hurdle was figuring out how to capture submissions and load data (discussed in previous posts here). However we were still quite limited by the static pages served by Orbeon, so we had to find a way to have Orbeon process JSP output. There are actually two methods to achieve this; one merges the Orbeon application into an existing one, but this would be messy and hard to upgrade. The other uses filters to process the output of one application.

After almost a solid day of guess-and-test, Ben made Liferay's JSPs produce xhtml that get interpreted correctly by Orbeon's filter. This is known as the "separate deployment". He followed the instructions at:

http://www.orbeon.com/ops/doc/reference-xforms-java

But, the missing piece of information is that the order in which the filters are setup in Liferay's web.xml are important. In that file, Liferay already has a bunch of filters (about 160 lines worth). The orbeon OPSXFormsFilter must be inserted AFTER the last standard Liferay
filter. This is a problem because there are other filters that handle *.jsp for the whole app. If the filter chain is not assembled in the correct order, the "resource URL" is not correctly
passed to Orbeon, and the parser will not receive any xhtml.

Just for the record, this is the bit of web.xml code which enables Orbeon to filter xhtml inside Liferay:

<!-- Declare and configure the Orbeon Forms XForms filter -->
<filter>
<filter-name>ops-xforms-filter</filter-name>
<filter-class>
org.orbeon.oxf.servlet.OPSXFormsFilter
</filter-class>
<init-param>
<param-name>oxf.xforms.renderer.context</param-name>
<param-value>/orbeon</param-value>
</init-param>
</filter>
<!-- Any web resource under /xforms-jsp is processed by the XForms engine -->
<filter-mapping>
<filter-name>ops-xforms-filter</filter-name>
<url-pattern>/html/xforms-jsp/*</url-pattern>
</filter-mapping>
<!-- This is necessary so that XForms engine resources can be served appropriately -->
<filter-mapping>
<filter-name>ops-xforms-filter</filter-name>
<url-pattern>/orbeon/*</url-pattern>
</filter-mapping>

Ben also copied these libraries to Liferay's WEB-INF/lib, but only the one mentioned in the Orbeon doc may be necessary.

• orbeon-resources-private.jar
• orbeon-resources-public.jar
• orbeon-xforms-filter.jar
  

Removing the Prepended "/apps" from Orbeon submission action URLs

Just add f:url-norewrite="true" to the xforms:submission element. Then you can have an action that is on the same server but not inside the Orbeon context.

Orbeon XForms: Loading a form from Java

Go read the lengthy tutorial if you have time. Here's how to do it quickly. The basic idea is the same as saving-- use a submission in the model and an event-- but instead of using the post method you use the get method (btw, you can type any method name you like, but the webserver will throw a 405 error if it doesn't recognize it). Use a stock page-flow file and create this view.xhtml which will load data when the form loads (you can use a load button instead by combining this blog post with the previous one about linking a button to a submission event):

First off, lets get the header out of the way

<xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml"
      xmlns:xforms="http://www.w3.org/2002/xforms"
      xmlns:ev="http://www.w3.org/2001/xml-events"
      xmlns:xi="http://www.w3.org/2001/XInclude"
      xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
        xmlns:f="http://orbeon.org/oxf/xml/formatting"
        xsl:version="2.0">


  <xhtml:head>
        <xhtml:title>Test Save</xhtml:title>

Now I'm going to define a model for the data.

<xforms:model> 
        <xforms:instance id="main">
                <name/>
        </xforms:instance>

Before the model is done, we need to add a submission to the model.

   <xforms:submission id="load-submission" serialization="none"
                method="get"  
                action=
"http://192.168.1.18:8080/myApplication/LoadForm?instanceId=59&amp;processName=funfest&amp;tracingTag=59"
                replace="instance" instance="main"/>
     </xforms:model>
  <xhtml:head>
           <xforms:send ev:event="xforms-ready" submission="load-submission"/>

What this does is a "get" to the URL in the action. serialization="none" attribute specifies that you don't want to send XML instance data with this submission (I'm trying to load the form on startup so it would be pointless). The replace="instance" attribute specifies that the result of the submission has to be stored into an instance. The instance="books-instance" attribute specifies the identifier of the instance into which the result must be stored.

Now we need an event to fire when the page loads. "xforms-ready" is such an event.

        <xforms:send ev:event="xforms-ready" submission="load-submission"/>

You can submit to a static page to check your work if your Java isn't ready for it. Throw some XML into the static page and check the server log to make sure everything else went well.

Lets finish up the view.xhtml. We still need a body and a submit button.

  <xhtml:body>


        <f:xml-source>
              var1:  <xsl:copy-of select="doc('input:instance')"/>
        </f:xml-source>

        <xforms:input ref="/name">
                <xforms:label>Name:</xforms:label>
        </xforms:input>

  </xhtml:body>
</xhtml:html>

What should the XML I paste in my static file look like?

<?xml version="1.0" encoding="UTF-8"?>
<name xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:xxforms="http://orbeon.org/oxf/xml/xforms" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xforms="http://www.w3.org/2002/xforms" xmlns:f="http://orbeon.org/oxf/xml/formatting" xmlns:ev="http://www.w3.org/2001/xml-events">go go power rangers</name>

Whole lot of namespaces for not much data but it works...

Orbeon XForms: Submitting a form to Java

Orbeon has an excellent if lengthy tutorial that, for once, I can honestly say you should read. I really mean it. That said, once you've read it, you'll probably forget it a week later and not want to read it all again. So here is how to get saving working in an XForm (submitting to Java). Use a stock page-flow file and create this view.xhtml

First off, lets get the header out of the way

<xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml"
      xmlns:xforms="http://www.w3.org/2002/xforms"
      xmlns:ev="http://www.w3.org/2001/xml-events"
      xmlns:xi="http://www.w3.org/2001/XInclude"
      xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
        xmlns:f="http://orbeon.org/oxf/xml/formatting"
        xsl:version="2.0">


  <xhtml:head>
        <xhtml:title>Test Save</xhtml:title>

Now I'm going to define a model for the data.

<xforms:model> 
        <xforms:instance id="main">
                <name/>
        </xforms:instance>

Before the model is done, we need to add a submission to the model.

   <xforms:submission id="save-submission"
                method="post"  
                action=
"http://192.168.1.18:8080/myApplication/SaveForm?instanceId=59&amp;processName=funfest&amp;tracingTag=59"/>
     </xforms:model>
  <xhtml:head>

What this does is POST the XML of the instance to the URL in the action attribute. Now, the action is kind of funny. If you do not put an absolute URL with an IP, it will be relative to the apps directory of your Orbeon install. Which is annoying if you want to submit to another web application. I'm not sure how to get around this for now. Note that I also wanted to send parameters to the Java, so I had to use ampersand amp semicolon. There's probably a more elegant way.

You can submit to a static page as well to check your work if your Java isn't ready for it. Your browser just sees a blank page, and you can check the server log to make sure everything else went well.

Lets finish up the view.xhtml. We still need a body and a submit button.

  <xhtml:body>


        <f:xml-source>
              var1:  <xsl:copy-of select="doc('input:instance')"/>
        </f:xml-source>

        <xforms:input ref="/name">
                <xforms:label>Name:</xforms:label>
        </xforms:input>

        <xforms:submit submission="save-submission">
                <xforms:label>Save</xforms:label>
        </xforms:submit>

        <xforms:action ev:event="DOMActivate">
                <xforms:send submission="save-submission"/>
        </xforms:action>

  </xhtml:body>
</xhtml:html>

xforms:submit creates a submit button that references save-submission in the model. Then the xforms:action actually links when the button should fire an event. I don't really get how that works just yet, but if you don't have the action, clicking the button does nothing.

One more thing. How do I grab the XML in my Java? It's really easy.

String xmlData="blank";
BufferedReader in = new BufferedReader(request.getReader());
  while((inputLine = in.readLine()) != null){
          System.out.println(inputLine);
   xmlData+=inputLine;
  }
  in.close();

Just import java.io.BufferedReader. Saving it to Oracle is another post entirely.