# Change Value from Event

### The Goal

Prepare a *Basic Application* showing the exact number with the *Subtraction Button*.

![Basic Substracting Application](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2Fxw9XXzEUQ3deXgXi9sGZ%2Fimage.png?alt=media\&token=5fae2742-2bac-4308-aa68-f6599fb454d6)

### 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

{% tabs %}
{% tab title="View\[MainView]" %}

* [ ] MainView
  * [ ] Grid\[`grid1`]
    * [ ] Text\[`text1`]
    * [ ] Button\[`button1`]
      {% endtab %}
      {% endtabs %}

### 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`

{% tabs %}
{% tab title="Current Canvas\[MainView]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FR8pb8Y6WzDC4UR8kvPTB%2Fimage.png?alt=media\&token=e1571619-5b74-41ad-ae64-aac207fc59dc)
{% endtab %}
{% endtabs %}

### 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`

{% tabs %}
{% tab title="text1\[Value]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FgnV3szpm3oGtJ8QGmgqp%2Fimage.png?alt=media\&token=cad30f63-cdba-4026-9f5c-64a8991ae2f4)
{% endtab %}
{% endtabs %}

### 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`

{% hint style="info" %}
*setValue* is an available *Method* in *State Variable*, visible in the *Data Explorer*.
{% endhint %}

{% hint style="info" %}
The *Argument* has to be set up as a *ƒx* *Function* because of the reading of the *current Value*.
{% endhint %}

{% tabs %}
{% tab title="Flowchart button1\[Call Method]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2Fxy45waIxp79qegXKrmhf%2Fimage.png?alt=media\&token=f7465e3c-2a85-4018-a11e-b320bbdfee5f)
{% endtab %}

{% tab title="Call Method\[Settings]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2Fih1p5tL1XQFAbYEk0hZ9%2Fimage.png?alt=media\&token=ad8ce0f4-2e40-4139-895b-cad51d29c4da)
{% endtab %}
{% endtabs %}

### The Conclusion

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

{% hint style="info" %}
Follow up on our *Change Value from Event* tutorial <https://youtu.be/Kee6oXJdzaY>
{% endhint %}