Obecto Training Portal

VMware requested from me to prepare a Flex course for their QA engineers and here it is – I’m pleased to share with you the first and only (to my knowledge) course especially prepared to train QA engineers in the intricacies of testing Flex application. This course shares some of the material I teach to the software engineers, but the lab exercises are totally different – instead of focusing on building an application, we’ll focus on understanding the Flex technology and how it can be tested in programmatic fashion.

The course is structured in 5 lecture topics and 9 practical labs in the course of which we’ll build an app an explore different aspects of its testing. Each lecture has slides that you can download from here. Each lab will end up with a project that would be uploaded here for future download.

Topic 1 – Overview of Flash and Flex

DOWNLOAD SLIDES

Topic 2 – Introduction to ActionScript 3 & MXML

DOWNLOAD SLIDES

Topic 3 – Introduction to Flex Components

DOWNLOAD SLIDES

Topic 4 – Event Handling

DOWNLOAD SLIDES

Topic 5 – Remoting Basics

DOWNLOAD SLIDES

Almost all of the lab projects are based on a sample project prepared especially for the QA course. The sample is available for download. After each lab the current state of the project will also be made available for download.

DOWNLOAD THE COMPLETED PROJECT

The ZIP contains two projects that you need to import – a library project and a regular Flex project.

Each lab covers a set of goals as defined here:

Lab 1 – Project Setup & Getting to Know the Flex Builder

• importing the complete project
• creating a new project
• preparing the directory structure
• adding the entity classes
• writing the Resources-Utility (plain AS3)
• adding the Main-Model (demonstrate both in AS3 and in MXML)
• getting comfortable with DataBinding

DOWNLOAD LAB 1 PROJECT

Lab 2 – Adding Code Behind and View Components

• adding the Main-View (just MXML)
• adding code behind for handling events (demonstrate both the Script tag, the base class and the source file)

Lab 3 – Adding and Understanding id’s

Lab 4 – Feeding the List Components with Mock-Up Data

• use data binding to feed the list components
• writing the Resources-Data-Adapter (plain AS3)
• introduce the tree component

Lab 5 – Traversing the TreeCheckBox-component

• understanding why using the Automation API is important
• including all needed libraries
• making a custom AutomationImpl component

Lab 6 – Adding Custom Method to ExternalInterface and Invoke them through JavaScript

• adding ExternalInterface.addCallback
• invoking through Firebug

Lab 7 – Invoking the Selenium API through JavaScript and Firebug

• copy the SeleniumFlexAPI.swc to libs
• add -include-libs “../libs/SeleniumFlexAPI.swc” to compiler arguments
• demonstrate document["QAFlexCourseProject"].getFlexProperty(”viewstack”, “selectedIndex”);
• demonstrate document["QAFlexCourseProject"].doFlexProperty(”viewstack.selectedIndex”, 0);
• add a Button to the Test-View which opens an Alert
• demonstrate document["QAFlexCourseProject"].doFlexClick(”seleniumTestButton”, “”);

Lab 8 – Simulating User Actions through Dispatching Events

• demo an attempt of automating user gestures this way
• demonstrate FlexMonkey

Lab 9 – Verifying Remote Data

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.

DOWNLOAD SLIDES

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.

DOWNLOAD SLIDES

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?

DOWNLOAD SLIDES

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

DOWNLOAD SLIDES

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:

DOWNLOAD SLIDES

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.

DOWNLOAD SLIDES

With this talk we’ll make an attempt to get a very close understanding of what’s going on under the hood of the Flex DataBinding mechanism and hopefully to get a conceptually correct notion of what does what ending with an UML diagram of all parties involved.

I’m very pleased to welcome all VMware developers to the Obecto Training Portal. We’ve setup this blog with the intend to open a portal to the knowledge we have in the field of RIA and especially Flex and Flash. This is a portal, but also this is an open conversation – feel free to write comments and to ask all your questions.

Even though we’re bulgarians, the official language of the portal is English. The reason for that is to make our discussions as reusable as possible and as open as possible to everyone else interested.

If you find it difficult to express yourself in English (or just don’t want to), here’s the Bulgarian Flex User-group which has its Google Group – the preferred language there is Bulgarian.

The topics in the course

The topics in the course are updated according to the feedback we’ve got from the first group who attended the course:

1. Overview of the Flash Platform
2. Introduction to ActionScript 3 & MXML
3. DataBinding – a Look into the Generated Code
4. Overview of the Flex SDK
5. Creating & Extending Flex 3 Components
6. Remoting
7. Flex Applications’ Architectures
8. MVCS Example and MVC Example – Refactored
9. Creating Modular Applications
10. Flex 3 Localization Support
11. Test Driven Development
12. Optimizing Flex Applications

The MVCS Sample is moved closer to the beginning, because the concept is quite important and it brought lots of controversy and confusion during the last course. The whole idea is revised and some issues and aspects noticed by the seniors (special thanks to Alex and Stefan) that attended are going to be further clarified.

What’s left out of the course

There are quite a lot topics that are out of the above topic list:

• Skinning and Styling Flex Components
• Preloading Flex Applications
• Integrating Flash Content
• Using Shared Objects
• Printing from Flex Application
• Introduction to Gumbo

Recommended List of Books

Today, I was asked to provide a list of books about Flex. The problem is, I’ve never read a book about Flex. Well at least not published in paper. I can recall reading Creating & Extending Adobe Flex 3 Components and you can find this title also here in the sidebar. I can recall also using Essential ActionScript 3.0 as a reference in some Flash related tasks. And that’s about all I’ve ever read in paper about Flash and Flex.

ActionScript 3.0 Design Patterns: Object Oriented Programming Techniques – the contents of this book looks pretty intriguing, but I haven’t read the book. Anyway it looks really promising.