GXT experience: Radio button

alina's picture

I'm a GWT and GXT newbie and I didn't have the time to experiment the things before starting my new job. So I started the hard way, just doing my tasks and hoping I'd come to a decent result sooner or later.
Now, I have a bit more time and I'm trying to take things slowly by experimenting simple things in GXT, especially the listeners on which I couldn't find a lot of examples on the internet.
So, I've started to make a simple form, with a few TextFields, Comboboxes and Radios. Nothing fancy.

I wanted that when clicking one of the Radios, a TextField would disable, and when clicking the other, the TextField would become active again. The Yes/No classical radio button functionality.

So I said to myself. Simple: let's put a RadioGroup with 2 Radios and let's put a listener to the Events.Change event (in the API of the CheckBox, for which Radio is a subclass, this is the documented triggered event) on each of the buttons so that when something changes (for instance the fact that the radio is checked or not), the listener is triggered.
Here is the code I wrote.

RadioGroup marriedGr = new RadioGroup();
marriedGr.setFieldLabel("Married");
marriedGr.setName("married radio group");

final TextField<String> husbandName = new TextField<String>();
husbandName.setFieldLabel("Husband name");
husbandName.disable();

final Radio yes = new Radio();
yes.setBoxLabel("yes");
yes.setName("yes");
       
final Radio no = new Radio();
no.setBoxLabel("no");
no.setName("no");

marriedGr.add(yes);
marriedGr.add(no);

//Careful, the listeners aren't ok

yes.addListener(Events.Change, new Listener<FieldEvent>(){
            @Override
            public void handleEvent(FieldEvent be) {
                if(!husbandName.isEnabled()) {
                    husbandName.enable();
                }
            }
       
        });
       
no.addListener(Events.Change, new Listener<FieldEvent>(){
            @Override
            public void handleEvent(FieldEvent be) {
                if(husbandName.isEnabled()) {
                    husbandName.disable();
                }
            }
       
        });

I did that and I had the unpleasant surprise to see that clicking the first time enabled and disabled the text field but after this first time, the TextField would stay disabled no matter how many times I clicked on the radios.
Luckily, with the debugging mode of GWT, I could see that both of the listeners were triggered, no matter which radio was clicked - I guess that is because the radios were from the same group and the radio group was also triggering a change event which was being caught by the both listeners.

A listener on the group, catching the same Events.Change, which only tests if the text field is enabled and then disable it wouldn't work either:


marriedGr.addListener(Events.Change, new Listener<FieldEvent>(){
           
            @Override
            public void handleEvent(FieldEvent be) {
               
               
                if(husbandName.isEnabled()) {
                    husbandName.disable(); //fires a change event
                    System.out.println("yes name: "+yes.getName());
                    System.out.println("textfield is disabled");
                } else if(!husbandName.isEnabled()){
                    husbandName.enable();
                    System.out.println("no name: "+no.getName());
                    System.out.println("textfield is enabled");
                }
            }
           
        });


The trick is that between the if branches, another Change event is triggered. This comes from the fact that the two radios are part from the same group.
So when clicking one of the radios, the other one gets "de-clicked", thus triggering a Change event that is dispatched to the parent RadioGroup. This event is caught again by the listener and enables the field, although the field should stay disabled.
So keep in mind that not just clicking a Radio in a group makes it change, but clicking the other radios, makes it being "de-clicked", which leads to a new Change event for the RadioGroup.

So the right way to do that (after some searching on the forums), is to exactly test which radio button is clicked/de-clicked. Apparently, the right method to use is the RadioGroup's getValue() method.
I thought that using then the getName() method, on the Radio, would show me whether I clicked the yes or the no radio, because, according to the documentation:


Radio grouping is handled automatically by the browser if you give each radio in a group the same name.



So from this I understand that if you don't give each radio in a group the same name, the radio grouping won't be handled automatically. So here I am trying to give different names to each Radio, hoping they will be handled separately, as different buttons. But to my surprise, both the radios take the name of the group, and not the name that I set for the group. Funny behaviour.

Finally I searched the forum for an answer. And here it is what a "nice" and "kind" answer I found:

Your rating: None Average: 3.6 (13 votes)

Post new comment

The content of this field is kept private and will not be shown publicly.
 
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
7 + 11 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.

About LifLife   |   Terms & Condition   |   Advertising   |   Contact      ©liflife.com