Archive

Archive for the ‘Flex 4’ Category

Optimizing Flash Performance

February 6, 2013 1 comment

With some recent experience related to application performance, I thought to share some strategies to optimize performance of applications made with Flash Professional. There are two main components that determine Flash performance:

  1. CPU/GPU usage
  2. Memory usage

In this article I will begin with discussing memory management guidelines. Several times we are using filters, loops, Timers SoundChannels etc in Flash applications which are playing an important role in application performance.

Easiest techniques for performance optimization:

  • Some objects or movie clips required just to represent some data, which doesn’t require user interaction in such cases normally we are not writing any code for that object. But still when user click on such object Flash Player checks for mouse interactions when these objects are present. You can save some CPU cycles by disabling mouse interactivity for objects that do not require mouse interactivity. Disable mouse interactivity.
  • The issue with Timers is more critical. If a Timer has not stopped (because its currentCount is less than its repeatCount or because a stop() method has not been applied to it), the Timer will not respond to garbage collection even if you remove its listener and null all references. A Timer’s listener function won’t be called again once you remove the listener, but the Timer still consumes memory. Several times we start timer to achieve function requirement, and even after completion of the functional part execution the timer running. Explicitly stop Timers for garbage collection. However, if you open, play, and then close a Flash game running on a mobile device repeatedly without ever restarting the game, you may see a noticeable problem.
  • For ENTER_FRAME event loop, (if required to use then only) use different listeners and different listener functions applied with related DisplayObjects only.
  • Avoid use filters. Keep in mind that whenever you apply a filter to a DisplayObject in Flash, its cacheAsBitmap property gets forced to true and Flash must use memory to store that bitmap. If anything changes about that DisplayObject, like its transform operations like size or rotation or a child updates visually, etc, it must regenerate the bitmap, thus using more memory. That old bitmap hangs around until gc kicks in.
  • Always use reverse for-loops. Avoid writing do-loops and while-loops.
  • Using correct type of display objects for each element
  • Use weak event listeners and remove listeners when no longer needed.
  • Strictly type variables whenever possible.
  • Explicitly disable mouse interactivity when mouse interactivity is not required.
  • Replace dispatchEvents with callback functions whenever possible.
  • Stop Sounds to enable garbage collection for Sounds and SoundChannels.
  • Use the most basic DisplayObject needed for each element.
  • Always use cacheAsBitmap and cacheAsBitmapMatrix with air apps (mobile devices).
  • Several times when we are playing with loop and require to create object for each iteration in that case. In such situation it would be great if we create one object outside the loop and reuse it repeatedly in loop.

Friends, I hope these would be helpful to optimization of application performance. Feel free to share more ideas and comments about the topic.

Enjoy RIA… 🙂

Introduction to Robotlegs Architecture

April 19, 2012 4 comments

Application architecture is most important part for large scale enterprise application. You will get some important ideas about architecture from a small article on Application Architecture, which cover usage of application architecture and basic overview about PureMVC framework.

Sometime might be you feel that application’s same result will achieve by using MXML file without using such architecture. While probably it’s true for the small application, but keep in mind that a large scale application with a framework, will allows us to effectively communicate concepts and understands a code base quicker than an application without any design pattern and practice. In this article we are going to discuss about Robotlegs framework. So first lets start with what is Robotlegs.

Robotlegs is a great architectural framework for developing Flash, Flex, and AIR applications. It works for both Flash and Flex projects. Robotlegs is a mechanism for wiring your objects together. Robotlegs is a set of modular utilities and interfaces that provide tools to ease these communication tasks, reduce repetitive coding tasks, and manage dependency injection within your application.

The framework provides a default implementation based on MVC meta-design pattern. Robotlegs provides a prescriptive implementation of Model, View, Controller and Services (MVCS) implementation to get you start. If you have experience with PureMVC then you will quickly recognize the use of Mediators and Commands in Robotlegs framework MVCS design pattern. Robotlegs is a set of modular utilities and interfaces that provide tools to ease these communication tasks, reduce repetitive coding tasks, and manage dependency injection mechanism within your application.

