xbl component conversion from 3.9 to 4.8
Locked
xbl component conversion from 3.9 to 4.8
 
|
I'm trying to convert an old control we have been using in 3.9. I'm failing to get it to work. The 3.9 version source is shown below as is my current 4.8 version. The 3.9 version loads and works in 3.9. I get an error when using it in 4.8.1.
|No namespace declaration found for prefix: xforms | but I haven't managed to track that down. When the control is inserted in the builder (in 3.9) you see the following (title is "drop down" and a hint of "hint")  On testing the form you see:  and clicking add shows this  So, all it does is let you add to and delete from a list of text box items. My new version loads but doesn't quite work. Two things seems to be going wrong 1) the "add" button is displayed in the form builder which suggests it is treating the control as readwrite, not readonly. 2) in test (and in the builder) as soon as I click "Add" to add an item to the list the list disappears (no item, no add button, the label and hint also disappear) which suggests that it isn't correctly iterating through the model. Using the xforms inspector shows that a new item is added into the model. 3.9 version source is: <?xml version="1.0" encoding="UTF-8"?>
<!--
CPF Aware Controls.
Copyright (C) 2010 InfoMedix.
-->
<xbl:xbl xmlns:xhtml="http://www.w3.org/1999/xhtml"
xmlns:xforms="http://www.w3.org/2002/xforms"
xmlns:xs="http://www.w3.org/2001/XMLSchema"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xi="http://www.w3.org/2001/XInclude"
xmlns:xxi="http://orbeon.org/oxf/xml/xinclude"
xmlns:xxforms="http://orbeon.org/oxf/xml/xforms"
xmlns:exforms="http://www.exforms.org/exf/1-0"
xmlns:fr="http://orbeon.org/oxf/xml/form-runner"
xmlns:saxon="http://saxon.sf.net/"
xmlns:im="http://www.infomedix.com.au/cpf/forms"
xmlns:xbl="http://www.w3.org/ns/xbl"
xmlns:xxbl="http://orbeon.org/oxf/xml/xbl">
<!--
DYNAMIC LIST
A list of items that can be extended or shortened by the user. This control consists of a column of entry
boxes, each with an associated "Delete" trigger. The user can change the value of any of the entry boxes or
remove an entry by clicking the "Delete" trigger. The user can also append new entry boxes by clicking an
"Add" trigger which appears below the last entry box.
The default schema this control works with (assuming the control is bound to '<boundnode>') is:
<boundnode>
<item>entry1</item>
<item>entry2</item>
...
</boundnode>
with new item nodes appearing at the bottom of the list of items.
The control supports two attributes which can be used to adjust the expected schema that the control is bound
to. The attribute 'item-node-name' is used to set the name of the node which stores the data of one entry box.
If this node is not present, the value is set to "item". Using the above example, setting this attribute to
"testnode" will result in the following schema:
<boundnode>
<testnode>entry1</testnode>
<testnode>entry2</testnode>
...
</boundnode>
The attribute 'item-node-wrapper', when set to an non-empty string value, defines a node which wraps the item
node. This is so that the control can be used in v2.5 forms. Using the first example, setting the attribute to
"wrapper" will result in the following schema:
<boundnode>
<wrapper>
<item>entry1</item>
</wrapper>
<wrapper>
<item>entry2</item>
</wrapper>
...
</boundnode>
-->
<xbl:binding id="im-dynamic-list" element="im|dynamic-list">
<metadata xmlns="http://orbeon.org/oxf/xml/form-builder">
<display-name lang="en">Dynamic List</display-name>
<display-name lang="fr">Dynamic List</display-name>
<icon lang="en">
<small-icon>/forms/orbeon/builder/images/listbox.png</small-icon>
<large-icon>/forms/orbeon/builder/images/listbox.png</large-icon>
</icon>
<datatype>xforms:string</datatype>
<template>
<im:dynamic-list id="" ref="" xmlns="">
<xforms:label ref=""/>
<xforms:hint ref=""/>
<xforms:help ref=""/>
<xforms:alert ref="$fr-resources/detail/labels/alert"/>
</im:dynamic-list>
</template>
</metadata>
<xbl:resources>
<xbl:style src="/xbl/im/dynamic-list/dynamic-list.css"/>
</xbl:resources>
<xbl:template>
<!-- Outer group implementing the single-node binding -->
<xforms:group xbl:attr="model context ref bind" xxbl:scope="outer">
<!-- Copy LHHA elements if any -->
<xbl:content includes="xforms|label,xforms|help,xforms|hint,xforms|alert"/>
<!-- Inner group -->
<xforms:group id="component-group" xxbl:scope="inner">
<!-- Instance binding -->
<!-- <xxforms:variable name="binding" select="." as="node()?"/>-->
<xxforms:variable name="binding" as="node()?">
<xxforms:sequence select="." xxbl:scope="outer"/>
</xxforms:variable>
<!-- Model attributes -->
<xxforms:variable name="attr-item-node-name" xbl:attr="xbl:text=item-node-name"/>
<xxforms:variable name="attr-item-node-wrapper" xbl:attr="xbl:text=item-node-wrapper"/>
<xxforms:variable name="item-node-name" select="if (string-length($attr-item-node-wrapper) != 0) then ($attr-item-node-wrapper) else (if (string-length($attr-item-node-name) != 0) then ($attr-item-node-name) else ('item'))"/>
<xxforms:variable name="subitem-node-name" select="if (string-length($attr-item-node-wrapper) != 0) then ($attr-item-node-name) else ('')"/>
<xforms:switch>
<xforms:case id="editable" selected="true">
<xforms:repeat nodeset="$binding/*[name() = $item-node-name]">
<xxforms:variable name="item-contents-node" select="if ($subitem-node-name = '') then (.) else (./*[name() = $subitem-node-name and position() = 1])"/>
<xhtml:div>
<xhtml:div class="xbl-im-dynamic-list-rw-input-div">
<xforms:input ref="$item-contents-node">
<xforms:label/>
</xforms:input>
</xhtml:div>
<xhtml:div class="xbl-im-dynamic-list-rw-btn-div">
<xforms:trigger>
<xforms:label>Delete</xforms:label>
<xforms:delete nodeset="." ev:event="DOMActivate"/>
</xforms:trigger>
</xhtml:div>
</xhtml:div>
</xforms:repeat>
<xforms:trigger>
<xforms:label>Add</xforms:label>
<xforms:action ev:event="DOMActivate">
<xforms:action if="$subitem-node-name = ''">
<xforms:insert context="$binding" nodeset="*[name() = $item-node-name]" origin="xxforms:element($item-node-name)"/>
</xforms:action>
<xforms:action if="$subitem-node-name != ''">
<xforms:insert context="$binding" nodeset="*[name() = $item-node-name]" origin="xxforms:element($item-node-name, xxforms:element($subitem-node-name))"/>
</xforms:action>
</xforms:action>
</xforms:trigger>
</xforms:case>
<xforms:case id="not-editable">
<xforms:repeat nodeset="$binding/*[name() = $item-node-name]">
<xxforms:variable name="item-contents-node" select="if ($subitem-node-name = '') then (.) else (./*[name() = $subitem-node-name and position() = 1])"/>
<xforms:input ref="$item-contents-node">
<xforms:label/>
</xforms:input>
</xforms:repeat>
</xforms:case>
</xforms:switch>
<!-- Initialisation code -->
<xforms:action ev:event="xforms-enabled" ev:observer="component-group">
<xforms:toggle case="not-editable" if="exforms:readonly($binding)"/>
</xforms:action>
<xforms:toggle case="not-editable" ev:event="xforms-readonly"/>
<xforms:toggle case="editable" ev:event="xforms-readwrite"/>
</xforms:group>
</xforms:group>
</xbl:template>
</xbl:binding>
</xbl:xbl>
and my ported source to 4.8 is: <?xml version="1.0" encoding="UTF-8"?>
<!--
CPF Aware Controls.
Copyright (C) 2010 InfoMedix.
-->
<xbl:xbl xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xforms="http://www.w3.org/2002/xforms" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:xxi="http://orbeon.org/oxf/xml/xinclude" xmlns:xxforms="http://orbeon.org/oxf/xml/xforms" xmlns:exforms="http://www.exforms.org/exf/1-0" xmlns:fr="http://orbeon.org/oxf/xml/form-runner" xmlns:fb="http://orbeon.org/oxf/xml/form-builder" xmlns:saxon="http://saxon.sf.net/"
xmlns:im="http://www.infomedix.com.au/cpf/forms" xmlns:xbl="http://www.w3.org/ns/xbl" xmlns:xxbl="http://orbeon.org/oxf/xml/xbl">
<!--
DYNAMIC LIST
A list of items that can be extended or shortened by the user. This control consists of a column of entry
boxes, each with an associated "Delete" trigger. The user can change the value of any of the entry boxes or
remove an entry by clicking the "Delete" trigger. The user can also append new entry boxes by clicking an
"Add" trigger which appears below the last entry box.
The default schema this control works with (assuming the control is bound to '<boundnode>') is:
<boundnode>
<item>entry1</item>
<item>entry2</item>
...
</boundnode>
with new item nodes appearing at the bottom of the list of items.
The control supports two attributes which can be used to adjust the expected schema that the control is bound
to. The attribute 'item-node-name' is used to set the name of the node which stores the data of one entry box.
If this node is not present, the value is set to "item". Using the above example, setting this attribute to
"testnode" will result in the following schema:
<boundnode>
<testnode>entry1</testnode>
<testnode>entry2</testnode>
...
</boundnode>
The attribute 'item-node-wrapper', when set to an non-empty string value, defines a node which wraps the item
node. This is so that the control can be used in v2.5 forms. Using the first example, setting the attribute to
"wrapper" will result in the following schema:
<boundnode>
<wrapper>
<item>entry1</item>
</wrapper>
<wrapper>
<item>entry2</item>
</wrapper>
...
</boundnode>
-->
<fb:metadata>
<fb:display-name lang="en">Custom Controls</fb:display-name>
</fb:metadata>
<xbl:binding id="im-dynamic-list" element="im|dynamic-list" xxbl:mode="lhha binding value">
<fb:metadata>
<fb:display-name lang="en">Dynamic List</fb:display-name>
<fb:display-name lang="fr">Dynamic List</fb:display-name>
<fb:icon lang="en">
<fb:small-icon>/forms/orbeon/builder/images/listbox.png</fb:small-icon>
<fb:large-icon>/forms/orbeon/builder/images/listbox.png</fb:large-icon>
</fb:icon>
<fb:datatype>xs:string</fb:datatype>
<fb:template>
<im:dynamic-list id="" ref="" xmlns="">
<xforms:label ref="" />
<xforms:hint ref="" />
<xforms:help ref="" />
<xforms:alert ref="$fr-resources/detail/labels/alert" />
</im:dynamic-list>
</fb:template>
</fb:metadata>
<xbl:resources>
<xbl:style src="/xbl/im/dynamic-list/dynamic-list.css" />
</xbl:resources>
<xbl:template>
<xforms:group id="im-component-group">
<!-- Model attributes -->
<xxforms:variable name="attr-item-node-name" xbl:attr="xbl:text=item-node-name" />
<xxforms:variable name="attr-item-node-wrapper" xbl:attr="xbl:text=item-node-wrapper" />
<xxforms:variable name="item-node-name" select="if (string-length($attr-item-node-wrapper) != 0) then ($attr-item-node-wrapper) else (if (string-length($attr-item-node-name) != 0) then ($attr-item-node-name) else ('item'))" />
<xxforms:variable name="subitem-node-name" select="if (string-length($attr-item-node-wrapper) != 0) then ($attr-item-node-name) else ('')" />
<xxforms:variable name="binding" select="xxforms:binding('im-dynamic-list')"/>
<xxforms:variable name="binding-context" select="xxforms:binding-context('im-dynamic-list')"/>
<xforms:switch>
<xforms:case id="editable" selected="true">
<xforms:repeat nodeset="$binding/*[name() = $item-node-name]">
<xxforms:variable name="item-contents-node" select="if ($subitem-node-name = '') then (.) else (./*[name() = $subitem-node-name and position() = 1])" />
<xhtml:div>
<xhtml:div class="xbl-im-dynamic-list-rw-input-div">
<xforms:input ref="$item-contents-node">
<xforms:label />
</xforms:input>
</xhtml:div>
<xhtml:div class="xbl-im-dynamic-list-rw-btn-div">
<xforms:trigger>
<xforms:label>Delete</xforms:label>
<xforms:delete nodeset="." ev:event="DOMActivate" />
</xforms:trigger>
</xhtml:div>
</xhtml:div>
</xforms:repeat>
<xforms:trigger>
<xforms:label>Add</xforms:label>
<xforms:action ev:event="DOMActivate">
<xforms:action if="$subitem-node-name = ''">
<xforms:insert context="$binding" nodeset="*[name() = $item-node-name]" origin="xxforms:element($item-node-name)" />
<xxforms:script>
console.log("no sub item");
</xxforms:script>
</xforms:action>
<xforms:action if="$subitem-node-name != ''">
<xforms:insert context="$binding" nodeset="*[name() = $item-node-name]" origin="xxforms:element($item-node-name, xxforms:element($subitem-node-name))" />
<xxforms:script>
console.log("with sub item");
</xxforms:script>
</xforms:action>
</xforms:action>
</xforms:trigger>
</xforms:case>
<xforms:case id="not-editable">
<xforms:repeat nodeset="$binding/*[name() = $item-node-name]">
<xxforms:variable name="item-contents-node" select="if ($subitem-node-name = '') then (.) else (./*[name() = $subitem-node-name and position() = 1])" />
<xforms:input ref="$item-contents-node">
<xforms:label />
</xforms:input>
</xforms:repeat>
</xforms:case>
</xforms:switch>
<!-- Initialisation code -->
<xforms:action ev:event="xforms-enabled" ev:observer="im-component-group">
<xforms:toggle case="not-editable" if="exforms:readonly($binding)" />
<xforms:toggle case="editable" if="not(exforms:readonly($binding))" />
<xxforms:script ev:event="xforms-value-changed" if="exforms:readonly($binding)">
console.log("readonly");
</xxforms:script>
<xxforms:script ev:event="xforms-value-changed" if="not(exforms:readonly($binding))">
console.log("readwrite");
</xxforms:script>
<xxforms:script ev:event="xforms-value-changed">
console.log("component group = %o", this);
console.log("event = %o", event);
</xxforms:script>
</xforms:action>
<xforms:toggle case="not-editable" ev:event="xforms-readonly" />
<xforms:toggle case="editable" ev:event="xforms-readwrite" />
</xforms:group>
</xbl:template>
</xbl:binding>
</xbl:xbl>
|
Re: xbl component conversion from 3.9 to 4.8
|
|
Re: xbl component conversion from 3.9 to 4.8
|
|
Re: xbl component conversion from 3.9 to 4.8
Administrator
|
Re: xbl component conversion from 3.9 to 4.8
|
|
Re: xbl component conversion from 3.9 to 4.8
|
Administrator
|
Re: xbl component conversion from 3.9 to 4.8
|
|
Re: xbl component conversion from 3.9 to 4.8
|
|
Re: xbl component conversion from 3.9 to 4.8
|
Administrator
|
| Free forum by Nabble | Edit this page |