Repository navigation
Class Functions
In this chapter, we will cover the class functions available. Every function acts as a getter or a setter.
It is not recommended to modify the object directly. You must use the class functions.
Many function require a first parameter which is the button state. This is to know for which button state you would like to change a property. Some constants are given with the component :
-
AJUI_btn_default: "default" -
AJUI_btn_hover: "hover" -
AJUI_btn_active: "active" -
AJUI_btn_disable: "disable" -
AJUI_btn_focus: "focus"
For example, if you want to change the background color for the on hover state, you must use the AJUI_btn_hover constant as the first parameter
Form.btn.backgroundColor(AJUI_btn_hover;"green")
Colors can be used as defined here SVG Colors.
•Index
Global
- name
- type
- composition
- onClick
- onDoubleClick
- draw
- enable
- hide
- show
- removePropertyException
- removePropertyExceptions
- resetState
- resetAllStates
Button Box
Text
Picture
- picturePath
- pictureHeight
- pictureWidth
- colorToReplace
- replacingColor
- pictureOpacity
- pictureRatio
- pictureScale
Composite
- picturePosition
- pictureAllocation
- activateSecondaryColor
- backgroundSecondaryColor
- linkTextToPicture
- spaceBetween
- FAB_main
- FAB_add
- FAB_position
- FAB_angle
- FAB_startAngle
- FAB_radius
- FAB_clockwise
- FAB_animated
- FAB_remove
- FAB_clearCollection
•name
Name of the button. Must be the name of the form variable widget where you want to bind the button.
(text) name
Form.btn.name("btn")
•type
Type of button. Only 2 types are possible :
- rectangle
- circle
(text) type
"rectangle"
Form.btn.type("circle")
•composition
Button composition :
- text
- picture
- composite
(text) button composition
"text"
Form.btn.composition("composite")
•onClick
Callback of the on click event. Can be a formula or a method name. You can pass an object as a parameter to this callback
(variant) method name or a formula (object) parameters
Form.btn.onClick("btn_onClick")
Form.btn.onClick(Formula(on_click))
Form.btn.onClick(Formula(ALERT($1.message));New object("message";"hello world"))
•onDoubleClick
Callback of the on double click event. Can be a formula or a method name. You can pass an object as a parameter to this callback
(variant) method name or a formula (object) parameters
Form.btn.onDoubleClick("btn_onClick")
Form.btn.onDoubleClick(Formula(on_click))
Form.btn.onDoubleClick(Formula(ALERT($1.message));New object("message";"hello world"))
•draw
Draw the button. It will handle the event for the different states.
Form.btn.draw()
•enable
Enable or disable the button.
(boolean) True/False
Form.btn.enable(True)
•hide
Hide the button
Form.btn.hide()
•show
Show the button
Form.btn.show()
•removePropertyException
Remove a property exception for a specific state. For example you can remove the borderColor for the onHover state.
(text) property to remove (text) button state
Form.btn.removePropertyException("borderColor";AJUI_Btn_hover)
•removePropertyExceptions
Remove a property exception for all the states.
(text) property to remove
Form.btn.removePropertyExceptions("borderColor")
•resetState
Remove all the properties for a specific state. For example you can reset the onHover state to the default.
(text) button state
Form.btn.resetState(AJUI_Btn_hover)
•resetAllStates
Remove all the properties for all the states.
Form.btn.resetAllStates()
•backgroundColor
bgColor
Background color of the button
(text) button state (text) color
"#4d9ad4"
Form.btn.backgroundColor(AJUI_btn_hover;"green")
Form.btn.bgColor(AJUI_btn_hover;"#fcc728")
•cornerRadius
Corner radius of the button's corners.
(text) button state (longint) radius
5
Form.btn.cornerRadius(AJUI_btn_hover;5)
•height
Height of the button. If set, this value will only be used if the resizable is set to true. If resizable is set to true and the value of heightis -1 the size will be the one defined in the form variable widget.
(text) button state (longint) height
-1
Form.btn.height(AJUI_btn_default;13)
•width
Width of the button. If set, this value will only be used if the resizable is set to true. If resizable is set to true and the value of widthis -1 the size will be the one defined in the form variable widget.
(text) button state (longint) width
-1
Form.btn.width(AJUI_btn_default;120)
•resizable
Boolean value that says if we want to resize the form variable widget or not.
(boolean) resizable
False
Form.btn.resizable(True)
•padding
Set the padding of the button, cannot be <0.
(text) button state (longint) padding
3
Form.btn.padding(AJUI_btn_default;10)
•borderSize
Border size.
(text) button state (longint) size
0
Form.btn.borderSize(AJUI_btn_default;2)
•borderColor
Border color.
(text) button state (text) color
"#0a509e"
Form.btn.borderColor(AJUI_btn_default;"blue")
•label
Label of the button to be displayed.
(text) button state (text) label
Label
Form.btn.label(AJUI_btn_default;"Click Me!")
•fontSize
Font size.
(text) button state (longint) size
16
Form.btn.fontSize(AJUI_btn_default;12)
•fontColor
Font color.
(text) button state (text) color
"white"
Form.btn.fontColor(AJUI_btn_default;"lightblue")
•fontName
Font name.
(text) button state (text) font name(s). Can be different fonts separated by a comma.
"Arial, Helvetica, MS Sans Serif"
Form.btn.fontName(AJUI_btn_default;"Times")
•fontStyle
Font style.
(text) button state
(text) font style(s). Any of those, separated by a , :
- Bold
- Italic
- Underline
- Strikethrough
Form.btn.fontStyle(AJUI_btn_default;"Bold")
•textAlign
Alignment of the text.
(text) button state (text) text Align :
- left
- center
- right
"center"
Form.btn.textAlign(AJUI_btn_default;"left")
•horizontalMargin
Horizontal margin. Left and right margin of the text.
(text) button state (longint) horizontal margin
0
Form.btn.horizontalMargin(AJUI_btn_default;10)
•picturePath
Path to the picture to display relative to the Resources folder.
You can also use "#" as the root of your picture path. This will only work with an imported AJUI Button template and the picture must be located in the same folder as the template.
(text) button state (text) picture path
Form.btn.picturePath(AJUI_btn_default;"images/icons/add.svg")
•pictureHeight
Height of the picture.
(text) button state (longint) picture height. -1 takes the original height of the picture
-1
Form.btn.pictureHeight(AJUI_btn_default;24)
•pictureWidth
Width of the picture.
(text) button state (longint) picture width. -1 takes the original width of the picture
-1
Form.btn.pictureWidth(AJUI_btn_default;24)
•colorToReplace
When using svg as a picture, you can define a color that will be replacing during runtime. For example, you want an icon to change the color on hover. Correspond to the svg fill and/or stroke attributes.
(text) color to replace
Form.btn.colorToReplace("black")
•replacingColor
Color that will replace the one set with the colorToReplace function.
(text) button state (text) color
Form.btn.replacingColor(AJUI_btn_hover;"blue")
•pictureOpacity
Opacity of the picture.
(text) button state (longint) opacity (0-100)
100
Form.btn.pictureOpactiy(AJUI_btn_default;50)
•pictureRatio
Ratio of the picture.
(text) button state (longint) ratio (0-1)
1
Form.btn.pictureRatio(AJUI_btn_default;0.5)
•pictureScale
Scale of the picture related to the button size.
(text) button state (longint) scale (0-100). 0 means no scale.
0
Form.btn.pictureScale(AJUI_btn_default;50)
•picturePosition
Picture position. Only for composite button.
(text) button state (text) position. Available position :
- left
- right
- top
- bottom
"left"
Form.btn.picturePosition(AJUI_btn_default;"right")
•pictureAllocation
Picture allocation when the composition is composite. Percentage of the size opf the button allocated to the picture. Only for composite button.
(text) button state (longint) allocation (0-100)
30
Form.btn.pictureAllocation(AJUI_btn_default;50)
•activateSecondaryColor
Activate or not the secondary color. Only for compositeand when the picture is not linked to the text.
(boolean) activated
True
Form.btn.activateSecondaryColor(False)
•backgroundSecondaryColor
bgSecondaryColor
Background color of the picture if activated. Only for composite button.
(text) button state (text) background color
"#9fddf9"
Form.btn.backgroundSecondaryColor(AJUI_btn_default;"yellow")
Form.btn.bgSecondaryColor(AJUI_btn_default;"orange")
•linkTextToPicture
Link the text and the picture. Only for composite button.
(boolean) link
False
Form.btn.linkTextToPicture(True)
•spaceBetween
Space between a linked text and picture. Only for composite button.
(text) button state (longint) space
10
Form.btn.spaceBetween(AJUI_Btn_default;5)
•FAB_main
Define the button as the main FAB button. When defined, the click will alternatively show and hide all the FAB button associated with the FAB_add function. Any callbacks defined (OnClick and OnDoubleClick) to this button will be ignored.
(boolean) True/False
False
Form.btn.FAB_main(True)
•FAB_add
Add a button in the list to be displayed when the main button is clicked.
(text) button name (longint) (optional) position
Form.btn.FAB_add("add_btn")
Form.btn.FAB_add("delete_btn")
Form.btn.FAB_add("edit_btn";2)
•FAB_position
Define the position of the main button :
- top-left
- top (top-center)
- top-right
- left (left-center)
- center
- right (right-center)
- bottom-left
- bottom (bottom-center)
- bottom-right
It will update the value for angle and startAngle.
(text) position
Form.btn.FAB_position("center")
•FAB_angle
Define the angle (in degrees) where the buttons will be displayed.
(longint) angle
Form.btn.FAB_angle(90)
•FAB_startAngle
Define the angle (in degrees) where the buttons will start to be displayed.
(longint) angle
Form.btn.FAB_startAngle(180)
•FAB_radius
Radius between the main button and the displayed buttons.
(longint) radius
Form.btn.FAB_radius(80)
•FAB_clockwise
Define the direction to display the fab buttons.
(boolean) True/False
Form.btn.FAB_clockwise(False)
•FAB_animated
Animate the button upon display.
(boolean) True/False
Form.btn.FAB_animated(True)
•FAB_remove
Remove a button.
(text) button name
Form.btn.FAB_remove("delete_btn")
•FAB_clearCollection
Remove all the buttons.
Form.btn.FAB_clearCollection()
AJUI Button 1.3.3 - Wednesday, 29 July 2020
User Manual 🇺🇸