# Web Application Programming in PicoLisp: Some more GUI elements

So far, we have covered ``+TextField`` and ``+Button``. Let's see what other GUI elements we have in our portfolio. [For a hosted version fo the examples, click here](http://www.picolisp.com/blog/src/more-gui-elements.l).

--------------------------

### Subclasses of ``+gui``

We can see all subclasses of ``+gui`` by typing ``(dep '+gui)`` in the REPL. The classes that start with a lowercase-letter are abstract, but the rest can be instantiated.

Let's start with the classes that directly inherit from ``+gui``: ``+Img``, ``+field`` and ``+Button``. ``+field`` is abstract and ``+Button`` we know already. So let's take a look at ``+Img``.

-----------------------
 
### The ``+Img`` class and the ``<img>`` function

The ``+Img`` class enables us to display dynamic images, for example from the database. Note that **if the image is static, it is easier to display it using the ``<img>`` function**, which takes the arguments ``Src``, ``Alt``, ``Url``, ``DX`` and ``DY``:

```
(<img> "https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/PicoLisp_Logo.svg/1200px-PicoLisp_Logo.svg.png" "PicoLisp" NIL 200 200)
```
The ``Url`` parameter converts the image into a clickable link:

```
(<img> "https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/PicoLisp_Logo.svg/1200px-PicoLisp_Logo.svg.png" "PicoLisp" "http://picolisp.com" 200 200)
```

-------------------------

However, if we want to create dynamic images (for example, retrieving from the database), the ``+Img`` class is helpful. ``+Img`` displays an image and takes up to 4 arguments: ``Alt``, ``Url``, ``dx`` and ``Dy``, just like the ``<img>`` function. Additionally, a prefix class can be used to set the ``img`` property which defines the ``src`` tag. For example, we could simply use the ``+Init`` prefix class to set the image source:

```
(gui '(+Style +Init +Img) "mb-3" "https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/PicoLisp_Logo.svg/1200px-PicoLisp_Logo.svg.png" "PicoLisp" 100 100 )
```

As already mentioned, in static cases an ``<img>`` function might be more convenient to use. We will see more complex uses of ``+Img`` when we come to database applications and examples.

------------------------

Next, we will take a look at the subclasses of the abstract class ``+field``. We have the following classes: ``+Radio``, ``+TextField`` (already covered), ``RgbPicker`` and ``Checkbox``.

---------------------------

### The ``+Radio`` class

The radio class creates a radio input field. A radio input only makes sense as a group, where the 'leader component' defines what happens to the value. 

The first argument to a ``+Radio`` component is either a field reference to the leader component, or ``NIL`` in case of the leader component itself. The second argument is the value of the choice.

```
(<label> "mr-2" "Radio A") 
(gui '(+Var +Radio) '*DemoRadio NIL "A")

(<label> "mr-2" "Radio B") 
(gui '(+Radio)  -1 "B")

(<label> "mr-2" "Radio C") 
(gui '(+Radio)  -2 "C")
```
In the example above, the first item ("Radio A") is the 'leader component'. It defines that the value should be stored in the global variable ``*DemoRadio`` due to the prefix class ``+Var``. The other two following choices refer to the leader component by relative positioning ``-1`` and ``-2``. Alternatively we could have used names.

The rendered output in the browser looks like this:

![radio.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1633201426638/N4YbtCvIa.png)

---------------------------

### The ``+RgbPicker`` class

The ``+RgbPicker`` creates a simple HTML ``<input type="color">`` field. It takes no arguments and stores the color as HEX. In the following example, we put the chosen color into a global variable called ``*Color``:

```
(<label> "mr-2" "Choose a color: ") 
(gui '(+Var +RgbPicker) '*Color)
(gui '(+Button) "Submit")
(<p> "mb-5" (prinl "You choose: " *Color))
```

![rgbpicker.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1633202055728/q7Qg8qDWR.png)

---------------------------------

### The ``+Checkbox`` class

The ``+Checkbox`` class takes an additional argument which is used as label. The value is mapped to ``T`` if checked, otherwise ``NIL``.

```
(gui '(+Checkbox) "I don't like Mondays")
```
---------------------------

### The ``+Button`` subclasses

Let's check out some of the predefined button-subclasses. Most of them are predefined classes that are used in charts. Among others, they inherit from the following classes:
- ``+Tiny`` (small size)
- ``+JS`` 
- ``+Able``
- ``+Tip`` (display tooltip)

Some button subclasses and their rendered output - obviously nothing happens when they are clicked due to lack of context.

```
(gui '(+BubbleButton)) (<label> "mr-2" "Shift-Row-Up Button") (<br>)
(gui '(+DelRowButton)) (<label> "mr-2" "Delete-Row Button") (<br>) 
(gui '(+InsRowButton)) (<label> "mr-2" "Insert-Row Button") (<br>)
(gui '(+UndoButton)) (<label> "mr-2" "Undo Button") (<br>)
(gui '(+ShowButton)) (<label> "mr-2" "Show Button") (<br>)
```

![buttonsubclass.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1633203589833/gRRzJyIJk.png)

We will come back to these buttons when we discuss about charts.

---------------------------

### The ``+Textfield`` subclasses

The ``+Textfield`` subclasses establish different types of input fields, for example the ``+UpField`` which allows to upload data, or the ``+PwField`` that hides the input values.

```
(gui '(+Style +UpField) "mx-3 mb-2" 20 "Upload Field: ") (<br>)
(gui '(+Style +PwField) "mx-3 mb-2" 20 "Password Field: ") (<br>)
```

![textfieldsubclass.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1633204530075/NF3H3ANQf.png)

---------------------------

The sourcecode can be found [here](https://gitlab.com/picolisp-blog/web-applications/-/blob/main/gui-elements/more-gui-elements.l).

In the next posts, we will see some examples of these classes in action: four short examples from the Rosetta Code Project, and then two versions of a simple To-Do-App.

---------------------------

# Sources
Cover pic: <a href="https://pixabay.com/de/users/janjf93-3084263/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=2485367">janjf93</a> on <a href="https://pixabay.com/de/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=2485367">Pixabay</a>  
https://software-lab.de/doc/form/form.html  
https://software-lab.de/doc/app.html