Change Value from Event

The Goal

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

1. How to work with Values from the Events.

The Project Structure

View[MainView]

• MainView

  • Grid[grid1]

    • Text[text1]

    • Button[button1]

1. Prepare a Grid Layout

First, let's prepare a Basic Grid Layout structure, including Text and Button components.

1. Place in a Grid Layout component, keep ID -> grid1; Columns -> 12, and set up its Item Flex -> Stretch; Spacing -> None

2. Into grid1 put a new Text, keep its ID -> text1; Text Alignment -> Center; Text Style -> Bold; Font Size -> Large; Vertical Alignment -> Center

   1. Layout -> Item Position -> X -> 1; Y -> 3; Width -> 8; Height -> 6

3. Place into the grid1 a new Button, keep ID -> button1, and set up its Icon Name -> "mdi/minus"; Icon Size -> Large

   1. Layout -> Item Position -> X -> 10; Y -> 3; Width -> 1; Height -> 6

Current Canvas[MainView]

2. Create and Bind a New State Variable

A State Variable will contain numeric information bonded with the Text output.

1. Add State Variable by clicking on the Plus icon in the Outline Panel.

2. Name it myCounter, switch its Type to Number, and set up Initial Value -> 10.

3. Switch Value of text1 to ƒx Function and set -> myCounter.value

text1[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.

1. Select the Event option in the button1 and Add Event Logic Plus icon -> Call Method

2. Set up already wired up Call Method as follows:

   1. Method -> myCounter.setValue

   2. 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 ƒx Function because of the reading of the current Value.

Flowchart button1[Call Method]

Call Method[Settings]

The Conclusion

Any available Methods can be seen in the Data Explorer and have to set up Arguments.

Follow up on our Change Value from Event tutorial https://youtu.be/Kee6oXJdzaY