hiding and showing commandButton in jsf

Question

I am new to JSF(PrimeFaces).

I have two commandButtons Do and Undo. I want only one button to be visible at one time.

like, When I click Do button, onclicking Do button should hide(performing its action simultaneously) and Undo button should be visible and when i click Undo button onclicking it should hide and Do button should come back to active

I tried using enable() and disable() methods but were of no use. Can I get some help in achieving this. any predefined methods available?

Heard rendered attribute will help but couldnt understand what exactly will the attribute do . Can someone explain pls

Answer 1

JSF rendered attribute will define if the component should be rendered/visible or not.
If

<h:commandButton value="Undo" rendered="#{false}" />

Then your above Undo button will be hidden.

rendered attribute can be bound to a ManagedBean property. In case if you want this dynamic, you have to update the component to see the result.

Here is a Small Example: XHTML:

<h:panelGroup id="doBtnPG">
    <h:commandButton value="Do" rendered="#{myBean.showDo}" action="#{myBean.doAction}">
       <f:ajax render="unDoBtnPG"/>
    </h:commandButton>
</h:panelGroup>

<h:panelGroup id="unDoBtnPG">
     <h:commandButton value="Un Do" rendered="#{myBean.showUndo}" action="#{myBean.undoAction}">
        <f:ajax render="doBtnPG"/>
    </h:commandButton>
</h:panelGroup>

ManagedBean:

@ManagedBean
@ViewScoped
public class MyBean{
    private boolean showDo=true;
    private boolean showUndo=true;

    public void doAction(){
      showUndo=false;
    }

    public void undoAction(){
      showDo=false;
    }
    //SETTER and GETTERS
}

In the above example, on clicking on one button the corresponding action method makes the property on which other button is being rendered as false, f:ajax will re render/update the other button's panelGroup to reflect the changes.

Since you marked this question as Primefaces, here is the XHTML code for Primefaces:

<h:panelGroup id="doBtnPG">

    <p:commandButton value="Do" rendered="#{myBean.showDo}" 
            action="#{myBean.doAction}" update="unDoBtnPG"/>
</h:panelGroup>

<h:panelGroup id="unDoBtnPG">

    <p:commandButton value="Un Do"  rendered="#{myBean.showUndo}" 
            action="#{myBean.undoAction}" update="doBtnPG"/>
</h:panelGroup>

Notice that on Primefaces commandButtons you dont need to use f:ajax or p:ajax explicitly because they are Ajax by default.

Please note that the functions enable() and disable() provided by Primefaces are only client side. When disabled attribute is false and if you enable the button using enable(), it will not fire your action method.