RadioGroup
Form and theme XML code and CSS element selector
Most commonly used form and theme properties
Associated 4gl syntax and ui methods
RadioGroup allows users to choose only one option from the predefined set of mutually exclusive options.
RadioGroup inserted in a GridPanel as seen in Lycia Form Designer:
<RadioGroup visible="true" identifier="f1" gridItemLocation="0,0,1,1">
<Radio title="value1" identifier="f1_1">
<Radio.value>
<StringLiteral stringValue="value_1"/>
</Radio.value>
</Radio>
</RadioGroup>
Theme element filter XML code:
<ElementFilter ElementName="RadioGroup">
...
</ElementFilter>
CSS element selector code:
|
|
|
Most commonly used form properties:
Field:
defaultValue
Layout:
horizontalAlignment / verticalAlignment
dataType
Most commonly used theme properties:
Associated ui methods:
Create ↓
ForName ↓
SetRadios ↓
GetRadios
SetRequired
getRequired
RadioGroup is a widget that allows users to choose only one option from the predefined set of mutually exclusive options.
It consists of a list of radios that correspond to the options provided to an end-user. These options are all visible to the user initially (and can be hidden only if you set a too-small height to the widget):
Click here to learn about RadioGroup options.
To add a RadioGroup to your form, you
Step 1. Choose a RadioGroup from the widgets palette by left-clicking its icon.
Step 2. Select the place in the form where you want to put the RadioGroup.
Step 3. Left-click the selected spot (cell or sector) to place the RadioGroup there.
Step 4. The RadioGroup is now added to your form, and you can see it in the Structure view.
Step 5. To add more options to your RadioGroup, you must go to the Properties pane.
to add an option to the RadioGroup.Step 7. Change the default title and value of the option, if necessary.
Step 8. Repeat steps 6-7 until all the necessary options are added.
DISPLAY statement can be used with RadioGroups.
If you display the title of the option to the RadioGroup, this option will be selected at runtime:
DISPLAY "2018" TO f1
At runtime, you can manipulate RadioGroups with ui methods:
|
create() |
creates a ui.RadioGroup object and inserts a RadioGroup to the specified form element: LET rg= ui.RadioGroup.Create("f1") |
|
forName() |
binds a RadioGroup existing in a .fm2 form to the specified variable of the ui.RadioGroup type: LET rg= ui.RadioGroup.ForName("f1") |
|
setRadios() |
contains the list of the RadioGroup options: CALL rg.setRadios([r1,r2]) |
|
getRadios() |
returns the list of the RadioGroup options |
|
setRequired() |
forces the user to enter data in the RadioGroup during the INPUT statement (= it cannot be left empty): CALL cmb.setRequired(1) CALL cmb.setRequired(TRUE) |
|
retRequired() |
returns whether the user must enter data in the RadioGroup during the INPUT statement or it can be left empty |
In this program, we populate an existing RadioGroup with two options:
MAIN
DEFINE rg ui.RadioGroup
DEFINE r1,r2 ui.Radio
OPEN WINDOW w WITH FORM "radiogroup_ui" ATTRIBUTE(BORDER)
LET rg= ui.RadioGroup.forName("f1")
LET r1= ui.Radio.Create("r1")
LET r2= ui.Radio.Create("r2")
CALL rg.SetRadios([r1,r2])
CALL r1.SetTitle("Hello")
CALL r2.SetTitle("Bye")
CALL fgl_getkey()
END MAIN
You can change appearance properties of a RadioGroup in Lycia Theme Designer or via css.
To apply a property to a RadioGroup, set its value in the user theme, directly or using filters.
property applied in the user theme:
theme XML code:
<?xml version="1.0" encoding="utf-8"?>
<StyleSheet xmlns="http://querix.com">
<ElementFilter ElementName="RadioGroup">
<StyleSheet>
<DoStyleAction>
<SetProperty>
<PropertyPath>
<PropertyName>Font</PropertyName>
<PropertyName>Italic</PropertyName>
</PropertyPath>
<PropertyValue />
</SetProperty>
</DoStyleAction>
</StyleSheet>
</ElementFilter>
</StyleSheet>
or
.qx-aum-radio-group {
font-style: italic;
}
runtime appearance:
If you want to change the appearance of a RadioGroup option as a separate widget, you must use css styles - by the selector, .qx-aum-radio, or via its personal identifier, qx-identifier-xxx