Difference between revisions of "Component: Check Box ( Control)"

From Flowcode Help
Jump to navigationJump to search
(Created page with "{| style="width:50%" |- | width="20%" style="color:gray;" | Author | MatrixTSL |- | width="20%" style="color:gray;" | Version | 0.1 |- | width="20%" style="color:gray;...")
 
(added example)
 
(6 intermediate revisions by 2 users not shown)
Line 5: Line 5:
 
|-
 
|-
 
| width="20%" style="color:gray;" | Version
 
| width="20%" style="color:gray;" | Version
−
| 0.1
+
| 1.2
 
|-
 
|-
 
| width="20%" style="color:gray;" | Category
 
| width="20%" style="color:gray;" | Category
Line 15: Line 15:
 
Creates a checkbox item to allow a user to toggle between on and off.
 
Creates a checkbox item to allow a user to toggle between on and off.
  
−
==Component Source Code==
 
  
−
Please click here to download the component source project: [https://www.flowcode.co.uk/wiki/componentsource/FC_Comp_Source_WEBEXP_CheckBox.fcsx FC_Comp_Source_WEBEXP_CheckBox.fcsx]
+
==Version information==
 +
 
 +
Library Version, Component Version, Date, Author, Info
 +
2, 1.1, 14-06-24, ST, Corrected the id tag of the html elements
 +
3, 1.2, 20-04-26, ST, Resizing no longer distorts the square shape
 +
  
−
Please click here to view the component source code (Beta): [https://www.flowcode.co.uk/FlowchartView/?wfile=componentsource/FC_Comp_Source_WEBEXP_CheckBox.fcsx FC_Comp_Source_WEBEXP_CheckBox.fcsx]
 
  
 
==Detailed description==
 
==Detailed description==
  
 
''No detailed description exists yet for this component''
 
''No detailed description exists yet for this component''
 +
  
 
==Examples==
 
==Examples==
  
−
''<span style="color:red;">No additional examples</span>''
+
===BasicControls example===
 +
This simple example shows how to sue 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==
 
==Macro reference==
Line 37: Line 47:
 
| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''GetState'''
 
| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''GetState'''
 
|-
 
|-
−
| colspan="2" | &nbsp;
+
| colspan="2" | Returns the current state of the checkbox (i.e. if it is selected or not)&nbsp;
 
|-
 
|-
 
|-
 
|-
Line 51: Line 61:
 
| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''SetState'''
 
| width="90%" style="background-color:#D8C9D8; color:#4B008D;" | '''SetState'''
 
|-
 
|-
−
| colspan="2" | &nbsp;
+
| colspan="2" | Sets the current state of this checkbox&nbsp;
 
|-
 
|-
 
|-
 
|-
Line 57: Line 67:
 
| width="90%" | bState
 
| width="90%" | bState
 
|-
 
|-
−
| colspan="2" | &nbsp;
+
| colspan="2" | The state to set&nbsp;
 
|-
 
|-
 
| width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-void-icon.png]] - VOID
 
| width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-void-icon.png]] - VOID
Line 73: Line 83:
 
|-
 
|-
 
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
 
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
−
| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | CheckBox
+
| width="90%" style="background-color:#EAE1EA; color:#4B008D;" | Check Box
 
|-
 
|-
 
|-
 
|-
Line 79: Line 89:
 
| width="90%" | Checked
 
| width="90%" | Checked
 
|-
 
|-
−
| colspan="2" | &nbsp;
+
| colspan="2" | The initial state of the checkbox&nbsp;
 
|-
 
|-
 
| width="10%" align="center" | [[File:Fc9-type-10-icon.png]]
 
| width="10%" align="center" | [[File:Fc9-type-10-icon.png]]
 
| width="90%" | Text
 
| width="90%" | Text
 
|-
 
|-
−
| colspan="2" | &nbsp;
+
| colspan="2" | The label for the checkbox&nbsp;
 
|-
 
|-
 
| width="10%" align="center" | [[File:Fc9-type-24-icon.png]]
 
| width="10%" align="center" | [[File:Fc9-type-24-icon.png]]
 
| width="90%" | OnClick Macro
 
| width="90%" | OnClick Macro
 
|-
 
|-
−
| colspan="2" | &nbsp;
+
| colspan="2" | The macro to call when the user clicks this checkbox&nbsp;
 
|-
 
|-
 
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
 
| width="10%" align="center" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
Line 102: Line 112:
 
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
 
| width="10%" align="center" | [[File:Fc9-type-21-icon.png]]
 
| width="90%" | Font Size
 
| 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;
 
| colspan="2" | The font size in pixels&nbsp;
Line 113: Line 118:
 
| width="90%" | Bold
 
| 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="10%" align="center" | [[File:Fc9-type-7-icon.png]]
 
| width="90%" | Italic
 
| 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="10%" align="center" | [[File:Fc9-type-7-icon.png]]
 
| width="90%" | Underline
 
| 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="10%" align="center" | [[File:Fc9-type-7-icon.png]]
 
| width="90%" | Strikethrough
 
| 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" style="background-color:#EAE1EA;" | [[File:Fc9-conn-icon.png]]
Line 151: Line 156:
 
| width="90%" | Custom Attributes
 
| 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_CheckBox.fcsx FC_Comp_Source_WEBEXP_CheckBox.fcsx]
 +
 +
Please click here to view the component source code (Beta): [https://www.flowcode.co.uk/FlowchartView/?wfile=componentsource/FC_Comp_Source_WEBEXP_CheckBox.fcsx FC_Comp_Source_WEBEXP_CheckBox.fcsx]

Latest revision as of 17:06, 28 April 2026

Author MatrixTSL
Version 1.2
Category Control


Check Box component

Creates a checkbox item to allow a user to toggle between on and off.


Version information

Library Version, Component Version, Date, Author, Info
2, 1.1, 14-06-24, ST, Corrected the id tag of the html elements
3, 1.2, 20-04-26, ST, Resizing no longer distorts the square shape


Detailed description

No detailed description exists yet for this component


Examples

BasicControls example

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

FC6 Icon.png BasicControls.fcweb

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


Macro reference

GetState

Fc9-comp-macro.png GetState
Returns the current state of the checkbox (i.e. if it is selected or not) 
Fc9-bool-icon.png - BOOL Return


SetState

Fc9-comp-macro.png SetState
Sets the current state of this checkbox 
Fc9-bool-icon.png - BOOL bState
The state to set 
Fc9-void-icon.png - VOID Return


Property reference

Fc9-prop-icon.png Properties
Fc9-conn-icon.png Check Box
Fc9-type-7-icon.png Checked
The initial state of the checkbox 
Fc9-type-10-icon.png Text
The label for the checkbox 
Fc9-type-24-icon.png OnClick Macro
The macro to call when the user clicks this checkbox 
Fc9-conn-icon.png Style
Fc9-type-3-icon.png Font
Specifies the font style for the item 
Fc9-type-21-icon.png Font Size
The font size in pixels 
Fc9-type-7-icon.png Bold
Make the caption text bold 
Fc9-type-7-icon.png Italic
Make the caption text italicised 
Fc9-type-7-icon.png Underline
Make the caption text underlined 
Fc9-type-7-icon.png Strikethrough
Make the caption text crossed-out 
Fc9-conn-icon.png Colour
Fc9-type-2-icon.png Text
Specifies the font colour for the item 
Fc9-type-2-icon.png Background
Specifies the background colour value 
Fc9-conn-icon.png Advanced
Fc9-type-10-icon.png 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_CheckBox.fcsx

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

Retrieved from "https://www.flowcode.co.uk/wiki/index.php?title=Component:_Check_Box_(_Control)&oldid=42127"