Skip to content

SLG UI Components

alx-net edited this page Jun 27, 2024 · 2 revisions

SLGButton : SimpleButtonMorph

SLGButton new
    onClickWithBlock: [
        Transcript show: 'clicked!'; cr.
    ].

SLGToggleButton : SLGButton

Use the $state$ message to get the current state of the button.

| toggleBtn |
toggleBtn := SLGToggleButtonGen new.
	
toggleBtn onClickWithBlock: [
    toggleBtn state ifTrue: [
        toggleBtn color: Color blue.
    ].

    toggleBtn state ifFalse: [
        toggleBtn color: Color green.
    ].
].

SLGSpacer : Morph

The background color is transparent by default.

SLGSpacer new
    width: 100.

Layouts

$SLGLayout$ is a lightweight wrapper for $TableLayout$. It takes a list of morphs as argument and returns a new morph with the elements ordered in a specific direction. In order to have a margin/padding behaviour use $SLGSpacer$ or $TableLayout$ specific messages.

Columnar layout

In order to display morphs in a column use the $\text{SLGLayout columnWithMorphs...}$.

| container submorph1 submorph2 submorph3 |

submorph1 := Morph new color: Color red; extent: 50@50.
submorph2 := Morph new color: Color green; extent: 50@50.
submorph3 := Morph new color: Color blue; extent: 50@50.

container := SLGLayout columnWithMorphs: {submorph1. submorph2. submorph3}.

container openInHand.

Row layout

In order to display morphs in a row use the $\text{SLGLayout rowWithMorphs ...}$.

| container submorph1 submorph2 submorph3 |

submorph1 := Morph new color: Color red; extent: 50@50.
submorph2 := Morph new color: Color green; extent: 50@50.
submorph3 := Morph new color: Color blue; extent: 50@50.

container := SLGLayout rowWithMorphs: {submorph1. submorph2. submorph3}.

container openInHand.

SLGText : TextMorph

SLGText new
    setText: 'Hello World!'.

SLGMultilineText : SLGText

SLGText new
    setText: 'Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!';
    width: 400.

SLGCarousel : Morph

This class is a morph which displays a list of morphs as a so called "carousel". A carousel is a UI component which displays only one morph of the list at the time and let's the implementor call a next and back method to iterate over the the morph list.

SLGCarousel new
    initializeWithMorphs:{morph1.morph2.morph3}.