MOBILE SITE DEVELOPMENT IN DAY CQ

Creating a mobile site is similar to creating a standard site as it also involves creating templates
and components. The main difference consists in enabling the CQ built-in mobile functionalities
within the site. It is achieved by creating a template that relies on the CQ mobile page
component.

Advantages of Mobile Site:

 With CQ you can manage websites for mobiles devices, view a mobile page in a way that
emulates a mobile device or switch between several views.
 CQ enables you to author webpages with an iPad/Mobile. You can open a page on your
iPad/Mobile, move paragraphs around, add pictures, change paragraph titles and once
done with editing you can publish the page.

Terms related to Mobile Site:

Emulators - CQ enables authors to view a page in an emulator that simulates the environment
in which an end-user will view the page, as for example on a mobile device or in an email client.
The existing mobile emulators are below /libs/wcm/mobile/components/emulators and
http://localhost:4502/bin/wcm/mobile/emulators.json. The device emulator displays the
mobile device on the page whereas the usual editing (parsys, components) occurs within the
device's screen. The device emulator depends on the device groups that are configured for the
site. Several emulators can be assigned to a device group. All the emulators are then available
on the content page. By default the first emulator assigned to the first device group assigned to
the site, is displayed. Emulators can be switched either via the emulator carousel at the top of
the page or via the Sidekick's edit button.

Devise Groups - Mobile device groups provide segmentation of mobile devices based on the
device capabilities. A device group provides the information required for emulator-based
authoring on the author instance and for correct content rendering on the publish instance:
once authors have added content to the mobile page and have published it, the page can be
requested on the publish instance. There, instead of the emulator editing view, the content
page is rendered using one of the configured device groups. The selection of the device group
occurs based on mobile device detection. The matching device group then provides the
necessary styling information. The below out of the box devise groups are available:

 Smart phones, for devices like the Blackberry with support for basic HTML and
images, but no support for JavaScript.

1
  Touch phones, for devices like the iPad with full support for HTML, images,
JavaScript and device rotation.
 Feature phones, for feature devices like the Sony Ericsson W800 with support for
basic HTML but no support for images and JavaScript.

Additional devise groups can be created.

Steps to create Sample Workflow:

To get started you can have a look at the Geometrixx Mobile Demo Site that is available in CQ.
Then, to create custom mobile website, please follow below steps:

1. Create a folder type node inside apps in CRXDE. This is your application folder(eg.
Trainingmobile).

2. Create floder structure as below, inside ‘trainingmobile’ application folder.

 Components
 Config
 Install
 Src
 Templates
3. Create the page template inside ‘template’ folder, by right clicking on ‘template’ folder
and selecting new template.

2
 Eg. Name of the template can be given as ‘contentpage’. Properties of templates are as
below.

Name Value
Label contentpage
Title Mobile Contentpage
Description This is the template of Mobile
Contentpage
ResourceType trainingmobile/components/contentpage
Ranking 1
ResourceType is the path of the component.

Right click on newly created template ‘contentpage’ and add a new property with below
details:

 Name= alowedPaths
 Type= String
 Value= /content(/.*)?

Now the template is created.

3
 4. Create a new component in ‘components’ folder of ‘trainingmobile’ apps as below:

Enter the details as below:

Name Value
Label contentpage
Title Mobile Contentpage
Description This is the main component of
Mobile Content Page
Super Resource Type wcm/mobile/components/page
NOTE: Super Resourse Type (i.e. sling:resourceSuperType) should be
wcm/mobile/components/page in case of Mobile Application.

5. Inside contentpage component, open ‘contentpage.jsp’ by double clicking. And write

the below code.

<%@include file="/libs/foundation/global.jsp"%>

<cq:include script="head.jsp"/>
<%
final StringBuffer cls = new StringBuffer();
for (String c : componentContext.getCssClassNames()) {
cls.append(c).append(" ");
}
%>

<div id="wrapper" class="<%= cls %>">

<cq:include path="logo"
resourceType="foundation/components/mobilelogo"/>
<cq:include path="par"
resourceType="foundation/components/parsys"/>
<cq:include path="footer"
resourceType="foundation/components/mobilefooter"/>
</div>

4
 Right click and click on the “Edit” link of the newly added workflow.
