Recently, I was researching upon how to support mobile versions of the websites on Liferay 5.2x. This post would mainly talk about the changes need to be done in Liferay 5.2x to accomplish the same.
Liferay 5.2x has in-built support for providing different themes and layouts for the WAP enabled devices. Primary mark-up language in WAP enabled devices is XHTML Mobile Profile whereas current smart phones browsers are HTML recommended. WAP has become an old school and thus it calls for extending Liferay 5.2x to support Smart phones.
To support mobileVersion of the website we need to find answer to following 3 questions.
- How to detect it is a mobile device ?
- How to get the theme for the mobile device and ask it to use that theme ?
- How to get the page layout for the mobile device and ask it to use that layout ?
- Seperate Themes: It involves defining seperate themes for different devices. A mechanism would detect (to be coded) the device from which the request is coming and based on that it will apply the theme defined for the device.
- It uses WAP theme as a mobile theme which we can specify for a page through mobile devices in look and feel tab of a page. To make a HTML theme as a wap theme, enable property <wap-theme> for the theme in liferay-look-and-feel.xml
- It uses the WAP version of the layout applied on each page.
- It supports single theme and layout for all mobile devices, CSS can be made device dimension specific by CSS media queries.
- it picks up WAP theme/HTML theme in ServicePreAction.java depending upon isWap().
- it picks up WAP/HTML path from includeLayoutContent() in LayoutAction depending upon isWap(). If isWap() then it calls LayoutLocalServiceUtil.getWapContent() in wap/../layout/view/portlet.jsp else it calls LayoutLocalServiceUtil.getContent() in html/../layout/view/portlet.jsp.
- it picks up jsps from WAP/HTML path depending upon isWap().
- Response type is set to ContentTypes.XHTML_MP if isWap().
- Override ServicePre() in ServicePreAction.java to incorporate check for the isMobile() and if found true use Wap theme.
- Override html/../layout/view/portlet.jsp to include check for isMobile() and if found true use LayoutLocalServiceUtil.getWapContent().
- Override isWap() to return true if isMobile() is true.
- Change contentTypes in pages/classes used by wap implemention from ContentTypes.XHTML_MP to ContentTypes.TEXT_HTML.
Filed under: Liferay