You will get more idea from the  Official Robotlegs MVCS Diagram:

Basic Structure of Robotlegs Application

A typical Robotlegs application is compose of several parts as:

1. Context
2. Views & Mediators
3. Controller & Commands
4. Model
5. Services

Context

Context is the heart of Robotlegs implementation. It’s bootstrapping mechanism that initializes dependency injection and the various core utilities that Robotlegs uses. The context provides a central event bus and takes care of its own startup and shutdown. A context defines scope. Also its possible to have several context within application.

Views & Mediators

A view is another name for a user interface. Basically anything that is an interface between your application and the user can be considered a view. They can should only read data from a model, not write directly to it.

The mediator’s job is to quite literally ‘mediate’ the view’s connection to the rest of the system. It listens to events coming from the global event dispatcher and then invokes the change on the view. It also listens to events occurring on the view itself and then alerts the rest of the system by dispatching an event on the global dispatcher.

Controller & Commands

The controller’s job is to manipulate data on the model, processing it beforehand if necessary. The controller is usually invoked by a view in response to user input. The controller never holds onto any data, it simply processes it then hands it on (usually to a model or service).

Commands are registered to a Context via that Context’s CommandMap. CommandMap is available by default in Context and Command classes. The Command class in RobotLegs contains a single execute method which is called immediately after instantiation. You use a Command class by overwriting the execute method with your own code. Commands are simple and shorted lived. Once a Command is instantiated and execute has been called its job is done. The CommandMap does not hold onto Command instances by default, they are left to the mercy of the garbage collector at this point.

Model

Model’s role is to store state information within your application. This can be thought of as a place to store data that may need to be retrieved by another part of your program. Models send event notifications when work has been performed on the data model.

Robotlegs does not enforce the use of a specific Model class; any class can be treated as a Model. However, in order to gain access to the global EventDispatcher there is an Actor class which provides a single eventDispatcher property used to dispatch events to other actors in the system.

Service

Service is use for service tier communication with external entity like Web Services, file access, or any action that takes place outside of the scope of your application for a service class. Service classes dispatch system events in response to external events.

Conceptually there are many similarities between the service and model tiers in MVCS architecture. Because of this similarity, models and services are extended from the same base Actor class.

You will get more information about Robotlegs framework from here.

Enjoy RIA .. 🙂

Flex 4.6 SDK and Flash Builder 4.6

September 21, 2011 1 comment

This year, Adobe released a great environment with Flex SDK and Flash Builder to support mobile application development with mobile optimized components and framework. Flash Builder 4.5 provides mobile project type, multiplatform device simulations and on device debugging and easy packaging for deployment on range of application stores.

I really like the environment, single framework and tool to build and deploy rich, expressive mobile and tablet apps on Android, BlackBerry Tablet, iPag and iPhone device.

You can get ideas about Flash Builder 4.5 from here :
What’s new in Flash Builder 4.5

Introduction of Flex 4.6

According to Adobe, Flex 4.6 will be released later this year, with new version of the SDK and a corresponding update to Flash Builder with new components and functionality specifically designed to help to create application for latest mobile and tablet device.

New Components

  • SplitViewNavigator : A new top-level application component specifically designed for the tablet experience. With only few lines of code, manage the layout of multiple views and have them adapt automatically based on device orientation.
  • CallOutButton : A versatile component that pops over existing content and can contain text, components or even entire views.
  • SpinnerList : This popular tablet component is an adaption of the existing List component. It not only has a new look, but also gives options like recirculating content and a position based selection model.
  • DateSpinner : A highly flexible component that is not only locale-aware, but provides multiple out-of-the-box configurations to fit most date/time entry needs.
  • Text Enhancements : Flex 4.6 solves the problem of cross-device text input. Flex exposes the native text-editing controls on EVERY platform—this enables the developer to customize the keyboard and the user to experience the native UI of common operations like selection, copy/paste and spelling checking.
  • ToggleSwitch : This simple and much-requested control is now available in Flex 4.6.