6. Right click over ‘contentpage’ folder in side ‘trainingmobile’ apps, and create a
‘head.jsp’ file by selecting New  JSP. Then enter the below code and save.
Through this ‘head.jsp’, it retrieves the current mobile device group from the
request and if a device group is found, uses the group's drawHead() method to include
the device group's associated emulator init component (only in author mode) and the
device group's rendering CSS. The method DeviceGroup.drawHead(pageContext)
includes the emulator's init component, i.e. calls the init.html.jsp of the emulator
component. If the emulator component does not have its own init.html.jsp and relies on
the mobile base emulator (wcm/mobile/components/emulators/base), the init script of
the mobile base emulator is called (/libs/wcm/mobile/components/emulators/
base/init.html.jsp). (This ‘head.jsp’ is also available at /libs/wcm/mobile/components/
page)

<%@include file="/libs/foundation/global.jsp" %><%

%><%@ page import="com.day.cq.commons.Doctype,
com.day.cq.wcm.mobile.api.device.DeviceGroup,
org.apache.commons.lang3.StringEscapeUtils" %><%
String xs = Doctype.isXHTML(request) ? "/" : "";
String favIcon = currentDesign.getPath() + "/favicon.ico";
if (resourceResolver.getResource(favIcon) == null) {
favIcon = null;
}
String webclipIcon = currentDesign.getPath() + "/webclip.png";
if (resourceResolver.getResource(webclipIcon) == null) {
webclipIcon = null;
}
String webclipIconPre = currentDesign.getPath() + "/webclip-
precomposed.png";
if (resourceResolver.getResource(webclipIconPre) == null) {
webclipIconPre = null;
}
%><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-
8"<%=xs%>>
<meta http-equiv="keywords" content="<%=
StringEscapeUtils.escapeHtml4(WCMUtils.getKeywords(currentPage))
%>"<%=xs%>>
<meta name="viewport" content="width=device-width"<%=xs%>>
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>
<cq:include path="parCenter"
resourceType="foundation/components/parsys"/>
<%
/*
Retrieve the current mobile device group from the request in
the following order:
1) group defined by <path>.<groupname-selector>.html
2) if not found and in author mode, get default device group as
defined in the page properties

5
 (the first of the mapped groups in the mobile tab)

If a device group is found, use the group's drawHead method to

include the device group's associated
emulator init component (only in author mode) and the device
group's rendering CSS.
*/
final DeviceGroup deviceGroup =
slingRequest.adaptTo(DeviceGroup.class);
if (null != deviceGroup) {
deviceGroup.drawHead(pageContext);
}
%>
<cq:include script="stats.jsp"/>
<% if (favIcon != null) { %>
<link rel="icon" type="image/vnd.microsoft.icon" href="<%= favIcon
%>"<%=xs%>>
<link rel="shortcut icon" type="image/vnd.microsoft.icon" href="<%=
favIcon %>"<%=xs%>>
<% } %>
<% if (webclipIcon != null) { %>
<link rel="apple-touch-icon" href="<%= webclipIcon %>"<%=xs%>>
<% } %>
<% if (webclipIconPre != null) { %>
<link rel="apple-touch-icon-precomposed" href="<%= webclipIconPre
%>"<%=xs%>>
<% } %>
<% currentDesign.writeCssIncludes(pageContext); %>
<title><%= currentPage.getTitle() == null ?
StringEscapeUtils.escapeHtml4(currentPage.getName()) :
StringEscapeUtils.escapeHtml4(currentPage.getTitle()) %></title>
</head>

NOTE:

In the above code,

<cq:include script="/libs/wcm/core/components/init/init.jsp"/> is used for Mobile
Site Development.

6
7. Go to the website and click on New tab  New Page, to create a new page.

8. A dialog box will appear with all available templates. Please select the template created
for Mobile Site. (eg. Mobile Content Page). Enter a Title (eg. Sample Mobile Page) and
Name(samplemobilepage). Click ‘create’.

7
9. Sample Mobile Page will be displayed in the list of websites.

10. Right click the Sample Mobile Page and click on ‘Properties’.

8
11. A Page Properties dialog will open. Go to ‘Mobile’ Tab. In Device Group, add Items like
‘Smart Phones’, ‘Touch Phones’, ‘Feature Phones’ etc. And click ‘Ok’.
 Smart phones, for devices like the Blackberry with support for basic HTML and
images, but no support for JavaScript.
 Touch phones, for devices like the iPad with full support for HTML, images,
JavaScript and device rotation.
 Feature phones, for feature devices like the Sony Ericsson W800 with support for
basic HTML but no support for images and JavaScript.

12. Open the Sample Mobile Page. The below screen will be displayed with mobile device
group emulator.

9
13. Go to Design Mode in sidekick. The Design Logo can be changed by clicking Edit. By
clicking ‘Edit’ in ‘par’, we can also add Component Groups (eg. General, Mobile etc. ) to
use out-of-the-box components. After using some basic out-of-the-box components like
text/image, the sample mobile website may look like below.

10