Introducing the ICEfaces EE 4.0 Mobile Device Simulator

A new feature exclusive to the ICEfaces EE 4.0 release is the ICEfaces EE Mobile Device Simulator. The Mobile Device Simulator allows you to explore first hand how your applications will look and behave across a wide range of mobile device platforms and orientations using your desktop browser. This simple-to-use simulator is ideal for development time previewing of mobile web-applications on desktop browsers to speed mobile application development.

 

Overview

The simulator provides a development-time preview of how the the web-application’s layout will appear on various mobile devices, including common examples from the Android, iOS, and Windows Phone platforms in both portrait and landscape mode.  It also renders a nice device skin for the supported devices around the browser viewport for a more complete simulated experience which can be useful for such things as demonstrating your mobile web-application to a group without requiring an actual mobile device to be connected to your projector.

 

Mobile Device Simulator

 

 

How it Works

The simulated layout is achieved by configuring the browser viewport to approximate a device’s pixel ratio, which is the difference between the number of physical pixels on the screen (ie. the published screen resolution) vs the CSS “pixels” the browser uses to display content. Modern mobile devices with very high resolution screens do not display browser content at a one-for-one ratio between a screen pixel and a CSS-pixel, they scale it up so that the content doesn’t appear unusually small on the device which also leverages the increased screen resolution to render the same content in a very clear, high DPI format.

 

Configuration

The ICEfaces Mobile Simulator is available for development use and is distributed in the ICEfaces EE 4 bundle, in the icefaces-ee-mobile-simulator.jar.

Users can simply include this jar in a running ICEfaces JSF application and request /context-root/simulator in an HTML5-compliant browser to view their web application  running inside the simulator.

Additional customization of the simulator is supported for such things as custom header content and defining a specific start page at launch.

 

Links

You can try the simulator now via the ICEfaces EE Showcase Simulator demo.

Licensed ICEfaces EE users can view the ICEfaces EE 4 Wiki topic for more information.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

thirteen − one =