Radiobutton - relu91/nifty-gui GitHub Wiki
The RadioButton is used to select one option out of multiple choices. RadioButtons are grouped so that only one RadioButton of the group can be active at the same time. In Nifty the grouping is realized using the RadioButtonGroup. A RadioButton is linked to a single RadioButtonGroup. The RadioButtonGroup itself is not visible. It is only used to manage the selection of all the RadioButtons that are linked to it.
The RadioButton is the actual visible control. Its "id" is used to identify the active RadioButton of the group. The "group" attribute of a RadioButton links the RadioButton to a single RadioButtonGroup so that other RadioButtons of the same group can be deactivated when a new RadioButton is activated.
You can create RadioButtons as well as the RadioButtonGroup from Java using the Builder pattern or from XML using Niftys Standard <control></control> Tag.
The following table describes all parameters that you can apply to a single RadioButton control.
Name | Datatype | Default | Description |
group | String (nifty-id) | null | The "id" of the RadioButtonGroup that this RadioButton belongs too. There can only be a single RadioButton active for all RadioButtons that belong to the same RadioButtonGroup. |
The RadioButtonGroup control does have the following parameters.
Name | Datatype | Default | Description |
allowDeselection | Boolean | false | You can set allowDeselection to "true" to not enforce the RadioButtonGroup selection. When you set this to "true" you can deselect the selected RadioButton so that no RadioButton is selected. The default value is "false" which will enforce at least one RadioButton to be selected (of this RadioButtonGroup). |
The RadioButton supports EventBus notification. You can subscribe for events to the RadioButtonGroup or to individual RadioButtons.
When the selection of a RadioButtonGroup is changed a RadioButtonGroupStateChangedEvent is generated that contains the newly selected RadioButton and the RadioButton that has been deselected.
You can subscribe for individual RadioButton events too. When an indivdual RadioButton changes state it publishes a RadioButtonStateChangedEvent.
Create a RadioButtonGroup control and four RadioButtons that are linked to that RadioButtonGroup. Please note that it is up to you to add Labels to each RadioButton as well as to display them belonging to each other.
...
control(new RadioGroupBuilder("RadioGroup-1")); // the RadioGroup id is used to link radiobuttons logical together so that only one of them can be active at a certain time
panel(new PanelBuilder() {{
control(builders.createLabel("Radio Buttons"));
childLayoutHorizontal();
panel(new PanelBuilder() {{
childLayoutVertical();
backgroundColor("#8001");
paddingLeft("7px");
paddingRight("7px");
paddingTop("4px");
paddingBottom("4px");
width("105px");
onActiveEffect(new EffectBuilder("border") {{
effectParameter("color", "#0008");
}});
panel(new PanelBuilder() {{
childLayoutHorizontal();
control(builders.createLabel("Option 1", "60px"));
control(new RadioButtonBuilder("option-1") {{
group("RadioGroup-1"); // the id of the RadioButtonGroup to link this RadioButton to
}});
}});
panel(new PanelBuilder() {{
childLayoutHorizontal();
control(builders.createLabel("Option 2", "60px"));
control(new RadioButtonBuilder("option-2") {{
group("RadioGroup-1"); // the id of the RadioButtonGroup to link this RadioButton to
}});
}});
panel(new PanelBuilder() {{
childLayoutHorizontal();
control(builders.createLabel("Option 3", "60px"));
control(new RadioButtonBuilder("option-3") {{
group("RadioGroup-1"); // the id of the RadioButtonGroup to link this RadioButton to
}});
}});
panel(new PanelBuilder() {{
childLayoutHorizontal();
control(builders.createLabel("Option 4", "60px"));
control(new RadioButtonBuilder("option-4") {{
group("RadioGroup-1"); // the id of the RadioButtonGroup to link this RadioButton to
}});
}});
}});
}});
...
Create the same RadioButtons with XML:
<!-- using XML -->
<control id="RadioGroup-1" name="radioButtonGroup"/>
<panel childLayout="horizontal">
<control name="label" text="Radio Buttons" />
<panel childLayout="vertical" backgroundColor="#8001" paddingLeft="7px" paddingRight="7px" paddingTop="4px" paddingBottom="4px" width="105px">
<effect>
<onActive name="border" color="#0008" />
</effect>
<panel childLayout="horizontal">
<control name="label" text="Option 1" with="60px" />
<control name="radioButton" id="option-1" group="RadioGroup-1" />
</panel>
<panel childLayout="horizontal">
<control name="label" text="Option 2" with="60px" />
<control name="radioButton" id="option-2" group="RadioGroup-1" />
</panel>
<panel childLayout="horizontal">
<control name="label" text="Option 3" with="60px" />
<control name="radioButton" id="option-3" group="RadioGroup-1" />
</panel>
<panel childLayout="horizontal">
<control name="label" text="Option 4" with="60px" />
<control name="radioButton" id="option-4" group="RadioGroup-1" />
</panel>
</panel>
</panel>
When you've created the RadioButtons and the RadioButtonGroup you can react to changed RadioButton selection like this:
public class RadioButtonTestScreenController implements ScreenController {
...
/**
* This is called when the RadioButton selection has changed.
*/
@NiftyEventSubscriber(id="RadioGroup-1")
public void onRadioGroup1Changed(final String id, final RadioButtonGroupStateChangedEvent event) {
System.out.println("RadioButton [" + event.getSelectedId() + "] is now selected. The old selection was [" + event.getPreviousSelectedId() + "]");
}
/**
* Another way would be to listen for a specific RadioButton, like the "option-3"
*/
@NiftyEventSubscriber(id="option-3")
public void onOption3Changed(final String id, final RadioButtonStateChangedEvent event) {
System.out.println("RadioButton [" + event.getRadioButton().getId() + "] is selected [" + event.isSelected() + "]");
}
}