What’s included in the re-factored version?

• the MVC approach in now demonstrated not only for the module, but also for the item renderer used in the list component
• the model adapter pattern is demonstrated too
• some other minor refinements

Adapting the Model into a Presentation Model

Let’s see the Model Adapter pattern in more detail:

The MXML usage of the model adapter is pretty straight-forward – you can see this in the StatisticsView.mxml:

<programmerListItemModel:ProgrammerListItemModelAdapter id="modelAdapter"
    source="{model.programmers}"/>

And then instead of using the model.programmers you can use modelAdapter.resultCollection:

<list:CustomLayoutList id="list" styleName="programmersList" width="550"
    layout="{model.inAdvancedView ? verticalLayout : fluidLayout}"
    dataProvider="{modelAdapter.resultCollection}"
    itemRenderer="{new ClassFactory(ProgrammerListItem)}"/>

This adaptation is actually in a way demonstration of what means to have a pure abstract model and a presentation model (like in the MVP pattern).

This is the talk we gave at the Bulgarian FlexCamp this year – the event was in Bulgarian, and so is the talk:

Basically optimizations affect two areas of non-functional properties of the software – memory consumption and performance. Since Garbage Collection in Flash affects both memory and performance, it is very important to try describe how the GC works as detailed as we can.

How the GC works?

The part with the GC is mostly taken from the presentation accompanying the Alex Harui’s Garbage Collection and Memory Leaks blog post. The important things to note in this topic are:

• how the Flash memory allocation works – it prefers to allocate big chunks less often, instead of small chunks frequently
• the GC is only triggered by allocation
• the GC doesn’t run completely – there is no guaranty that all unused memory is going to be released (or at least it will not be released in a single pass of the GC)

The conclusion you must absolutely remember is that:

The GC is not predictable!

How to detect memory leaks?

Thanks to the Flex profiler now we can easily observe the memory consumption of a Flex or Flash application. We can interactively run the GC when we want and we can compare memory consumption during various stages of the application. The leaking memory consumption pattern is pretty clear. And so is the stable memory consumption.

Fixing Memory Leaks

Now that we now whether our application is leaking, we need to take a course of action to fill in the leaking spots. Again we can try using the profiler and its feature to detect loitering objects. When you browse through the list of such objects you need to pay special attention to the usual suspects:

• Array
• Object used as map
• Dictionary with strong references
• failure to remove event listeners

Which event listeners can cause leaks?

We’ll see why children adding listeners to their parents are causing leaks and why there is no such problem in the vice versa situation.

Unloading Third-Party Content

When unloading modules and third-party content be sure to:

• free bitmap memory
• stop video streams
• stop audio streams
• stop all MovieClips from animating
• remove event listeners to global list of enterFrame, exitFrame, etc.
• stop any downloads (http, sockets, FileReference)
• clear any fonts from the font table

You can use Loader.unloadAndStop() (but only in Flash 10).

Optimization Rules of Thumb

The following are performance optimization rules:

• always compile in strict mode
• use typed data structures
• use sealed classes instead dynamic classes
• avoid globals when code is deeply nested
• use vector<> instead Array (only in Flash 10)

Other optimization techniques

Important techniques to mention are:

• object reuse, especially for renderers
• avoid the setStyle() method
• avoid having too many nested containers

LEARN MORE OPTIMIZATION TECHNIQUES AND PRACTICES

In this topic we will cover:

• unit testing with fluint
• integration testing with fluint
• automation testing with Selenium and TestNG
• overview of the Flex Automation API

fluint – Flex Unit and Integration Testing Framework

Based loosely on the concepts of FlexUnit and its ancestor JUnit, fluint provides enhanced asynchronous support, a graphical test runner, integration with continuous build systems and an optional Adobe AIR client for directory watching.

FLUINT HOME PAGE AT GOOGLE CODE
INTRODUCTION TO FLUINT

The repository of the project is organized in the best way I’ve seen so far in a Flex open source project. The structure is optimized for fast setup – you just need to check out a project into your workspace and you’re ready.

Unit Testing

