Orbeon Forms community mailing list

Conditional rendering of HTML/XForms in xforms:repeat, testing node content

Classic

List

Threaded

3 messages Options

Henrik Pettersen

Conditional rendering of HTML/XForms in xforms:repeat, testing node content

All,

I have a general XForms question that I am hoping someone can help me with. Any help is greatly appreciated :-)

Background:
***************
I am trying to build an interactive expression builder.
1. The expression builder carries the state of where we are in the expression
2. The user can only take actions that are allowed by the grammar at the current state
3. Any updates to the expression causes an asynchronous call to the server to:
    a) update the expression state
    b) get the next allowable state transitions
4. The UI is updated to reflect a) and b) above (no page refresh)

But my problem is simpler than all that :-)

Problem:
************
How do I render a piece of html/xforms, if certain conditions are met?
The data the condition operate on come from a node value of an instance.
Also, the UI Components need to change without refreshing the page.

I have the following instance:
=======================
<xforms:instance id="expression">
    <aspic:claim>
        <aspic:id>-1</aspic:id>
         <aspic:expression></aspic:expression>
         <aspic:expectedTokens>
            <aspic:claimtoken>IDENTIFIER</aspic:claimtoken>
            <aspic:claimtoken>NEGATION</aspic:claimtoken>
        </aspic:expectedTokens>
    </aspic:claim>
</xforms:instance>

I have the following view:
====================
<div id="expression">
    <xhtml:span>Expression: <xforms:output ref="instance('expression')/aspic:expression"/></xhtml:span>
</div>
<div id="next-token">
    <xhtml:span>Next Allowed Tokens:</xhtml:span>
    <table>
        <xforms:repeat nodeset="instance('expression')/aspic:expectedTokens/aspic:claimtoken"
                       id="token-repeat">
            <tr>
                <td>
                    
                    
                        
                        
                    </!-- </xsl:if>

                    
                        
                        
                    </!-- </xsl:if>
                </td>
            </tr>
        </xforms:repeat>
    </table>
</div>

I looked into using switch/case (http://www.orbeon.com/blog/2006/04/), but it seems to only apply to events. (I am not sure how to relate switch/case to conditional tests when iterating through a xforms:repeat to display UI components. Clear as mud?)

How can I get this to work? Using XSLT is not going to work, as the UI components change every time we have a state change in the expression builder, without refereshing the page!

Anyone?

Thanks!

Sincerely,
Henrik Pettersen
Advanced Computation Laboratory
Cancer Research UK

--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws

Stephen Bayliss

RE: Conditional rendering of HTML/XForms in xforms:repeat, testing node content

Hi Henrik

Basically, it’s the “relevant” attribute on an xforms:bind element that will control that – if you take a look at the Credit Card Verifier example you should find something useful (http://www.orbeon.com/ops/goto-example/xforms-credit-card )

Steve

From: Henrik Pettersen [mailto:[hidden email]]
Sent: 16 August 2006 15:28
To: [hidden email]
Subject: [ops-users] Conditional rendering of HTML/XForms in xforms:repeat, testing node content

--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws

Henrik Pettersen

Re: Conditional rendering of HTML/XForms in xforms:repeat, testing node content

All,

actually, the solution was much simpler. Thank you, Stephen, for pointing me in the right direction :-)

I modified my instance like this:

<xforms:instance id="expression">
    <aspic:claim>
        <aspic:id>-1</aspic:id>
         <aspic:expression></aspic:expression>
         <aspic:nextToken>
             <aspic:token>IDN</aspic:token>
             <aspic:token>NEG</aspic:token>
         </aspic:nextToken>
         <aspic:identifier>aLocalidentifier</aspic:identifier>
         <aspic:identifier>cat</aspic:identifier>
         <aspic:identifier>dog</aspic:identifier>
         <aspic:variable>MyVariable</aspic:variable>
         <aspic:variable>VariableB</aspic:variable>
    </aspic:claim>
</xforms:instance>

I then added XForms:repeat:

...
<xforms:repeat nodeset="instance('expression')/aspic:nextToken" id="token-repeat">
...

Then, inside the xforms:repeat, I added the ref attribute to the <xforms:submit> element:

<xforms:submit ref="aspic:token[text()='IDN']" submission="next-token" appearance="xxforms:link" >

My disconnect was not realizing
1) I could use the ref attribute on the submit element
2) How I could select a nodeset with value 'IDN' in the 'select' or 'ref' attributes: [text()='IDN']
3) That pointing the submit element to an empty nodeset causes the element not to render

