All,
I thoguht I would share this one with the community. I recently had to implement a calendar date-picker for my XForms application. Fortunately, Orbeon Forms comes with a handy 'date-picker' XBL component: http://wiki.orbeon.com/forms/doc/developer-guide/xbl-existing-xbl-components#TOC-Date-Picker Now, the date-picker stores the data in this format: yyyy-mm-dd ... but unfortunately my XML Schema needed to have the value stored in this format: yyyymmdd I therefore decided to take the existing date-picker XBL component and modify it, following these instructions: http://wiki.orbeon.com/forms/doc/developer-guide/xbl-components-guide#TOC-Getting-started ... and using the XPath fn:replace function and regular expressions for transforming the date format. Here is the final XBL component. Most of it is copy-paste from date-picker.xbl: <?xml version="1.0" encoding="UTF-8"?> <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:fr="http://orbeon.org/oxf/xml/form-runner" xmlns:frext="http://orbeon.org/oxf/xml/form-runner/extended" xmlns:saxon="http://saxon.sf.net/" xmlns:xbl="http://www.w3.org/ns/xbl" xmlns:xxbl="http://orbeon.org/oxf/xml/xbl"> <xbl:binding id="fr-date-picker" element="frext|my-date-picker"> <metadata xmlns="http://orbeon.org/oxf/xml/form-builder"> <display-name lang="en">Date Picker</display-name> <display-name lang="fr">Sélecteur de date</display-name> <icon lang="en"> <small-icon>/apps/fr/style/images/silk/date.png</small-icon> <large-icon>/apps/fr/style/images/silk/date.png</large-icon> </icon> <datatype>xforms:date</datatype> <template> <fr:date-picker> <xforms:label ref=""/> <xforms:hint ref=""/> <xforms:help ref=""/> <xforms:alert ref=""/> </fr:date-picker> </template> </metadata> <xbl:resources> <xbl:style> .xbl-fr-date-picker .fr-component-group img { vertical-align: bottom } .xbl-fr-date-picker .xforms-readonly .xforms-input { display: none } </xbl:style> </xbl:resources> <xbl:template> <xforms:model> <xforms:instance> <value/> </xforms:instance> <xforms:bind nodeset="." type="xforms:date"/> </xforms:model> <xforms:group xbl:attr="model context ref bind" class="fr-component-group" xxbl:scope="outer"> <xbl:content includes="xforms|label,xforms|help,xforms|hint,xforms|alert"/> <xforms:group xxbl:scope="inner"> <xxforms:variable name="outer-binding" as="node()?"> <xxforms:sequence select="." xxbl:scope="outer"/> </xxforms:variable> <xforms:group ref="$outer-binding"> <!-- Reading the value from the permanent field, into the calendar --> <xforms:setvalue ev:event="xforms-enabled xforms-value-changed" ref="instance()" value="replace(context(), '([0-9]{4})([0-9]{2})([0-9]{2})', '$1-$2-$3')"/> </xforms:group> <xforms:output ref="context()"/> <!-- Storing the value from the calendar, into the permanent field --> <xforms:input ref="instance()" appearance="minimal"> <xforms:setvalue ev:event="xforms-value-changed" ref="$outer-binding" value="replace(instance(), '([0-9]{4})-([0-9]{2})-([0-9]{2})', '$1$2$3')"/> </xforms:input> </xforms:group> </xforms:group> </xbl:template> </xbl:binding> </xbl:xbl> XBL is cool! Hope someone finds this usefull. Sincerely, Henrik Pettersen Sparkling Ideas for the European Medicines Agency -- 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 OW2 mailing lists service home page: http://www.ow2.org/wws |
Administrator
|
Henrik,
Thanks for sharing this with us! -Erik On Thu, Nov 19, 2009 at 9:22 AM, Henrik Pettersen <[hidden email]> wrote: > All, > > I thoguht I would share this one with the community. > > I recently had to implement a calendar date-picker for my XForms > application. Fortunately, Orbeon Forms comes with a handy 'date-picker' XBL > component: > http://wiki.orbeon.com/forms/doc/developer-guide/xbl-existing-xbl-components#TOC-Date-Picker > > Now, the date-picker stores the data in this format: > yyyy-mm-dd > > ... but unfortunately my XML Schema needed to have the value stored in this > format: > yyyymmdd > > I therefore decided to take the existing date-picker XBL component and > modify it, following these instructions: > http://wiki.orbeon.com/forms/doc/developer-guide/xbl-components-guide#TOC-Getting-started > > ... and using the XPath fn:replace function and regular expressions for > transforming the date format. > > Here is the final XBL component. Most of it is copy-paste from > date-picker.xbl: > > <?xml version="1.0" encoding="UTF-8"?> > <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:fr="http://orbeon.org/oxf/xml/form-runner" > xmlns:frext="http://orbeon.org/oxf/xml/form-runner/extended" > xmlns:saxon="http://saxon.sf.net/" > xmlns:xbl="http://www.w3.org/ns/xbl" > xmlns:xxbl="http://orbeon.org/oxf/xml/xbl"> > <xbl:binding id="fr-date-picker" element="frext|my-date-picker"> > <metadata xmlns="http://orbeon.org/oxf/xml/form-builder"> > <display-name lang="en">Date Picker</display-name> > <display-name lang="fr">Sélecteur de date</display-name> > <icon lang="en"> > <small-icon>/apps/fr/style/images/silk/date.png</small-icon> > <large-icon>/apps/fr/style/images/silk/date.png</large-icon> > </icon> > <datatype>xforms:date</datatype> > <template> > <fr:date-picker> > <xforms:label ref=""/> > <xforms:hint ref=""/> > <xforms:help ref=""/> > <xforms:alert ref=""/> > </fr:date-picker> > </template> > </metadata> > <xbl:resources> > <xbl:style> > .xbl-fr-date-picker .fr-component-group img { vertical-align: > bottom } > .xbl-fr-date-picker .xforms-readonly .xforms-input { display: > none } > </xbl:style> > </xbl:resources> > <xbl:template> > <xforms:model> > <xforms:instance> > <value/> > </xforms:instance> > <xforms:bind nodeset="." type="xforms:date"/> > </xforms:model> > <xforms:group xbl:attr="model context ref bind" > class="fr-component-group" xxbl:scope="outer"> > <xbl:content > includes="xforms|label,xforms|help,xforms|hint,xforms|alert"/> > <xforms:group xxbl:scope="inner"> > <xxforms:variable name="outer-binding" as="node()?"> > <xxforms:sequence select="." xxbl:scope="outer"/> > </xxforms:variable> > <xforms:group ref="$outer-binding"> > <!-- Reading the value from the permanent field, into > the calendar --> > <xforms:setvalue ev:event="xforms-enabled > xforms-value-changed" > ref="instance()" > value="replace(context(), > '([0-9]{4})([0-9]{2})([0-9]{2})', '$1-$2-$3')"/> > </xforms:group> > <xforms:output ref="context()"/> > <!-- Storing the value from the calendar, into the > permanent field --> > <xforms:input ref="instance()" appearance="minimal"> > <xforms:setvalue ev:event="xforms-value-changed" > ref="$outer-binding" > value="replace(instance(), > '([0-9]{4})-([0-9]{2})-([0-9]{2})', '$1$2$3')"/> > </xforms:input> > </xforms:group> > </xforms:group> > </xbl:template> > </xbl:binding> > </xbl:xbl> > > XBL is cool! > > Hope someone finds this usefull. > > Sincerely, > Henrik Pettersen > Sparkling Ideas for the European Medicines Agency > > -- > 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 > OW2 mailing lists service home page: http://www.ow2.org/wws > > -- 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 OW2 mailing lists service home page: http://www.ow2.org/wws |
Free forum by Nabble | Edit this page |