1 | © 2013 Oracle Corporation – All rights reserved

HTML5 Application Development with Oracle Weblogic

Doug Clarke
Director of Product Management
Shaun Smith
2 | Senior
© 2013 Oracle Corporation – AllPrincipal
rights reserved Product Manager
 The following is intended to outline our general product direction. It is intended
for information purposes only, and may not be incorporated into any contract.
It is not a commitment to deliver any material, code, or functionality, and should
not be relied upon in making purchasing decisions. The development, release,
and timing of any features or functionality described for Oracle s products
remains at the sole discretion of Oracle.

3 | © 2013 Oracle Corporation – All rights reserved

 Modern Web Development

§  It’s difficult, costly to build modern web applications

–  Web? Native? Flash? Build for many? Build for one
–  Expertise, development cost, testing and support across platforms
§  HTML5 is designed to address the cross-platform jungle
–  Offline, Real-time Communication, File access, Semantic markup,
Multimedia, CSS3, ...
–  Attempts to codify best-practices that have emerged
–  Semantic page structure/layout, JavaScript + DOM manipulation, CSS3

4 | © 2013 Oracle Corporation – All rights reserved

 HTML 5 Is a Game Changer
The Browser Is the Platform
§  HTML 5 is the new UI across devices
–  Multimedia, Graphics, Offline, Real-time Communication, Device Access,
File access, Semantic markup, CSS3
–  Applications == HTML 5 + JavaScript + CSS3 + Server Resources
§  Requires a different programming approach
§  Servers no longer generating markup language
§  Clients responsible for presentation logic and execution
§  JavaScript is part of the domain model
§  JSON is the payload
§  Event-Driven

5 | © 2013 Oracle Corporation – All rights reserved

 Architectural Integration in Fusion Middleware

Cloud Application
Foundation and HTML 5
Oracle Traffic Director
HTTP/S
ADF Mobile ADF
ADF Infrastructure
WebLogic Server
JAX-RS Enterprise
HTML 5 Web JMX
client.js Sockets Jersey REST Manager
Data Services
JavaFX JMS JAXB
client.jar
SSE POJO/EJB JPA

Data Sources
Database Coherence Adapters

6 | © 2013 Oracle Corporation – All rights reserved

 Browser
Browser
HTML5

HTTP
HTTP
REST

Binding
Java Persistence
Binding
XML / JSON

Java

Java Persistence

Database

7 | © 2013 Oracle Corporation – All rights reserved

 Browser
HTML5

HTTP
REST
JAX-RS

Binding Persistence
EclipseLink MOXy
XMLXML / JSON
/ JSON Binding

Java

Java Persistence
EclipseLink JPA

Database

8 | © 2013 Oracle Corporation – All rights reserved

 Browser
HTML5

HTTP
JAX-RS

EclipseLink MOXy
XML / JSON Binding

Java

EclipseLink JPA

Database

9 | © 2013 Oracle Corporation – All rights reserved

 Browser
HTML5

{
id: 5, HTTP
…
} JAX-RS

EclipseLink MOXy
XML / JSON Binding

Java

EclipseLink JPA

Database

10 | © 2013 Oracle Corporation – All rights reserved

 Browser
HTML5

{
id: 5, HTTP
…
} JAX-RS

EclipseLink MOXy
XML / JSON Binding

Java

EclipseLink JPA

Database

11 | © 2013 Oracle Corporation – All rights reserved

 Browser
HTML5

HTTP
JAX-RS

EclipseLink MOXy
XML / JSON Binding

Java

EclipseLink JPA

Database

12 | © 2013 Oracle Corporation – All rights reserved

 Browser
HTML5

HTTP
JAX-RS

EclipseLink MOXy
XML / JSON Binding

Java

Java Persistence
EclipseLink JPA
Relational / NoSQL

Database

13 | © 2013 Oracle Corporation – All rights reserved

 Browser
HTML5

HTTP
JAX-RS

EclipseLink MOXy
XML / JSON Binding

Java

EclipseLink JPA

Database

14 | © 2013 Oracle Corporation – All rights reserved

 Binding Persistence
XML and JSON Binding

