# WebApps: A Simple Windowed Application
### [Task](http://rosettacode.org/wiki/Simple_windowed_application)
> Create a window that has:
- a label that says "There have been no clicks yet"
- a button that says "click me".
> Upon clicking the button with the mouse, the label should change and show the number of times the button has been clicked.
-----------------------------------
I guess this task can be considered as a kind of minimal example of an interactive component. In the first step, we will build up the application as shown in the [Web Application Tutorial](https://picolisp-blog.hashnode.dev/series/web-app). After that, we will modify it a little bit in order to convert it into a directly executable file.
In the end, it will look like this:
You can view [the hosted version here](http://picolisp.com/blog/src/simple-windowed-application.l).
---------------------------------
### Preparations
As first step, let's start the application server from the terminal with the needed libraries:
```
$ pil @lib/http.l @lib/xhtml.l @lib/form.l --server 8080 +
```
Then let's define the basics in a file called ``simple-windowed-application.l``:
- CSS file (I use [this bootstrap css file](https://gitlab.com/picolisp-blog/web-applications/-/blob/master/gui-elements/bootstrap.css)),
- ``(app)`` and ``action`` functions
- ``html`` function
```
(setq *Css '("@lib.css" "css/bootstrap.css"))
(app)
(action
(html 0 "Simple Windowed Application" *Css NIL
(form NIL) ) )
```
If you point the browser towards http://localhost:8080/simple-windowed-application.l, you should now see a blank browser tab with the title "Simple Windowed Application".
--------------------------
### Define the GUI elements
According to the task description, we need a label that says "There have been no clicks yet", and a button saying "click me".
Instead of a label, let's use a ``+TextField`` as it's more flexible because we can use our prefix classes. A ``+TextField`` without any arguments is simply plain HTML text. In this case, the text needs to be defined by a prefix class, for example ``+Init``:
```
(gui '(+Init +TextField) "There have been no clicks yet")
(gui '(+Button) "Click me!")
```
So far so good - now it looks like this:
----------------------------
### Define the counter
When the button is clicked, a counter should increase. Let's use a global variable ``*Count`` for that. If it doesn't exist, it should be created with a default value of ``0``, which can be done using the ``default`` function.
```
(default *Count 0)
```
We shouldn't define the ``*Count`` by something like ``(setq *Count 0)``, because in this case ``*Count`` would be set to ``0`` everytime the page reloads.
------------------------
Now let's update our button by adding a function. Each time the button gets pressed, ``*Count`` should increase. In order to see the output, let's try to print it into a ``
`` tag:
```
(gui '(+Button) "click me" '(inc '*Count))
(
NIL (prinl *Count))
```
Now everytime the button is clicked, the page reloads and an incremented value of ``*Count`` is displayed.
So far, so good - however, our task was to **update the label field**, not create a new one!
-----------------------
### Using the ``set>`` method
We know that every GUI-object has a ``set>`` method. The syntax for method calls on objects is ``(