[TRINIDAD] - Change tab in panelTabbed using a button

[Enrique Medina Montenegro]

Hi,

I'm using a panelTabbed component, and I would like to allow the user to change between the tabs not only by clicking the tab itself, but also using a button in order to simulate a wizard, let's say.

Let me put an example. Imagine we have a 3 tabs panelTabbed component, so in the content for the first tab I define a button (NEXT), then in the second tab's content I define two buttons (PRIOR and NEXT), and finally in the last tab I define another two buttons (PRIOR and SUBMIT).

What would the code be to simulate clicking on the tab itself but from a button click?

Thanks.

[Walter Mourão-2]

You can use the "disclosed" property in showDetailItem to show/hide its content.

Walter Mourão
http://waltermourao.com.br
http://arcadian.com.br
http://oriens.com.br

On Wed, Jan 7, 2009 at 1:22 PM, Enrique Medina Montenegro <e.medina.m@...> wrote:

Hi,

I'm using a panelTabbed component, and I would like to allow the user to change between the tabs not only by clicking the tab itself, but also using a button in order to simulate a wizard, let's say.

Let me put an example. Imagine we have a 3 tabs panelTabbed component, so in the content for the first tab I define a button (NEXT), then in the second tab's content I define two buttons (PRIOR and NEXT), and finally in the last tab I define another two buttons (PRIOR and SUBMIT).

What would the code be to simulate clicking on the tab itself but from a button click?

Thanks.

[Enrique Medina Montenegro]

But how would I set that property from the button? Through an actionListener and then finding the component in the ViewRoot?

Is there any way to mimic the exact behaviour as when you click the tab itself?

Thanks.

On Wed, Jan 7, 2009 at 4:41 PM, Walter Mourão <walter.mourao@...> wrote:

You can use the "disclosed" property in showDetailItem to show/hide its content.

Walter Mourão
http://waltermourao.com.br
http://arcadian.com.br
http://oriens.com.br

On Wed, Jan 7, 2009 at 1:22 PM, Enrique Medina Montenegro <e.medina.m@...> wrote:

Hi,

I'm using a panelTabbed component, and I would like to allow the user to change between the tabs not only by clicking the tab itself, but also using a button in order to simulate a wizard, let's say.

Let me put an example. Imagine we have a 3 tabs panelTabbed component, so in the content for the first tab I define a button (NEXT), then in the second tab's content I define two buttons (PRIOR and NEXT), and finally in the last tab I define another two buttons (PRIOR and SUBMIT).

What would the code be to simulate clicking on the tab itself but from a button click?

Thanks.

[Andrew Robinson-5]

Unfortunately, the best way is to use component binding of the tab
component to a bean and update the disclosed properties of the
children show details manually.

The other way is to use JavaScript on the client to manually fire a
click event of the desired anchor element (tab) from the button, but
this is not the "JSF" way, but more of a hack.

-Andrew

On Wed, Jan 7, 2009 at 9:09 AM, Enrique Medina Montenegro
<e.medina.m@...> wrote:

> But how would I set that property from the button? Through an actionListener
> and then finding the component in the ViewRoot?
>
> Is there any way to mimic the exact behaviour as when you click the tab
> itself?
>
> Thanks.
>
>
> On Wed, Jan 7, 2009 at 4:41 PM, Walter Mourão <walter.mourao@...>
> wrote:
>>
>> You can use the "disclosed" property in showDetailItem to show/hide its
>> content.
>>
>> Walter Mourão
>> http://waltermourao.com.br
>> http://arcadian.com.br
>> http://oriens.com.br
>>
>>
>>
>> On Wed, Jan 7, 2009 at 1:22 PM, Enrique Medina Montenegro
>> <e.medina.m@...> wrote:
>>>
>>> Hi,
>>>
>>> I'm using a panelTabbed component, and I would like to allow the user to
>>> change between the tabs not only by clicking the tab itself, but also using
>>> a button in order to simulate a wizard, let's say.
>>>
>>> Let me put an example. Imagine we have a 3 tabs panelTabbed component, so
>>> in the content for the first tab I define a button (NEXT), then in the
>>> second tab's content I define two buttons (PRIOR and NEXT), and finally in
>>> the last tab I define another two buttons (PRIOR and SUBMIT).
>>>
>>> What would the code be to simulate clicking on the tab itself but from a
>>> button click?
>>>
>>> Thanks.
>>
>
>

