Component: Input Text ( Control): Difference between revisions

Latest revision as of 14:37, 13 July 2026

Author	MatrixTSL
Version	1.0
Category	Control

Input Text component

Creates a text field that can be highlighted and edited by the user.

Version information

Library Version, Component Version, Date, Author, Info
2, 0.1, 27-01-25, BR, Added extra macros to set and get the value
3, 1.0, 14-02-25, ST, Changed generated CSS to ensure disabled control has grey text

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.

BasicControls.fcweb

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

Macro reference

GetFloat

	GetFloat
Returns the floating point numeric value entered into the text field
- FLOAT	Return

GetText

	GetText
Returns the text currently entered into this text field
- STRING	Return

GetValue

	GetValue
Returns the numeric value entered into the text field
- LONG	Return

SetFloat

	SetFloat
Sets the numeric floating point value displayed in this text field
- FLOAT	Value
float value to set
- VOID	Return

SetText

	SetText
Sets the text displayed in this text field
- STRING	sText
Text to set
- VOID	Return

SetValue

	SetValue
Sets the numeric value displayed in this text field
- LONG	Value
integer value to set
- VOID	Return

Property reference

	Properties
	Text
	Text
The initial text of the component
	Type
Allows the input to be restricted to numbers or hidden
	Limit Length
Sets a limit on how many characters can be entered
	Max Length
The maximum number of characters
	Style
	Font
Specifies the font style for the text
	Font Size
The font size in pixels
	Horizontal Alignment
Aligns the text entered
	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 for the item
	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_InputText.fcsx

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

@@ Line 5: / Line 5: @@
 |-
 | width="20%" style="color:gray;" | Version
-| 0.1
+| 1.0
 |-
 | width="20%" style="color:gray;" | Category
@@ Line 15: / Line 15: @@
 Creates a text field that can be highlighted and edited by the user.
-==Component Source Code==
-Please click here to download the component source project: [https://www.flowcode.co.uk/wiki/componentsource/FC_Comp_Source_WEBEXP_InputText.fcsx FC_Comp_Source_WEBEXP_InputText.fcsx]
+==Version information==
+ Library Version, Component Version, Date, Author, Info
+, 0.1, 27-01-25, BR, Added extra macros to set and get the value
+, 1.0, 14-02-25, ST, Changed generated CSS to ensure disabled control has grey text
-Please click here to view the component source code (Beta): [https://www.flowcode.co.uk/FlowchartView/?wfile=componentsource/FC_Comp_Source_WEBEXP_InputText.fcsx FC_Comp_Source_WEBEXP_InputText.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 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==
+===GetFloat===
+{| class="mtx-class-macrotable wikitable"
+|-
+| width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-comp-macro.png]]
+| width="90%" class="mtx-class-macrohead" | '''GetFloat'''
+|-
+| colspan="2" | Returns the floating point numeric value entered into the text field&nbsp;
+|-
+|-
+| width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-f32-icon.png]] - FLOAT
+| width="90%" style="border-top: 2px solid #000;" | ''Return''
+|}
 ===GetText===
-{| 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;" | '''GetText'''
+| width="90%" class="mtx-class-macrohead" | '''GetText'''
 |-
 | colspan="2" | Returns the text currently entered into this text field&nbsp;
@@ Line 43: / Line 65: @@
 |-
 | width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-string-icon.png]] - STRING
+| width="90%" style="border-top: 2px solid #000;" | ''Return''
+|}
+===GetValue===
+{| class="mtx-class-macrotable wikitable"
+|-
+| width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-comp-macro.png]]
+| width="90%" class="mtx-class-macrohead" | '''GetValue'''
+|-
+| colspan="2" | Returns the numeric value entered into the text field&nbsp;
+|-
+|-
+| width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-s32-icon.png]] - LONG
+| width="90%" style="border-top: 2px solid #000;" | ''Return''
+|}
+===SetFloat===
+{| class="mtx-class-macrotable wikitable"
+|-
+| width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-comp-macro.png]]
+| width="90%" class="mtx-class-macrohead" | '''SetFloat'''
+|-
+| colspan="2" | Sets the numeric floating point value displayed in this text field&nbsp;
+|-
+|-
+| width="10%" align="center" | [[File:Fc9-f32-icon.png]] - FLOAT
+| width="90%" | Value
+|-
+| colspan="2" | float value to set&nbsp;
+|-
+| width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-void-icon.png]] - VOID
 | width="90%" style="border-top: 2px solid #000;" | ''Return''
 |}
@@ Line 48: / Line 103: @@
 ===SetText===
-{| 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;" | '''SetText'''
+| width="90%" class="mtx-class-macrohead" | '''SetText'''
 |-
 | colspan="2" | Sets the text displayed in this text field&nbsp;
@@ Line 60: / Line 115: @@
 |-
 | colspan="2" | Text to set&nbsp;
+|-
+| width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-void-icon.png]] - VOID
+| width="90%" style="border-top: 2px solid #000;" | ''Return''
+|}
+===SetValue===
+{| class="mtx-class-macrotable wikitable"
+|-
+| width="10%" align="center" class="mtx-class-macrohead" | [[File:Fc9-comp-macro.png]]
+| width="90%" class="mtx-class-macrohead" | '''SetValue'''
+|-
+| colspan="2" | Sets the numeric value displayed in this text field&nbsp;
+|-
+|-
+| width="10%" align="center" | [[File:Fc9-s32-icon.png]] - LONG
+| width="90%" | Value
+|-
+| colspan="2" | integer value to set&nbsp;
 |-
 | width="10%" align="center" style="border-top: 2px solid #000;" | [[File:Fc9-void-icon.png]] - VOID
@@ Line 68: / Line 142: @@
 ==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;" | Text
+| width="90%" class="mtx-class-propfolder" | Text
 |-
 |-
@@ Line 98: / Line 172: @@
 | colspan="2" | The maximum number of characters&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 137: / Line 211: @@
 | 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 151: / Line 225: @@
 | 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 160: / Line 234: @@
 | 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_InputText.fcsx FC_Comp_Source_WEBEXP_InputText.fcsx]
+Please click here to view the component source code (Beta): [https://www.flowcode.co.uk/FlowchartView/?wfile=componentsource/FC_Comp_Source_WEBEXP_InputText.fcsx FC_Comp_Source_WEBEXP_InputText.fcsx]

SteveT (talk | contribs)