You can create an Adobe Experience Manager (AEM) HTML Template Language (HTL) component that displays data retrieved from a third-party Restful web service. For example, if you want to display the YouTube video with the help of JSON Data. you only need to put the YouTube ID and the video information will be visible on the AEM page.
In this use case, the HTL component contains a class that extends WCMUsePojo. This HTL uses a Java class that extends com.adobe.cq.sightly.WCMUsePojo.
This class uses Java application logic to send an HTTP Request to a third-party Restful web service. The web service returns the following data in JSON format. The HTL component uses the Java library GSON to parse the JSON data and then displays the data in the client so it appears on the AEM web page.
{
"provider_name":"YouTube",
"version":"1.0",
"thumbnail_height":360,
"title":"Creating a Login Component for the Experience Manager Toy Store",
"html":"\u003ciframe width=\"480\"
height=\"270\" src=\"https:\/\/www.youtube.com\/embed\/VPIwWm3yP_g?feature=oembed\" frameborder=\"0\" allowfullscreen\u003e\u003c\/iframe\u003e",
"type":"video",
"provider_url":"https:\/\/www.youtube.com\/",
"height":270,
"author_url":"https:\/\/www.youtube.com\/channel\/UCDtISU9W-zzo1PIU3pGHUbA",
"author_name":"AEM Community Channel",
"thumbnail_width":480,
"width":480,
"thumbnail_url":"https:\/\/i.ytimg.com\/vi\/VPIwWm3yP_g\/hqdefault.jpg"
}
To create a project please refer Create a Maven Archetype Project
Add Java classes to the project
Add Java classes to the project
The next step is to add Java files to the com.community.rest.core package. The Java classes are named YoutubeComponen and YoutubePojo. The YoutubePojo is a Java bean that has class members to store data returned from the web service. In this article, it has these string class members:
private String videohtml;
private String videoid;
private String videotitle;
private String video_author_name;
For example, the videotitle and video author name stored the youtube video data that is returned by the Restful web service call.
The YoutubeComponent class is the Java side of the HTL component and extends WCMUsePojo, which is an abstract class that implements the User interface. An HTL component’s Java class must implement this abstract class. For information, see WCMUsePojo.
YoutubePojo.java
public class YoutubePojo { private String videohtml; private String videoid; private public class YoutubePojo {
YoutubeComponent.java
YoutubeComponent.java
The YoutubeComponrnt is the Java server-side part of the AEM HTL component. This class extends the WCMUsePojo class. You override the activate method in this class. Notice the method named getJSON. This method uses the Java HTTP API to invoke a third-party Restful web service. This method accepts one string of parameters:
videoid
The Restful web service returns data once you put the video id into the component. So it fetches the YouTube video related to information. We need to store the video id as String and call the string object into the JSONObject. Then using the JSONobject you can call the YouTube Data. To parse the JSON data, the Java library GSON is used to parse the data. For information about this Java library, see https://github.com/google/gson.
Modify the Maven POM file
Add the below dependency to core POM file:
Component HTML File:
Dialog for YouTube Id:
private String videohtml;
private String videoid;
private String videotitle;
private String video_author_name;
For example, the videotitle and video author name stored the youtube video data that is returned by the Restful web service call.
The YoutubeComponent class is the Java side of the HTL component and extends WCMUsePojo, which is an abstract class that implements the User interface. An HTL component’s Java class must implement this abstract class. For information, see WCMUsePojo.
YoutubePojo.java
public class YoutubePojo { private String videohtml; private String videoid; private public class YoutubePojo {
private String videohtml;
private String videoid;
private String videotitle;
private String video_author_name;
public String getVideoid() {
return videoid;
}
public void setVideoid(String videoid) {
this.videoid = videoid;
}
public String getVideotitle() {
return videotitle;
}
public void setVideotitle(String videotitle) {
this.videotitle = videotitle;
}
public String getVideo_author_name() {
return video_author_name;
}
public void setVideo_author_name(String video_author_name) {
this.video_author_name = video_author_name;
}
public String getVideohtml() {
return videohtml;
}
public void setVideohtml(String videohtml) {
this.videohtml = videohtml;
}
YoutubeComponent.java
import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.io.StringReader;
import javax.jcr.Node;
import org.apache.http.HttpResponse;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.DefaultHttpClient;
import org.apache.sling.commons.json.JSONObject;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import com.adobe.cq.sightly.WCMUsePojo;
import com.google.gson.stream.JsonReader;
public class YoutubeComponentC extends WCMUsePojo {
private YoutubePojo youtubepojo;
protected static final Logger log = LoggerFactory.getLogger(YoutubeComponentC.class.getClass());
@Override
public void activate() throws Exception {
// TODO Auto-generated method stub
Node currentNode = getResource().adaptTo(Node.class);
youtubepojo = new YoutubePojo();
// Default ID if no ID given it will call below id
String videoid = "YsNMyNXspVc";
if (currentNode.hasProperty("jcr:videoid")) {
videoid = currentNode.getProperty("./jcr:videoid").getString();
}
log.info("**** Video ID " + videoid);
String jsonstr = getJSON(videoid);
JSONObject youtubeJson = new JSONObject(jsonstr);
youtubepojo.setVideotitle(youtubeJson.get("title").toString());
youtubepojo.setVideo_author_name(youtubeJson.get("author_name").toString());
youtubepojo.setVideohtml(youtubeJson.getString("html").toString());
}
public YoutubePojo getYoutubepojo() {
return this.youtubepojo;
}
public static String getJSON(String videoid) {
try {
DefaultHttpClient httpClient = new DefaultHttpClient();
// Calling Youtube URL which return JSON Data
HttpGet getRequest = new HttpGet("https://www.youtube.com/oembed?url=http://www.youtube.com/watch?v=" + videoid + "&format=json");
getRequest.addHeader("accept", "application/json");
HttpResponse response = httpClient.execute(getRequest);
if (response.getStatusLine().getStatusCode() != 200) {
log.info("exception");
throw new RuntimeException("Failed : HTTP error code : " +
response.getStatusLine().getStatusCode());
}
BufferedReader br = new BufferedReader(new InputStreamReader((response.getEntity().getContent())));
String output;
String myJSON = "";
while ((output = br.readLine()) != null) {
myJSON = myJSON + output;
}
log.info("**** Myjson: " + myJSON);
httpClient.getConnectionManager().shutdown();
return myJSON;
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
}
YoutubeComponent.java
The YoutubeComponrnt is the Java server-side part of the AEM HTL component. This class extends the WCMUsePojo class. You override the activate method in this class. Notice the method named getJSON. This method uses the Java HTTP API to invoke a third-party Restful web service. This method accepts one string of parameters:
videoid
The Restful web service returns data once you put the video id into the component. So it fetches the YouTube video related to information. We need to store the video id as String and call the string object into the JSONObject. Then using the JSONobject you can call the YouTube Data. To parse the JSON data, the Java library GSON is used to parse the data. For information about this Java library, see https://github.com/google/gson.
Modify the Maven POM file
Add the below dependency to core POM file:
<dependency>
<groupId>org.apache.httpcomponents</groupId>
<artifactId>httpclient</artifactId>
<version>4.0.1</version>
</dependency>
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.2.2</version>
</dependency>
<dependency>
<groupId>org.apache.httpcomponents</groupId>
<artifactId>httpcore</artifactId>
<version>4.3.2</version>
</dependency>
Component HTML File:
<html>
<head>
<style>
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 480px;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
font-family: "Times New Roman", Times, serif;
font-size: 20px;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
button.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "\2212";
}
div.panel {
padding: 0px 18px;
margin:6px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
font-family: "Times New Roman", Times, serif;
font-size: 20px;
width:480px;
}
</style>
</head>
<body>
<h1> Youtube Video </h1>
<sly data-sly-use.hello="com.adobe.wipro.core.YoutubeComponent" />
//Calling video URL
Video: <br> ${hello.Youtubepojo.videohtml @ context='html'}
//Calling Video Title
<button class="accordion">Video title:</button>
<div class="panel">
<p> ${hello.Youtubepojo.videotitle}</p></div>
//Calling Video Author Name
<button class="accordion">Video Author:</button>
<div class="panel">
<p> ${hello.Youtubepojo.video_author_name}</p></div>
//Script for Accordion
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
</script>
</body>
</html>
Dialog for YouTube Id:
Now you can play the video. and make it authorable if need.
Source: https://aem.adobemarketingclub.com/display-youtube-component-using-json-data/
Source: https://aem.adobemarketingclub.com/display-youtube-component-using-json-data/
No comments:
Post a Comment
If you have any doubts or questions, please let us know.