§  EclipseLink implements

–  JAXB for Java/XML binding—covert Java to/from XML
–  Java/JSON binding—convert Java to/from JSON
§  Currently no Java/JSON binding standard
–  Java API for JSON Processing (JSR 535) is parsing, not binding
§  EclipseLink interprets JAXB XML bindings for JSON
–  Content-type selectable by setting property on Marshaller/Unmarshaller

15 | © 2013 Oracle Corporation – All rights reserved

 XML and JSON from JAXB Mappings
{ <num>512-555-1234</num>
"phone-numbers" : [ {
"id" : 2,
"num" : "512-555-9999",
"type" : "mobile"
} ],
"address" : {
"city" : "New York",
"id" : 1,
"street" : "Central Park
East"
},
"firstName" : "Woody",
"id" : 1,
"lastName" : “Allen"
}
16 | © 2013 Oracle Corporation – All rights reserved
<?xml version="1.0"
encoding="UTF-8"?>
<customer>
<phone-numbers>
<phone-number>
<id>2</id>
<type>home</type>
</phone-number>
</phone-numbers>
<address>
<city>New York</city>
<id>1</id>
<street>Central Park East</street>
</address>
<firstName>Bill</firstName>
<id>1</id>
<lastName>Allen</lastName>
</customer>
 Challenges – Binding JPA Entities to XML/JSON
<customer>
<phone-numbers>
<phone-number>
<id>1</id>
...
<type>mobile</type>
</phone-number>
JAXB JPA
</phone-numbers>
</customer>

•  Bidirectional/Cyclical Relationships
•  Composite Keys/Embedded Key Classes
•  Byte Code Weaving

17 | © 2013 Oracle Corporation – All rights reserved

 Bidirectional Relationship
@Entity
public class Customer{
...
@OneToMany(mappedBy="owner")
private List<Phone> phones;
}
@Entity
public class Phone{
...
@ManyToOne
private Customer owner;
}

18 | © 2013 Oracle Corporation – All rights reserved

 Bidirectional Relationships in JAXB

§  JAXB specification does not support bidirectional relationships. One

side must be marked @XmlTransient.
§  But that loses the relationship!
<customer>
<phone-numbers>
<phone-number>
<id>1</id>
owner ...
<type>mobile</type> X
</phone-number>
Customer Phone </phone-numbers> Customer Phone
</customer>

phones phones
Marshall Unmarshall

19 | © 2013 Oracle Corporation – All rights reserved

 EclipseLink XmlInverseReference
@Entity
public class Customer{
...
@OneToMany(mappedBy=“owner")
private List<Phone> phones;
}
@Entity
public class Phone{
...
@ManyToOne
@XmlInverseReference(mappedBy=“phones")
private Customer owner;
20 | }
© 2013 Oracle Corporation – All rights reserved
 EclipseLink XmlInverseReference

§  EclipseLink restores relationships on unmarshall!

owner owner
<customer>
<phone-numbers>
Customer Phone <phone-number> Customer Phone
<id>1</id>
...
<type>mobile</type>
phones </phone-number> project
</phone-numbers>
</customer>
Marshall Unmarshall

21 | © 2013 Oracle Corporation – All rights reserved

 Browser
HTML5

HTTP
REST
JAX-RS

EclipseLink MOXy
XML / JSON Binding

Java

EclipseLink JPA

Database

22 | © 2013 Oracle Corporation – All rights reserved

