Home » Adobe, Flex 3

Na.Bi.Ro. – techniques, methodologies and a class set to develop Flex Applications

17 September 2009 No Comment

The company i’m working for, GnStudio, released Na.Bi.Ro, an open source Flex framework that provides a lot of classes to help Flex developers in their daily work.

WHY DID WE CREATE NABIRO?
There are two main reasons:
1) When you are working on enterprise projects with a medium/big team you have to define some guidelines and methodologies that all developers need to follow to create flexible and maintainable projects and to avoid to lose the right way.


Our team is composed of a lot of developers from all the world and we needed to create a common way to develop standard components, use the same techniques to share data inside applications, create an easy way for component communication, manage server side calls from a global server connector, perform actions in the same way and so on.

BUT IN THE MARKET ALREADY EXISTS SOME COOL FRAMEWORKS…
Yes, it’s true, they are ready-to-use and opensource, like Cairngorm or PureMVC, but these frameworks are often too rigid and not flexible, so we decided to create our own framework, that we know well and can easily change every time we need.

2) Like every developer, we needed to have a shared class library that contains a lot of reusable stuff, like extended UI components, improved managers, pixel bender effects, AIR functionalities and so on.

SO WHAT’s NABIRO?
Nabiro is simply a collection of reusable strategies and classes.
You can find useful components like an improved TextInput to manage error messages, smart popupManager with tween animations and other nice UI stuff.
But you can also apply our strategies like Model View Presenter to develop components, or the Command Pattern to perform actions, the Instructions for component communications, Façade Pattern to manage data, Factory pattern to create flexible UI and so on.

Let’me do few quick samples describing some typical scenarios:

INSTRUCTIONS

Even if you are working on a low budget project and you’re developing your components without follow a specific pattern like MVC or MVP you could however use instructions (in my opinion one of the coolest feature of this framework) to manage the component communication. In few words:

component A can send an instruction in this way

dispatchEvent(new DemoInstructionEvent("DemoInstruction"));

and component B (placed anywhere on your application) can handle for it just with

addEventListener( DemoInstruction.DO_HANDLE, onDemoInstruction);

NOTE: naturally you can send parameters too
So, you can avoid to use parentApplication.componentInstance to refer to the component itself(although I hope you already forgot it ; ) or create to many listeners and events to manage the component communication.

Check Nabiro Wiki to get an Instruction Sample:
How to use Instructions and Mapper on your application

MODEL VIEW PRESENTER (MVP) and PATTERNS

The most common pattern used to develop Flex components is Model View Controller and MVP is a variant of it.
In few words the view will contain only the layout and some getter/setter and the presenter will manage the component logic updating the view if necessary. The purpose is separate the UI from the component logic.
Explain in detail this pattern is out of scope of this article and even if this pattern reduce your development speed (i.e. to display a simple message you need to split the component in a View MXML file, in a Presenter class that use an Interface to communicate with the view, wasting a lot of time to accomplish a simple action) when used on big projects it allows to create scalable and maintainable applications.

Another advantage to define a standard in the development process is that if one collegue is sick and can’t work on its component for a while you can quickly manage and update its stuff because the architecture will be the same you’re using in your own components.

Check following link to see MVP in action:
How to use the Model View Presenter design pattern to create your component

COMMAND PATTERN: to easly perform and share actions.

For example, in AIR application you could write a command to open an URL always in a HTML popup 400×300px, simply calling it in this way:

var c:OpenUrlCommand = new OpenUrlCommand(“http://www.google.com”, true);
dispatchEvent(new CommandCallEvent(CommandCallEvent.COMMAND, c));

The class OpenUrlCommand will contain all the necessary code to open the popup.

SHARED DATA: a singleton class to save and share data across application.

// To save data
shared = SharedData.getInstance();
shared.addValue(key1, value1);
shared.addValue(key2, {img: save.png, title: “pippo”);
 
// To update data
shared. updateValue (key2, newValue2);
 
// To get data
shared.getValue(key1)
shared.getValue(key2, “title”)
 
// To delete all data
shared deleteAll();

ENUMERATIONS: to create and manage hard coded object lists

SERVICE CONNECTOR: a smart way to manage server side calls

OTHER PATTERNS and IMPROVED COMPONENTS: many other strategies and new components are available in Nabiro: collapsable panels, improved input fields, tweened popup manager, fixed Image components, Pixel Bender effects and a lot of other nice usefull stuff (we’ll create samples and documentation in the next weeks)

CONCLUSION:
Naturally, enterprise projects where a lot of people are working on using an SVN Repository will get the main benefits from Nabiro but as I wrote also single developers can use it to improving their development speed or getting new programming techniques.

We don’t think it’s the best way to develop a Flex applications but it’s just one way.
We are using Na.Bi.Ro. since 2008 in every Flex Projects, it ‘s growing day by day, but we have released it just few days ago, so we’re sorry if documentation, AS DOC and available source code needs to be improved and completed.
You can use Nabiro (downloading SWC file from official website), get inspiration or simply download it from the SVN repository to improve it.

Most part of nabiro classes and strategies comes from Giorgio Natili, software engineer and one of the best developers I know. I thank him because he showed me another way to project and develop applications, from a smart use of design patterns to apply AGILE methology in the application planning.
In other words, if you are a intermediate level Flex Developer i’m sure you can learn a lot from it (like I did) while if you’re a senior you can get a lot on inspiration from NaBiRo to improve your code (and please, share your ideas with us)

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.