You can create a CQ widget that displays rich data by integrating with third-party libraries. For example, assume that you have a requirement to display a visual map on a web page. To address this requirement, create a CQ widget that integrates with the Google Map API.
| Summary |
Discusses how to integrate a third-party library with Adobe CQ. In this example, Google MAP APIs are used. |
| Digital Marketing Solution(s) | Adobe Experience Manager (Adobe CQ) |
| Audience |
Developer (intermediate) |
| Required Skills |
JavaScript, JQuery, CSS |
| Tested On | Adobe CQ 5.5, Adobe CQ 5.6 |
- Create an Adobe CQ application folder structure.
- Create a template on which the render component is based.
- Create a render component that uses the Google Map API.
- Create a site that contains a page that displays a map.
Note:
This development article discusses how to integrate with the Google Map API to create a CQ widget that displays data. You can integrate with other third party APIs such as JQuery. For information, see Integrating the JQuery Framework into Adobe CQ.
Your first step is to create an application folder structure that contains templates, components, and pages by using CRXDE Lite.
- Application name folder: Contains all of the resources that an application uses. The resources can be templates, pages, components, and so on.
- components folder: Contains components that your application uses.
- page folder: Contains page components. A page component is a script such as a JSP file.
- global: Contains global components that your application uses (common may be a substitute for global).
- templates folder: Contains templates that you can base page components on.
- src folder: Contains source code that comprises an OSGi component (this example does not use an OSGi component).
- install folder: Contains a compiled OSGi bundles container.
The following illustration shows the folder structure that is created for this CQ application. Notice that the application name is applicationMap.
- Go to the CQ welcome page at http://[host name]:[port]; for example, http://localhost:4502.
- Select CRXDE Lite.
- Right-click the apps folder (or the parent folder), select Create, Create Folder.
- Enter the folder name into the Create Folder dialog box. Enter appliationMap.
- Repeat steps 1-4 for each folder specified in the previous illustration.
- Click the Save All button.
Note:
You have to click the Save All button when working in CRXDE Lite for the changes to be made.
Create a CQ template by using CRXDE Lite that defines a consistent style for the pages in your CQ application. A template comprises of nodes that specify the page structure. For more information about templates, see http://dev.day.com/docs/en/cq/current/developing/templates.html.
1. Go to the CQ welcome page at http://[host name]:[port]; for example, http://localhost:4502.
2. Select CRXDE Lite.
3. Right-click the template folder (within your application), select Create, Create Template.
4. Enter the following information into the Create Template dialog box:
- Label: The name of the template to create. Enter maptemplate.
- Title: The title that is assigned to the template
- Description: The description that is assigned to the template
- Resource Type: The component's path that is assigned to the template and copied to implementing pages. Enter applicationmap/components/page/maptemplate.
- Ranking: The order (ascending) in which this template appears in relation to other templates. Setting this value to 1 ensures that the template appears first in the list. Add a path to Allowed Paths. Click on the plus sign and enter the following value: /content(/.*)?.
5. Click Next for Allowed Parents.
6. Select OK on Allowed Children.
Components are re-usable modules that implement specific application logic to render the content of your web site. You can think of a component as a collection of scripts (for example, JSPs, Java servlets, and so on) that completely realize a specific function. In order to realize this functionality, it is your responsibility as a CQ developer to create scripts that perform specific functionality. For more information about components, see http://dev.day.com/docs/en/cq/current/developing/components.html.
Note:
By default, a component has at least one default script, identical to the component's name.
The CQ widget uses Google Map APIs to display map data. To use the Google Map APIs, obtain a Google Map API key. For information, see https://developers.google.com/maps/documentation/javascript/tutorial#api_key.
1. Go to the CQ welcome page at http://[host name]:[port]; for example, http://localhost:4502.
2. Select CRXDE Lite.
3. Right-click /apps/applicationmap/components/page, then select Create, Create Component.
4. Enter the following information into the Create Component dialog box:
- Label: The name of the component. Enter maptemplate.
- Title: The title that is assigned to the component
- Description: The description that is assigned to the template
5. Select Next for Advanced Component Settings and Allowed Parents.
6. Select OK on Allowed Children.
7. Open the maptemplate.jps located at: /apps/applicationmap/components/page/maptemplate/maptemplate.jsp.
8. Enter the following JSP code.
<html>
<head>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=<your_google_map_key>&sensor=true">
</script>
<script type="text/javascript">
function getMap(lat,lng) {
var myOptions = {
center: new google.maps.LatLng(lat,lng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>
</head>
<body onload="getMap(45.516667,-74.333333)" >
<div id="map_canvas" style="width:50%; height:50%"></div>
<div class="grid_12 body_container">
</body>
<form >
Latitude: <input type="text" name="lat" value="37.3041" /><br />
Longitude: <input type="text" name="lng" value="-121.8727"/><br />
<button type="button" onclick="getMap(lat.value,lng.value)" >Click Me!</button>
</form>
<cq:include path="par" resourceType="foundation/components/parsys" />
</div>
</html>
Note:
Replace your_google_map_key with your Google key value.
The final task is to create a site that contains a page that is based on the maptemplate (the template created earlier in this development article).
Create a web page that displays map data
1. Go to the CQ welcome page at http://[host name]:[port]; for example, http://localhost:4502.
2. Select Websites.
3. From the left hand pane, select Websites.
4. Select New, New Page.
5. Specify the title of the page in the Title field.
6. Specify the name of the page in the Name field.
7. Select maptemplate from the template list that appears. This value represents the template that is created in this development article. If you do not see it, then repeat the steps in this development article. For example, if you made a typing mistake when entering in path information, the template will not show up in the New Page dialog box.
8. Open the new page that you created by double-clicking it in the right pane. The new page opens in a web browser. You should see a page displaying data similar to the previous illustration.
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.