[Walter Mourão-2]

As I remember I used something like disclosed="#{form.disclosedTab == 1}" and set the disclosedTab number in the backing bean action.

Walter Mourão
http://waltermourao.com.br
http://arcadian.com.br
http://oriens.com.br

On Wed, Jan 7, 2009 at 2:09 PM, Enrique Medina Montenegro <e.medina.m@...> wrote:

But how would I set that property from the button? Through an actionListener and then finding the component in the ViewRoot?

Is there any way to mimic the exact behaviour as when you click the tab itself?

Thanks.

On Wed, Jan 7, 2009 at 4:41 PM, Walter Mourão <walter.mourao@...> wrote:

You can use the "disclosed" property in showDetailItem to show/hide its content.

Walter Mourão
http://waltermourao.com.br
http://arcadian.com.br
http://oriens.com.br

On Wed, Jan 7, 2009 at 1:22 PM, Enrique Medina Montenegro <e.medina.m@...> wrote:

Hi,

I'm using a panelTabbed component, and I would like to allow the user to change between the tabs not only by clicking the tab itself, but also using a button in order to simulate a wizard, let's say.

Let me put an example. Imagine we have a 3 tabs panelTabbed component, so in the content for the first tab I define a button (NEXT), then in the second tab's content I define two buttons (PRIOR and NEXT), and finally in the last tab I define another two buttons (PRIOR and SUBMIT).

What would the code be to simulate clicking on the tab itself but from a button click?

Thanks.

[Andrew Robinson-5]

That only works if the user never clicks on a tab. This is because the
renderer for the show detail item calls setDisclosed which sets the
components local value. Once this is set, the EL will never be
evaluated again.

-Andrew

On Wed, Jan 7, 2009 at 10:17 AM, Walter Mourão <walter.mourao@...> wrote:

> As I remember I used something like disclosed="#{form.disclosedTab == 1}"
> and set the disclosedTab number in the backing bean action.
>
> Walter Mourão
> http://waltermourao.com.br
> http://arcadian.com.br
> http://oriens.com.br
>
>
>
> On Wed, Jan 7, 2009 at 2:09 PM, Enrique Medina Montenegro
> <e.medina.m@...> wrote:
>>
>> But how would I set that property from the button? Through an
>> actionListener and then finding the component in the ViewRoot?
>>
>> Is there any way to mimic the exact behaviour as when you click the tab
>> itself?
>>
>> Thanks.
>>
>>
>> On Wed, Jan 7, 2009 at 4:41 PM, Walter Mourão <walter.mourao@...>
>> wrote:
>>>
>>> You can use the "disclosed" property in showDetailItem to show/hide its
>>> content.
>>>
>>> Walter Mourão
>>> http://waltermourao.com.br
>>> http://arcadian.com.br
>>> http://oriens.com.br
>>>
>>>
>>>
>>> On Wed, Jan 7, 2009 at 1:22 PM, Enrique Medina Montenegro
>>> <e.medina.m@...> wrote:
>>>>
>>>> Hi,
>>>>
>>>> I'm using a panelTabbed component, and I would like to allow the user to
>>>> change between the tabs not only by clicking the tab itself, but also using
>>>> a button in order to simulate a wizard, let's say.
>>>>
>>>> Let me put an example. Imagine we have a 3 tabs panelTabbed component,
>>>> so in the content for the first tab I define a button (NEXT), then in the
>>>> second tab's content I define two buttons (PRIOR and NEXT), and finally in
>>>> the last tab I define another two buttons (PRIOR and SUBMIT).
>>>>
>>>> What would the code be to simulate clicking on the tab itself but from a
>>>> button click?
>>>>
>>>> Thanks.
>>>
>>
>
>

[Enrique Medina Montenegro]

