INQ241B - Day 12 Notes

Global Variables

We know how to layout apps, use lots of boxes
But the only thing we we know how to do in response to user input is play a sound
To make more interesting apps, we need to be able to manipulate data

So create a variable and post it to the wall

page main ()
data

initialize
  do nothing
display
  var count := 0
  count → post to wall boxed
end page

Because it is a variable, we can change its value before posting it to the wall
```
var count := 0
count := 0
count → post to wall boxed
```
But this always displays the same number
We want to change the number in response to user input

So add a button, increment the variable when the button is pressed, and then post the new value to the wall

var count := 0
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
      count → post to wall
  end end
end boxed

But that creates an error
Can not ever have any post to wall functions inside of handlers
May not have been what we wanted anyway, because it would add new numbers every time there is a click

So movet the post to back outside the handler

var count := 0
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

But this doesn’t do anything because every time the button is clicked this entire display section of code is re-executed, including the line that sets count to 0
So need to execute the intiialization once, when the app starts, post every time display is executed, and increment every time the button is clicked
This is what the initialize section is for

So move the variable initialization up to that section

initialize
  var 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

But now we get a bunch of erros because the variable is local to the initialize section
This is easy to fix, we need to make the variable global
Click on the variable name and choose the ‘promote to data’ button
The var goes away and is repaced with the box-in-a-box symbol
Now it works
Note that the global variables are listsed with the pages and libraries
Can also add a global var in the same way taht pages and libraries are added, the add new buttons
Variables added this way are not automatically in the initialize section

Recall that variables can also be colors, so can use a variable to change the button’s color

initialize
  var color := colors → random
display
  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
        color := colors  → random
    end end
  end boxed
end page

Quiz

m.socrative.com
Room name ‘INQ241’

Activity

Activity 12