2005 adobe systems incorporated. all rights reserved. 1 modules alex harui flex sdk adobe systems,...
Post on 30-Jan-2016
224 Views
Preview:
TRANSCRIPT
2005 Adobe Systems Incorporated. All Rights Reserved.1
Modules
Alex Harui
Flex SDK
Adobe Systems, Inc.
2005 Adobe Systems Incorporated. All Rights Reserved.2
Agenda
Answer the 7 question words (why, what, who, where, which, when, how):
What are Modules?
And what are Runtime Shared Libraries (RSLs)?
Why Modules?
Who invented them?
Which is better: Modules or RSLs?
When do I use them?
Where do I use them?
How do I use them?
Under the hood
2005 Adobe Systems Incorporated. All Rights Reserved.3
What are Modules?
Modules is the name of a specific feature of Flex that is used to break applications up into smaller pieces.
RSLs (Runtime Shared Libraries) is the name of another specific feature of Flex that is used to share common code between two different applications
Modules can also be used to share code between applications
2005 Adobe Systems Incorporated. All Rights Reserved.4
Why Modules?
MXML makes it really easy to assemble components into an application.
<mx:Application …> <mx:TabNavigator …> <mx:VBox> <mx:Label … \> … </mx:VBox> <mx:VBox> <mx:DataGrid … \> … </mx:VBox> </mx:TabNavigator></mx:Application>
Eventually your application will get very big.
As your application gets bigger, it takes longer to start up.
Modules will improve startup time in most cases.
2005 Adobe Systems Incorporated. All Rights Reserved.5
Who invented Modules?
2005 Adobe Systems Incorporated. All Rights Reserved.6
Who invented Modules?
Roger Gonzalez was the developer for Modules
2005 Adobe Systems Incorporated. All Rights Reserved.7
Who invented Modules?
Roger Gonzalez was the developer for Modules
MAX 2006 presentation and demos: http://blogs.adobe.com/rgonzalez/
2005 Adobe Systems Incorporated. All Rights Reserved.8
Which is better: Modules or RSLs?
Neither. They serve different purposes.
RSLs are libraries of supporting classes (and assets) other classes need in order to operate.
RSLs load before the application starts and can actually penalize load time if the RSL is not already in the browser cache.
Thus, no advantage if no other application is sharing that RSL.
Modules are libraries of classes (and assets) that you only need after application startup (or choose dynamically at startup).
You cannot refer to the classes in a module, only the interfaces they share with the application.
A large application will almost always benefit from using Modules, but may not benefit from using RSLs.
2005 Adobe Systems Incorporated. All Rights Reserved.9
When do I use Modules?
When your application size and startup time become a factor and there is code and/or assets that are not needed at startup time.
When you want to choose dynamically between a set of similar classes and/or assets.
When you don’t want to recompile every line of code in your application every time something changes (and there are no class interdependencies on some portion of the application).
When there is code you want to share with other applications (consider RSLs and custom Components as well).
When there is code that can’t be upgraded to the most recent version of Flex you are using.
2005 Adobe Systems Incorporated. All Rights Reserved.10
Where Do I Use Modules?
Navigators: ViewStack, TabNavigator, Accordion
PopUp Dialogs
Themes/Styles
Localized Strings and Assets
Shared code between modules
Anything else configurable or optional
2005 Adobe Systems Incorporated. All Rights Reserved.11
How Do I Use Modules?
For Navigators: Hopefully you’ve already converted to an MXML Component
<mx:Application …> <mx:TabNavigator …> <mx:VBox> <mx:Label … \> … </mx:VBox> <local:MyDataGridView /> </mx:TabNavigator></mx:Application>
MyDataGridView.mxml<mx:VBox> <mx:DataGrid … /> …</mx:VBox>
2005 Adobe Systems Incorporated. All Rights Reserved.12
How Do I Use Modules?
For Navigators: Replace MXML Component with ModuleLoader
<mx:Application …> <mx:TabNavigator …> <mx:VBox> <mx:Label … \> … </mx:VBox> <mx:ModuleLoader url=“MyDataGridView.swf” /> </mx:TabNavigator></mx:Application>
MyDataGridView.mxml<mx:VBox> <mx:DataGrid … /> …</mx:VBox>
2005 Adobe Systems Incorporated. All Rights Reserved.13
How Do I Use Modules?
For Navigators: Wrap Component in mx:Module tag
MyDataGridView.mxml<mx:Module …> <mx:VBox> <mx:DataGrid … /> … </mx:VBox></mx:Module>
If the top-level is a VBox, HBox or Canvas, simply replace the tag
MyDataGridView.mxml<mx:Module …> <mx:DataGrid … /> …</mx:Module>
2005 Adobe Systems Incorporated. All Rights Reserved.14
How Do I Use Modules?
For PopUp Dialogs: Let’s say the app looks like
<mx:Application …> <mx:Script> private function showLogin():void { var loginDialog:LoginDialog = new LoginDialog(); PopUpManager.addPopUp(loginDialog,…); } </mx:Script> <mx:Button label=“login” click=“showLogin()” /></mx:Application>
LoginDialog.mxml<mx:TitleWindow> <mx:Label …/> …</mx:TitleWindow>
2005 Adobe Systems Incorporated. All Rights Reserved.15
How Do I Use Modules?
For PopUp Dialogs: You could do this:
LoginDialog.mxml<mx:TitleWindow> <mx:ModuleLoader url=“loginContent.swf” /> …</mx:TitleWindow>
But a slow network could leave the dialog blank for a while…
2005 Adobe Systems Incorporated. All Rights Reserved.16
How Do I Use Modules?
For PopUp Dialogs: So, this is probably better:
<mx:Application …> <mx:Script> private function showLogin():void { var m:IModuleInfo = ModuleManager.getModule(“LoginDialog.swf”); m.addEventListener(ModuleEvent.READY, function(e:Event) { var dlg:IUIComponent = m.factory.create(); PopUpManager.addPopUp(dlg,…); }); m.load(); } </mx:Script> <mx:Button label=“login” click=“showLogin()” /> </mx:Application>
2005 Adobe Systems Incorporated. All Rights Reserved.17
How Do I Use Modules?
For PopUp Dialogs: The dialog itself just gets wrapped in mx:Module
LoginDialog.mxml<mx:Module … > <mx:TitleWindow> <mx:Label …/> … </mx:TitleWindow></mx:Module>
2005 Adobe Systems Incorporated. All Rights Reserved.18
How Do I Use Modules?
For Themes/Styles: Use Runtime CSS feature
For Localized Strings/Assets
Wait for next release of Flex
2005 Adobe Systems Incorporated. All Rights Reserved.19
How Do I Use Modules?
For Shared Code Between Modules: Two modules will sometimes have the same classes (or assets).
However, you have to be careful if those classes are Managers.
Common mistake is to unwittingly bring in Managers (PopUpManager, DragManager) in a module and use it from another module.
We’ll see in Under The Hood why that doesn’t work
So, factor out common code into another module, load it before you load the module that uses it, or even right after app startup.
public class SharedCode extends ModuleBase{ private var dragManager:DragManager; private var popUpManager:PopUpManager;}
2005 Adobe Systems Incorporated. All Rights Reserved.20
How Do I Use Modules?
For Shared Code Between Modules: Load the common code library like an RSL.
var m:IModuleInfo = ModuleManager.getModule(“SharedCode.swf”); m.load(ApplicationDomain.currentDomain);
2005 Adobe Systems Incorporated. All Rights Reserved.21
How Do I Use Modules?
Making Modules: By default a mx:Module-based module will have a copy of lots of
the classes in the main application because it is based on Container and UIComponent and other parts of the framework.
That means you would end up loading this code twice.
Special compiler options tell the linker to gamble that the loading application will have the required classes.
2005 Adobe Systems Incorporated. All Rights Reserved.22
How Do I Use Modules?
Making Modules: Generate a link-report of all of the classes in the main application
mxmlc --link-report <filename> mainapp.mxml
Use the –load-extern to tell the linker not to link in those classes into the module.
mxmlc --load-externs <filename> module.mxml
You can use other advanced options as well: --externs [symbol][…]
List of definition names (classes, functions, etc.) to mark as external (omit from linking).
--external-library-path [path-element][…]Compile against libraries in this path, but add all definitions found to the list of externs.
2005 Adobe Systems Incorporated. All Rights Reserved.23
Modules
Any questions before we go under the hood?
2005 Adobe Systems Incorporated. All Rights Reserved.24
Under the Hood – Application Domain
Classes and their methods belong to ApplicationDomains.
The “new” operator searches the ApplicationDomain of the method for the class definition and then makes a new class instance
If it can’t find a definition it will search the parent ApplicationDomain if there is one.
2005 Adobe Systems Incorporated. All Rights Reserved.25
Flash ApplicationDomain is the top-level
Flex Framework and your application are a child.
Under the Hood – Application Domain
DisplayObject…
Sprite
…
Event
= extends
Flash Player
UIComponentContainer
…
Application
MyApp
MyApp.mxml
= parent
2005 Adobe Systems Incorporated. All Rights Reserved.26
When Flex loads a SWF, its classes are loaded either into the parent ApplicationDomain or a child ApplicationDomain
RSLs go in the parent ApplicationDomain
Under the Hood – Application Domain
DisplayObject…
Sprite
…
Event
Flash Player
MyApp
MyApp.mxml
UIComponentContainer
…
Application
FlexRSL.swf
2005 Adobe Systems Incorporated. All Rights Reserved.27
When Flex loads a SWF, its classes are loaded either into the parent ApplicationDomain or a child ApplicationDomain
RSLs go in the parent ApplicationDomain
Under the Hood – Application Domain
DisplayObject…
Sprite
…
Event
Flash Player
MyApp
MyApp.mxml
UIComponentContainer
…
Application
2005 Adobe Systems Incorporated. All Rights Reserved.28
Child ApplicationDomains can be unloaded
Modules default to the child ApplicationDomain
As the SWF sets up its classes, any class already defined is not added to the ApplicationDomain, even if it is a child.
First-in Wins
Under the Hood – Application Domain
DisplayObject…
Sprite
…
Event
Flash Player
UIComponentContainer
…
Application
MyApp
MyApp.mxml
UIComponentContainer
…
Module
MyModule
MyModule.mxml
2005 Adobe Systems Incorporated. All Rights Reserved.29
Under the Hood – Application Domain
Classes defined in a child ApplicationDomain cannot be seen from the parent ApplicationDomain Therefore, the main application cannot reference the classes in a module
as classes
The application and module can both share interfaces
DisplayObject…
Sprite
…
Event
Flash Player
UIComponentContainer
…
Application
MyApp
MyApp.mxml
UIComponentContainer
…
Module
MyModule
MyModule.mxml
IMyModule IMyModule
= implements
2005 Adobe Systems Incorporated. All Rights Reserved.30
Flex Managers are also “first-in wins”
This can cause confusion between modules.
The first DragManager loaded becomes the DragManager for all modules, but MyModule2 cannot see that DragManager
Under the Hood – Application Domain
UIComponentContainer
…
Application
MyApp
MyApp.mxml
DragManagerList
ComboBox
Module
MyModule
MyModule.mxml
DragManagerDataGrid
…
Module
MyModule2
MyModule2.mxml
Manager DB
2005 Adobe Systems Incorporated. All Rights Reserved.31
That’s why shared code should be in the main application or loaded into the main ApplicationDomain
Under the Hood – Application Domain
UIComponentContainer
…
Application
MyApp
MyApp.mxml
DragManagerList
ComboBox
Module
MyModule
MyModule.mxml
DragManagerDataGrid
…
Module
MyModule2
MyModule2.mxml
Manager DB
DragManager
2005 Adobe Systems Incorporated. All Rights Reserved.32
Under the Hood – Flash Player
Flash Player is a deferred display list renderer
A list of drawing commands are gathered Line from (0,0) to (100,100), fill area with color, etc.
The list is built from: Graphical objects in a SWF Frame
ActionScript
2005 Adobe Systems Incorporated. All Rights Reserved.33
Under the Hood – Flash Player
Two kinds of frames
Flash Player Frames
SWF Frames
SWF Frame Set of graphical objects to be added/removed from display list
Code to be used to further alter the display list
Flash Player Frame At some interval:
Adjust set of graphical objects if needed
Run any code that needs to be run
Render the results of the display list
2005 Adobe Systems Incorporated. All Rights Reserved.34
Under the Hood – Flash Player
Flash Player Frames can be rendered many times per SWF Frame
Flash Player streams in a SWF and tries to render ASAP
Here’s a simplified SWF:
SWF Frame 1 SWF Frame 2
id=“Circle”
Circle.x += 10
id=“Rect”
Rect.x += 10
Assets
Code
2005 Adobe Systems Incorporated. All Rights Reserved.35
Under the Hood – Flash Player
Until a full SWF frame is read, the player does not have a full set of instructions to render
SWF Frame 1 SWF Frame 2
id=“Circle”
Circle.x += 10
id=“Rect”
Rect.x += 10
Read ptr
2005 Adobe Systems Incorporated. All Rights Reserved.36
Under the Hood – Flash Player
If the SWF Frames load quickly the animation is like a flip book.
SWF Frame 1 SWF Frame 2
id=“Circle”
Circle.x += 10
id=“Rect”
Rect.x += 10
2005 Adobe Systems Incorporated. All Rights Reserved.37
Under the Hood – Flash Player
The second SWF Frame is ready by the time of the next Flash Player Frame so it is drawn without hesitation
SWF Frame 1 SWF Frame 2
id=“Circle”
Circle.x += 10
id=“Rect”
Rect.x += 10
2005 Adobe Systems Incorporated. All Rights Reserved.38
Under the Hood – Flash Player
Assuming there is a stop() request in SWF Frame 2, the player will not rewind to the beginning and will continue executing code, moving both shapes.
SWF Frame 1 SWF Frame 2
id=“Circle”
Circle.x += 10
id=“Rect”
Rect.x += 10
2005 Adobe Systems Incorporated. All Rights Reserved.39
Under the Hood – Flash Player
The animation will therefore appear smooth.
SWF Frame 1 SWF Frame 2
id=“Circle”
Circle.x += 10
id=“Rect”
Rect.x += 10
2005 Adobe Systems Incorporated. All Rights Reserved.40
Under the Hood – Flash Player
The shapes will eventually slide off-screen unless other code stops it.
SWF Frame 1 SWF Frame 2
id=“Circle”
Circle.x += 10
id=“Rect”
Rect.x += 10
2005 Adobe Systems Incorporated. All Rights Reserved.41
Under the Hood – Flash Player
If the SWF Frames are larger (or the network slower), the wait for the SWF Frames to finish loading will become a factor.
SWF Frame 1 SWF Frame 2
id=“Circle”
Circle.x += 10; more code…
id=“Rect”
Rect.x += 10; even more code...
2005 Adobe Systems Incorporated. All Rights Reserved.42
Under the Hood – Flash Player
SWF Frame is only partially read. The player still does not have a full set of instructions to render
SWF Frame 1 SWF Frame 2
id=“Circle”
Circle.x += 10; more code…
id=“Rect”
Rect.x += 10; even more code...
2005 Adobe Systems Incorporated. All Rights Reserved.43
Under the Hood – Flash Player
Finally a full SWF Frame is read. Player executes instructions
SWF Frame 1 SWF Frame 2
id=“Circle”
Circle.x += 10; more code…
id=“Rect”
Rect.x += 10; even more code...
2005 Adobe Systems Incorporated. All Rights Reserved.44
Under the Hood – Flash Player
If stop() requested, player does not try to render SWF Frame 2, and re-executes code in SWF Frame 1 then renders again.
SWF Frame 1 SWF Frame 2
id=“Circle”
Circle.x += 10; more code…
id=“Rect”
Rect.x += 10; even more code...
2005 Adobe Systems Incorporated. All Rights Reserved.45
Under the Hood – Flash Player
We’re still waiting for SWF Frame 2 to load. SWF Frames are no longer paired to Flash Player Frames
SWF Frame 1 SWF Frame 2
id=“Circle”
Circle.x += 10; more code…
id=“Rect”
Rect.x += 10; even more code...
2005 Adobe Systems Incorporated. All Rights Reserved.46
Under the Hood – Flash Player
Finally, SWF Frame 2 completes loading. Code in SWF Frame 1 detects that and tells the player to render SWF Frame 2, so the Rectangle can appear and start moving.
SWF Frame 1 SWF Frame 2
id=“Circle”
Circle.x += 10; more code…
id=“Rect”
Rect.x += 10; even more code...
2005 Adobe Systems Incorporated. All Rights Reserved.47
Under the Hood: Preloaders and RSLs
This technique of stopping after SWF Frame 1 loads and playing an animation while waiting for SWF Frame 2 is the basis of the Flex Preloader
The Flex Framework is at least 135Kb. Waiting for 135Kb in Frame 1 could result in potentially long “dead-air”
So, the Framework is placed in SWF Frame 2, and a Preloader plays an animation while we wait for SWF Frame 2.
We also wait for RSLs as well, because if code in SWF Frame 2 required a class in the RSL, it would not run properly
But wait, there’s more…
2005 Adobe Systems Incorporated. All Rights Reserved.48
Under the Hood: Special Module Feature
If modules were packed onto the SWF as SWF Frame 3, 4, etc:
It would not affect application startup time
There would be fewer network requests
The entire SWF would be self-contained (unless it has other external assets) and therefore have fewer pieces to deploy
Of course, any change to a module then requires rebuilding the entire SWF.
2005 Adobe Systems Incorporated. All Rights Reserved.49
Under the Hood: Special Module Feature
MXMLC Compiler options and metadata
--frame [label] [classname][…]Flex models each frame as consisting of a primary definition and its dependency graph. This configuration option allows you to specify the name of the primary definition for frames following the first (root class) frame.
[Frame(factoryClass)]Flex AS3 metadata where a class specifies a requested factory class to be exported on the previous frame, implicitly constructing a backwards daisy-chain of frame definitions.
Order is important as you would have to wait for all modules before a particular module to stream in before you can use that module.
2005 Adobe Systems Incorporated. All Rights Reserved.50
Modules
Q & A
top related