Designing Screens with Code

In Unit 4 you saw that you can lay out an app in App Lab using elements in Design Mode. This drag-and-drop approach is quick and easy, but you can only create a page like this before you run the program. Sometimes you want the elements of your app to change while it's running, and to do that we'll need to use code.

Each element has several properties - such as the x and y position, color, and text. The setProperty block lets you set properties of UI elements while the program is running. Any property you can set in Design Mode can also be set in code using setProperty.

Setting Properties

  1. In Code Mode you can findsetProperty in the UI Controls toolbox.
  2. Choose the id of the UI element you want to change a property of
  3. The pulldown menu shows a list of properties that you can set for that element. It matches the list of properties that you see for an element in Design Mode
  4. The last parameter is the value you want to set for that property. We're interested in background-color which has a variety of values you can give it.

Found a bug in the documentation? Let us know at documentation@code.org