Join Joseph Labrecque for an in-depth discussion in this video Building the HomeScreen class, part of Building a Mobile App with Feathers and Starling.
The home screen of our application is rather simple. It includes a graphical title image, and a little bit of text. We'll employ a scroll container to contain these items, followed by the object themselves in the form of an image loader and a label. So for this particular movie, I'm going to. Grab some things from the snippets file. And, within here you can see a bunch of different imports and so forth. So let's grab those imports right now. And I'll just copy those. Ctrl + C.
And we're going to want to work on our home screen. So let's open up HomeScreen. And right underneath the screen import, we'll simply do a Ctrl + V. To paste in those additional classes that we'll need. So those classes include, an image loader, which is going to be use to load in a P-N-G file display in our application. We've got a label component. This is useful for displaying text on the screen. And we're also going to, be using a combination of a scroll container and vertical layout.
The scroll container, uses vertical layout to position any of the child objects within it. In this case the child objects are going to be image loader and label. We're also importing, from starling, the texture class. This is useful for using imported ping images as textures for our feathers controls image loader. So now that I have these things created, I can go back into our snippets file and grab a number of other declarations.
We're going to want to paste these right before our constructive function. You'll notice that we have a error right away. This error comes from this embed command right here. So we're seeing embed and we're passing in a source file as a file that doesn't exist within our project yet. It's called titleimage.png. And this can also be gathered, from the exercise files, right here. So we have titleimage.png. I can grab this. And, actually just drag it straight into Flash Builder, inside of my assets folder, and place it in my image folder.
So, within images, we have title image dot ping. This is right next to metal works dot ping. So now that I've got that in there, our error has gone away. Immediately after this, we declare a private static constant, TitleImage which is typed to a generic class. We could use TitleImage to refer to the image data that's been embedded in this application Moving along, we declare a private variable called Scroll Container, and this is a scroll container object in feathers.
We also have a vertical layou,t that we're going to apply to this scroll container. And then title loader, which is an image loader. So we will eventually load in that title image.ping into this title loader image loader object. We also declare a private variable called Subtext, which happens to be a label. Now for any of these screens, screens and feathers actually have their own specific initialization function that we can override. So, I'm actually going to delete the present constructor function here, and instead I'm going to declare, override ,protected function initialize.
So this initialize function is something that runs whenever the class is first initialized. There's an additional one called draw. So lets tap into that as well. So override protected function draw. So initialized and draw are both methods of the screen class that are made to be overwritten like this. Initialized doing sort of the initial stuff. And then the draw function being able to position and size things accurately.
So, within the initialize function, we're going to invoke two additional methods. One called buildContainer, and one called loadTiles. So first we'll build container, once that's built, we're okay to, load our titles in there. Okay, you'll notice down in the problems area, that we don't have these methods yet. You can go the snippets file, and we can find each of these. So lets just copy both of those, so build container. And load titles, and then right beneath our draw function, we'll paste those in, and walk through them.
So, inside a build container, here we're dealing with our scroll container, and the layout that's being applied to that. So we set vertical layout equal to a new vertical layout, and then we set, it's a vertical align property, to VerticalLayout.VERTICAL_ALIGN_TOP. This is going to align everything vertically to the top of the scroll container. We then set VerticalLayout.horizontalAlign to VerticalLayout.HORIZONTAL_ALIGN_CENTER. This is going to align everything horizontally to the center of our scroll container.
We then set the gap, so the gap is an attribute which defines how much space between child items exist, in this case 25. We then create the scroll container ourself, so scroll container equals new scroll container. And then we set the layout attribute of scroll container equal to the vertical layout object that we just created. We set the scroll container width equal to the stage width. The height, equal to the stage height, and then, we add our scroll container to the screen class.
So, that makes it visible. Going down to the secondary function, that we brought in, called load titles, this is where we actually load in both our image, and our label for text. So we set title loader equal to a new image loader, and then we set title loader maintain aspect ratio equal to true. This is something really nice about the image loader class in Feathers, is that we can set the aspect ratio to,true like this. And whenever we change the width or the height of this object, the other necessary parts of the object, the image, are going to actually be calculated for us to maintain its present aspect ratio.
We then set titleloader.source. To Texture.fromEmbeddedAsset. And we pass in that TitleImage. So TitleImage, as a refresher, is the name of this actual image data that we're bringing in. Texture itself is a starling class that we're using as a utility class, in this case. To load in our source. We then add this to our scroll container. So scrollContainer.addChild, we pass in titleLoader.
To set up our label, we say subText = new Label. And then we set the text attributes of that label. In this case we set it to. Quickly sketch your ideas on the go. So this will appear directly below our actual image assets that we already loaded in. And to make that visible, we add it to our scroll container. So scrollContainer.addChild(subText). So there's one more thing that we need to. And that is to, somewhat position and size, the title loader. So, we already created this draw function that is part of the screen class.
So, here we just want to say title loader, and we want to validate that. Whenever we validate a Feathers component, it's going to make sure and force all of the current Numbers in terms of width, height, and positioning, and so forth. So that we're able to use them accurately. And then we say titleLoader and we set the width equal to actualWidth. ActualWidth is a property of the feather screen class, which is the real, actual calculated width of the class itself.
So the home screen exists as a basic splash area and it really serves now additional functionality. This being the case, we've completed work on this screen.
- Downloading the frameworks and the AIR SDK
- Configuring the project
- Implementing a theme
- Creating the screen classes
- Adding a navbar component
- Building the classes
- Returning saved files
- Publishing a project
- Installing and running the app