Designing MovieDetails' User Interface
Now lay out the user interface for MovieDetails. When you're done, your component should look like the following:
- Create a top-level heading with the text Movie Details.
- Below the heading, add a string element.
- With the string element selected, add a heading.
- Add labels and string elements to display the selected movie's category, rating, date released, and revenue.
- Bold the labels.
- Bind selectedMovie.title to the value attribute of the first string element (the one in the heading).
- Similarly, create bindings for the Category, Rating, Date Released, and Revenue strings.
- At the bottom of the page, add a horizontal rule.
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".
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.
Table of Contents Next Section