A question was posted to the 615Flex message board today that distilled to: “When and why should I use Flex Modules instead of just creating a Flex Component?” Ben recommended I post my reply here:
First - What are Flex Modules?
Modlues are pieces of an application that compile into their own .swf files and are loaded, as needed, at runtime. Please read more here:
http://livedocs.adobe.com/flex/3/html/help.html?content=modular_1.html
When should Modules be used?
- When the application has multiple complete chuncks of functionality.
- When it is desirable to only load those chunks if/when the user needs them.
- When chunks of the application should not be delivered to clients without permission (i.e. an Admin module)
Why should Modules be used?
- To reduce the load time of an application. Modules load as needed while compiled-in components increase the size of the containing .swf.
- To improve performance and client side footprint. Modules can be unloaded when not needed or not being viewed.
- To deliver incremental changes to a piece of an application (a Module) without deploying the entire app.
- To potentially share a chunk of functionality across multiple applications. (i.e. you may want to use the same Contact Manager module across two CRM applications.) As nice as this sounds, it can make versioning, change management, QA and development a nightmare as requirements change in one deployment and not the other.
Here are four examples that have been useful to me. Maybe it will help you decide when to use Modules in your application.
- MXML Modules:
When someone says “Flex Modules” this is likely what they are referring to. The .swf that is generated is usually a visual component and is typically loaded with the ModuleLoader MXML tag.
http://livedocs.adobe.com/flex/3/html/help.html?content=modular_3.html
- AS Modules:
ActionScript based modules are AS classes that extend ModuleBase and are compiled into .swf files. These modules are generally non-visual components. A possible use would be to load an implementation of an AS interface into the application based on a user role.
(bottom)http://livedocs.adobe.com/flex/3/html/help.html?content=modular_3.html
- Reusable Modules across Applications:
Proceed at your own risk. Modules can be compiled to be optimized for use in a specific Application, however, you may disable this feature and create a reusable Module for use across Applications.
http://livedocs.adobe.com/flex/3/html/help.html?content=modular_4.html#191026
- Slightly off topic: Sub Applications vs Modules
Flex applications can load other Flex applications as children in a similar way to how Modules are loaded. If this interests you, please read this PDF very carefully:
http://livedocs.adobe.com/flex/3/loading_applications.pdf.
If you had the same question that sparked this post, hopefully this has shed some light and pointed you towards more useful resources. I’m happy to answer any questions about Modular application architecture as well as Sub Application architectures.
This is the session to see if you’re interested in getting started with the Flash Builder 4 beta, now available on http://labs.adobe.com. The presentation will highlight some cool new features of the IDE, and then jump right into the goods. I may include such topics as: The Flash Player 10 Text Engine (which is awesome), Skinning components with FXG, Creating custom components, and the wonderful new syntax for States. If you have a topic you are especially interested in, please send me an email or drop me a line in the comments below!
Source and example files from the presentation are now available through the following links:
1) What you get for free with UIComponent
2) [view] Component lifecycle
3) [view step one | step two] Invalidation
I have a text version of the presentation in the works. Anyways, I hope this is helpful to you as you create your own custom Flex components!
Updated: I’m going ahead and making the rough original source available since I have less time to work on this than expected. Please let me know if this helps you on any project or at least gets you started 
One of the more popular posts on this blog is “Warping Text in Flex“. People are frequently asking for the source code and I am frequently not giving it to them (unless they say please) because it’s really really dreadful. Truly. So I have brought the project back to life as something I’m not embarrassed of.
An open sourced as-is etc version of this component will be posted shortly (preview below). The component will use a three point Bézier curve for the text path. Currently, this version uses the geometry classes from http://www.algorithmist.net/ but the released version may or may not.
Here is an early preview of the soon-to-be released TextPath component (please leave suggestions below):
(Right click to view source)
Thank you for reading - Please leave comments, suggestions etc!
To learn more about the mysimplemp3 project, click the <my:SimpleMP3 /> tab at the top of this website. The project is hosted here on Google Code where you can download the latest swc or check out the source.
Currently the only demo is my proof of concept found here. I’m looking forward to seeing the components and projects you end create with mysimplemp3. Please keep me posted - and let me know about feature requests and potential bugs! Thanks.
What's this? It looks easy!
OK. I really don't like building MP3 player components in AS3 for Flex. It's doable, sure, but tedious. In fact, I don't like it enough that I've done something about it. Now it can be fun to make an MP3 player in Flex! (not available yet, but there's a demo below).
XML:
-
<my:SimpleMP3
-
id="music"
-
url="http://url.com/my.mp3" />
Now, just treat it like you'd expect!
Actionscript:
-
music.play();
-
music.pause();
-
music.stop();
-
music.volume = 0..1;
Yes, there's more: scrubbing, streaming, buffering, panning left to right, auto load, auto play, auto rewind, repeat and most importantly ... states! Read more and play with a quick demo after the jump.
Continue reading 'Almost introducing <my:SimpleMP3 />'
"Adobe's Cairngorm MVC framework is used by Flex develpers to deliver scalable and maintainable rich internet applications. Universal Mind has created extensions to that framework to address implementation issues that can impede developers."
Read more at:
http://code.google.com/p/flexcairngorm/
I'm excited to see this! I haven't had time to try out the new extensions, but I'm looking forward to it. Thanks to all the good people at UM.
Update: New updated example in "Text on a curved path in Flex - Resurrected" - please see instead of this entry.
There was some discussion in the 615Flex Google group earlier about how to warp text in a Flex application. (If you have any valuable input or resources please leave them in the comments). I thought it would be fun to mess around with the idea, so I put together this really weak example of a text warp component.
Read on to see a little example ...
Continue reading 'Warping Text in Flex'
(Go to 'Cairngorm Series' to view all titles)
This is the third post in a series on Cairngorm fundamentals. We will be binding data from the ModelLocator (created in the previous video) to a new View component. There are countless ways to achieve similar results, so do some research and come up with a method that meets your requirements. I establish some goals to strive for when creating views but the focus of this series is on Cairngorm. Feel free to post links to additional resources on the subject. Continue reading for the video and example with source ...
Continue reading 'Create a View and bind to application data'
