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