Prepare a Basic Application showing the exact number with the Subtraction Button.
Basic Substracting Application
The Description
In most cases, applications like a calculator are effectively composed by the Grid. The Text component reflects the State Variable, which has been subtracted by one by triggering an Event of Button.
The Knowledge You Will Get
How to work with Values from the Events.
The Project Structure
1. Prepare a Grid Layout
First, let's prepare a Basic Grid Layout structure, including Text and Button components.
Place in a Grid Layout component, keep ID -> grid1; Columns -> 12, and set up its Item Flex -> Stretch; Spacing -> None
Into grid1 put a new Text, keep its ID -> text1; Text Alignment -> Center; Text Style -> Bold; Font Size -> Large; Vertical Alignment -> Center
Layout -> Item Position -> X -> 1; Y -> 3; Width -> 8; Height -> 6
Place into the grid1 a new Button, keep ID -> button1, and set up its Icon Name -> "mdi/minus"; Icon Size -> Large
Layout -> Item Position -> X -> 10; Y -> 3; Width -> 1; Height -> 6
2. Create and Bind a New State Variable
A State Variable will contain numeric information bonded with the Text output.
Add State Variable by clicking on the Plus icon in the Outline Panel.
Name it myCounter, switch its Type to Number, and set up Initial Value -> 10.
Switch Value of text1 to ƒx Function and set -> myCounter.value
3. Bind an Event Logic to the button1
The last step we have to do is bind an Event, subtracting the Value of myCounter by one.
Select the Event option in the button1 and Add Event LogicPlus icon -> Call Method
Set up already wired up Call Method as follows:
Method -> myCounter.setValue
Switch Argument #1 to ƒx Function -> myCounter.value - 1
setValue is an available Method in State Variable, visible in the Data Explorer.
The Argument has to be set up as a ƒxFunction because of the reading of the current Value.
The Conclusion
Any available Methods can be seen in the Data Explorer and have to set up Arguments.