 REST and JAX-RS
§  REST – REpresentational State Transfer
–  Addressable resources (URI per resource)
–  Small set of well-defined
–  Representation-oriented
–  Communicate statelessly
§  JAX-RS: Java API for RESTful Services
–  Java EE framework for implementing RESTful services
–  Provides annotations to bind combination of URI and HTTP operation to
Java methods.
§  Specifications
–  JAX-RS 1.0 (JSR 311) & JAX-RS 2.0 (JSR 339)
23 | © 2013 Oracle Corporation – All rights reserved
 JAX-RS with JPA Example – GET Invoice

public class InvoiceService {...

public Invoice read(int id) {

return null;
}
...
24 | © 2013 Oracle Corporation – All rights reserved
 JAX-RS with JPA Example – GET Invoice

@Stateless
public class InvoiceService {...

public Invoice read(int id) {

return entityManager.find(Invoice.class, id);
}
...
25 | © 2013 Oracle Corporation – All rights reserved
 JAX-RS with JPA Example – GET Invoice
@Path("/invoice")
@Stateless
public class InvoiceService {...

public Invoice read(int id) {

return entityManager.find(Invoice.class, id);
}
...
26 | © 2013 Oracle Corporation – All rights reserved
 JAX-RS with JPA Example – GET Invoice
@Path("/invoice")
@Stateless
public class InvoiceService {...

@GET
@Path("{id}")
public Invoice read(@PathParam("id") int id) {
return entityManager.find(Invoice.class, id);
}
...
27 | © 2013 Oracle Corporation – All rights reserved
 JAX-RS with JPA Example – GET Invoice
@Path("/invoice")
@Stateless
public class InvoiceService {...
@GET
@Path("{id}")
@Produces({"application/xml", "application/json"})
public Invoice read(@PathParam("id") int id) {
return entityManager.find(Invoice.class, id);
}
...
28 | © 2013 Oracle Corporation – All rights reserved
 JAX-RS with JPA Example – GET Invoice
@Path("/invoice")
@Stateless
public class InvoiceService {...
@GET
@Path("{id}")
@Produces({"application/xml", "application/json"})
public Invoice read(@PathParam("id") int id) {
return entityManager.find(Invoice.class, id);
}
... GET http://[machine]:[port]/[web-context]/invoice/4

29 | © 2013 Oracle Corporation – All rights reserved

 JAX-RS with JPA
JAX-RS

Invoice Bean Contract Bean Payment Bean

Accounting
Application
Accounting Persistence Unit

JPA

30 | © 2013 Oracle Corporation – All rights reserved

 JAX-RS with JPA GET http://.../invoice/4
GET http://.../invoice/4
mapped to bean JAX-RS

Invoice Bean Contract Bean Payment Bean

Accounting
Application
Bean Accounting Persistence Unit
uses JPA

JPA

31 | © 2013 Oracle Corporation – All rights reserved

 JAX-RS Challenges

§  Exposing entities over REST requires lots of JAX-RS beans

–  GET/PUT/POST/DELETE per entity
§  Controlling the scope of marshalled entity graph
–  JAXB will marshall transitive closure
§  JAXB marshalling/unmarshalling can be ‘lossy’
–  Typical JPA OneToMany/ManyToOne structure is problematic

32 | © 2013 Oracle Corporation – All rights reserved

 Browser
HTML5

HTTP
REST
JAX-RS

EclipseLink MOXy
XML / JSON Binding

Java

EclipseLink JPA

Database

33 | © 2013 Oracle Corporation – All rights reserved

 Browser
HTML5

HTTP
EclipseLink MOXy
XML / JSON Binding

JAX-RS / RESTful Data Services

Java

EclipseLink JPA

Database

34 | © 2013 Oracle Corporation – All rights reserved

 RESTful Data Services
Overview

§  Automatically provides REST operations for entities in persistence

unit (GET, PUT, POST, DELETE)
§  Supports invocation of named queries via HTTP
§  Automatic generation of XML and JSON bindings
–  Leverages MOXy’s JPA Fidelity features to avoid lossy transformations
§  Automatic injection of links for entity relationships
–  Default Resource Model generation
§  Usage: just add JPA-RS web fragment jar to WEB-INF/lib!

35 | © 2013 Oracle Corporation – All rights reserved

 GET http://.../persistence/Accounting/Invoice/...

JAX-RS http://.../persistence/Accounting/Invoice/...
JAX-RS
mapped to RESTful Data Services
RESTful
RESTfulData Services
Data Services maps URI
http://.../persistence/Accounting/Invoice/...
Accounting PU to Accounting PU and Invoice entity

...

JPA

36 | © 2013 Oracle Corporation – All rights reserved

