Chris' SWI blog

Visual Web Pack: Using radio buttons to select and deselect your tabs from the TAB Pane

Firstly the tools/products involved:

NetBeans IDE 6.0 (Build 200711261600)

Visual JSF, version: 1.0.3

GlassFish v2, update release 1

I thought I would share my experiences with the community on how I was able to toggle tab-panes on and off with a checkbox. Please let me know if you have an easier or better way. :-) Say you have two tab's, one that you want to toggle on or off, and another that remains enabled.

Step 1: Make the check-box auto submit on change. Make sure the check-box starts of as selected="true", "selectedValue=true", and the immediate flag is selected.

Step 2: Create a virtual form for the check-box, making sure it submits and participates in the virtual form created.

Step 3: Add a hidden field to the form for use in the Java code (hiddenField1)

Step 4: Add a SessionBean (SessionBean1) property to store the check-box state. Add get and set methods for the property.

private boolean checkBoxSelected = true;

public boolean isCheckBoxSelected() {
    return checkBoxSelected;
}

public void setCheckBoxSelected(boolean checkBoxSelected) {
    this.checkBoxSelected = checkBoxSelected;
}

Step 5: Double-click the check-box to add a valueChange method. Add the following code to the valueChange method:

if (checkbox1.isChecked() == true) {
    tab2.setStyle("visibility: visible");
    hiddenField1.setText("true");
} else {
    tabSet1.setSelected("tab1");
    tab2.setStyle("visibility: hidden");
    hiddenField1.setText("false");
}

The above code checks whether the check-box was select and enables Tab2 (in this case the second tab) if true (i.e. the check-box was ticked) and if false (un-ticked) the tab selected is set to "tab1" - the tab thats always enaled and we then disable the second tab chaning the visibility attribute, "visibility: hidden".

Step 6: Add the following code to the prerender method:

String selected = (String)hiddenField1.getText();

if ((selected != null) && (selected.equals("true"))) {
    getSessionBean1().checkBoxSelected(true);
} else if (selected == null) {
    checkbox1.setSelected(new Boolean(getSessionBean1().checkBoxSelected()));
} else
    getSessionBean1().checkBoxSelected(false);
}

if (checkbox1.isChecked()) {
    tab2.setStyle("visibility: visible");
} else {
    tab2.setStyle("visibility: hidden");
}

 

My second experience I would like to share with you is;

Using multiple check-boxes (in this case 2 check-boxes) with the multiple tab-panes (in this case 2) to toggle either tabpane on or off. For example, selecting check-box 1 enables tab-pane 1, selecting check-box 2, enables panel 2. In this particular situation however, I want to make sure that at least one check-box is selected (thus one tab at a miminum is shown). The reason for using the Session Bean is to make sure that on the page reload, the check-boxes are set accordingly to what was previously selected and the respective tab enabled or disabled.

Step 1: Make box check-boxes auto submit on change. Make sure both check-boxes starts of as selected="true", "selectedValue=true", and the immediate flag is selected.

Step 2: Create a virtual form for both check-boxes, making sure they are submitting and participating in the virtual form created.

Step 3: Add two hidden fields to the form for use in the Java code (hiddenField1 and hiddenField2)

Step 4: Add two SessionBean (SessionBean1) properties to store the check-box statse. Add get and set methods for the property.

private boolean checkBoxSelected1 = true;

public boolean isCheckBoxSelected1() {
    return checkBoxSelected1;
}

public void setCheckBoxSelected1(boolean checkBoxSelected1) {
    this.checkBoxSelected1 = checkBoxSelected1;
}

private boolean checkBoxSelected2 = true;

public boolean isCheckBoxSelected2() {
    return checkBoxSelected2
}

public void setCheckBoxSelected2(boolean checkBoxSelected2) {
    this.checkBoxSelected2 = checkBoxSelected2;
}

Step 5: Double-click the check-boxes to add a valueChange method for each check-box and add the following code to the valueChange methods:

For Check Box 1:

if (checkbox1.isChecked() == true) {
    tab1.setStyle("visibility: visible");
    hiddenField1.setText("true");
} else if (checkbox2.isChecked() == true) {
    tabSet1.setSelected("tab2");
    tab1.setStyle("visibility: hidden");
    hiddenField1.setText("false");
} else {
    tab1.setStyle("visibility: visible");
    checkbox1.setSelected(true);
    hiddenField1.setText("true");
}

As you will see frm the code above, it checks whether check-box 1 is selected, if so it enables tab 1. Otherwise it's not meant to be enabled, but based on my use case one tab (of 2) needs to be enabled so it checks check-box 2 to see whether it has been selected or not. if check-box 1 is not selected but check-box 2 is, it disables tab 1 and enables tab 2... if both check-box 1 and 2 aren't selected (not checked), it keeps tab 1 enabled, and checkbox 1.

For Check Box 2:

if (checkbox2.isChecked() == true) {
    tab2.setStyle("visibility: visible");
    hiddenField2.setText("true");
} else if (checkbox1.isChecked() == true) {
    tabSet1.setSelected("tab1");
    tab2.setStyle("visibility: hidden");
    hiddenField2.setText("false");
} else {
    tab2.setStyle("visibility: visible");
    checkbox2.setSelected(true);
    hiddenField2.setText("true");
}

The code for check-box 2 imilarly does what the code I wrote above for check-box 1 only in reverse - tab 2 not tab 1.

Step 6: Add the following code to the prerender method:

String selected = (String)hiddenField1.getText();

if ((selected != null) && (selected.equals("true"))) {
    getSessionBean1().checkBoxSelected1(true);
} else if (selected == null) {
    checkbox1.setSelected(new Boolean(getSessionBean1().checkBoxSelected1()));
} else {
    getSessionBean1().checkBoxSelected1(false);
}

if (checkbox1.isChecked()) {
    tab1.setStyle("visibility: visible");
} else {
    tab1.setStyle("visibility: hidden");
}

selected = (String)hiddenField2.getText();

if ((selected != null) && (selected.equals("true"))) {
    getSessionBean1().checkBoxSelected2(true);
} else if (selected == null) {
    checkbox2.setSelected(new Boolean(getSessionBean1().checkBoxSelected2()));
} else {
    getSessionBean1().checkBoxSelected2(false);
}

if (checkbox2.isChecked()) {
    tab2.setStyle("visibility: visible");
} else {
    tab2.setStyle("visibility: hidden");
}

Please let me know what you think! Comments are welcome!

Posted at 10:10PM May 02, 2008 by Chris Fleischmann in GlassFish  |  Comments[0]