Also in addition to supporting the new features in the Flex framework, Flash Builder 4.6 exposes new capabilities that will enable developers to build better cross-platform mobile applications—Native Extensions and Captive Runtime.

Native Extensions allows developers to complement their Flex application with native C, Objective-C, and Java libraries—this new feature opens a world of new possibilities for both mobile and desktop applications. Providing access to Apple iOS, Google Android, and BlackBerry Tablet OS specific APIs, your applications can access native features like notifications or the calendar. Flash Builder provides complete support for both managing and packaging Native Extensions. To read more about the possibilities or learn how to build your own native extension, see Oliver Goldman’s article,Extending Adobe AIR.

Here you will get more information about Flash Builder 4.6 & Flex 4.6.

So Friends, Enjoy RIA 🙂

Flash Builder “Burrito” Mobile Application

March 4, 2011 3 comments

Recently, I spend some time to feel the great environment in Flash Builder “Burrito” for mobile application development. I like to share the basic ideas to start work on mobile application development environment.

With the rapid evolution of mobile computing platforms, new challenges have emerged for application developers. Adobe Flex SDK “Hero” and Flash Builder “Burrito”, along with the availability of the Adobe AIR runtime on mobile devices, developers can now build mobile applications for touchscreen smartphones and tablets with same ease and quality as on desktop platforms using Flex.

Setting up the project

After installing Flash Builder “Burrito” follow these steps to create your first mobile application:

1) Choose File > New > Flex Mobile Project.
2) For project name type FirstMobileApp

3) For mobile settings, make sure Google Android and Mobile Application options are selected.

4) Skip the server settings with their default values ( As we are not using application server for this application.)
5) Skip the build path settings with default values and select Finish.

Flash Builder “Burrito” creates a new mobile project, with two default files and initial view of the application. Now, its ready to start application logic, according to your needs. But for the first mobile application we creating simple application with navigation between some screens.

Now, first add a Button, to perform navigation to application’s first view. For this we are using ViewNavigator component. To change views will have to update the navigator what to do and accordingly, the build in navigation system responds. Will have to add the following code to add Home button to first view.

<s:navigationContent>

<s:Button label="Home" click="navigator.popToFirstView()"/> 

</s:navigationContent>

When the Home button clicked, postToFirstView() invoked, and the navigator will display the first view.

Within the tag <s:navigationContent> in FirstMobileApp.mxml, the firstView property has been set to views.FirstMobileApp, which refers to a file that was automatically generated when you created the project. When the user clicks the Home button, the ViewNavigator component will load the views. FirstMobileApp view.

Now, follow these steps to add more view screen :

1) Right-click the views package and select New > MXML component.
2) Type component name, here DetailsView as the name

3) Click Finish
4) Update the DetailsView code as below:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark" title="DetailsView">
 <fx:Declarations>
 <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>

 <s:VGroup horizontalCenter="0" verticalCenter="0">
 <s:Button label="Go Home"
 click="navigator.popToFirstView()"/>

 <s:Button label="More Details View"
 click="navigator.pushView(views.MoreDetailsView)"/>  
 </s:VGroup>

</s:View>

5) Repeat the steps as describe above and create MoreDetailsView.mxml and update its code.


Running the application in the emulator

Now follow the steps, to run the application with the emulator.

1) Open the FirstMobileApp.mxml
2) Choose Run > Run As > Mobile Application.
3) Select On Desktop as the Lunch Method and then choose a device to simulate

4) Click Apply > Run

The emulator will open and you will be able to navigate through the application using the buttons.

Running the application on a device

Excited to run the application on device!

If you have an device, you can follow the steps below to test your application on your device:

1. Plug your device into your USB port and choose Run > Run Configurations.
2. Change the Launch Method to On Device.
3. Click Run.
4. If the Choose Device dialog box appears, you may need to click Refresh and select your device.