Thanks, I'll go for the binding approach then.

On Wed, Jan 7, 2009 at 5:35 PM, Andrew Robinson <andrew.rw.robinson@...> wrote:

Unfortunately, the best way is to use component binding of the tab
component to a bean and update the disclosed properties of the
children show details manually.

The other way is to use JavaScript on the client to manually fire a
click event of the desired anchor element (tab) from the button, but
this is not the "JSF" way, but more of a hack.

-Andrew

On Wed, Jan 7, 2009 at 9:09 AM, Enrique Medina Montenegro

<e.medina.m@...> wrote:
> But how would I set that property from the button? Through an actionListener
> and then finding the component in the ViewRoot?
>
> Is there any way to mimic the exact behaviour as when you click the tab
> itself?
>
> Thanks.
>
>
> On Wed, Jan 7, 2009 at 4:41 PM, Walter Mourão <walter.mourao@...>
> wrote:
>>
>> You can use the "disclosed" property in showDetailItem to show/hide its
>> content.
>>
>> Walter Mourão
>> http://waltermourao.com.br
>> http://arcadian.com.br
>> http://oriens.com.br
>>
>>
>>
>> On Wed, Jan 7, 2009 at 1:22 PM, Enrique Medina Montenegro
>> <e.medina.m@...> wrote:
>>>
>>> Hi,
>>>
>>> I'm using a panelTabbed component, and I would like to allow the user to
>>> change between the tabs not only by clicking the tab itself, but also using
>>> a button in order to simulate a wizard, let's say.
>>>
>>> Let me put an example. Imagine we have a 3 tabs panelTabbed component, so
>>> in the content for the first tab I define a button (NEXT), then in the
>>> second tab's content I define two buttons (PRIOR and NEXT), and finally in
>>> the last tab I define another two buttons (PRIOR and SUBMIT).
>>>
>>> What would the code be to simulate clicking on the tab itself but from a
>>> button click?
>>>
>>> Thanks.
>>
>
>

[Matt Cooper-2]

I imagine that your Java code will look something like this (do this
for each showDetailItem in the panelTabbed):

      FacesBean facesBean = showDetailItem.getFacesBean();
      FacesBean.Type type = facesBean.getType();
      PropertyKey disclosedKey = type.findKey("disclosed");
      if (disclosedKey != null)
      {
        facesBean.setProperty(disclosedKey, newDisclosedState);
      }

Regards,
Matt

On Wed, Jan 7, 2009 at 1:21 PM, Enrique Medina Montenegro
<e.medina.m@...> wrote:

> Thanks, I'll go for the binding approach then.
>
> On Wed, Jan 7, 2009 at 5:35 PM, Andrew Robinson
> <andrew.rw.robinson@...> wrote:
>>
>> Unfortunately, the best way is to use component binding of the tab
>> component to a bean and update the disclosed properties of the
>> children show details manually.
>>
>> The other way is to use JavaScript on the client to manually fire a
>> click event of the desired anchor element (tab) from the button, but
>> this is not the "JSF" way, but more of a hack.
>>
>> -Andrew
>>
>> On Wed, Jan 7, 2009 at 9:09 AM, Enrique Medina Montenegro
>> <e.medina.m@...> wrote:
>> > But how would I set that property from the button? Through an
>> > actionListener
>> > and then finding the component in the ViewRoot?
>> >
>> > Is there any way to mimic the exact behaviour as when you click the tab
>> > itself?
>> >
>> > Thanks.
>> >
>> >
>> > On Wed, Jan 7, 2009 at 4:41 PM, Walter Mourão <walter.mourao@...>
>> > wrote:
>> >>
>> >> You can use the "disclosed" property in showDetailItem to show/hide its
>> >> content.
>> >>
>> >> Walter Mourão
>> >> http://waltermourao.com.br
>> >> http://arcadian.com.br
>> >> http://oriens.com.br
>> >>
>> >>
>> >>
>> >> On Wed, Jan 7, 2009 at 1:22 PM, Enrique Medina Montenegro
>> >> <e.medina.m@...> wrote:
>> >>>
>> >>> Hi,
>> >>>
>> >>> I'm using a panelTabbed component, and I would like to allow the user
>> >>> to
>> >>> change between the tabs not only by clicking the tab itself, but also
>> >>> using
>> >>> a button in order to simulate a wizard, let's say.
>> >>>
>> >>> Let me put an example. Imagine we have a 3 tabs panelTabbed component,
>> >>> so
>> >>> in the content for the first tab I define a button (NEXT), then in the
>> >>> second tab's content I define two buttons (PRIOR and NEXT), and
>> >>> finally in
>> >>> the last tab I define another two buttons (PRIOR and SUBMIT).
>> >>>
>> >>> What would the code be to simulate clicking on the tab itself but from
>> >>> a
>> >>> button click?
>> >>>
>> >>> Thanks.
>> >>
>> >
>> >
>
>

