3/27/2015

Developing Java Portlets for

Luminis Platform 5
Rob MacKay
Ellucian
April 2015
11943

© 2015 ELLUCIAN. CONFIDENTIAL & PROPRIETARY | 11943 1

My Session rules of etiquette

• Please turn on your mobile phone, tablet or laptop

• Please use your mobile device to test the portlet we develop

• Please keep side conversation to a whisper volume during the session

Thank you for your participation!

© 2015 ELLUCIAN. CONFIDENTIAL & PROPRIETARY | 11943 2

Building Spring MVC Portlets

• We will walk through a Spring MVC Portlet project

• The project will use the Liferay Developer Studio

• The project will use HTML 5 and Javascript

• The project will call Liferay Services with java

• The file uploaded will be viewed from the Document Library

• The project is already posted in the Commons Area

© 2015 ELLUCIAN. CONFIDENTIAL & PROPRIETARY | 11943 3

1
 3/27/2015

Introduction

• This simple portlet leverages the Liferay Developer Studio

• The portlet:

• Turns on the camera on your device

• Allows you to capture a picture

• Uploads that picture to the document library as the current user

© 2015 ELLUCIAN. CONFIDENTIAL & PROPRIETARY | 11943 4

Portlet project
Using the developer studio !

© 2015 ELLUCIAN. CONFIDENTIAL & PROPRIETARY | 11943 5

Liferay Developer Studio Plugin Project

• Demo Walkthrough
• Create Portlet Project
• Configure Project
• Add Portlet
• Build

© 2015 ELLUCIAN. CONFIDENTIAL & PROPRIETARY | 11943 6

2
 3/27/2015

HTML 5 and JavaScript

It’s a beautiful thing

© 2015 ELLUCIAN. CONFIDENTIAL & PROPRIETARY | 11943 7

Add HTML 5 Markup to view.jsp

<div class="row">
<div class="block">
<video id="video" width="320" height="240"></video></div>
<div class="block">
<canvas id="canvas" width="320" height="240"></canvas>
</div></div>
<button id="snap" type="button">Play</button>
<button id=“uploadPic" type="button">Upload</button>
</div>

© 2015 ELLUCIAN. CONFIDENTIAL & PROPRIETARY | 11943 8

Add JavaScript setup to main.js

window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
var snap= document.getElementById(“snap"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
© 2015 ELLUCIAN. CONFIDENTIAL & PROPRIETARY | 11943 9

3
 3/27/2015

Add JavaScript Picture Capture to main.js

//Trigger photo take event

document.getElementById("snap").addEventListener("click",
function() {
//copies from video to canvas
context.drawImage(video, 0, 0, 320, 240);
if(video.paused){snap.innerHTML="Pause";video.play();}
else {snap.innerHTML="Play";video.pause();}
});

© 2015 ELLUCIAN. CONFIDENTIAL & PROPRIETARY | 11943 10

Add JavaScript Picture Upload to main.js

// upload pic to the server via ajax

document.getElementById("uploadPic").addEventListener("click", function() {
// Generate the image data
var Pic = canvas.toDataURL("image/png");
Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")
// Sending the image data to Server
$.ajax({
type: 'POST',
url: jspActionUrl,
data: '{ "imageData" : "' + Pic + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json'
});
});
© 2015 ELLUCIAN. CONFIDENTIAL & PROPRIETARY | 11943 11

Demo what we have so far

Switch to the demo

© 2015 ELLUCIAN. CONFIDENTIAL & PROPRIETARY | 11943 12

4
 3/27/2015

Call a Liferay Service in java

It’s a beautiful thing

© 2015 ELLUCIAN. CONFIDENTIAL & PROPRIETARY | 11943 13

Add HTML 5 Markup to view.jsp

// add a line to construct the ActionUrl mapped to addImagePost

<portlet:actionURL var="pActionURL" name="addImagePost“/>
// Add the javascript url builder for the Ajax Call on Slide 11
<script>var jspActionUrl = "<%=pActionURL %>";</script>

© 2015 ELLUCIAN. CONFIDENTIAL & PROPRIETARY | 11943 14

Create method and get image in Portlet.java

public void addImagePost(ActionRequest actionRequest, ActionResponse actionResponse)

throws IOException, PortletException {

BufferedReader br = actionRequest.getReader();
JsonParser parser = new JsonParser();
JsonObject objr = (JsonObject)parser.parse(br);
JsonElement je = objr.get("imageData");
InputStream is = new ByteArrayInputStream(Base64.decode(je.getAsString()));

Don’t forget to Add Google GSON ->

© 2015 ELLUCIAN. CONFIDENTIAL & PROPRIETARY | 11943 15

5
 3/27/2015

Call Liferay Document Service in Portlet.java

ThemeDisplay themeDisplay =
(ThemeDisplay)actionRequest.getAttribute(WebKeys.THEME_DISPLAY);
// Create Document Library file entry
DLFileEntry fname = DLFileEntryLocalServiceUtil.addFileEntry(
themeDisplay.getUserId(),
themeDisplay.getScopeGroupId(),
themeDisplay.getScopeGroupId(), // repository id defaults to groupid
DLFolderConstants.DEFAULT_PARENT_FOLDER_ID,
"CapImage-"+ rl.toString(),
"image/png",
"CapImage-"+ rl.toString()+".png",
"CapturedDescription",
"changeLog", 0 , null, null,
is,je.getAsString().length() , new ServiceContext());

© 2015 ELLUCIAN. CONFIDENTIAL & PROPRIETARY | 11943 16

Demo what we have so far

Demo

© 2015 ELLUCIAN. CONFIDENTIAL & PROPRIETARY | 11943 17

Summary

• Complex functions provided simply through HTML 5

• JavaScript functionality to control the HTML 5 elements

• Calling Liferay Services for identity and storage

• Using default portlets for access to the library

© 2015 ELLUCIAN. CONFIDENTIAL & PROPRIETARY | 11943 18

6
 3/27/2015

Questions & Answers

© 2015 ELLUCIAN. CONFIDENTIAL & PROPRIETARY | 11943 19

Thank you!
Rob MacKay
[email protected]

Please complete the online session evaluation form.

• Via your registration account Log into your registration account at

https://ellucianlive2015.smarteventscloud.com/connect/
publicDashboard.ww

• choose the link to “Surveys.”

Session ID 11943 © 2015 ELLUCIAN. CONFIDENTIAL & PROPRIETARY | 11943 20