The goal of unit testing is to verify and validate that individual pieces of code fit for use. With fluint you can do a variety of tests:

• simple assertions
• asynchronous tests (testing asynchronous communication and services)
• asynchronous test setup (waiting for creation completed before test start)
• test visual components

WRITING A FLUINT BASIC TEST
WRITING ASYNCHRONOUS TEST
USING ASYNCHRONOUS SETUP

If you download the MVC Example you’ll find the testing code in the src/test directory.
The simple assertion is demonstrated in TestStatisticsServiceRandomLinesOfCode.as
Simple asynchronous test is demonstrated in TestStatisticsServiceOperations.as
You can see an asynchronous test setup in the following test cases:
TestInitialization.as
TestFiltering.as
TestLayoutChange.as

Some Additions to fluint

Since we’re dealing with RIA we must pay a great deal of attention to the interactions. Some interactions can not be automated easily and may require human intervention. Thus we must create some sort of a hybrid between a unit test and a functional test. To initiate the assertions the tester must perform a certain interaction with the unit under test, which is usually a visual component with a complex gesture that’s difficult to automate. The unit test is still part of a test suite, but the difference is that is should not fail while waiting for the designated interaction to be performed. The current implementation of asychHandler() expects a timeout to be specified. I’ve introduced a slightly modified method that will wait for unspecified period of time:

/**
 * Same as asyncHandler, but doesn't have a timeout
 */
public function waitingHandler( eventHandler:Function ):Function {
    var asyncHandler:WaitingHandler = new WaitingHandler( this, eventHandler );
    asyncHandler.addEventListener( WaitingHandler.EVENT_FIRED, handleAsyncEventFired, false, 0, true );

    pendingAsyncCalls.push( asyncHandler );

    return asyncHandler.handleEvent;
}

This method is part of the CustomTestCase which inherits the fluint base TestCase class. The WaitingHandler class inherits the fluint AsyncHandler.

In order to have visual testing I’ve modified the sample TestRunner and extended it with a visual testing environment. You can take a look at my modifications in the UITestRunner.as

RUN THE UI TEST RUNNER (FIRST TEST WAITS FOR THE USER TO CHECK THE CHECKBOX)

Integration Testing with fluint

After components and modules were unit tested (individually tested), the next step is to compose them into a bigger group and test the behavior of the whole group. Integration tests may be a bit more complex than unit tests. For complex test cases fluint provides us with test sequences.

READ MORE ON TESTING WITH SEQUENCES

Check out my sample test case that’s using sequences – TestLayoutChange.as

Automating fluint Unit and Integration Tests

Automation of unit and integration test is important part of a Continuous Integration build. Currently for fluint an Ant wrapper for the tool is available.

READ MORE ON CONTINUOUS INTEGRATION WITH FLUINT

Testing Flex Application with Selenium

Bad news for the QA engineers – I was able to produce only manually Selenium tests in Java for replaying a sequence of user gestures. Right now for testing Flex applications with Selenium there is only one available extension, but it works only with the old Beta 1 of the Selenium IDE when running only on Firefox 2. I haven’t tested that configuration. So currently there is no easy way for automatically recording the user gestures taken in the course of using a Flex application. And all my Selenium tests had to be written manually.

DOWNLOAD SELENIUM AUTOMATION JAVA PROJECT

For the above project you need a Selenium server and a Selenium remote control.
There are two partial solutions available for testing Flex applications with Selenium.

Selenium Flex API

As I’m writing this I see that today a new version of the API is available and the release notes for this version claim that it should work with the latest beta of Selenium IDE. I really want to check it out but for some reason the ZIP can’t be downloaded right now.

DOWNLOAD SELENIUM FLEX API

The Selenium Flex API consists of several components:

• SWC that you must import to the Flex application with the -include-library compiler switch
• JavaScript extension to the Selenium IDE, so you can record user gestures – this extension works only for Flex applications that have already included the above SWC
• Selenium Remote Control client – I bet the provided class is automatically generated with some tool – the code contained syntax errors and did not prove as working

Flash-Selenium

