Orbeon Forms community mailing list

How to add a tab dynamically

Classic

List

Threaded

8 messages Options

Frank Feng

How to add a tab dynamically

Hi all,

Currently I need to dynamically add widget:tab into widget:tabs in my
project. However, when I use xform:repeat to add the tab(s), it just doesn't
work. Yahoo YUI component does support adding tabs on-the-fly, is it
supported by Orbeon engine? Any suggestions?

The code is:
------------------------------------------------------------------
<widget:tabs>

<xforms:repeat nodeset="instance('vra-instance')/vra:image"
id="imageUI-repeat">
<widget:tab>
<widget:label>Image</widget:label>
<table>
...
</table>
</widget:tab>
</xforms:repeat>
</widget:tabs>

Thanks

Frank

--
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

fl.schmitt(ops-users)

Re: How to add a tab dynamically

Frank,

> Currently I need to dynamically add widget:tab into widget:tabs in my
> project. However, when I use xform:repeat to add the tab(s), it just doesn't
> work. Yahoo YUI component does support adding tabs on-the-fly, is it
> supported by Orbeon engine? Any suggestions?

I think you can't insert tabs dynamically using xforms:repeat, because
widget:tab is evaluated only once when the page is loaded. The
widget:tabs are transformed into a html:table before the page is sent to
the browser.

A solution could be to "reload" the page using a submission and
replace="all"; this way, you can insert additional widget:tabs using
xslt before the page is refreshed.

HTH
florian

--
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

Erik Bruchez

Re: Re: How to add a tab dynamically

Administrator

> I think you can't insert tabs dynamically using xforms:repeat, because
> widget:tab is evaluated only once when the page is loaded. The
> widget:tabs are transformed into a html:table before the page is
> sent to
> the browser.
>
> A solution could be to "reload" the page using a submission and
> replace="all"; this way, you can insert additional widget:tabs using
> xslt before the page is refreshed.

That's right, this is nor supported with widgets:tab.

But it seems that what you want to do is slightly different anyway: in
your case, all the tabs would look about the same since they are
within a repeat, right?

Anyway, widget:tabs is implemented in XSLT, and it just translates
into a few xforms:switch, xforms:trigger, and a bit of glue. You could
certainly reproduce this using XForms and xforms:repeat in your case.

-Erik

--
Orbeon Forms - Web Forms for the Enterprise Done the Right Way
http://www.orbeon.com/

--
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

Bryan

Re: Re: How to add a tab dynamically

Erik Bruchez wrote:
>
>
> Anyway, widget:tabs is implemented in XSLT, and it just translates
> into a few xforms:switch, xforms:trigger, and a bit of glue. You could
> certainly reproduce this using XForms and xforms:repeat in your case.
>
> -Erik
>
>

I don't think this is possible. I tried this and ran a couple of issues:

1. When generating id for tabs, on xforms:repeat and xforms:switch-case,
there is no way to generate a dynamic id to be used on the tabs panel.

<xforms:repeat nodeset="instance('myinstance')/customActivity">
<xhtml:td class="widget-tab-spacer-between"/>
<td class="widget-tab">
<xforms:switch>
<xforms:case
id="current-activity-name-tab-inactive"> 
<div class="widget-tab-inactive">
<xforms:trigger appearance="minimal"
id="current-activity-name-tab-trigger">
<xforms:label><xforms:output
value="@name"/></xforms:label>
<xforms:action
ev:event="DOMActivate">
<xforms:toggle
case="current-activity-name-tab"/>
<xforms:toggle
case="current-activity-name-tab-active"/>
</xforms:action>
</xforms:trigger>
</div>
</xforms:case>
<xforms:case
id="current-activity-name-tab-active"> 
<div
class="widget-tab-active"><xforms:output value="@name"/></div>
</xforms:case>
</xforms:switch>
</td>
</xforms:repeat>

2. you can't do a <xforms:repeat> inside the switch-case which handles the
changing of the main panel.

<xforms:switch>
<xforms:case>
<div></div>
</xforms:case>
<xforms:case>
<div></div>
</xforms:case>
<xforms:repeat>
<xforms:repeat nodeset="instance('myinstance')/customActivity"> 

<xforms:case>
</xforms:case>
</xforms:repeat>
</xforms:switch>

Any ideas for a workaround in this one? i need dynamic tags too based on the
model.

--
View this message in context: http://n4.nabble.com/How-to-add-a-tab-dynamically-tp41084p1568166.html
Sent from the Orbeon Forms (ops-users) mailing list archive at Nabble.com.

--
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

Bryan

Re: Re: How to add a tab dynamically

</xforms:repeat>

2. you can't do a <xforms:repeat> inside the switch-case which handles the changing of the main panel.

<xforms:switch>
<xforms:case>
<div></div>
</xforms:case>
<xforms:case>
<div></div>
</xforms:case>
<xforms:repeat>
<xforms:repeat nodeset="instance('myinstance')/customActivity">

<xforms:case>
</xforms:case>
</xforms:repeat>
</xforms:switch>

Any ideas for a workaround in this one? i need dynamic tags too based on the model.

In reply to this post by Erik Bruchez

Erik Bruchez wrote

Anyway, widget:tabs is implemented in XSLT, and it just translates
into a few xforms:switch, xforms:trigger, and a bit of glue. You could
certainly reproduce this using XForms and xforms:repeat in your case.

-Erik

I don't think this is possible. I tried this and ran a couple of issues:

1. When generating id for tabs, on xforms:repeat and xforms:switch-case, there is no way to generate a dynamic id to be used on the tabs panel.

<xforms:repeat nodeset="instance('myinstance')/customActivity">
<xhtml:td class="widget-tab-spacer-between"/>

