Display YouTube Component using JSON Data

 

Develop an AEM HTML Template Language component that uses the WCMUsePojo class and invokes a third-party Restful web service. Also, discusses how to use the GSON Java library within AEM to parse the JSON reponse.

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 in 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 a 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 in the AEM web page.

To create a project please refer Create a Maven Archetype 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 Use interface. A HTL component’s Java class must implement this abstract class. For information, see WCMUsePojo.

YoutubePojo.java

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 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:

 

 

Now you can play the video. and make it authorable if need.

Leave a Reply

Your email address will not be published. Required fields are marked *