Blogs

Mobile Device Recognition beyond the UI

As you probably know in version 6.1 Liferay introduced the mobile device rules feature. However if you haven't followed the discussions and presentations about it, you may be under the wrong impression that is't very limited. Some people even claim it doesn't work. Judging by the number and type of questions I still get asked now days, I think I know where most of the confusion comes from - the user interface.

The first problem is that the UI will let you create rules even if there is no plug-in capable of actually detecting the device. Yes, you do need a plug-in for that. The API, data model and the UI are provided with the portal, but similarly to workflow and search (just to name a few) functionalities, the actual work of detecting the device is delegated to an external plugin. At the time of writing there is only one such plugin in Marketplace - Device Recognition Provider which internally uses WURFL. However if other providers become available in the future (or you create your own one), you will still be able to seamlessly hook them in.

Now, as I mentioned earlier, the UI will not warn you if the plugin is not installed. It will let you create a rule and the rule of course will never match as long as the plugin is missing! Of course all this is explained in the documentation but for those very few people who don't have the time to read it, in Liferay 6.2 we added a very visible warning message!

The second problem is about answering the "how much is not too much?" question properly. I guess we can have an endless discussion on this one but the fact is that at some point of time a decision was made that the only criterias that need to be available in the UI are operating system and whether the device is a tablet. In Liferay 6.2 you will be also able to specify ranges of screen resolutions and display sizes. I understand this still may be too limited for some of you, but the truth is, everyone has his needs and there is no way to make an user friendly interface that will cover all WURFL capabilities! Well, may be there is - a DSL (Domain Specific Language) on top of some rule engine will actually fit nice in here. Unfortunately there were more important things in the 6.2 road map so you'll have to wait a bit longer for this one or help us implement it!

The good news is you can use all of the capabilities in your custom portlets. You can use DeviceDetectionUtil to get the current user's Device. Once you get the Device object you can get the value of any WURFL capability by calling getCapability(java.lang.String) method. Actually you can do the same even from web content templates. Here is a simple example that will render some phone numbers as links if the device is capable of doing phone calls or sending text messages.

Structure:

<?xml version="1.0"?> 
<root>
  <dynamic-element name="phone_number" type="text" index-type="" repeatable="false"/>   
  <dynamic-element name="sms_number" type="text" index-type="" repeatable="false"/>  
  <dynamic-element name="email" type="text" index-type="" repeatable="false"/>
 </root>

Template in Velocity:

 #set( $callPrefix = $device.getCapability("xhtml_make_phone_call_string") ) #set( $smsPrefix = $device.getCapability("xhtml_send_sms_string") ) #set( $canDoPhoneCalls = $callPrefix != "none" ) #set( $canSendSMS = $smsPrefix != "none")

<h3>Contact us!</h3>

You can
<ul>
  <li>call us at  
    #if( $canDoPhoneCalls )
      <a href="$callPrefix$phone_number.getData()">$phone_number.getData()</a> 
    #else       $phone_number.getData()     #end    
  </li> 
  <li>or send an SMS message to 
    #if( $canSendSMS )  
      <a href="$smsPrefix$sms_number.getData()">$sms_number.getData()</a> 
    #else       $sms_number.getData()     #end 
    and we'll call you back  
  </li> 
  <li>or <a href="mailto:$email.getData()">e-mail us </li>
</ul>

Template in Freemarker:

<#assign callPrefix = device.getCapability("xhtml_make_phone_call_string")>
<#assign smsPrefix = device.getCapability("xhtml_send_sms_string")>
<#assign canDoPhoneCalls = (callPrefix != "none")>
<#assign canSendSMS = (smsPrefix != "none")> 

<h3>Contact us!</h3>

You can
 <ul>
  <li>call us at
    <#if canDoPhoneCalls >
      <a href="${callPrefix + phone_number.getData()}">${phone_number.getData()}</a>
    <#else>
       ${phone_number.getData()}
    </#if>
  </li>
  <li>or send an SMS message to
    <#if canSendSMS >
      <a href="${smsPrefix + sms_number.getData()}">${sms_number.getData()}</a>
    <#else>
       ${sms_number.getData()}
    </#if>
   and we'll call you back
  </li>
  <li>or <a href="mailto:${email.getData()}">e-mail us </li>
</ul>


I hope the above proved to you the device recognition functionality in Liferay is not as limited as it may seem on the first look! And I certainly hope more will come in upcoming versions.

Looks pretty cool. Thanks for some interesting insight.
Tried the " DeviceDetectionUtil" in my custom portlet works great.
However when trying the in the velocity template that you suggested it's unable to detect device. Haven't done much digging into the code to check where $device is being injected, but may be you can shed some light into it.
Are you trying this with real device or a browser with changed user-agent string? If the former, keep in mind the recognized device is stored in the session. This if you access the portal with your normal browser it will remember the device in the session and later on even if you change the user-agent it will not get recognized as mobile device. To work around this you need to log out or simply delete the browser cookies.

If this is not the case then check if there are any errors in log file.
Hi. I'm customizing a portal with Liferay 6.1 EE. If the Device Recognition Plugin doesn't support that version, do I need to implement one myself?

Regards
The link to plugin in Marketplace - Device Recognition Provider ( http://www.liferay.com/marketplace/-/mp/application/15193341 ) is no more valid and it seems there is no more Device Recognition Provider free plugin in Marketplace.
Do you know from where to get this free plugin?
Hey... i found the WURFL plugin WAR on this blog post and it works well: http://liferaytrends.blogspot.com.br/2013/05/mobile-theme-in-liferay.html

PS: When I asked the liferay support about it they sent me a newer version.
It is not working properly for Windows Mobiles, it gives the save values for Windows Mobile as for desktop.
But WURFL does supports windows Mobiles.
How can we differentiate between windows mobile and windows desktop??