<xforms:switch>
<xforms:case id="current-activity-name-tab-inactive">
<div class="widget-tab-inactive">
<xforms:trigger appearance="minimal" id="current-activity-name-tab-trigger">
<xforms:label><xforms:output value="@name"/></xforms:label>
<xforms:action ev:event="DOMActivate">
<xforms:toggle case="current-activity-name-tab"/>
<xforms:toggle case="current-activity-name-tab-active"/>
</xforms:action>
</xforms:trigger>
</div>
</xforms:case>
<xforms:case id="current-activity-name-tab-active">
<div class="widget-tab-active"><xforms:output value="@name"/></div>
</xforms:case>
</xforms:switch>

Alessandro Vernet

Re: Re: Re: How to add a tab dynamically

Administrator

Bryan,

Erik's message dated back from last year. Since then, we implemented
the fr:tabview component. Have a look at it, as it might satisfy your
requirement:

http://wiki.orbeon.com/forms/doc/developer-guide/xbl-existing-xbl-components/tab-view

Alex

On Wed, Feb 24, 2010 at 2:53 PM, Bryan <[hidden email]> wrote:

>
>
> Erik Bruchez wrote:
>>
>> Anyway, widget:tabs is implemented in XSLT, and it just translates
>> into a few xforms:switch, xforms:trigger, and a bit of glue. You could
>> certainly reproduce this using XForms and xforms:repeat in your case.
>>
>> -Erik
>>
>>
>
> I don't think this is possible. I tried this and ran a couple of issues:
>
> 1. When generating id for tabs, on xforms:repeat and xforms:switch-case,
> there is no way to generate a dynamic id to be used on the tabs panel.
>
> <xforms:repeat nodeset="instance('myinstance')/customActivity">
> <xhtml:td class="widget-tab-spacer-between"/>
> <td class="widget-tab">
> <xforms:switch>
> <xforms:case
> id="current-activity-name-tab-inactive"> 
> <div class="widget-tab-inactive">
> <xforms:trigger appearance="minimal"
> id="current-activity-name-tab-trigger">
> <xforms:label><xforms:output
> value="@name"/></xforms:label>
> <xforms:action
> ev:event="DOMActivate">
> <xforms:toggle
> case="current-activity-name-tab"/>
> <xforms:toggle
> case="current-activity-name-tab-active"/>
> </xforms:action>
> </xforms:trigger>
> </div>
> </xforms:case>
> <xforms:case
> id="current-activity-name-tab-active"> 
> <div
> class="widget-tab-active"><xforms:output value="@name"/></div>
> </xforms:case>
> </xforms:switch>
> </td>
> </xforms:repeat>
>
> 2. you can't do a <xforms:repeat> inside the switch-case which handles the
> changing of the main panel.
>
> <xforms:switch>
> <xforms:case>
> <div></div>
> </xforms:case>
> <xforms:case>
> <div></div>
> </xforms:case>
> <xforms:repeat>
> <xforms:repeat nodeset="instance('myinstance')/customActivity"> 
> 
> <xforms:case>
> </xforms:case>
> </xforms:repeat>
> </xforms:switch>
>
> Any ideas for a workaround in this one? i need dynamic tags too based on the
> model.
> --
> View this message in context: http://n4.nabble.com/How-to-add-a-tab-dynamically-tp41084p1568217.html
> Sent from the Orbeon Forms (ops-users) mailing list archive at Nabble.com.
>
>
> --
> 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
>
>

--
Orbeon Forms - Web forms, open-source, for the Enterprise -
http://www.orbeon.com/
My Twitter: http://twitter.com/avernet

--
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

--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet

Bryan

Re: Re: Re: How to add a tab dynamically

Alessandro Vernet wrote

Bryan,

Erik's message dated back from last year. Since then, we implemented
the fr:tabview component. Have a look at it, as it might satisfy your
requirement:

http://wiki.orbeon.com/forms/doc/developer-guide/xbl-existing-xbl-components/tab-view

Alex

Alex,

I've read the wiki doc and in the limitation section it says:

Children of fr:tabview can only be fr:tab elements. Other XForms markup is not support at this point; a consequence, you can't dynamically generate tabs by using an xforms:repeat around fr:tab.

So as of now, is generating dynamic tabs impossible using xforms?

Alessandro Vernet

Re: Re: Re: Re: How to add a tab dynamically

Administrator

Bryan,

It is not possible using the current code in fr:tabview. However, we
handle this in the fr:accordion control, which is not unlike the
fr:tabview. So maybe you can extend the fr:tabview to support this as
well.

http://wiki.orbeon.com/forms/doc/developer-guide/xbl-existing-xbl-components#TOC-Accordion-menu

Alex

On Thu, Feb 25, 2010 at 7:53 AM, Bryan <[hidden email]> wrote:

>
>
> Alessandro Vernet wrote:
>>
>> Bryan,
>>
>> Erik's message dated back from last year. Since then, we implemented
>> the fr:tabview component. Have a look at it, as it might satisfy your
>> requirement:
>>
>> http://wiki.orbeon.com/forms/doc/developer-guide/xbl-existing-xbl-components/tab-view
>>
>> Alex
>>
>>
>
>
> Alex,
>
> I've read the wiki doc and in the limitation section it says:
>
> Children of fr:tabview can only be fr:tab elements. Other XForms markup is
> not support at this point; a consequence, you can't dynamically generate
> tabs by using an xforms:repeat around fr:tab.
>
> So as of now, is generating dynamic tabs impossible using xforms?
>
> --
> View this message in context: http://n4.nabble.com/How-to-add-a-tab-dynamically-tp41084p1569216.html
> Sent from the Orbeon Forms (ops-users) mailing list archive at Nabble.com.
>
>
> --
> 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
>
>

--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet