Home / Articles / Building Adobe WorkflowLab, Part 6: Development

Building Adobe WorkflowLab, Part 6: Development

Article Description

In part 6 of their series on the design and creation of WorkflowLab, Aaron Pedersen, James Polanco, and Doug Winnie, the authors of Adobe Flash Platform from Start to Finish: Working Collaboratively Using Adobe Creative Suite 5, discuss the development of the WorkflowLab codebase. Based on the wireframes (and later comps) and architecture discussions, the team now could begin constructing the application, bringing Adobe’s vision to life.
Component Development

Component Development

With a base framework in place, the development team next turned its focus to components. Since development started at the same time as design, the development team had to work on creating components based on wireframes. Each component would be developed to match the functionality mandated by the feature specification and use cases. No component would be considered complete until it fulfilled the design/developer contract established during the planning phase.

With the new Spark UI component architecture in Flex 4, the logic and layout/design of components are separated into two classes. With a definition of the components parts and states, the two classes can be combined to make a working component. Figure 2 shows the separation and contract created between the two classes. With the new architecture, components have a flexible structure that allows for skins to be created rapidly in MXML, using the new Flash XML Graphics (FXG) syntax rather than the Flash drawing API.

Figure 2 Flex 4 Spark component architecture.

The DevelopmentArc team was able to create the logic of a component that met the feature's functionality, while simply creating a rough sketch of the UI based on the wireframe inside a skin. The resulting application was fully functional, but with a rough look-and-feel. Figure 3 shows the initial wireframe application created for the first iteration of WorkflowLab.

Figure 3 Functioning application based on wireframes.

4. Design Integration | Next Section Previous Section