Accessibility
Peter Ent

Peter Ent

Adobe

Table of Contents

  1. Introduction
  2. Anatomy of a Component
  3. Writing the Component
  4. Using Styles and Properties
Created:
18 January 2005
User Level:
Beginner
Products:
Flex

Flex Component Basics – Part 1: Coding an Analog Clock

Macromedia Flex comes with many components, such as buttons, labels, and containers. However, there are times you will want to write your own component when none of the standard Flex components meet your needs. The easiest way to customize components, is by extending existing components if they do most, but not all, of what you require. However, there are times when your needs are so specific that you want to build a completely new component.

This tutorial is part one of a two-part series, and teaches you how to create a completely new component from the ground up. The example component in this article is an old-fashioned analog clock. Because an analog clock has several elements, such as the face and hands, it is a good example of a simple component that you can improve upon later. You can use the techniques in this article to get started, and you'll learn how to change a simple clock into one that has more complex functionality.

Requirements

To complete this tutorial you will need to install the following software and files:

Flex version 1.5

Tutorials and sample files:

Prerequisite knowledge:

  • Familiarity with writing Flex applications or familiarity with the Flex samples
  • Knowledge of ActionScript 2

The Analog Clock Component

The Basic Analog Clock

Figure 1. The Basic Analog Clock

When writing a component, you can put your code into certain places to override known methods so that the Flex component framework activates and draws your component at the right time. Failure to follow this framework leads to frustration and non-working components.

To change one part of the component without rewriting the entire component, I like to break the component into smaller parts. Each of the elements, face and hands, is a child object of the whole component. This way, each element draws only when necessary and you can easily position them. This is important since the clock shows the current time. With the hands constantly moving, you do not want to draw hands for every second.

Page 1 of 4
Next Page

About the author

Peter Ent is a Computer Scientist at Adobe, working on the Genesis project. Prior to this, Peter worked for Adobe Customer Care as a Flex Support Engineer and then as a Technical Account Manager. Before joining Adobe, Peter worked in the financial services industry at State Street and Fidelity Investments. He also has experience at two start-ups building software applications doing imaging and molecular modeling. Peter holds a bachelor of science in Computer Science from Syracuse University. Visit Peter's blog.