INQ241A - Day 14 Notes

Text Field

Text fields are boxes that the user can enter text
Buttons are just boxes with an on tapped function

Text fields are just boxes with an edit function

page main ()
data

initialize

display
  boxed
    box → set border(colors  → foreground, 0.1)
    box → edit("textline", "text to edit", changehandler)
      where changehandler(text : String) is
        do nothing
      end
    end
  end boxed
end page

The type is a “textline”, could also have text area, number input, or password input
The initial text that is displayed is “text to edit”
But when it is run, it is impossible to change the text
Just like with buttons, the display code is re-executed whenever the user interacts with the app
Every time the edit function is executed it sets the display to the exact same text, “text to edit”

To get it to change, need to use a global variable that changes

page main ()
data

initialize
  ◳user input := "initial text"
display
  boxed
    box → set border(colors  → foreground, 0.1)
    box → edit("textline", ◳user input, changehandler)
      where changehandler(text : String) is
        do nothing
      end
    end
  end boxed
end page

But it still doesn’t change because the gobal variable isn’t changing
Can change the global variable inside the change handler

The variable text, is what the user has changed the input text to

page main ()
data

initialize
  ◳user input := "initial text"
display
  boxed
    box → set border(colors  → foreground, 0.1)
    box → edit("textline", ◳user input, changehandler)
      where changehandler(text : String) is
        ◳user input := text
      end
    end
  end boxed
end page

Now you can use that variable elsewhere in the program
It could be posted to the wall, but that is not very useful
A more usual solution would be to use it inside of a button press
If you don’t want text in the box initially, initialize the global variable to be a string with not text, “”

Collections

We have already seen collections, sprite sets, a collection of sprites
We can also have collections of any other type, numbers, strings, colors

To create a collection of strings

◳coll → collections → create string collection

Just like a sprite set, when you create the collection it is initially empty

With sprite sets we used a loop to fill it up, here I will just add a few things

◳coll → add("first")
◳coll → add("second")
◳coll → add("any string you want")

With sprite sets we used the foreach to do something to or with each element of the set

We can also do this with a string collection

for each s in ◳coll do
  s → post to wall
end for each

Because this is display code you can add boxes here and change how it is displayed

for each s in ◳coll do
  boxed
    box  → set border(colors → foreground, 0.1)
    box → set background(colors → random)
    s → post to wall
  end boxed
end for each

Can change the layout, add boxes to the boxes or make them buttons or text fields
Just like with sprite sets it is also possible to remove
```
◳coll → remove("any string you want")
```

Concatenate

Can join two pieces of text together using concatenation
The concatentation operator looks like two verical bars, ∥
```
"Left" ∥ "Right" → post to wall
```
Is the same thing as
```
"LeftRight" → post to wall
```

This is more useful when used with a varible

for each s in ◳coll do
  ("Item: " ∥ s) → post to wall
end for each

Activity

Activity 14