 RESTful Data Services Features
§  Access relational data through REST with JSON or XML
§  Provides REST operations for entities in persistence unit
(GET, PUT, POST, DELETE)
§  Supports invocation of named queries via HTTP
§  Server Caching—EclipseLink clustered cache
§  Dynamic Persistence also supported
–  Entities defined via metadata—no Java classes required
–  Enables persistence services for HTML 5/JavaScript
applications

37 | © 2013 Oracle Corporation – All rights reserved

 Resource Model & Links
{
"firstName": "Frank",
"gender": "Male",
"id": 1,
"lastName": "Smith",
"responsibilities": [],
"salary": 1,
"version": 13,
"address": {
"_link": {
"href": "http://localhost:7001/employee.web-js/persistence/v1.0/employee/entity/Address/18",
"method": "GET",
"rel": "self"
}
},
…
38 | © 2013 Oracle Corporation – All rights reserved
 RESTful Data Services
Demo

39 | © 2013 Oracle Corporation – All rights reserved

 Demo Model

40 | © 2013 Oracle Corporation – All rights reserved

 Open Sourcing
Project Avatar
avatar.java.net
Avatar-javasctipt.java.net
Download and try now!
Get involved!

41 | © 2013 Oracle Corporation – All rights reserved

 Project Avatar Architecture

Application Server
HTTP
(REST) Databases
Java EE
Client Data
Container Services Access
*.html
Web
*.js Sockets Avatar Server
*.css Change
Scripting Container Notification
SSE
Avatar.js Nashorn

42 | © 2013 Oracle Corporation – All rights reserved

 Avatar Clock Example

43 | © 2013 Oracle Corporation – All rights reserved

 Clock Example
Main.js
var avatar = require("org/glassfish/avatar");

var delta = 0;

var getTime = function() {

var current = new Date().getTime();
var result = new Date(current - delta)
return {
time: result.toISOString(),
h: result.getHours(),
m: result.getMinutes(),
s: result.getSeconds(),
d: result.getDate(),
M: result.getMonth()+1,//getMonth() returns 0-11
y: result.getFullYear()};
};
44 | © 2013 Oracle Corporation – All rights reserved
 Clock Example
Main.js
avatar.registerRestService({
url: "data/time",
methods: ["GET", "PUT"]},
function() {
this.$onGet = function(request, response) {
return response.$send(getTime());
};
this.$onPut = function(request, response) {
var newTime = Date.parse(request.data.time);
var current = (new Date()).getTime();
delta = current - newTime;
return response.$send(null);
};
}
);

45 | © 2013 Oracle Corporation – All rights reserved

 Clock Example
Main.js
avatar.registerPushService({
url: "push/time"},
function() {
this.$onOpen = this.$onTimeout = function(context) {
context.$setTimeout(1000);
return context.$sendMessage(getTime());
};
}
);

46 | © 2013 Oracle Corporation – All rights reserved

 Clock Example
Clock.html
<html>
<body>
<script data-model="rest">
var Server = function() { this.time = ''; };
</script>
<script data-model="push">
var Updates = function() { this.h = this.m = this.s = this.d = this.M = this.y = ''; };
</script>
<script data-type="Server" data-instance="server" data-url="data/time"></script>
<script data-type="Updates" data-instance="updates" data-url="push/time"></script>
<output class="time">Time: </output><output class="time">#{updates.h}:#{updates.m}:#{updates.s}</output><br>
<output class="time">Date: </output><output class="time">#{updates.y}-#{updates.M}-#{updates.d}</output><br>
<input size="24" class="time" data-value="#{server.time}"/>
<button onclick="#{server.$put()}" id="set">Set</button>
</body>
</html>

47 | © 2013 Oracle Corporation – All rights reserved

 Summary

§  WebLogic 12.1.2 expands the platform to support HTML5 Clients with
WebSockets

§  WebLogic 12.1.2 RESTful Data Services greatly simplifies Java EE

HTML5/Thin Server Architecture applications

§  Avatar will provide a thin server architecture for mobile and desktop
applications using JavaScript

48 | © 2013 Oracle Corporation – All rights reserved

49 | © 2013 Oracle Corporation – All rights reserved
50 | © 2013 Oracle Corporation – All rights reserved