Sightly was the part of the AEM 6.0 release. For people who are a beginner in sightly, it might be difficult to forget the practices of working with JSP and using scriptlets in your JSP files. To make you sure you are comfortable with sightly basics we started release basic Sightly component and examples.
Here’s is one more I am going to demonstrate a movie component that uses tabs and OSGI services.
Overview of component…
The general use case for this component can be of sharing movie details and reviews. I am sure you might have seen on a lot of movie booking sites where for a movie trailer, details, reviews, ratings, and upcoming movies. We tried creating a similar component.
Let’s get started with authoring it…
1. Use Tab Component from Sidekick on your page
2. Component is having many tabs to the author, some of them I have shown below:
Header title you want to give to all tabs
Details from where the banners of upcoming movies will be taken
Authoring movies details and trailers from DAM
Add Reviews from any two people
3. Once authoring is done, rendered component will look like this
Movie trailer and details
Experience from author and rating by him
Reviews from the outside world
Banners of upcoming movies taken from path authored in component
Time to move to the code part…
In order to show the trailer, I have used the video.js library. Banner for the upcoming movies is coming from the path authored. A class implementing sightly WCMUse interface path the data from dialog to OSGI service which further calls the query builder.
package com.moviecomponent.moviecomponent.core.service;
import java.util.ArrayList;
import java.util.List;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import com.adobe.cq.sightly.WCMUse;
public class MovieService extends WCMUse {
Logger logger = LoggerFactory.getLogger(MovieService.class);
protected int numberOfMovies;
protected String path;
MovieInterface service;
private List < String > file;
@Override
public void activate() {
this.numberOfMovies = Integer.valueOf(getProperties().get("maxMovies", ""));
this.path = getProperties().get("moviesPath", "");
service = getSlingScriptHelper().getService(MovieInterface.class);
}
public List < String > getFiles() {
try {
logger.info("The search term is " + this.numberOfMovies);
this.file = new ArrayList();
this.file = service.getUpcomingMovies(numberOfMovies, path);
} catch (Exception e) {
} finally {
return this.file;
}
}
}
Once all the content has been authored and retrieved from the repository, it will be rendered by sightly file
<section role="main">
<div class="container">
<div class="row">
<div class="twelve columns">
<article>
<h2 style="margin: 6px 5%">${properties.header}</h2>
<div class='tabs tabs_animate'>
<ul class='horizontal'>
<li><a href="#tab-1">${properties.movieDetails}</a>
</li>
<li><a href="#tab-2">${properties.experience}</a>
</li>
<li><a href="#tab-3">${properties.reviews}</a>
</li>
<li><a href="#tab-4">${properties.contact}</a>
</li>
<li><a href="#tab-5">${properties.random}</a>
</li>
</ul>
<div id='tab-1'>
<div id="mvideo">
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="${properties.fileReference}" data-setup="{}">
<source src="${properties.video}" type='video/mp4'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
</div>
<div id="moviedata">
<p><span>Movie : ${properties.movieName} <span> </p>
<p>Release Date : ${properties.releaseDate} </p>
<p>Director : ${properties.directors} </p>
<p>Length : ${properties.movieLength}</p>
<p>Production House : ${properties.productionHouse}</p>
<p>Language : ${properties.language}</p>
<p>Note : ${properties.note}</p>
</div>
<div data-sly-resource="${ @path='tab-1',resourceType='wcm/foundation/components/parsys'}"></div>
</div>
<div id='tab-2'>
<p id="experience">Our Experience with ${properties.movieName}</p>
<p id="rating">Ratings <img src="/content/dam/moviecomponent/rating/${properties.rating}-star.png" />
</p>
<p id="rating">Experience..... </p>
<div id="experiencetext"> ${properties.movieExperience @ context="html"}</div>
<div data-sly-resource="${ @path='tab-2',resourceType='wcm/foundation/components/parsys'}"></div>
</div>
<div id='tab-3'>
<div id="reviewtext"><i> ${properties.review2description @ context="html"}</i>
</div>
<p id="reviewer"> -- by ${properties.review1person}</p>
<div id="reviewtext"><i> ${properties.review2description @ context="html"}</i>
</div>
<p id="reviewer"> -- by ${properties.review2person}</p>
</div>
<div id='tab-4'>
<div id="experiencetext">${properties.contactDescription}</div>
<p id="rating"><span>Contact Person Name </span> ${properties.contactPerson}</p>
<p id="rating"><span>Contact Person Position </span>${properties.contactPosition}</p>
<p id="rating"><span>Contact Person Email </span>${properties.contactEmail}</p>
<p id="rating"><span>Contact Person Number </span>${properties.contactNumber}</p>
</div>
<div id='tab-5'>
<div data-sly-use.v="com.moviecomponent.moviecomponent.core.service.MovieService">
<p data-sly-list="${v.files}">
<img src="${item}" height=250 width=400 style="padding:4px"></img>
</p>
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</section>
Code is available on the Github repository and the complete article is available in AEM Helpx Articles.
No comments:
Post a Comment
If you have any doubts or questions, please let us know.