Component: Radio Button ( Control): Difference between revisions

Latest revision as of 14:37, 13 July 2026

Author	MatrixTSL
Version	1.3
Category	Control

Radio Button component

Creates a radio button item that can be grouped with other radio buttons to create a user selectable input.

Version information

Library Version, Component Version, Date, Author, Info
2, 1.1, 14-06-24, ST, Corrected the id tag of the html element
3, 1.2, 20-04-26, ST, Resizing no longer distorts the circle
4, 1.3, 16-06-26, ST, Text is now grey when disabled

Detailed description

No detailed description exists yet for this component

Examples

BasicControls example

This simple example shows how to use some basic controls in a Web Developer project.

BasicControls.fcweb

The web app created by this example can be viewed here: BasicControls Example

Macro reference

GetState

	GetState
Returns true if this radio button is currently selected
- BOOL	Return

SetState

	SetState
Sets this radio button to be selected or unselected
- BOOL	bState
The state to set this radio button to
- VOID	Return

Property reference

	Properties
	Radio Button
	Checked
The default state of the radio button
	Text
The caption text
	Group Name
Set the group name (radio buttons with the same group name will be mutually exclusive)
	OnClick Macro
The macro to call when the user clicks this radio button
	Style
	Font
Specifies the font style for the item
	Font Size
The font size in pixels
	Bold
Make the caption text bold
	Italic
Make the caption text italicised
	Underline
Make the caption text underlined
	Strikethrough
Make the caption text crossed-out
	Colour
	Text
Specifies the font colour value
	Background
Specifies the background colour value
	Advanced
	Custom Attributes
Text here will be added to the html tag of this component to allow advanced customisation

Component Source Code

Please click here to download the component source project: FC_Comp_Source_WEBEXP_Radio.fcsx

Please click here to view the component source code (Beta): FC_Comp_Source_WEBEXP_Radio.fcsx

@@ Line 5: / Line 5: @@
 |-
 | width="20%" style="color:gray;" | Version
-| 0.1
+| 1.3
 |-
 | width="20%" style="color:gray;" | Category
@@ Line 15: / Line 15: @@
 Creates a radio button item that can be grouped with other radio buttons to create a  user selectable input.
