What:

I updated the stylesheet that turns any mxml app into a wireframe. V2.0 catches a lot of styling exceptions that snuck by with the first version of this wireframing stylesheet. It also adds wirebox and wire header styles you can add to make sure all the necessary wireframes show up.

Why:

This stylesheet allows you to create wireframes that take advantage of the built in components, layout, and CSS styling of Flex. For more information on the benefits of wireframing in Flex, read the previous post. I’ll be posting some of the problems with this approach in the near future.

How:

If you’re using FlexBuilder for wireframing, just use the Design panel > CSS tab > Attach StyleSheet button to add the wireframe.css to your app. Or under the application tag just add the style tag:

< mx:Style source="../Wireframes/wireframe2.css" />

(where ../Wireframes/ is the path to this css file) and the entire app will inherit these styles. Note that if you are overriding this elsewhere, the more localized styles will override the wireframe styles—wireframing is usually happening long before styling so this shouldn’t be a problem.

You can download it here.

If you use this at all, let me know if it works for you and if there are any improvements needed.