The flash-selenium project aims to extend the Selenium RC clients for adding Flash communication capabilities. It basically adds the capability to invoke Flash functionality through JavaScript and the ExternalInterface feature of Flash. I don’t like this approach, because you need to expose a great deal of functionality as ExternalInterface and this approach can’t be applied for black box testing.

GOOGLE CODE HOME PAGE OF FLASH-SELENIUM

My sample = Flash-Selenium + Selenium Flex API

My sample uses both the Flash-Selenium remote control client and the Selenium Flex API SWC included in the Flex project. Let’s look at the code of the test case:

@BeforeSuite
public void startSeleniumServer() throws Exception {
	seleniumServer = new SeleniumServer();
	seleniumServer.start();
}

This is TestNG preparation method before starting the test suite.

The following is a setup method for each test case. Please, note the way I’m using Flash-Selenium:

@BeforeTest
public void startBrowser() throws Exception {
	selenium = new DefaultSelenium("localhost", 4444, "*firefox", BASE_URL);
	selenium.start();
	selenium.open(URL);

	flexApp = new FlashSelenium(selenium, FLEX_APP);
	while (flexApp.PercentLoaded() != 100) {
		Thread.sleep(1000);
	}
	Thread.sleep(5000); // extra assurance that everything is loaded
}

Now that the Flex application is up and 100% loaded the test is ready to be run. Please, note the way I invoke functionality in the Selenium Flex API SWC through Flash-Selenium:

@Test
public void checkLayoutUpdate() throws Exception {
	flexApp.call("doFlexClick", "advancedViewCheckbox", "");
	Thread.sleep(5000);

	String isChecked = flexApp.call("getFlexCheckBoxChecked", "advancedViewCheckbox", "");
	Assert.assertEquals(isChecked, "true");

	String listData = flexApp.call("getCustomLayoutListData", "#");
	Assert.assertEquals(listData.split("#").length, 9);

	flexApp.call("doFlexClick", "filterTextInput", "");
	flexApp.call("doFlexType", "filterTextInput", "br");
	Thread.sleep(5000);

	listData = flexApp.call("getCustomLayoutListData", "#");
	String[] items = listData.split("#");
	Assert.assertEquals(items.length, 2);
	Assert.assertTrue(items[0].toLowerCase().contains("br"));
	Assert.assertTrue(items[1].toLowerCase().contains("br"));

	flexApp.call("doFlexDoubleClick", "filterTextInput", "");
	flexApp.call("doFlexType", "filterTextInput", "");
	Thread.sleep(5000);

	listData = flexApp.call("getCustomLayoutListData", "#");
	Assert.assertEquals(listData.split("#").length, 9);
}

Notice some methods are part of the Selenium Flex API and some methods are exposed on purpose through ExternalInterface. The following is part of the CustomLayoutList.as:

// Methods exposed only for Selenium testing purposes:
private function initializeExternalInterface() : void
{
    ExternalInterface.addCallback("getCustomLayoutListData", getCustomLayoutListData);
    ExternalInterface.addCallback("getCustomLayoutListLayout", getCustomLayoutListLayout);
}

A More Cleaner Approach

A more cleaner approach would be to use the Flex Automation API:

An appropriate agent class for Selenium should be created and an appropriate JavaScript extension to the Selenium IDE.

READ MORE ABOUT THE FLEX AUTOMATION APIS
CHECK ADOBE’S AUTOMATION SAMPLE

The following illustration shows the initialization process of the SystemManager, AutomationManager and Automation objects:

And this is how the automation flow works:

Related Articles

Selenium-Flex-Tests with Maven
Flex acceptance testing and continuous integration

Just as I’ve promised an example MVC module was demonstrated and discussed in today’s session. The example is far from perfect but it provides a fundament for discussing various design decisions when we implement an MVC example.

Sample Requirements

The request is to implement a Programmer Statistics Module with the following requirements:

• the module should provide basic and advanced view for a list of programmers
• use text input to filter the list
• use checkbox control to switch between the basic and advanced view
• in advanced view the user can delete programmers
• in advanced view the user can show the programmers statistics
• programmers statistics should be represented by a chart showing the lines of code written in a month by the programmer
• switching back to basic view should make all expanded items to collapse their statistics view

