Let's look at the architecture of our carousel application from a high level before we get too deep into the code. Planning out the main components "on paper" first can save us a lot of development time later.
Think of the
Carousel class as the main entrypoint of our app. Its job is primarily to attach our app to the DOM, and provide a central harness to which to add other elements.
We'll organize our app into a set of classes representing each of the children of the
Carousel. Breaking the app up in this way helps separate concerns and keep code modular.
At the top level, our
Carousel instance will have three main child classes:
Pager. Instances of these classes will represent the four areas shown in the diagram below.
For all of the visual components shown above, we will need a new scene graph node descending from the
Carousel instance's root node. Adding components to those nodes will give us the ability to size and position them into the exact layout we want.