Maqetta to RAD 8.5 Workflow, Part II: Mobile Browser Simulator
tonyerwin 120000H3G0 Visits (5045)
Updated Sept 10, 2012 for Release 7.
In a previous post (see Maqetta to RAD 8.5 Workflow), I showed how to take an Eclipse-enabled project from Maqetta and import it into IBM Rational Application Developer 8.5 so that a developer could complete development of the final, product-ready application. In this article, I will show you some tricks in RAD 8.5 (in particular how to use RAD's Mobile Browser Simulator) to facilitate development of mobile applications that were initially designed in Maqetta.
NOTE: This rest of this article assumes you've already created an Eclipse-based project in Maqetta, downloaded the Maqetta workspace, and imported the zip file into RAD as described in Part I.
Mobile Sample in Maqetta WorkspaceFirst, let's look at the Sample3-Mobile.html file in your Maqetta project. It provides a sample mobile application and can be found in the WebContent/samples folder. If you open the file in Maqetta, you'll see a mobile UI rendered in an iPhone silhouette in the page editor. We won't edit this file for this article. But, just like any other HTML file in Maqetta, you could drag and drop widgets from the widget palette onto the page, change properties of widgets, etc. If you were to start adding widgets, make special note of the Dojox Mobile section in the widget palette.
Using Maqetta's Mobile PreviewOnce you've opened the file in Maqetta, if you hit the Preview button in the page editor's toolbar, a new browser tab will be open showing a live rendering of the sample:
Mobile Sample in RAD Page EditorNow, let's switch to RAD. In the screenshot below, I've switched to the Web Perspective and opened Sample3-Mobile.html in RAD's Rich Page Editor. As you can see, the rendering looks a lot like like it did in Maqetta (the main difference being there's no device silhouette).
Using RAD's Mobile PreviewNow, of course, the next logical thing to do would be to launch the UI in a true mobile previewer like we did earlier in Maqetta. But, unlike Maqetta, there's some extra set-up required to use RAD's mobile preview:
Enabling User-Agent Switching in Mobile Browser SimulatorOne of the features we saw earlier in Maqett'a preview was the ability to switch to different devices. If we want to do that in Mobile Browser Simulator provided by RAD, we need to enable user-agent switching (which is a one-time set-up):