Web Application Programming in PicoLisp: Some more GUI elements
So far, we have covered
+Button. Let's see what other GUI elements we have in our portfolio. For a hosted version fo the examples, click here.
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
+field is abstract and
+Button we know already. So let's take a look at
+Img class and 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
(<img> "https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/PicoLisp_Logo.svg/1200px-PicoLisp_Logo.svg.png" "PicoLisp" NIL 200 200)
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:
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:
+TextField (already covered),
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
-2. Alternatively we could have used names.
The rendered output in the browser looks like this:
+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
(<label> "mr-2" "Choose a color: ")
(gui '(+Var +RgbPicker) '*Color)
(gui '(+Button) "Submit")
(<p> "mb-5" (prinl "You choose: " *Color))
+Checkbox class takes an additional argument which is used as label. The value is mapped to
T if checked, otherwise
(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:
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.
+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.