Meaningless Drivel is fun!*
The moose likes JSF and the fly likes One UI for all (desktop/laptop/mobile devices) Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Android Security Essentials Live Lessons this week in the Android forum!
JavaRanch » Java Forums » Java » JSF
Bookmark "One UI for all (desktop/laptop/mobile devices)" Watch "One UI for all (desktop/laptop/mobile devices)" New topic
Author

One UI for all (desktop/laptop/mobile devices)

Abhishk Singh
Ranch Hand

Joined: Aug 19, 2010
Posts: 43
Is it feasible to create a single UI in JSF which renders fine on different type of screens namely desktop and mobile device screens?
E Armitage
Rancher

Joined: Mar 17, 2012
Posts: 892
    
    9
If you use JSF 2.2 you can HTML 5 features which can allow you to pass through attributes meaning that you can integrate a responsive JS/CSS library like bootstrap 3
Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 15960
    
  19

One of the core concepts of JSF was the separation of the data-transfer and rendering components in the JSF Controllers. You can render JSF output for a wide range of media just by substituting an alternate renderer. That's one reason why I always counsel using as little raw HTML as possible when designing JSF Views. If you have raw HTML in a view and the renderer is rendering to PDF, the PDF will contain the HTML as text, since PDF doesn't use HTML tags for rendering.

That particular feature has been downplayed somewhat in JSF2. While rendering to PDF is rather unlikely, rendering to WAP was not back when JSF was new. Most mobile devices these days, however, use full HTML for their displays rather than WAP, so that particular option isn't as useful as it once was.

If you want a "universal" UI for all mobile devices using HTML without considering alternative rendering systems, the key is in using proper layout components and appropriate CSS skins. Needless to say, you should avoid using absolute pixel co-ordinates and dimensions, and limit use of sizes done in terms of how many characters you expect to fit on a row.

For best results, use a device (or resize your browser window) for the following dimensions and "proof" your UIs with them:

320x240 (see note)
640x480
768x1024 (typical 7-inch tablet, portrait mode)
8.5x11 inches (i.e. full-sized iPad and relatives)

320x240 is one you might not want to support, since it's a real challenge to design a screen for something that limited. It will almost certainly need to scroll gracefully, since almost nothing will fit on the screen entirely. Also you'd want to have more screens with less controls per screen over fewer screens with lots of controls. The main reason for even considering it is that it was the size for cellphone screens back in the days when a cellphone was smaller than a brick and display screens didn't pack the pixels as tightly. Likewise 640x480, despite the fact that the VGA aspect ration was the original starting point for webapps.


Customer surveys are for companies who didn't pay proper attention to begin with.
Abhishk Singh
Ranch Hand

Joined: Aug 19, 2010
Posts: 43
Thank you for valuable suggestions.

If you want a "universal" UI for all mobile devices using HTML without considering alternative rendering systems, the key is in using proper layout components and appropriate CSS skins.


What I make from above statement is that I'll have to chose JSF view components (panelgrid,dropdowns,buttons etc) and provide proper styling to them using CSS, avoiding pixel coordinates. Am I right?
Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 15960
    
  19

Correct. Good web page design these days uses CSS as its primary guide to page layout. That is true whether you are using JSF or straight HTML.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: One UI for all (desktop/laptop/mobile devices)
 
Similar Threads
java books for Games
Can we create IPhone scrolling in JTable using Swing?
Reflection
multi-client web application
What need to done to create client Browser & Mobile