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.

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:

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

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

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

The sourcecode can be found here.

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: janjf93 on Pixabay
• https://software-lab.de/doc/form/form.html
• https://software-lab.de/doc/app.html