RUN THE MVC EXAMPLE
VIEW MVC EXAMPLE SOURCE CODE

As you look at the working application, you must be able to isolate the Model, the View, the Controller and the Services layers.

The Model

What’s comprising the model?

• collection of programmers’ data
• a flag indicating whether we’re in advanced view

Keep in mind that the list of programmers is pure data – a single item from the list has only data properties and no representation related properties whatsoever.

The View

Among all other controls the View also contains a List component. The abstraction of the list component can be explained basically by the following 3 things:

• data provider – a collection of data items – the List observes all changes happening to this collection and reacts correspondingly by adding or removing list items
• item renderer – a factory for creating item renderer components – the instances created by the factory we call list items
• layout strategy – a strategy for arranging the positions and dimensions of the list items in the list

The List component is the only component that communicates directly with the list items. This is how the List adds a single list item:

private function addItem(itemData : Object) : void
{
    var item : IDataRenderer = itemRenderer.newInstance() as IDataRenderer;
    item.data = itemData;

    listItems.addItem(item);
    dataToItemMap[itemData] = item;

    UIComponent(item).addEventListener(ResizableItemChangeEvent.DIMENSIONS_CHANGE, handleItemDimensionsChange);

    addChild(UIComponent(item));
}

In a way the item’s data property is the item’s model, but since we feed the List with a collection of programmers’ data items, which are pure data this brings the following problem:

How do we initialize all of the properties in the Model of the item renderers’ instances?

One solution to this problem is the application of a pattern called Data Binding Adapter.

The Data Binding Adapter Pattern

The data binding adapter pattern is a way of structuring data binding expressions.
Currently the List is initialized in the following way:

<list:CustomLayoutList id="list" styleName="programmersList" width="550"
    layout="{model.inAdvancedView ? verticalLayout : fluidLayout}"
    dataProvider="{model.programmers}"
    itemRenderer="{new ClassFactory(ProgrammerListItem)}"/>

Let’s try to adapt the collection:

<adapter:ProgrammerListItemAdapter id="adaptedModel"
    programmers="{model.programmers}"
    inAdvancedView="{model.isAdvancedView}"/>

The adapter is bound to the properties of the original Model and can take actions when the original Model changes – e.g. when the inAdvancedView property changes to false the adapter goes through each item of the itemsModels collection and changes the statisticsShown property to false:

public var itemsModels : ArrayCollection /* of ProgrammerListItemModel */

private function set inAdvancedView(value : Boolean) : void
{
    if (!value)
    {
        for each (var model : ProgrammerListItemModel in itemsModels)
        {
            model.statisticsShown = false;
        }
    }
}

Â

And finally we bind the List to the adaptedModel.itemsModels instead of model.programmers:

<list:CustomLayoutList id="list" styleName="programmersList" width="550"
    layout="{model.inAdvancedView ? verticalLayout : fluidLayout}"
    dataProvider="{adaptedModel.itemsModels}"
    itemRenderer="{new ClassFactory(ProgrammerListItem)}"/>

Tell me what you think about this approach?

Containers

Let’s take a look at the StatisticsModule.mxml where all components are wired to each other:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
    backgroundColor="0xffffff"
    creationComplete="controller.initializeModel();"
    xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:model="module.statistics.model.*" xmlns:view="module.statistics.view.*"
    xmlns:control="module.statistics.control.*" xmlns:service="module.statistics.service.*">

    <mx:Style source="module/statistics/style/statistics.css"/>

    <model:StatisticsModel id="model"/>

    <view:StatisticsView id="view" width="600" height="100%"
        model="{model}"
        viewModeChange="controller.switchViewMode();"
        deleteButtonClick="controller.deleteListItem(event.target);"
        requestStatistics="controller.loadProgrammerStatistics(event.programmer);"
        filterChange="controller.filterProgrammers();"/>

    <control:StatisticsController id="controller"
        model="{model}" view="{view}"
        programmersService="{services.programmersService}"
        statisticsService="{services.statisticsService}"/>

    <service:Services id="services"/>

</mx:Canvas>

