- Ready for Development
- Application Framework
- Component Development
- Design Integration
- Team Sync
- What's Next?
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Design Integration
With the wireframe components and the design comps completed in Adobe Illustrator, the development team was able to start "skinning" the application and its components.
For the skinning process of WorkflowLab, the project team chose to use Adobe Flash Catalyst as a skinning tool. Since the application had already been started in Flash Builder, the team needed a way to convert Adobe Illustrator artwork into the new FXG syntax. To do this, the developers opened Adobe Illustrator and targeted individual layers of the design comp that represented a component. The selected layers were copied and pasted into Flash Catalyst. When Illustrator assets are opened inside Flash Catalyst (or pasted from Illustrator into Catalyst), they're converted automatically into Flex's MXML and FXG.
After the assets were in Flash Catalyst, the development team worked on organizing the layers. This process included eliminating any unwanted assets such as positioning and background layout; otherwise, those layers would end up in the Flex application, possibly altering the application's functionality or hampering performance.
Figure 4 shows the base skin for the task panel of WorkflowLab.
)
Figure 4 Skinning WorkflowLab's panel in Adobe Flash Catalyst CS5.
With a clean set of layers, the developers next switched to the Code workspace in Flash Catalyst, highlighting and copying all the generated MXML and FXG for the component. In Flash Builder, the wireframe skin would be targeted, and the MXML from Flash Catalyst would be integrated into the skin. This integration process wasn't simply a matter of pasting over the existing code. Since data from the component has been tied into the application, those application specifics were integrated into the new MXML.
This process was repeated for all components in WorkflowLab, resulting in a user interface that really represented the designer's vision. Figure 5 shows the resulting first release of WorkflowLab.
)
Figure 5 Functioning application with design integration.