Table of Contents Previous Section

Designing MovieDetails' User Interface

 Now lay out the user interface for MovieDetails. When you're done, your component should look like the following:

  1. Create a top-level heading with the text Movie Details.

    Recall that to create a top-level heading, you type the text of the heading, select the text, click the button to add a heading element around the text, and then use the Inspector to set the heading's level, as you did in "Using the Inspector".

  2. Below the heading, add a string element.

  3. With the string element selected, add a heading.

    This adds a new level 3 heading element around the string. The MovieDetails page will show the title of the selected movie in this heading.

  4. Add labels and string elements to display the selected movie's category, rating, date released, and revenue.

  5. Bold the labels.

  6. Bind selectedMovie.title to the value attribute of the first string element (the one in the heading).

  7. Similarly, create bindings for the Category, Rating, Date Released, and Revenue strings.

  8. At the bottom of the page, add a horizontal rule.

Table of Contents Next Section