DEV Community

Cover image for Web Application Programming in PicoLisp: Some more GUI elements
Mia
Mia

Posted on • Originally published at picolisp-explored.com

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.


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)
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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 )
Enter fullscreen mode Exit fullscreen mode

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")
Enter fullscreen mode Exit fullscreen mode

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


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))
Enter fullscreen mode Exit fullscreen mode

rgbpicker.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")
Enter fullscreen mode Exit fullscreen mode

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>)
Enter fullscreen mode Exit fullscreen mode

buttonsubclass.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>)
Enter fullscreen mode Exit fullscreen mode

textfieldsubclass.png


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

Top comments (0)