In this example, I have created 2 radio buttons which are identified as group1. Once the button is selected, it will show you, which button has been selected. Reference Page:
Example Demo: Example Code: function doGet() { //Create application var app = UiApp.createApplication().setTitle('Radio Button Demo'); //Create a panel var radioPanel = app.createVerticalPanel(); //Create Radio Buttons with group name 'group1' var radio1 = app.createRadioButton('group1', 'First Option').setName('First').setId('First'); var radio2 = app.createRadioButton('group1', 'Second Option').setName('Second').setId('Second'); var infoLabel = app.createLabel().setVisible(false).setId('statusInfo').setStyleAttribute('color', '#f00'); //Create a Change Handler var handler1 = app.createServerValueChangeHandler('showstatus1'); handler1.addCallbackElement(radioPanel); //Add this handler to the radio Buttons radio1.addValueChangeHandler(handler1); //Similraly for second radios... var handler2 = app.createServerValueChangeHandler('showstatus2'); handler2.addCallbackElement(radioPanel); radio2.addValueChangeHandler(handler2); //Add all the buttons to the panel radioPanel.add(radio1) .add(radio2) .add(infoLabel); //Add the panel to the application app.add(radioPanel); //return the application return app; } function showstatus1(e){ var app = UiApp.getActiveApplication(); var radioValue = e.parameter.First; app.getElementById('Second').setValue(false); app.getElementById('statusInfo').setVisible(true).setText('You have selected first radio:' + radioValue); return app; } function showstatus2(e){ var app = UiApp.getActiveApplication(); var radioValue = e.parameter.Second; app.getElementById('First').setValue(false); app.getElementById('statusInfo').setVisible(true).setText('You have selected second radio:' + radioValue); return app; }
|
User Interface >