WP6

In the early stages of a mobile application’s design, storyboards give developers a way of visualizing its navigation flow and interaction patterns. Furthermore, storyboards highlight triggers such as buttons and menus that make an application transition between different screen-states. Modern mobile development platforms such as Android, iOS, and PhoneGap impose a Model-View-Controller architecture to their applications. These platforms usually encapsulate in XML files the application’s layout and event handlers, while the application’s dynamic behaviors are encapsulated in source code files, written in languages such as Java or Swift. More often than not, initializing and synchronizing the diverse development artifacts in a mobile application is a challenging and error prone task. 

In collaboration with Kelsey Gaboriau, I developed ScreenFlow, an Eclipse plugin that enables developers to quickly translate their storyboard sketches into application skeletons ready to be further enhanced. We believe that ScreenFlow is particularly useful for novice application developers or for rapid prototyping environments such as hackathons. The ScreenFlow language is divided into four main sections that allow developers to define the different elements of a storyboard, namely, the application screens, the application graphical triggers, the application transitions, and the application hardware permissions. Below you can find a video that showcases the plugin. This plugin has been built as a code-generation environment using ATL, Acceleo, and XText. (more information, and download site, to come)