Refactoring is the process of cleaning up your code. It is not changing or adding functionality to your application. It is rewriting your code so it is more logical, readable, understandable, and extendable. In most cases, if your application is not broken, you leave it alone; there is no need to invest the time or risk the chance of breaking it. Typically when you do refactoring, then, is when you need to add functionality to an application. You refactor the application first and then add new functionality after. It's easier to restructure code without introducing bugs if you do it in small steps and don't try to change any functionality at the same time and it's easier to add or change functionality when you have clean, refactored code making it simpler and faster to extend and debug the application.

There are many different ways to refactor an application: you can move code from one place to an other, you can create new classes and member of classes; you can replace logic with shorter, more flexible code, you can remove dead code; you can rename classes and its members to more logical names, and so on. Martin Fowler, a well-known expert on refactoring, has catalogued many of these techniques on his website and his book, Refactoring: Improving the Design of Existing Code, the de facto reference on refactoring.

In this tutorial, you are going to refactor a simple Flex drawing application. The beginning application has all its code in the main Application file. The finished application has its code in multiple class files. You start with the more conceptually difficult refactoring tasks of extracting and abstracting code into more reusable, smaller pieces, move to the more straight-forward refactoring tasks of moving and renaming files to make the code more readable and understandable, and finish with the simplest way to clean up your code, by formatting it consistently. The refactoring tasks have been organized into some basic sections: Extract, Abstract, Move, Rename, and Format. These are groupings that I created in order to help give you a framework to introduce the different types of refactorings you can do. Many of the refactoring tasks, however, could be considered to belong to more than one of these groupings. For example, when you extract code from one location, you move it to another. In addition, most people would say formatting your code is not actually refactoring, but since this tutorial is all about cleaning up your code, I am including it as well.

In this tutorial, you will:

• Import the starting project and review the code for the initial Flex drawing application.
• Extract code into separate functions and classes to improve code reuse.
• Provide more abstraction by adding getter and setter functions, creating superclasses and subclasses, and using polymorphism.
• Move classes and organize them in logical packages making them easier to find and use and to guarantee unique names.
• Rename classes, properties, and methods to make them more understandable and usable.
• Format the code to make it more readable.

Requirements

To complete this tutorial, you need the following:

Flash Builder 4

• Try
• Buy

Tutorial files

• Flex4Refactoring_start.zip (ZIP, 25 KB)
• Flex4Refactoring_solution.zip (ZIP, 25 KB)

Prerequisite knowledge

A basic knowledge of creating Flex 4 applications is helpful. For more details on creating and customizing Flex 4 applications, see the Flex 4 documentation, the Flex 4 in a week video series and exercises, and the Adobe Flex Developer Center.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

Page 1 of 7

Next Page

About the author