Join Joseph Labrecque for an in-depth discussion in this video Implementing a theme, part of Building a Mobile App with Feathers and Starling.
Feathers components have no default visual representation until a theme is applied. We'll now add a theme to our project. So going into the folder set where we actually downloaded Feathers, and extracted all those files, we can enter that Feathers folder. And see all of the different directories within. One of these directories is labelled themes and this is were all of the default themes actually exist within the feathers distribution. So let's go into themes and the theme that we are going to want to use for this project is called metal works mobile theme.
So, going into that, we see two distinct directories here. One is an assets directory, which contains fonts and images for our theme. The other is a source directory, which actually includes the entire package directory structure. So, feathers, themes, and then an ActionScript class for this particular theme. So, to implement this. We just need to go out to our source folder and then we'll click and drag this entire feathers package into our source or SRC folder within quick sketch.
This adds feathers.theme as a package to our code and also the metal works mobile theme.AS file. Going back. We also need to grab this entire assets directory, which includes again, fonts and images for our theme. And we're going to move this into the actual root of our project. So not within the source folder, but actually just drop it straight onto quick sketch. And then it adds those assets right here. So fonts and images. In order to actually use this class, we're going to go into our main class, within our quick sketch package, and from there perform some imports.
One thing we'll want to import is starling.events.event. Another thing we'll want to import is our actual theme, so import feathers.themes and there is our metal works mobile theme. Now that we have both of these classes imported, we can use them within our application. So, within the constructor function let's actually get rid of this super declaration because we're going to replace it with our own code, and that code right now is going to be an event listener because we want to know exactly when this particular class has been added to the stage and is ready for us to do visual manipulation upon it.
So to do that, we'll say this.addEventListener and we'll pass in Event.ADDED_TO_STAGE. When this occurs, we want to invoke a method called onstage ready. At this point, we can be sure that the stage is ready for us to do anything to it, including implementing our theme. So I'm going to move the cursor onto our onstage ready declaration. And hit Ctrl+1, and choose to let Flash Builder create a method for me on stage ready.
Removing the comments, I can then go in and just simply declare new metal works mobile theme. And that's actually all we need to do to implement the theme within our project. However, there's no way to test it right now. Unless we actually use a feather's control in the project that can be skinned with this theme. So to do that, we'll create a new variable, btn. And scope that to a Feathers button. So, feathers.controls.button. Set it equal to a new button instance.
We will adjust the label on this button and set that equal to something as simple as feathers button and then lastly we need to actually add this to our stage, so we will set add child and pass in the reference to our button. So now if we save this application, and hit Run. All right. So here we see our Feathers button, properly skinned and running upon our simulated device. Now that we've added this scene to our project, any visual components that we use are going to be skinned accordingly.
- 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