CODEWITHSUNDEEP
jsfbrowsermobileuser-agent
Deroude
Deroude

Reputation: 1112

Is there a more elegant way of switching templates based on the user-agent, in JSF?

We have a web application written with JSF and are trying to add a mobile version to it. Ideally, we'd have a separate folder with templates, CRUD and resources (e.g. jQuery Mobile) and our landing page would be able to choose the appropriate template based on the user-agent attribute of the header.

One way would be to use a scriptlet and redirect to mobile/index.xhtml - end of story, but people don't like scriptlets :D

Another way would be to wrap the content of the landing page (includind the templated parts) in a panelGroup with rendered="#{mobileDetector.isMobile()}", having a backing bean perform what the scriptlet would have done otherwise. But I think it kind of cripples the templates, plus it doesn't apply to the head section.

So - is there a better way?

Upvotes: 2

Views: 597

Answers (1)

BalusC
BalusC

Reputation: 1109292

Either use a separate subdomain, e.g. mobile.example.com for mobile users and (www.)example.com for desktop users, and/or sniff the user agent. There are public APIs available on:

Alternatively, you can use CSS to hide/change parts of the the HTML markup based on the media type. 

<link rel="stylesheet" href="css/desktop.css" media="screen,projection">
<link rel="stylesheet" href="css/mobile.css" media="handheld">
<link rel="stylesheet" href="css/print.css" media="print">
<link rel="stylesheet" href="css/iphone.css" media="all and (max-device-width: 480px)">
<link rel="stylesheet" href="css/ipad-portrait.css" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
<link rel="stylesheet" href="css/ipad-landscape.css" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">

Upvotes: 3

Related Questions