Notice anything strange or troubling?
The question is:

Do I have to wire the Model, View, Controller and Services inside of a Canvas container? Isn’t it the View, the only View in the MVC? Why is my MVC a container itself?

You can do two different things in this case:

1. Strip out the StatisticsView component and include its composite components directly in the module root Canvas. Thus we eliminate one redundant container. A negative side effect of this modification is that the view is not isolated in a self-container component. The following approach is better:
2. Use a non-visual component for a root tag. When using a non-visual component for a root tag, there is an extra programming effort to add the View to the application container:

private function addStatisticsModule() : void
{
    var module : StatisticsModule = new StatisticsModule();
    container.addChild(module.view);
}

]]> http://training.obecto.com/2009/05/mvcs-example/feed/ 2 http://training.obecto.com/2009/04/flex-applications-architecture/ http://training.obecto.com/2009/04/flex-applications-architecture/#comments Thu, 30 Apr 2009 09:32:39 +0000 admin http://training.obecto.com/?p=154 DOWNLOAD SLIDES

This talk is based on a series of articles I wrote last year:
Introduction to Flex Application’s Architecture – Part 1 – Cairngorm
Introduction to Flex Application’s Architecture – Part 2 – PureMVC
Introduction to Flex Application’s Architecture – Part 3 – The Gugga Approach

Since we’re gonna compare a couple of architectures and some architectural approaches, it is important to establish a common ground in understanding why we need an architecture and what problems an architecture tries to solve.

Why architecture is important?

Architectures are important in situations where we need to:

• scale things up in both size and complexity
• prepare and follow a plan

The important thing to remember is that architectures are rarely obvious. And in most of the cases they emerge from the practice.

MVC vs. MVP

I’ve included some differences between MVC and MVP as I perceive them, but in the discussion with we ended up with the conclusion that “MVP is speculatively different from MVC”.

Architectural Frameworks

We’ve discussed the most popular architectural frameworks – Cairngorm and PureMVC, outlined their flaws and benefits, but mostly flaws. I’ve tried to persuade the audience in the need of a more granular approach, that can be applied not just on MACRO-application level, but also on a module level and even on component level of granularity.

It is important to note that the proposed ideas are not a complete architectural framework, but rather an approach. And since this is just an approach, there are no rigid rules – the developer must take his decisions without relying on strong and proven rules. The difficulty comes when you have to decide on what level of granularity you need to set up an MVC-infrastructure. Whether to have a single view and single controller and whether to have multiple views and many controllers?

Detailed sample is published in the next topic – MVCS Example.

Great Comparison Between Frameworks

The following is a great comparison between Flex architectural frameworks:

• Part 1 – Introduction
• Part 2 – Get Control with Cairngorm
• Part 3 – Framework Agnostic Views with PureMVC
• Part 4 – IoC with Swiz
• Part 5 – Mate, the Pure MXML Framework
• Part 6 – The Exciting Conclusion

This series of articles build the very same application but with different architectural approaches. The Source Code is available at GitHub.

Flex 3 has huge improvements in the localization support compared to what Flex 2 supported.
In this lecture will get to know the various was of doing localization:

• static localization
• dynamic localization
• externalizing localization resources into resource modules
• dynamically loading resource modules

DOWNLOAD LOCALIZATION SAMPLE

We’ve included in the sample above an Ant script that automates the compilation process of resource modules.

In the beginning this topic was titled Component-Based Development with Flex, where ‘component-based’ was used in the meaning of Component Based Software Engineering. There are certain similarities between modules and components and we’ll discuss them during the lecture, but yet the content of this talk is mostly oriented on modules and the Flex specifics in creating modular applications, so the title got changed.

DOWNLOAD SAMPLE MODULAR APPLICATION

What else can be added to this topic?

When loading functional content from other SWF files, the question that rises is where are the new class definitions loaded in? And this questions brings up the discussion about Application Domains in Flash. Don’t miss to check the following resources:

A simple explanation of Application Domains
Chapter 1: Developing and loading sub-applications – a complete chapter that covers application domains, security domains and resources compiled with different versions of the Flex Framework. It’s quite strange – what kind of a book starts with developing and loading sub-applications?

