This article explains how to install the Mobile Browser Simulator (MBS) to test your Mobile Digital Experience solution created with WebSphere Portal and IBM Web Content Manager.
The mobile browser simulator is a web application that helps you test mobile web applications without having to install device vendor native SDK.
The mobile browser simulator contains a frame that emulates a target device. It shows you what your page looks like inside the mobile device browser. You can switch the frame to emulate different screen resolutions and form factors, including BlackBerry 6 and 7, Android, iPad, iPhone, Windows Phone 7, and Windows Phone 8 mobile devices. You can also rotate the frame to mimic orientation change (portrait or landscape). You can add multiple devices to the frame to view the various displays simultaneously. If a device detection servlet is configured for your web project, the simulator emulates requests from different device specific agents.
2. Deploying the Mobile Browser Simulator
MBS is shipped with RAD and Worklight Studio. With RAD, you can easily deploy the MBS in Portal server. With Worklight, by default MBS will be installed in Worklight Server, so in this case you will need to point the MBS for a portal page in a different server. (note: MBS has some limitations to show web pages not on the test client server. Because of that, you will see a warning message like this: “The currently displayed webpage is on a different server then this test client. Viewing web pages no on the test client server will cause a significant reduction in test client function”).
2.1 Mobile Browser Simulator in Worklight Studio
Worklight comes with the Mobile Browser Simulator. It is really simple to deploy MBS in Worklight Server. At the first time, you need to create a Worklight Project and a Worklight Environment with a Mobile Web App. Right click on the mobilewebapp in the apps > YourApp folder and select Run > Preview.
After that Worklight will deploy the MBS EAR in Worklight server and launch MB in a Browser (see the “Using Firefox with Mobile Browser Simulator” section to configure MBS to use firefox in Eclipse).
In the Worklight case, you need to change the WebPage url to point for a portal page. See the Enabling User Agent Switching Section to install the user agent plugin.
2.2 Mobile Browser Simulator in Rational Application Developer
RAD v8, v8.5 and v9 come with the Mobile Browser Simulator. It is really simple to test your portlets using Mobile Browser Simulator.
After you create your portlet in RAD, right click on the portlet project and select Run > Run on Mobile Browser Simulator.
After that, RAD will deploy the MBS EAR in WebSphere Portal server and launch MBS in a browser.
3. Using Firefox with Mobile Browser Simulator
Note: I recommend using Firefox with Mobile Browser Simulator. To change the Eclipse default browser please select the menu: Window > Preferences.
Click on General > Web Browser, click on use External Web Browser and select Firefox.
4. Enabling user agent switching
You can use the mobile browser simulator to render your web applications on different mobile devices. To render your web applications with the appropriate style sheets and theme, you must enable user agent switching.
The Useragent Switcher Extension is a browser extension that provides the user agent switching feature. To install the Useragent Switcher Extension, follow the procedure below:
On the Mobile Browser Simulator screen, click Enable Useragent Switching.
If the latest version of the Useragent Switcher Extension is not installed, the Install User agent Switcher Extension dialog opens. Click Install Browser Extension.
Now you have the MBS installed and configured. MBS is very simple to use. Feel free to explore the MBS features (add device, rotate, etc). If you want, you can save a bookmark for MBS, so you can easily use it for test and demonstrate the Mobile Digital Experience Solution (note: remember that if you are using MBS by Worklight, you need to start the Worklight Server to use MBS).
Note: If you use multiple browser in a different tabs to demonstrate/test the desktop and mobile portal solution, just remember to disable the Enable Useragent Switching to see portal in the “desktop mode”.
MBS is a fantastic tool to test your Mobile Digital Experience. It shows you what your page looks like inside the mobile device browser. You can switch the frame to emulate different screen resolutions and form factors. You can also rotate the frame to mimic orientation change (portrait or landscape). You can add multiple devices to the frame to view the various displays simultaneously.