Structuring an app
In this section, we will teach you how to plan out an application and structure your code accordingly.
What are we building?
Here's a list of everything we want our gallery to do:
- Display multiple images at random positions
- Slowly move them to the top of the screen repeatedly
- Rotate images in unison around a central point
Building the Tree
Now that we have an idea of what we're building, we can build out a Tree to match.
The Tree will serve as a representation of the Famous Scene graph used to structure our project. Building out the Tree will give us foundation where we can attach our behaviors and store relationships of elements in an ordered hierarchy.
apple-tv.html and add the following code to it. Note the XML like syntax for creating our Tree and how we add traditional HTML id's and classes to it.
<node id="root"> <node id="rotator-node"> <node class="gallery-item"> </node> </node> </node>
In the snippet above, pay attention to how we nest a single
'gallery-item' node within the main
'rotator-node'. This makes it so when we move the
'gallery-item' nodes will move with it in unison.
You may be wondering why we only include a single
'gallery-item' in our tree when we will have multiple images in our gallery. That's because we will repeat this element in our behaviors, not our tree. It's important to note that all control flow logic, like repeating elements and creating dynamic content, is handled in behaviors.
Let's see how we will repeat
'gallery-item' in the next section