The slides are partially based on the Working with Data in Flex talk Branimir Angelov gave at the 2008 FlexCamp.

We got to admit that this is one of the toughest topics to discuss, because remoting is part of a quite bigger topic – distributed systems. And distributed systems encompass tones of knowledge, e.g.:

• different data paradigms (weakly-typed data, strongly-typed data, persistence and Flex specifically – data binding and data management)
• different network and web architecture principles and paradigms (REST, RPC, Data Management)
• middle-ware paradigms (transactions, messages, remote method invocation)
• different server technologies concepts and details (servlets, non-blocking I/O, stateless and stateful objects)

The Structure of the Talk

The structure of the talk reflects the typical mindset of an Obecto developer. In the beginning of a project our thoughts are mostly concentrated on acquiring a correct vision for the product to be developed. In this early phase of the project we focus our efforts on developing a working client application. We refer to such applications as prototypes – a piece of software we can give to our client, so he can use it to test the market and reassure his understanding of the product and the interactions which encompass it. This is an approach known as Front-to-Back development.

The talk is structured in a similar way – we start with the remoting components available in the Flex Framework and we approach them as if we won’t ever need to know anything about the next layer in the architecture. This approach faces a lot of arguments since students often require to see the complete picture first. To defend this approach, we usually bring the argument that layering is an engineering technique that help us study independently different parts of a big and complex system. If we can’t study a system layer by layer, than there is no benefit of creating a multi-tier architecture. So this is how we start:

Client-Side Remoting Components

Here we discuss the service components:

• HTTPService
• WebService
• RemoteObject
• DataService

As we investigate separately each of the components, we’ll try to fill in the whole picture of the remoting architecture implemented in the Flex Framework. Click on the following UML diagram to get a 100% view on it:

The samples we show are part of the LiveCycle DataServices ES installation. We’ll provide the source code for the samples we’ve slightly modified.

Different ways to process the results

We’ll take a look at the various ways to process the results of a service:

• data binding to the lastResult property
• listening for ResultEvent and FaultEvent
• using IResponder
• using the AsyncToken

DOWNLOAD SAMPLE WITH THE PROXY GENERATED FROM THE WEB SERVICES WIZARD
DOWNLOAD SAMPLE WITH REAL TIME UPDATE OF A CHARTING COMPONENT

The Static Service Proxy

When I was preparing the talk I was trying to recall in my memories what were the reasons for us to develop and start using the StaticServiceProxy in our projects. It took me several days to recollect my memories. The idea is basically related to the concept of the BusinessDelegate in the Cairngorm micro-architecture, but with several advantages:

• MXML declarative support
• smooth transition between WebService and RemoteObject
• easy way to create mock proxies
• a way to differentiate between different invocations

Todor Kolev had prepared a pretty illustrative example on how we use it.
DOWNLOAD TODOR KOLEV’S SAMPLE

Server-Side Components

In the final part of the talk we’ll get acquainted with the LiveCycle Data Services components and the architecture of the LiveCycle DS server.

• end-points
• the MessageBroker
• destinations
• adapters
• assemblers

Useful Resources

How to hack LiveCycle ES Data Services to run natively on a Mac
Capacity Planning Guide for Adobe ® LiveCycle ® Data Services 2.6

This is by far the biggest topic in the course and it covers lots of subtopics as there are a lot of ways of creating and extending components. On the other side there are different types of components – visual or non-visual, but also components for data and components, let’s roughly call it a behavior.

Visual Components – Composition

The easiest way for creating custom components is to compose already existing components into a composite view. And there are various way to do that, but before we jump to these, I’ll show you what’s my understanding on the concept of code behind.

DOWNLOAD CODE BEHIND SAMPLE

When doing composite components always keep in mind that there are different ways to layout and position the components:

• absolute positioning
• relative positioning
• and even enhanced constraints

DOWNLOAD ABSOLUTE VS. RELATIVE LAYOUT SAMPLE
DOWNLOAD ENHANCED CONSTRAINTS SAMPLE

