INQ241B - Day 13 Notes

Hide and Show

We know how to change the appearance of an app, change variables that are used in the display code
We can also use if statements in the display code to get more drastic changes like hiding and showing

Here is the button from last class that increments a counter

page main ()
data

initialize
  ◳ count := 0
display
  ◳ count → post to wall
  boxed
    box → set border(colors  → foreground, 0.1)
    box → set background(colors  → light gray)
    "Click Me" → post to wall
    box → on tapped(handler)
      where handler() is
        ◳ count := ◳ count + 1
    end end
  end boxed
end page

By putting content inside of an if statement we can change whether it is added to the display
```
if ◳ count < 1 then
  ◳ count → post to wall
else do nothing end if
```
Initially the count is displayed, becaues count is 0
When the button is clicked, it dissapears

Can also make something appear by using a different condition

if ◳ count > 0 then
  ◳ count → post to wall
else do nothing end if

Or could hide one thing and reveal another with an if/else

if ◳ count < 0 then
  "Before" → post to wall
else
  "After" → post to wall
end if

Functions and GUIs

By now you have probably noticed that using boxes to create a layout can get really complicated and difficult to read
It’s about to get worse, if you are creating boxes inside of if statements that are only sometimes displayed
Functions to the rescue
Can put display code in functions to simplify things
The ‘extract’ button makes this very easy

Let’s put the button inside of a function

private atomic function display button plus()
  boxed
    box → set border(colors  → foreground, 0.1)
    box → set background(colors  → blue)
    "Plus" → post to wall
    box → on tapped(handler)
      where handler() is
        ◳ count := ◳ count + 1
    end end
  end boxed
end function

Notices the function definition is different, it has ‘private atomic’ at the beginning
Need this to be called in display code

To create a function with add new, need to set private and atomic in the function settings (click on function name to access)

private atomic function display button minus()
  boxed
    box → set border(colors  → foreground, 0.1)
    box → set background(colors  → red)
    "Minus" → post to wall
    box → on tapped(handler)
      where handler() is
        ◳ count := ◳ count - 1
    end end
  end boxed
end function

Finally, call the two functions on the main page inside of if statements

page main ()
data

initialize
  ◳ count := 0
display
  if ◳ count = 0 then
    ▷ display button plus
  else
    ▷ display button minus
  end if
end page

Activity

Activity 13