Hope someone else finds this usefull. Thanks, Stephen, for your help!

Henrik

On 8/16/06, Stephen Bayliss <[hidden email]> wrote:

Hi Henrik

Basically, it's the "relevant" attribute on an xforms:bind element that will control that – if you take a look at the Credit Card Verifier example you should find something useful (<a href="http://www.orbeon.com/ops/goto-example/xforms-credit-card" target="_blank" onclick="bluecoat_allow_popup=true;try{ return top.js.OpenExtLink(window,event,this) }finally{bluecoat_allow_popup=false;}">http://www.orbeon.com/ops/goto-example/xforms-credit-card )

Steve

From: Henrik Pettersen [mailto:[hidden email]]
Sent: 16 August 2006 15:28
To: [hidden email]
Subject: [ops-users] Conditional rendering of HTML/XForms in xforms:repeat, testing node content

All,

I have a general XForms question that I am hoping someone can help me with. Any help is greatly appreciated :-)

Background:
***************
I am trying to build an interactive expression builder.
1. The expression builder carries the state of where we are in the expression
2. The user can only take actions that are allowed by the grammar at the current state
3. Any updates to the expression causes an asynchronous call to the server to:
    a) update the expression state
    b) get the next allowable state transitions
4. The UI is updated to reflect a) and b) above (no page refresh)

But my problem is simpler than all that :-)

Problem:
************
How do I render a piece of html/xforms, if certain conditions are met?
The data the condition operate on come from a node value of an instance.
Also, the UI Components need to change without refreshing the page.

I have the following instance:
=======================
<xforms:instance id="expression">
    <aspic:claim>
        <aspic:id>-1</aspic:id>
         <aspic:expression></aspic:expression>
         <aspic:expectedTokens>
            <aspic:claimtoken>IDENTIFIER</aspic:claimtoken>
            <aspic:claimtoken>NEGATION</aspic:claimtoken>
        </aspic:expectedTokens>
    </aspic:claim>
</xforms:instance>

I have the following view:
====================
<div id="expression">
    <xhtml:span>Expression: <xforms:output ref="instance('expression')/aspic:expression"/></xhtml:span>
</div>
<div id="next-token">
    <xhtml:span>Next Allowed Tokens:</xhtml:span>
    <table>
        <xforms:repeat nodeset="instance('expression')/aspic:expectedTokens/aspic:claimtoken"
                       id="token-repeat">
            <tr>
                <td>
                    
                    
                        
                        
                    </!-- </xsl:if>

                    
                        
                        
                    </!-- </xsl:if>
                </td>
            </tr>
        </xforms:repeat>
    </table>
</div>

I looked into using switch/case (<a href="http://www.orbeon.com/blog/2006/04/" target="_blank" onclick="bluecoat_allow_popup=true;try{ return top.js.OpenExtLink(window,event,this) }finally{bluecoat_allow_popup=false;}">http://www.orbeon.com/blog/2006/04/), but it seems to only apply to events. (I am not sure how to relate switch/case to conditional tests when iterating through a xforms:repeat to display UI components. Clear as mud?)

How can I get this to work? Using XSLT is not going to work, as the UI components change every time we have a state change in the expression builder, without refereshing the page!

Anyone?

Thanks!

Sincerely,
Henrik Pettersen
Advanced Computation Laboratory
Cancer Research UK

--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: <a onclick="bluecoat_allow_popup=true;try{ return top.js.OpenExtLink(window,event,this) }finally{bluecoat_allow_popup=false;}" href="http://www.objectweb.org/wws" target="_blank">http://www.objectweb.org/wws