livecenter-presentation-js
livecenter-presentation-js
is a Javascript library
that you can use to manage the display of event feeds in Escenic
publications. It provides all the functionality needed to retrieve event
entries from the
CUE Live
presentation web service and render the entries as HTML content. It
supports the use of SSE if it is enabled (see
General Settings) and otherwise polls
the web service to keep feeds up-to-date.
livecenter-presentation-js
is used in the demo
publication included in the
CUE Live
distribution.
livecenter-presentation-js
is an
AngularJS
component and is very straightforward to use. It includes a custom
livecenter-feed
element that encapsulates all of an
event feed's HTML layout. Assuming you already have a working
CUE Live
installation with a correctly defined event content type and
corresponding event type definitions, then all you need to do to use the
livecenter-feed
element in your event pages is:
-
Add the following dependencies to your publication's
pom.xml
file:<dependency> <groupId>com.escenic.plugins.live</groupId> <artifactId>live-center-presentation-js</artifactId> <version>${project.version}</version> <type>war</type> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>1.10.2</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>angularjs</artifactId> <version>1.2.7</version> </dependency> <dependency> <groupId>org.webjars</groupId> <artifactId>URI.js</artifactId> <version>1.12.0</version> </dependency>
-
Add the following filters to your publication's
web.xml
file:<filter> <filter-name>/com/escenic/servlet/filter/JarResourceFilter</filter-name> <filter-class>com.escenic.servlet.filter.JarResourceFilter</filter-class> </filter> <filter-mapping> <filter-name>/com/escenic/servlet/filter/JarResourceFilter</filter-name> <url-pattern>/webjars/*</url-pattern> </filter-mapping>
-
Download the Moment.js library and add it to your publication project in the following location:
src/main/webapp/js/lib/moment.min.js
-
Create an AngularJS app that uses the
livecenter-presentation-js
library to render your event feeds. A simple example of how to do this would be to add a Javascript file calledsrc/main/webapp/js/all.js
to your project, containing the following code, which creates an AngularJS app calledLiveDemo
:var livedemo; (function (livedemo) { livedemo.LiveDemo = angular.module('LiveDemo', [ 'livecenter.presentation' ]); })(livedemo || (livedemo = {})); var livedemo; (function (livedemo) { var EntryList = (function () { function EntryList($scope) { this.$scope = $scope; var config = { liveLabelTagSchemeName: "tag:livelabels@escenic.com,2015", loadMoreStyle: 'button' }; $scope.config = config; } EntryList.$inject = ['$scope']; return EntryList; })(); livedemo.EntryList = EntryList; livedemo.LiveDemo.controller('EntryList', EntryList); })(livedemo || (livedemo = {}));
See Configuration for a complete list of configuration options.
If you prefer to use Typescript, then the same app would look like this:
module livedemo { export var LiveDemo = angular.module('LiveDemo', [ 'livecenter.presentation' ]); } module livedemo { import FeedConfig = livecenter.presentation.FeedConfig; export class EntryList { public static $inject = ['$scope']; constructor(private $scope:any) { var config:FeedConfig = { liveLabelTagSchemeName: "tag:livelabels@escenic.com,2015", loadMoreStyle: 'button' }; $scope.config = config; } } LiveDemo.controller('EntryList', EntryList); }
-
Create a JSP file for the event feed template (
/src/main/webapp/template/article-template/livefeed.jsp
, for example) and add the following code:<%@ page language="java" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <c:set var="liveEventStatus" value="${requestScope.article.fields.liveEventStatus.value}"/> <c:if test="${empty requestScope.article.fields.liveEventStatus.value}"> <c:set var="liveEventStatus" value="false"/> </c:if> <div data-ng-controller="EntryList"> <!-- The component to render live-center feeds --> <livecenter-feed eventUrl="${requestScope.article.fields.livecenter.value}" eventStatus="${liveEventStatus}" contextPath="/demo-temp-dev" config="config"> </livecenter-feed> </div> <!-- javascripts supplied from webjars. We need to add a filter in web.xml to support /webjars urls --> <c:url var="angular" value="/webjars/angularjs/1.2.7/angular.min.js" scope="request"/> <c:url var="angular_sanitize" value="/webjars/angularjs/1.2.7/angular-sanitize.min.js" scope="request"/> <c:url var="uri_js" value="/webjars/URI.js/1.12.0/URI.min.js" scope="request"/> <c:url var="jquery" value="/webjars/jquery/1.10.2/jquery.min.js" scope="request"/> <!-- javascripts we have packaged inside our project --> <c:url var="moment" value="/js/lib/moment.min.js" scope="request"/> <c:url var="all_js" value="/js/all.js" scope="request"/> <!-- javascript and style we use from live-center-presentation-js --> <c:url var="feed_js" value="/live-center-presentation-js/js/all.js" scope="request"/> <c:url var="presentation_js_css" value="/live-center-presentation-js/css/style.css" scope="request"/> <link href="${presentation_js_css}" rel="stylesheet"> <script src="${angular}"></script> <script src="${angular_sanitize}"></script> <script src="${uri_js}"></script> <script src="${moment}"></script> <script src="${feed_js}"></script> <script src="${all_js}"></script> <script src="${jquery}"></script>
-
Declare your AngularJS app (
LiveDemo
in this case) by adding adata-ng-app
attribute to one of your live feed template's ancestor elements. You can do this either by wrapping the template in adiv
element:<div data-ng-app="LiveDemo"> ... </div>
or by simply adding
data-ng-app="LiveDemo"
to an existing ancestor element (thehtml
element in/src/main/webapp/template/article-template/header.jsp
, for example. -
Build and deploy your publication.