The enhanced constraints sample is prepared by Fabian Vercuiel as part of his talk on Flex Layouts given at the regular Flex-Bulgaria User-group meetings.

Visual Components – Containers

There are different types of containers you can use in Flex 3:

• layout containers
• list containers
• repeater (which is not a container)

DOWNLOAD LAYOUT CONTAINERS SAMPLE
DOWNLOAD LIST COMPONENTS SAMPLE (REPEATER SAMPLE ALSO INCLUDED)

Visual Component – Extending UIComponent

In order to extend UIComponent we need to know a few things:

• the UI component life-cycle
• the invalidation mechanism
• the LayoutManager phased mechanism

DOWNLOAD UICOMPONENT SAMPLE

States & Transitions

We’ll make a parallel between the Go4 State-pattern and States in Flex, but we’ll also take a look at the states architecture in Flex. Then we’ll get acquainted with the Transition’s mechanism in Flex. As we look at the sample we’ll run into an issue when we’re interrupting a transition. I’ll propose a possible solution in the same sample.

DOWNLOAD STATES AND TRANSITIONS SAMPLE
DOWNLOAD INTERRUPTIBLE TRANSITION SAMPLE

Flex 4 Gumbo Transitions are introducing the autoReverse-property.

Non-Visual Components – Effects

The intent is to get to know the Effects architecture, the various types of effects (composite effects, tweening effect and action effects), but also to take a look at what other possibilities we can get if we decide to extend some Flex effects.

Non-Visual Components – Validators & Formatters

I’ll start with describing the Flex Validator component and the plan is to end with some suggestion how to adjust the user interaction logic of the validator in order to fulfill some specific UX needs.
Formatters are just briefly mentioned.

Deferred Instantiation and How To Make Template Components

We can take advantage by configuring a component with MXML and controlling the instantiation of this pre-configured with deferred instantiation. I’ll propose a flex pattern for using deferred instances for factory-classes.

DOWNLOAD DEFERRED INSTANTIATION SAMPLE

Data Descriptors

In the end of this topic we’ll make an overview of Flex Data Descriptors.

What’s left out of this topic?

I haven’t talked anything about Skinning and Styling Flex components – skinning and styling is yet another way to extend and customize components. But here I’ll provide you with a road-map on how to use the skinning and styling abilities build-in Flex

1. Setup of build-in style-properties (a.k.a. Styling)

The most easiest way for simple skin application is to modify the style-properties of the Flex-components. You just need to play around with the Flex Styles Explorer (v3) and copy the styles into your CSS-files.

2. Completely changing the appearance of a component (a.k.a. Skinning)

Skinning involves 2 different processes – preparation of new visual assets and the application of these assets as skins (achieved again through styling). To learn how to combine these two processes read about Designing Flex 3 skins and styles using Creative Suite 3 and Flex Builder 3.
A theme is a collection of related styles – usually a theme changes the looks of a large set of Flex controls. If you need an inspiration browse the ScaleNine collection of Flex themes.

3. Programmatic Skinning (using the drawing API to prepare visual assets and effects run-time)

In some peculiar cases (like this one Flex 3 Designer ScrollBar – Fixed Size ScrollThumb) simply preparing visual assets won’t be enough. Some coding is needed to achieve the desired appearance and behavior. Again programmatic skins are applied through styling, but instead of Embed-directives you should use ClassReference-directives.

Keep in mind that in the new version of Flex, the current process of skinning and styling would be quite obsolete or at least different!

Flex 4 Sneakpeak

If you’re interested in what’s Flex 4 going to be, don’t forget to check out this video:

Usually an SDK contains:

1. Runtime Execution Environments
2. Framework
3. Compiler and Tools

What is important to remember from this talk is:

• The architecture of the Flash Player
• The retained mode of the renderer
• The loop of the player (SWFTags, ActionScript, Rendering)
• The conceptual single-threaded programming model
• The distinction between Flash and Flex (flash.*, flex.*)
• The various ways to distribute components (SWF, SWC and RSL)

But the talk is also intended to give you an overview of the available functionality you can use within the Flex Framework. We’ll go briefly through each of the major packages in the framework.