Unable to style p:selectBooleanButton as normal button

UI Components for JSF
Post Reply
User avatar
Oleg
Expert Member
Posts: 3803
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

05 Jun 2012, 13:21

Task: Change the button text on click without AJAX and do some JavaScript operation.

Solution: Use p:selectBooleanButton

Problem: How to show p:selectBooleanButton as a normal button for two states? This code

Code: Select all

<p:selectBooleanButton value="true" onLabel="Show advanced search" offLabel="Hide advanced search"
                                    onchange="$(this).parent().removeClass('ui-state-hover ui-state-active'); myWidget.toggle()"/>
doesn't work because PrimeFaces checks "ui-state-active" class to identify Yes / No button state. The result: only onLabel is shown.

This code works

Code: Select all

<p:selectBooleanButton value="true" onLabel="Show advanced search" offLabel="Hide advanced search"
                                    onchange="$(this).parent().removeClass('ui-state-hover'); myWidget.toggle()"/>
but onLabel is always shown highlighted (active).

Any suggestions? I think PrimeFaces should save current state (Yes / No) in JS DOM object (e.g. via jQuery's data(...) on checkbox). Instead this CSS classes are checked. It's valid for the most PrimeFaces components. Do we need an issue, Cagatay? Workarounds are welcome. Using p:commandButton with type="button" is not desired because it needs JavaScript logic to change button text on click.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

User avatar
Oleg
Expert Member
Posts: 3803
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

05 Jun 2012, 14:16

This is actually a good recipe for the PrimeFaces Cookbook. But I can't see any simple solutions at the moment.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

Hamsterbau
Posts: 401
Joined: 28 Dec 2011, 17:44

05 Jun 2012, 23:20

I do not know exactly what you want, but perhaps SplitButton can help. Looks like a button and has different possible actions.
In my opionion, the intention of selectBooleanButton (having a choice) is not really what you want - if i understand you right you want some kind of a "toggle button" with a set of possible actions?

Although it would be nice to have at least the ability to change styling of a selectBooleanButton :D
Primefaces 6.1.8 (PF Extensions 6.1.5)
JSF: Mojarra 2.2 (Spec 2.2) - running on WildFly 10.1.0.Final

User avatar
Oleg
Expert Member
Posts: 3803
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

16 Jun 2012, 16:14

"Toogle button" sounds good. What we need is a "toogle button" changing text on toogle. <p:toogleButton ... attributes like for normal button ... firstLabel="..." secondLabel="..."/>. I would take p:selectBooleanButton, but it looks different for both (yes / no) states. An additional attr. for styling p:selectBooleanButton as a normal button would be great and would solve this issue.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

User avatar
Oleg
Expert Member
Posts: 3803
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

16 Jun 2012, 16:17

Actually an example is here http://fractalsoft.net/primeext-showcas ... atures.jsf Instead of writing "Show / hide advanced search" I would define firstLabel="Show advanced search" and secondLabel="Hide advanced search". Every click on button toggles text.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

eziz
Posts: 33
Joined: 15 Apr 2012, 13:08

16 Jun 2012, 16:45

Thanks.
  • Netbeans
    MySql
    JSP and Primefaces

User avatar
Oleg
Expert Member
Posts: 3803
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

16 Jun 2012, 17:13

Thanks.
For what?
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

Hamsterbau
Posts: 401
Joined: 28 Dec 2011, 17:44

16 Jun 2012, 19:36

But in this case you should also have a button icon for different button states like fristIcon, secondIcon :roll:
Primefaces 6.1.8 (PF Extensions 6.1.5)
JSF: Mojarra 2.2 (Spec 2.2) - running on WildFly 10.1.0.Final

User avatar
Oleg
Expert Member
Posts: 3803
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

16 Jun 2012, 19:48

Good idea. Not sure if it will be implemented in PrimeFaces.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests