1. Outline
A radio button is a control used to select one of several radio buttons designated as the same group. By switching the radio button ON/OFF, you can also call up pre-defined actions.
In the following, we will use the term "2. Development GuidanceYou can download sample programs for commonly used radio button functions at3. Parameterssection provides a reference to the parameters to be set for radio buttons.
2. Development Guidance
This article introduces parameter settings that are commonly used to familiarize you with radio buttons.
The sample project used in the explanation can be downloaded from the following link.
2-1. Radio button 1
Place two radio buttons for gender settings.
1 when a male is selected 2 when a female is selected is stored in the database.
Only when a female is selected, radio button 2 becomes active.
2-1-1. Object Operation Setting
With each radio button selected, set the following properties
From "Object" "Behavior Settings" in the Properties area
- Set the radio group to group1
- Set ON value to 1 for male and 2 for female
2-1-2. Data Contents
Set up data forms.
With each radio button selected, set the following properties
From "Data" "Contents" in the Properties area
- Set the field name to gender
- The setting here is the same for both men and women
Using data forms, input and output to and from the database can be realized in real time without the need to implement special logic.
To use data forms, tables must be created in the DB in advance.
Creating Tables: Questionnaire
Create a table to store radio button entries.
Register "Item Name", "Physical Item Name" and "Type" in "Design" of the created table, respectively.
Data Form Setup
Click on the form and set Data Belt Contents Table Name to tbl_check created above.
2-1-3. Design Color and Shape
With each radio button selected, set the following properties
Set from "Design" "Color and Shape" in the Properties area
Only the important parts are explained.
- Horizontal and Vertical alignment allows you to set the position of the text next to the radio button
- Normal Font allows you to set the color of the text next to the radio buttons
- Check Font allows you to set the button color for radio buttons
- The thickness is used to add depth to the radio button.
2-1-4. Design Images
With each radio button selected, set the following properties
Set from "Design" "Image" in the Properties area
2-1-5. others
Logic: 010_About when gender is selected
For radio button 1, the following process is implemented when clicked.
- When a woman is selected, radio button 2 is enabled.
- Otherwise, disable radio button 2.
Focused Explanation
Row 2: By IF decision, if female, lines 3~5 are implemented and radio buttons are enabled.
Line 6: If line 2 does not apply (male or unselected), perform lines 7~10,
Disable radio buttons
Call logic when radio button is clicked
With each radio button selected, set the following properties
2-2. Radio button 2
Place two radio buttons for medical checkups.
If Yes is selected, "Yes" is stored in the database; if No is selected, "No" is stored in the database.
ObjectMotion setting
With each radio button selected, set the following properties
From "Object" "Behavior Settings" in the Properties area
- Set the radio group to group2
- Set the ON value to "Yes" for Yes or "No" for No
Data Contents
Set up data forms.
With each radio button selected, set the following properties
From "Data" "Contents" in the Properties area
- Set the field name to MEDICAL EXAMINATION
- The setting here is the same for both men and women
Using data forms, input and output to and from the database can be realized in real time without the need to implement special logic.
To use data forms, tables must be created in the DB in advance.
In this case, we will use the table created in 2-1-2 Data Contents.
Design Color and Shape
With each radio button selected, set the following properties
Set from "Design" "Color and Shape" in the Properties area
Both have the same setup.
Since there are almost no changes from the default settings, a detailed explanation is omitted.
2-4. Database Real-Time View
The ON/OFF of the radio button is reflected in the DB in real time according to the data form.
This table shows the contents of the DB updated by the operation of radio buttons in real time.
3. Parameters
By changing the parameters, you can easily set the position, size, color, shape, and display image of the radio buttons, so take advantage of them to create a well-designed, easy-to-understand screen.
In addition, by setting up actions to be invoked when the screen is operated, the app user can make the app perform various actions when he/she touches or clicks the radio button.
object
Basic information and behavior settings for radio buttons are set from "Object". By making radio buttons inactive, it is also possible to set up radio buttons that only become active when the app user performs certain operations, etc.
Basic Information
| name | The name of the radio button. If you want the radio button to have an action from the processing logic and so on, specify radio buttons with this name. By default, the It looks like "radio + sequential numbers." |
|---|---|
| Size | The width and height of the radio buttons can be specified in fine increments of 1 pixel. |
| position | You can specify the position of the radio button. The starting point is the upper left corner of the screen. |
| margin | It is possible to create a blank area on a radio button without displaying text or images. The following is a summary of the results of the study. Specified by the distance from the top and bottom of the radio button to the left and right. |
| type | You can check the type of control. No changes can be made. |
| style | By selecting from the pre-defined styles, parameters such as colors, borders, etc. can be set. Easy to set up. |
operation setup
| executable process | The process to be executed after the radio button is touched or clicked and released. Setup. |
|---|---|
| long press (of button, esp. mobile phones) | Set the process to be executed when the radio button is pressed and held (for more than 1 second). The following is a summary of the results of the study. |
| pushdown operation | Sets the process to be executed at the moment the radio button is pressed. |
| radio group | Set the group name of the radio button. Set up with the same group name The radio button allows only one check to be turned on. |
| ON value | Set the value with the radio button checked ON. |
possibility
| available | By unchecking this checkbox, the radio button can be deactivated (operation disabled). The following is a summary of the results of the study. When installing a radio button that cannot be pressed until certain conditions are met The system is used for such purposes as the following. |
|---|---|
| display | Uncheck this box to hide the radio buttons. Used to set up radio buttons that are not displayed until certain conditions are met. I will do so. |
data
Settings for text to be displayed on radio buttons and values that can be retrieved by "Process/Control/Retrieve Content" are made from "Data". In addition to direct input, text extracted from a form or database can be displayed.
Contents
value entry
Set if you want to directly input values that can be retrieved from radio buttons.
| character | You can enter values for radio button data. |
|---|
form
Set this option if the values that can be obtained from radio buttons are to be entered using data forms.
| Field Name | The table set in the form from which the data will be retrieved. Select a field (column). |
|---|---|
| available | When radio buttons are placed in the subform list, Select the fields from which to obtain the availability settings for each row. |
| display | When radio buttons are placed in the subform list, Select the field from which to obtain the display settings for each row. |
| foreground | When radio buttons are placed in the subform list, Select the field from which to obtain the foreground color setting for each row. |
| background color | When radio buttons are placed in the subform list, Select the field from which to obtain the background color setting for each row. |
table
Set this option if the values that can be retrieved from the radio buttons are to be entered using a database rather than being set in advance.
| table name | Select the table from which the data will be retrieved. |
|---|---|
| Field Name | Select the field (column) in the table from which the data will be retrieved. |
| available | When radio buttons are placed in the subform list, Select the fields from which to obtain the availability settings for each row. |
| display | When radio buttons are placed in the subform list, Select the field from which to retrieve the display settings for each row. |
| foreground | When radio buttons are placed in the subform list, Select the field from which to obtain the foreground color setting for each row. |
| background color | When radio buttons are placed in the subform list, Select the field from which to obtain the background color setting for each row. |
label (e.g. on a label)
value entry
Set the text display within the radio button for direct input.
| character | You can enter the text that appears on the radio buttons. |
|---|
table
This setting is used when the text display within radio buttons is entered using a database rather than being set in advance.
| table name | Select the table from which to retrieve display content. |
|---|---|
| Field Name | Select the field (column) in the table from which to retrieve the display content I will do so. |
| Filter/Direct input | Directly enter extraction conditions when retrieving display content from a table Select this option when |
| Filter/List Selection | Extraction conditions when retrieving display content from a table from a list. Select if you wish to select. |
design
To set the color, shape, and image of radio buttons regardless of style, change "Design". The design of the radio buttons can be finely configured.
Color and Shape
| font | Specifies font type. |
|---|---|
| Size | Specifies the font size. |
| bold-type | Check this box if you want to bold text. |
| image | Check this box if you want to add shadows to the text. |
| underline | Select the underline for the text from [None], [Underline], or [Double Underline]. |
| stroke-count line | Check this box if you want to put a strikeout on the text. |
| by return | Check this box if you want the text to wrap around. |
| Shrink to Fit | When the content does not fit within the control, the font size will be automatically adjusted to fit the content inside. |
| vertical alignment | The text position in the radio button can be set to [Align Top], [Align Center Top], [Align Bottom], or [Align Bottom]. Select from any of the following. |
| horizontal arrangement | The text position in the radio button can be set to [Align Left], [Align Left], [Align Center], [Align Right], or [Align Right]. Select from any of the following. |
| normal font | Specifies the font color during normal operation. |
| Normal Fill | Specifies the normal background color. |
| Normal ruled/box lines | Specifies the color of the ruled/framed lines during normal operation. |
| check | Specifies the color of the check mark. |
| invalid check | Specifies the color of the check mark when the operation is disabled. |
| unavailable font | Specifies font color when operation is disabled. |
| unavailable fill | Specifies the background color when the operation is disabled. |
| Unavailable ruled lines/frames | Specifies the color of the ruled/border line when the operation is disabled. |
| line thickness | Specifies the thickness of the line. |
| roundness | Specifies the roundness of the corners of the radio buttons. |
| thickness | Specify the thickness of the radio button. |
Change image
Vertical/horizontal alignment of text (example)
Text: Aligned at top left Text: Aligned at center Text: Aligned at bottom right
|
|
|
|
image
| Standard Image | You can set the image that is displayed during normal operation. |
|---|---|
| Image Deletion | You can clear the standard image settings. |
| pressed image |
Set the image to be displayed while the radio button is checked ON To clear the set image, click the Delete Image button. |
| Invalid standard image |
You can set the image that is normally displayed when the operation is disabled. To clear the set image, click the Delete Image button. |
| invalid pressed image |
While the radio button for operation inactive is checked ON. To clear the set image, click the Delete Image button. |
| Image display position (vertical) | Align Top][Center Top][Center Bottom][Align Bottom] for the image display position in the radio button. Select from any of the following |
| Image display position (horizontal) | Align Left][Center Left][Center Right][Align Right] for the image display position in the radio button. Select from any of the following |
| Single-sided fit | Resize the image to fit inside the radio button and Yes. [no setting][inscribed fit][circumscribed fit][circumscribed fit][horizontal and vertical fit Select from any of the following. |
Image display position (example)
|
|
|
|
Single-sided fitting of an image (e.g.)
|
|
|
|
|
ruled line
| top kind | Specifies the type of upper ruled line. |
|---|---|
| overglaze | Specifies the color of the upper border. |
| lower kinds | Specifies the type of lower border. |
| underglaze color | Specifies the color of the lower border. |
| left kind | Specifies the type of left border. |
| left-handedness | Specifies the color of the left border. |
| Right kind | Specifies the type of right border. |
| dark indigo (almost black) | Specifies the color of the right border. |
| Backslash type | Specify the type of backspace rule. |
| backslash | Specifies the color of the backslash border. |
| / Type | / Specify the type of ruled line. |
| /Color | / Specifies the color of the top border. |