INQ241B - Day 11 Notes

Apps

The title of the course is Mobile Apps, but so far we have learned how to draw with turtle and how to make games both to learn the basics of programming
We now no how to program, so we are going to learn how to make apps that look more like what you know
There is template, ‘Blank App’, to help create an app
First thing to notice, it doesn’t say function main
Instead it is page main
A page is a screen of an app, we will add multiple pages later
Also note there are three sections to a page, ‘data’, ‘initialize’, and ‘display’
The data sections contains a list of data the app uses, we will ignore for today
The initialize section contains code that is run the first the page is loaded, typically to give initial values to the data, again we will ignore for today
The display section is where we specify what the app looks like

To display text, create string, with quotes, and use post to wall function

page main ()
data

initialize

display
  "something" → post to wall
end page

By default we have no control over where the text appears, it is always in the top left
If we add more text, it appears below the previously added text
The analogy here is that it is like a page in a word processor
Unlike a word processor, if there is a lot of text, it goes off the screen

Boxes

To add images, find with art and use post to wall function
```
✿some picture → post to wall
```
When the picture is posted to the wall it is huge
It is sized to fill up the the screen
We can’t change the size of the image, it always fills what it is inside
But we can put it inside of something that we can resize, a box
boxed is a blue button
```
boxed
  do nothing
end boxed
```
If we add one, but put nothing in it, it doesn’t appear
It is only as large as it needs to be to contain its contents, so it is 0 by 0 with nothing in it

To modify a box, use box → something functions

boxed
  box  → set background(colors → random)
  box  → set border(colors → foreground, 0.1)
  box  → set width(10)
  box  → set height(5)
end boxed

Now if we add the image to the box, by posting it inside the box, it will resize to fill the box

boxed
  box  → set background(colors → random)
  box  → set border(colors → foreground, 0.1)
  box  → set width(10)
  box  → set height(5)
  ✿some picture → post to wall
end boxed

Note, it will will not change the aspect ratio of the image

Layout

All layouts are done using boxes
If there are multiple things in a box, can change how they are arranged
Note, because images fill the box, don’t typically have images with other things
Set things to be added left to right
```
box → set horizontal layout
```
The piece of text gets the same width

Can also change where they are when they are added

box → set horizontal align("right")
box → set vertical align("bottom")

Can also put boxes inside of boxes

boxed
  box  → set background(colors → red)
  box  → set width(15)
  box  → set height(15)
  boxed
    box  → set background(colors → green)
    box  → set width(5)
    box  → set height(5)
  end boxed
  boxed
    box  → set background(colors → blue)
    box  → set width(5)
    box  → set height(5)
  end boxed
end boxed

Note that setting the alignment or layout affects what gets put into a box, not the box itself
Also note the entire screen is a box itself, so can use box functions to change where they appear

So to center the red box horizontally

boxed
  box  → set background(colors → red)
  box  → set width(15)
  box  → set height(15)
  box → set horizontal align("center")
  boxed
    box  → set background(colors → green)
    box  → set width(5)
    box  → set height(5)
  end boxed
  boxed
    box  → set background(colors → blue)
    box  → set width(5)
    box  → set height(5)
  end boxed
end boxed

To center the green and blue boxes horizontally

boxed
  box  → set background(colors → red)
  box  → set width(15)
  box  → set height(15)
  box → set horizontal align("center")
  boxed
    box  → set background(colors → green)
    box  → set width(5)
    box  → set height(5)
  end boxed
  boxed
    box  → set background(colors → blue)
    box  → set width(5)
    box  → set height(5)
  end boxed
end boxed

But putting inside the green and blue boxes does nothing because they do not contain anything

Buttons

Also use boxes to make buttons

boxed
  box  → set background(colors → blue)
  box  → set width(5)
  box  → set height(5)
  box → on tapped(handler)
    where handler() is
      ✿some sound → play
    end
end boxed

Can put any code you want inside the handler
For now we will just play a sound

Quiz

m.socrative.com
Room name ‘INQ241’

Activity

Activity 11