Tag Archive for 'tutorial'

[SOURCE FILES] UIComponent: Create Flex components from scratch

Source and example files from the presentation are now available through the following links:

1) What you get for free with UIComponent
2) [view] Component lifecycle
3) [view step one | step two] Invalidation

I have a text version of the presentation in the works. Anyways, I hope this is helpful to you as you create your own custom Flex components!

Create a View and bind to application data

(Go to ‘Cairngorm Series‘ to view all titles)

This is the third post in a series on Cairngorm fundamentals. We will be binding data from the ModelLocator (created in the previous video) to a new View component. There are countless ways to achieve similar results, so do some research and come up with a method that meets your requirements. I establish some goals to strive for when creating views but the focus of this series is on Cairngorm. Feel free to post links to additional resources on the subject. Continue reading for the video and example with source …

Continue reading ‘Create a View and bind to application data’

The ModelLocator Holds Application Data

(Go to ‘Cairngorm Series‘ to view all titles)

This is the second post in a series on Cairngorm fundamentals. We will be covering the concept of the ModelLocator, the Model in MVC. In short, the ModelLocator is a Singleton which implements a marker interface (no method definitions) from the Cairngorm framework called com.adobe.cairngorm.model.IModelLocator. The ModelLocator class defines properties that hold all application data. From now on we’ll just call this class the Model.

Continue reading ‘The ModelLocator Holds Application Data’

Moving towards MVC without Cairngorm

(Go to ‘Cairngorm Series‘ to view all titles)

This is the first post in a new series on Cairngorm fundamentals. I begin the series with three steps towards a Model View Controller implementation using familiar concepts and no framework. Future posts will build on these concepts using the Cairngorm framework until we have built a working application.

Continue reading ‘Moving towards MVC without Cairngorm’

Flex Part 02+: A Better Model Object

This post is an extension of an earlier post entitled “Flex Part 02: Value Objects & Model Objects“.

Recap: Model Objects are similar to Value Objects in that they hold the same data, except that the Model Object is responsible for making sure that no ‘bad’ data gets into the VO. The Model Object enforces business rules like, “phone must be at least ten digits long” which a VO cannot do on its own. A Model Object may even include methods for easily manipulating properties.

In the earlier post I presented some example code for a Model Object. It turns out that what I provided is a pain to maintain over time. There’s just too much duplication and poor use of public properties. Continue reading for my attempt at a better, easier Model Object …

Continue reading ‘Flex Part 02+: A Better Model Object’

FormattedStepper extends NumericStepper

Sometimes it is necessary to display a formatted value such as currency or a percentage in a NumericStepper component, but that is not a default behavior. I need something extremely simple that can be written as:

XML:
  1. <mx:CurrencyFormatter id="currencyFormatter"
  2.     currencySymbol="$"
  3.     precision="2"/>
  4.  
  5. <controls:FormattedStepper formatter="{currencyFormatter}"/>

My internet searches turned up this similar attempt, but it seemed overly complicated (just my opinion). Continue reading to view my attempt at a simple formatted numeric stepper with source. I've also included an example of a custom formatter as well as an item renderer / item editor in a DataGrid.

Continue reading 'FormattedStepper extends NumericStepper'

GroupingCollection -> HierarchicalCollectionView

This post is a continuation of "Distinct Data Providers with GroupingCollection." The code and example is extremely similar - there are a couple minor changes to accommodate one addition: the use of HierarchicalCollectionView.

What's new?

We saw in the previous post that a GroupingCollection works very well for creating a grouped data provider for an AdvancedDataGrid or even for use in part in a List or ComboBox control. But there's a(nother/ better) way to populate that distinct List or ComboBox from the GroupingCollection. Use a HierarchicalCollectionView. It's a more elegant solution and also lets you use your grouped data to populate a Tree or Menu control! Continue reading to try it out and view code.

Continue reading 'GroupingCollection -> HierarchicalCollectionView'

Distinct Data Providers with GroupingCollection

Update: This post is updated and continued in the next post, "GroupingCollection -> HierarchicalCollectionView." Please see that post for additional (better) suggestions.

This post is itself an update to "DistinctArrayCollection extends ArrayCollection." The old post describes the problem and proposes a solution. I did not post code in that article because I felt like there had to be a better way of doing things. Here's a better way (see the update for a much better way): use the GroupingCollection class in Flex 3. Continue reading to try it out and view code.

Continue reading 'Distinct Data Providers with GroupingCollection'

Flex Part 03: The ModelLocator

The ModelLocator is an Action Script Class that is stored in the model directory.

This is a concept used in every Cairngorm application (see here for example) but you don't need the Cairngorm library in your project to use it. In fact, you don't need to know anything about Cairngorm to get started.

About the name

The ModelLocator holds instances of Model Objects, making them easy to locate and accessible from anywhere in the application.

Benefits of using the ModelLocator

The ModelLocator will make Flex development easier and more enjoyable. Here's how: All application data will be stored in one single place, accessible from anywhere in the application at any time. That one place is, of course, the ModelLocator.

Continue reading 'Flex Part 03: The ModelLocator'

Flex Part 02: Value Objects & Model Objects

Value Objects

Value Objects are ActionSrcipt classes which are stored in the project's vo directory.

Think of a Value Object as a row in a database table. Let's imagine a table named
schools with columns for name, phone, address and ranking. Imagine also a related table of students.

Table: schools (one school has many students)
+------------+---------------+
| Field      | Type          |
+------------+---------------+
| id         | Number        |
| name       | String        |
| phone      | String        |
| address    | String        |
| ranking    | Number        |
+------------+---------------+

Table: students
+------------+---------------+
| Field      | Type          |
+------------+---------------+
| id         | Number        |
| school_id  | Number        |
| name       | String        |
+------------+---------------+

Each row in the schools database table will have several properties which effectively describe a single School. The properties of a School contain simple values: strings, numbers, dates etc. This is the essence of a Value Object (VO).

Continue reading 'Flex Part 02: Value Objects & Model Objects'