How to create/use themes in a Flex project

Question

I just started out with Flex, and while I have worked with Actionscript2 for a few years, I'm still getting my head around Actionscript3. I've been diving into Flex for the past week, and can't figure this one thing out.

I am looking into the best way (or 'a' way) to allow me and other folks working on this project to easily create new themes for kind-of an video player. I show two videos, and need to be able to reposition them, style them, add images and anything else, really. I'm not looking to create a full-on templating engine, but if I could have a separate file/folder for each template, that would totally make my day.

I imagined having a solution in which I would have a folder inside src/templates/, and inside that folder I would have view.mxml that contains everything I need to display the videos. I would then be able to add other files such as images and such to make this template look the way it should.

Which template should be used should be defined by a variable in the main video file. This will either be provided to the swf file on playback, or provided by the video loading an external configuration file (but this is not part of my question :).

So, in short; How do I include mxml files that are inside one or two sub-folders inside src, and how do I do this in a way that the file I wish to include can be chosen via a variable.

Thanks so much in advance!

-Dave

Stiggler Stiggler · Accepted Answer · 2009-05-08T05:57:09

You'd be surprised to what degree a Flex application can change its appearance through styling. Check out the following project:

http://www.fillcolors.com/

If you need more flexibility still, you could have an application with multiple views, one for each theme you want to show. An easy way to do this in Flex is to make use of the ViewStack component which basically layers view displays, showing only one at a given time.

As a very simple example, you could have something along these lines:

<mx:ViewStack selectedIndex="{currentIndex}">
     <themes:CustomTheme1/>
     <themes:CustomTheme2/>
     <themes:CustomTheme3/>
</mx:ViewStack>

Here, currentIndex is a variable bound to the ViewStack, determining which of the three children is currently visible, each of which represent a custom MXML component (in your case, a theme).

Response to comment:

Yes, the above example is designed to do exactly that, but it's really not a feature of Flex, but of AS3. The CustomThemeX components are located using the themes namespace. The namespace is defined within the parent components root tag. In this example, the parent is a Canvas component:

<mx:Canvas xmlns:themes="themes">

This tells the compiler to look for these custom components within the themes sub-folder of your application; in other words, the src/themes folder, which contains the CustomThemeX components.

If the preceding paragraph didn't really sense to you, I'd recommend picking up a book/reading through the documentation about AS3/Flex and learning more about some of the core concepts of AS3 and object oriented programming. I wish I could help out more, but this question is starting to get a little too broad. I hope you understand. :)

How to create/use themes in a Flex project

2 Answers