[Enrique Medina Montenegro]

Thanks Matt, but finally I went the easy way using JS:

              <tr:commandButton text="Next"
                  partialSubmit="true" onclick="document.getElementById('tab2').onclick()"/>

On Wed, Jan 7, 2009 at 9:57 PM, Matt Cooper <mcooper@...> wrote:

I imagine that your Java code will look something like this (do this
for each showDetailItem in the panelTabbed):

     FacesBean facesBean = showDetailItem.getFacesBean();
     FacesBean.Type type = facesBean.getType();
     PropertyKey disclosedKey = type.findKey("disclosed");
     if (disclosedKey != null)
     {
       facesBean.setProperty(disclosedKey, newDisclosedState);
     }

Regards,
Matt

On Wed, Jan 7, 2009 at 1:21 PM, Enrique Medina Montenegro

<e.medina.m@...> wrote:
> Thanks, I'll go for the binding approach then.
>
> On Wed, Jan 7, 2009 at 5:35 PM, Andrew Robinson
> <andrew.rw.robinson@...> wrote:
>>
>> Unfortunately, the best way is to use component binding of the tab
>> component to a bean and update the disclosed properties of the
>> children show details manually.
>>
>> The other way is to use JavaScript on the client to manually fire a
>> click event of the desired anchor element (tab) from the button, but
>> this is not the "JSF" way, but more of a hack.
>>
>> -Andrew
>>
>> On Wed, Jan 7, 2009 at 9:09 AM, Enrique Medina Montenegro
>> <e.medina.m@...> wrote:
>> > But how would I set that property from the button? Through an
>> > actionListener
>> > and then finding the component in the ViewRoot?
>> >
>> > Is there any way to mimic the exact behaviour as when you click the tab
>> > itself?
>> >
>> > Thanks.
>> >
>> >
>> > On Wed, Jan 7, 2009 at 4:41 PM, Walter Mourão <walter.mourao@...>
>> > wrote:
>> >>
>> >> You can use the "disclosed" property in showDetailItem to show/hide its
>> >> content.
>> >>
>> >> Walter Mourão
>> >> http://waltermourao.com.br
>> >> http://arcadian.com.br
>> >> http://oriens.com.br
>> >>
>> >>
>> >>
>> >> On Wed, Jan 7, 2009 at 1:22 PM, Enrique Medina Montenegro
>> >> <e.medina.m@...> wrote:
>> >>>
>> >>> Hi,
>> >>>
>> >>> I'm using a panelTabbed component, and I would like to allow the user
>> >>> to
>> >>> change between the tabs not only by clicking the tab itself, but also
>> >>> using
>> >>> a button in order to simulate a wizard, let's say.
>> >>>
>> >>> Let me put an example. Imagine we have a 3 tabs panelTabbed component,
>> >>> so
>> >>> in the content for the first tab I define a button (NEXT), then in the
>> >>> second tab's content I define two buttons (PRIOR and NEXT), and
>> >>> finally in
>> >>> the last tab I define another two buttons (PRIOR and SUBMIT).
>> >>>
>> >>> What would the code be to simulate clicking on the tab itself but from
>> >>> a
>> >>> button click?
>> >>>
>> >>> Thanks.
>> >>
>> >
>> >
>
>