User-Generated Lists

This lesson introduces lists that are built dynamically with user-input. The sample is a
"Twitter-like" note-taking app in which the user enters notes in a text box and the system records the notes in a list. You'll build a music app in which the user plays notes that are recorded and played back.

What you'll learn: dynamic lists, add items to list, foreach

Demo, Part 1: Create an input form for adding items
  • Add a label, textbox and button, name them
  • Arrange the components in a horizontal arrangement
  • Add a hint to textbox
  • Add a label "NoteListLabel" to show all notes, and a header for it.

  • In blocks editor, add a list "notes"
  • On submitButton.click, add textbox contents to list using add items to list
  • show list in noteListLabel

Your Turn, Part 1:

For your music app, do the following:

  • find at least three sound files which are simple musical notes.
  • Create a list named "MusicalNoteList"
  • In your app, the user will click on buttons to play/record notes. When they click one of the musical note buttons, add the note to your musical note list.
  • For now, just display the list of musical notes (the file names) in a label.

Demo, Part 2: List the notes on separate lines

  • Foreach allows you to process each item in a list
  • /n is a text block means new line character

Your Turn Part 2

  • Now let's play back the musical notes instead of displaying them in a label.
  • Add a Sound component
  • Add a button "Play" which uses foreach to loop through and play each note.
  • How is the timing on the playback? How might you use a clock to make it better?

For more information on dynamic lists, see chapter 19 beginning with p. 273

Comments