If everything configure perfectly, then the application simply launch on device.

Hope this post will be helpful to start development with Flash Builder “Burrito”.

Enjoy RIA.. 🙂

Flash Builder BorderContainer

October 3, 2010 Leave a comment

Today, I had started few spark components and layout containers study and practice. Let me share about a Layout container called BorderContainer.  The BorderContainer extends SkinnableContainer and offers you a quick way to set borders and backgrounds on a container in your application without having to create a custom skin. You can use class properties like, setting the cornerRadius for rounded corners, borderColor, borderStyle, borderWeight and even backgroundColor, backgroundImage and backgroundFill to style.

 The following example will show some properties of BorderContainer.

 

<?xml version="1.0" encoding="utf-8"?>

<s:Application name="Spark_BorderContainer_Demo"

xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:mx="library://ns.adobe.com/flex/mx"

xmlns:s="library://ns.adobe.com/flex/spark">

 <s:VGroup id="mainGroup" width="100%" gap="20" horizontalCenter="50" top="50">

 <s:BorderContainer id="brdr" width="300" cornerRadius="{slider.value}" 

  backgroundColor="0xffcc12" />

 <s:VGroup> 

 <s:HGroup verticalAlign="middle">

     <s:Label text="Border Corner Radius :"/>

     <s:HSlider id="slider" minimum="0" maximum="100" value="1" />

 </s:HGroup>

 </s:VGroup>

</s:VGroup>

</s:Application>

You will get more information from here.

Text Layout Framework Technical Introduction

September 29, 2010 Leave a comment

Recently. I got chance for hand on practice on Text Layout Framework (TLF) and I like to post an article on technical introduction of Text Layout core component, conversion component and edit component and implementation of Text Layout Framework new feature like Undo / Redo and some interesting features.

Text Layout Framework support complex scripts and advance features and layout features. TLF consists three components :

1) textLayout_core.swc
2) textLayout_conversion.swc
3) textLayout_edit.swc

The textLayout_core component is central part of framework, which deal with storage of text, creation of text containers and display text.

As the component name itself indicate, the textLayout_conversion component is used for text input output operation (conversion), in other words import and export text operation with framework.

If you want to allow user to edit text which is stored in textLayout_core component then the textLayout_edit component will play an important role.

Following are some important Classes and specific operations techniques needs to understand for use of TLF.

TextFlow

TextFlow class is responsible for managing all the text content, as TextFlow can have ParagraphElement (p) and DivElement (div) elements as child. A div element can have group of paragraphs. A paragraphs can have SpanElement, InlineGraphicElement, LinkElement and TCYElement elements as a children. TYYElement is used in Japanise text.

The following diagram represent the node hierarchy in the elements package of the Text Layout Framework.

Each TextFlow has a corresponding Configuration object which allows you to specify initial character and paragraph formats and the initial container format.

You can get more information about Text Layout Framework from here.

TextLayoutFormat

The TextLayoutFormat holds all of the text layout properties, which effect the format and style of a text flow at container level, paragraph level and text level. Once you set TextLayoutFormat properties you will have to assign it with text flow just like:

var textFormat:TextLayoutFormat = new TextLayoutFormat();

textFormat.textDecoration = TextDecoration.UNDERLINE;

textFormat.fontSize = 12;

textFlow.format = textFormat;

Also, you can change text flow attributes directly :

textFlow.fontSize = 12;

Importing Text

This is specially useful for importing dynamic text returned from remote service or HTTPService at runtime. Following are three different conversion operation for import and export operation of text.

TextConverter.TEXT_LAYOUT_FORMAT – convert to / from markup format

TextConverter.PLAIN_TEXT_FORMAT – convert to / from plain text string

TextConverter.TEXT_FIELD_HTML_FORMAT – convert to / from HTML

