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.