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.
Top comments (0)