private var _textFlow:TextFlow; private var _textInput:String ='Lorem ipsum dolor sit ao ac orci porta tincidunt eget in lorem. Aenean vitae nisi vitae urna lacinia congue. Duis nec leo turpis.'; textFlow =TextConverter.importToFlow(textInput,TextConverter.TEXT_LAYOUT_FORMAT);

Here, you can change the text format for text input.

Exporting Text

Exports a TextFlow to a specified format. Supported formats includes FXG, HTML, plain text and TextLayout Markup. Also specify the type of the exported data in conversion type format, which support ConversionType.XML_TYPE and ConversionType.STRING_TYPE.

var outputString:String = TextConverter.export(_textFlow, TextConverter.TEXT_LAYOUT_FORMAT, ConversionType.XML_TYPE).toString();

To implement this with spark component you can use textFlow property as shown below :

Editing Text

TLF edit component provides controller functionality by three classes that you can use to select text, edit text and undo redo text.

The ability to select or edit text is controlled at TextFlow level by an associated interaction manager, which is defined by TextFlow.interactionManager property. To enable selection will have to use SelectionManage class. And to enable selection and editing both assign an instance of EditManager instead of SelectionManager

1) Selection Manager

To enable your text selectable, create an instance of SelectionManager and associate it with interaction manger of your TextFlow instance. For example if _textFlow is your TextFlow instance name then you will have to set interactionManager property as shown below :

_textFlow.interactionManager = new SelectionManager();

2) Edit Manager

To enable selection and editing, create an instance of EditManager and associate it with interaction manager of your TextFlow instance. It will look like :

_textFlow.interactionManager = new EditManager();

3) Undo Manager

To enable undo and redo feature create an instance of UndoManager and set it as argument to EditManager constructor. If you have _textFlow as instance of TextFlow then you can set UndoManager as below.

_textFlow.interactionManager = new EditManager(new UndoManager());

If you have multiple instances of TextFlow let say textFlow1 and textFlow2, and you want to use the same UndoManager for the both textFlow instances then you can set it as shown below :

var undoManager : UndoManager = new UndoManager();

_textFlow1.interactionManager = new EditManager(undoManager);

_textFlow2.interactionManager = new EditManager(undoManager);

textFlow.format = textFormat;

Friends, you can get more information about advanced text operation supported by Text Layout Framework from here.

Enjoy RIA.. 🙂

Features of Next Version of Flex… Hero

August 25, 2010 Leave a comment

It’s really rocking news for Flex Developers. Adobe introduces the next release of the Flex SDK, code-named Hero. The Hero release has three main base themes:

• Multi-Screen Development

It will be great for developers if have an single framework to build applications that target the web, desktop or mobile devices. The Hero release of Flex will enable developers to continue to create application experiences that translate well across platforms, in addition to making it easy to build applications that work well on a wide variety of mobile devices. Hero will augment a number of existing Flex components with mobile- and touch-optimized skins and functionality and will also add new components that support mobile-specific UI patterns. Developers already familiar with core Flex concepts like data binding, MXML and dynamic layout will be able to quickly leverage that knowledge into building applications that can target numerous mobile devices.

You can get more information about the new features in the upcoming release version of Flex from Flex and Mobile Whitepaper and feature specifications.

• Spark Maturation

In Flex 4 an interesting component called Spark was introduced which allows for designers and developers to separate component logic from behavior and visuals of the component. Spark has proven to be a key addition to the Flex framework, and the Hero release focuses on building more Spark-based components as well as providing new Spark capabilities to existing Flex features. Some of the new Spark components being offered in the Hero release include Spark Form, Spark Image and Spark DataGrid controls. These new Spark components not only provide parity with the previous MX versions, but also expose capabilities that allow for more modern component designs.

• Large-Application Development

As people use Flex to build much more complex interesting and mature applications so the framework should support these efforts. The next version of Flex aims to improve the compilation experience and memory consumptions for large applications. And also runtime shared libraries feature improvements introduce in Hero.

You can get more information from here.

So friends, Enjoy RIA… 🙂