-==Component Source Code==
+==Version information==
-Please click here to download the component source project: [https://www.flowcode.co.uk/wiki/componentsource/FC_Comp_Source_WEBEXP_Radio.fcsx FC_Comp_Source_WEBEXP_Radio.fcsx]
+ Library Version, Component Version, Date, Author, Info
+, 1.1, 14-06-24, ST, Corrected the id tag of the html element
+, 1.2, 20-04-26, ST, Resizing no longer distorts the circle
+, 1.3, 16-06-26, ST, Text is now grey when disabled
-Please click here to view the component source code (Beta): [https://www.flowcode.co.uk/FlowchartView/?wfile=componentsource/FC_Comp_Source_WEBEXP_Radio.fcsx FC_Comp_Source_WEBEXP_Radio.fcsx]
 ==Detailed description==
 ''No detailed description exists yet for this component''
 ==Examples==
-''<span style="color:red;">No additional examples</span>''
+===BasicControls example===
+This simple example shows how to use some basic controls in a Web Developer project.
+{{Fcfile|BasicControls.fcweb|BasicControls.fcweb}}
+The web app created by this example can be viewed here: [https://www.flowcode.co.uk/example/WebComps/BasicControls.html BasicControls Example]
 ==Macro reference==
 ===GetState===
-{| class="wikitable" style="width:60%; background-color:#FFFFFF;"
+{| class="mtx-class-macrotable wikitable"
 |-
-| width="10%" align="center" style="background-color:#D8C9D8;" align="center" | [[File:Fc9-comp-macro.png]]
+| width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-comp-macro.png]]
-| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''GetState'''
+| width="90%" class="mtx-class-macrohead" | '''GetState'''
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | Returns true if this radio button is currently selected&nbsp;
 |-
 |-
@@ Line 46: / Line 55: @@
 ===SetState===
-{| class="wikitable" style="width:60%; background-color:#FFFFFF;"
+{| class="mtx-class-macrotable wikitable"
 |-
-| width="10%" align="center" style="background-color:#D8C9D8;" align="center" | [[File:Fc9-comp-macro.png]]
+| width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-comp-macro.png]]
-| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''SetState'''
+| width="90%" class="mtx-class-macrohead" | '''SetState'''
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | Sets this radio button to be selected or unselected&nbsp;
 |-
 |-
@@ Line 57: / Line 66: @@
 | width="90%" | bState
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | The state to set this radio button to&nbsp;
 |-
 | width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-void-icon.png]] - VOID
@@ Line 66: / Line 75: @@
 ==Property reference==
-{| class="wikitable" style="width:60%; background-color:#FFFFFF;"
+{| class="mtx-class-macrotable wikitable"
 |-
-| width="10%" align="center" style="background-color:#D8C9D8;" | [[File:Fc9-prop-icon.png]]
+| width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-prop-icon.png]]
-| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''Properties'''
+| width="90%" class="mtx-class-macrohead" | '''Properties'''
 |-
 |-
-| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
+| width="10%" align="center" class="mtx-class-propfolder" | [[File:Fc9-conn-icon.png]]
-| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | CheckBox
+| width="90%" class="mtx-class-propfolder" | Radio Button
 |-
 |-
@@ Line 79: / Line 88: @@
 | width="90%" | Checked
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | The default state of the radio button&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-10-icon.png]]
 | width="90%" | Text
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | The caption text&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-10-icon.png]]
 | width="90%" | Group Name
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | Set the group name (radio buttons with the same group name will be mutually exclusive)&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-24-icon.png]]
 | width="90%" | OnClick Macro
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | The macro to call when the user clicks this radio button&nbsp;
 |-
-| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
+| width="10%" align="center" class="mtx-class-propfolder" | [[File:Fc9-conn-icon.png]]
-| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Style
+| width="90%" class="mtx-class-propfolder" | Style
 |-
 |-
@@ Line 107: / Line 116: @@
 | width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
 | width="90%" | Font Size
-|-
-| colspan="2" | &nbsp;
-|-
-| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
-| width="90%" | Font size
 |-
 | colspan="2" | The font size in pixels&nbsp;
@@ Line 118: / Line 122: @@
 | width="90%" | Bold
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | Make the caption text bold&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
 | width="90%" | Italic
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | Make the caption text italicised&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
 | width="90%" | Underline
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | Make the caption text underlined&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-7-icon.png]]
 | width="90%" | Strikethrough
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | Make the caption text crossed-out&nbsp;
 |-
-| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
+| width="10%" align="center" class="mtx-class-propfolder" | [[File:Fc9-conn-icon.png]]
-| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Colour
+| width="90%" class="mtx-class-propfolder" | Colour
 |-
 |-
@@ Line 142: / Line 146: @@
 | width="90%" | Text
 |-
-| colspan="2" | Specifies the font colour for the item&nbsp;
+| colspan="2" | Specifies the font colour value&nbsp;
 |-
 | width="10%" align="center" | [[File:Fc9-type-2-icon.png]]
@@ Line 149: / Line 153: @@
 | colspan="2" | Specifies the background colour value&nbsp;
 |-
-| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
+| width="10%" align="center" class="mtx-class-propfolder" | [[File:Fc9-conn-icon.png]]
-| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Advanced
+| width="90%" class="mtx-class-propfolder" | Advanced
 |-
 |-
@@ Line 156: / Line 160: @@
 | width="90%" | Custom Attributes
 |-
-| colspan="2" | &nbsp;
+| colspan="2" | Text here will be added to the html tag of this component to allow advanced customisation&nbsp;
 |}
+==Component Source Code==
+Please click here to download the component source project: [https://www.flowcode.co.uk/wiki/componentsource/FC_Comp_Source_WEBEXP_Radio.fcsx FC_Comp_Source_WEBEXP_Radio.fcsx]
+Please click here to view the component source code (Beta): [https://www.flowcode.co.uk/FlowchartView/?wfile=componentsource/FC_Comp_Source_WEBEXP_Radio.fcsx FC_Comp_Source_WEBEXP_Radio.fcsx]

SteveT (talk | contribs)