Hi,
The ActionBar class allows an abstraction between an mx.controls.NavBar subclass and the Potomac framework code.
This type of design pattern is used heavily in the fxface framework. The more I work with this pattern I am seeing it’s simply a Mediator. The ActionBar class mediates all traffic between the NavBar UIComponent and the calling framework (potomac). In a sense it is working like PureMVC mediators do, except without the notification framework.
What are the benefits?
- Decoupled code from the actual
UIComponent implementation.
- Dynamic discovery and resolution of action bars.
- Automatic
Action extension execution.
- Automatic busy cursor management.
- Deffered instantiation; the control is not created until
create() is called.
- Public disposal via the
dispose() method.
- The control of the action bar is parented by the client.
How is the ActionBar implemented?
The ActionBar declares two new Extensions to the ui framework;
UI_ActionBar – place within an mxml/as class and specify a target parent container.UI_ActionBarType – place within an as subclass of ActionBar to declare a new action bar type.
UI_ActionBar
The extension point uses three required attributes in the metadata declaration;
- id – The string name of the action bar. This is important since all
Action extensions with id of myActionbar/myAction will be added to this action bar.
- actionBarType – The type of
ActionBar class to use when the framework is creating the ActionBar class. (remember the class determines what NavBar subclass will be created, ButtonBar, LinkBar etc.)
- target – The public
UIComponent string reference that will act as the action bar’s control parent.
The code below shows a simple ActionBar implementation;
// my/templates/MyTemplate.mxml
<mx:Metadata>
[Template(
id="my_template",
properties="logo:image"
)]
// this could be declared in a Template mxml file where 'navigation'
// was a Box with it's id="navigation"
[UI_ActionBar(
id="navigation",
actionBarType="default",
target="navigationBar"
)]
</mx:Metadata>
...
// my/actions/MyAction.as
package my.actions {
// then define an Action extension within an Action subclass
// this way the Action class get's attached to this Action declaration
[Action(
id="navigation/myAction",
label="My Action",
icon="myicon.png"
)]
...
public class MyAction extends Action
{
override public function run():void {trace("You clicked MyAction!");}
}
}
The above code is all you need to have a working ActionBar applied to a parent container. The developer needs to do nothing else other than code the logic in the Action.run() method.
UI_ActionBarType
The UI_ActionBarType extension point allows you to extend the default implementation of the ActionBar which is a ButtonBar. The code below shows how simple it is to add another action bar type;
package org.teotigraphix.potomac.ui.templates.action
{
...
[UI_ActionBarType(id="linkbar")]
public class LinkActionBar extends ActionBar
{
...
public static const ID:String = "linkbar";
...
override protected function configure(control:UIComponent):void
{
super.configure(control);
LinkBar(control).direction = "horizontal";
}
override protected function createControl():UIComponent
{
return new LinkBar();
}
}
}
The above code will create a LinkBar instead of the default ButtonBar. When you want the link bar you just set the UI_ActionBar’s metadata attribute, actionBarType to “linkbar“.
[UI_ActionBar(
id="navigation",
actionBarType="linkbar",
target="navigationBar"
)]
Hook methods
The ActionBar class allows for three main hook methods;
createControl() – required for a new type subclass.configure() – Enables a subclass to further configure the control.fillActions() - Allows a subclass to override the default fill Action behavior which is to put all Action extensions of the specific category into the dataProvider of the NavBar subclass.
The create() method
The create() method is passed and options Object. In the default behavior of fillActions(), the category property must be set, if the property is undefined, “global” will be used and all Action extensions that do not contain a forward slash “/”, will be added to the action bar.
Note: subclasses can easily override this default behavior.
Events
The ActionBar class by default listens to the ItemClickEvent.ITEM_CLICK event and executes the Action based on the current item selected.
Note: subclasses can easily override this default behavior.
Fill implementation
The TemplateBase class calls the ActionExtensionManager’s fillActionBars() method to dynamically discover and parent the action bars found in a [Template].
For other bars in Parts etc, the developer can use this same method.
fillActionBars(parent:UIComponent):void
Conclusion
I had fun with this one since it solidified the design pattern the potomac framework uses. This is the beginning of many abstractions like this. If you find this intriguing, wait until you check out the fxface ui framework.
Peace,
Mike
This is about 2 months of work which has led me to this post.
), I’m getting close to getting this Potomac thing glowing.
Recent Comments