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 called src/main/webapp/js/all.js to your project, containing the following code, which creates an AngularJS app called LiveDemo:

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 a data-ng-app attribute to one of your live feed template's ancestor elements. You can do this either by wrapping the template in a div element:
```
<div data-ng-app="LiveDemo">
  ...
</div>
```
or by simply adding data-ng-app="LiveDemo" to an existing ancestor element (the html element in /src/main/webapp/template/article-template/header.jsp, for example.
Build and deploy your publication.