1. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 13 1

2. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 13 2 HTML5 Application Development with Oracle WebLogic Server Doug Clarke Director of Product Management

3. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 13 3 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.

4. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 13 4 Agenda  HTML 5 and the Mobile Revolution!  Supporting Rich Clients with WebLogic Server  Real Live Data with TopLink Data Services

5. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 13 5 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 Create Some sense of problem Definition... What and why?

6. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 13 6 HTML 5 Is a Game Changer  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 The Browser Is the Platform

7. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 13 7 Architectural Integration in Fusion Middleware HTML 5 client.js JavaFX client.jar HTTP/S Web Sockets SSE JAX-RS Jersey Data Services JMS JPA JAXB POJO/EJB Data Sources DatabaseCoherence JMX REST JMX REST Adapters Enterprise Manager Cloud Application Foundation and HTML 5 Oracle Traffic Director WebLogic Server ADF ADF Mobile ADF Infrastructure

8. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 13 8 Server Support for Rich Clients  With clients responsible for UI, servers provide applications and data – Serve up client code and static resources, data access and eventing – REST, Request/Response, Asynchronous, Bi-Directional, Server push  Core building blocks for Server resources – JSON (JavaScript Object Notation) bindings for data objects – Bi-directional data streams with WebSockets – Server-Push with ServerSent-Events – Data observation and change notification from data and event services Thin Server Architecture

9. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 13 9 HTML5 - Thin Server Architecture Data WebLogic Server HTTP/S Web Sockets SSE JavaScript APIs DOM Tree HTML CSS JavaScript HTML CSS JavaScript Browser Offline store

10. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 13 10 HTML5 Connectivity - Web Sockets Bi-Directional, Low Latency Connection  Provides a bi-directional connection between the client and the server  Connection oriented – Uses HTTP to establish initial connection, existing infrastructure – Low latency, connection always ready to use on either end – Uses frames to transmit messages, text-frames, binary-frames – Operational codes in protocol to control and maintain connection  Client is a simple API based on messaging – Open a WebSocket, send messages, receive messages  Typical uses – Online trading, gambling, gaming, social networking, collaboration tools,...

11. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 13 11 HTML5 Connectivity - WebSockets The WebSocket Handshake GET /mychat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13 Origin: http://example.com GET /mychat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13 Origin: http://example.com HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk= Sec-WebSocket-Protocol: chat Request Response

12. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 13 12 HTML5 Connectivity - WebSockets Client Code @ServerSentEvent(“trades.sse”) public class TradeServerSentEvent extends ServerSentEventHandler { final Logger logger = Logger.getLogger(this.getClass().getSimpleName()); @Override public void onConnected(ServerSentEventConnection connection) { logger.info("\n*** onConnected: " + connection.toString()); super.onConnected(connection); } void send(String msg) throws IOException { ServerSentEventData data = new ServerSentEventData().retry(10000).id(String.valueOf(System.currentTimeMillis()/1000)).data(msg); connection.sendMessage(data); } @ServerSentEvent(“trades.sse”) public class TradeServerSentEvent extends ServerSentEventHandler { final Logger logger = Logger.getLogger(this.getClass().getSimpleName()); @Override public void onConnected(ServerSentEventConnection connection) { logger.info("\n*** onConnected: " + connection.toString()); super.onConnected(connection); } void send(String msg) throws IOException { ServerSentEventData data = new ServerSentEventData().retry(10000).id(String.valueOf(System.currentTimeMillis()/1000)).data(msg); connection.sendMessage(data); }

13. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 13 13 HTML5 Connectivity - Web Sockets The Java Platform  Many Java vendors already providing levels of support for WebSockets – Grizzly/GlassFish, WebLogic Server, Jetty, Netty, Atmosphere,...  Many other platforms and frameworks with WebSocket support – Node.js, PHP, Ruby, Kaazing,...  Standardization effort underway for Java Platform – JSR 356: Java API for WebSocket – Currently targeted for Java EE 7 – Annotation based model, POJOs as WebSocket Endpoints

14. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 13 14 Server Building Block - WebSockets  WebLogic Server supports WebSocket Protocol per RFC 6455 – Uses existing high performance, highly scalable network muxer – Very high degree of compatibility tested using Autobahn WS Test Suite  Provides Java API and Annotation support for developing applications that use WebSocket Protocol – @WebSocket – WebSocketHandler, WebSocketConnection – Based on Grizzly/GlassFish API  Plan to support JSR 356 once spec is finalized WeSocket Support in WebLogic Server 12.1.2

15. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 13 15 HTML5 Connectivity - WebSockets Server Code @WebSocket(pathPatterns = "/helloworld.ws") public class HelloWorldWebSocket extends WebSocketAdapter { final String MSG = "%s @ %tT"; @Override public void onMessage(WebSocketConnection connection, String payload) { try { connection.send(String.format(MSG, payload, new Date())); } catch (Exception ex) { Logger.getLogger(getClass().getName()).log(Level.SEVERE, null, ex); } @WebSocket(pathPatterns = "/helloworld.ws") public class HelloWorldWebSocket extends WebSocketAdapter { final String MSG = "%s @ %tT"; @Override public void onMessage(WebSocketConnection connection, String payload) { try { connection.send(String.format(MSG, payload, new Date())); } catch (Exception ex) { Logger.getLogger(getClass().getName()).log(Level.SEVERE, null, ex); }

16. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 13 16 WebSocket Demonstration To fill a shape with an image. 1.Use existing picture box, DO NOT delete and create new picture box. 2.Right click on the shape. 3.At the bottom of the submenu select “Format Shape” 4.Select “Fill” at the top of the “Format Shape” dialog box. 5.Select “Picture or Texture fill” from the options. 6.And select “File” under the “Insert from” option. 7.Navigate to the file you want to use and select “Insert” 8.On the “Format” tab, in the Size group, click on “Crop to Fill” in the Crop tool and drag the image bounding box to the desired size 9.DELETE THIS INSTRUCTION NOTE WHEN NOT IN USE

17. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 13 17 HTML5 – ServerSent Events  HTML 5 Server Streaming Model JavaScript API allows web page to subscribe to an event stream Unidirectional only from server to client Events sent over HTTP leveraging existing infrastructure Applicable for cases where data does not need to be sent from client Stock quotes, financial data Monitoring systems, home, business, alarms, servers,... Location tracking systems HTML 5 Streaming

18. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 13 18 HTML5 – ServerSent-Events Client Code var source = new EventSource(‘trades.sse'); source.onmessage = function (event) { trades = document.getElementById(’trades'); trades.innerHTML += " Trade: " + event.data +” ” }; var source = new EventSource(‘trades.sse'); source.onmessage = function (event) { trades = document.getElementById(’trades'); trades.innerHTML += " Trade: " + event.data +” ” };

19. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 13 19 HTML5 – ServerSent-Events HTML5 Streaming Server trades.sse Events stream EventSource(’trades.sse') Client Java EE EJB, Managed Bean Java EE EJB, Managed Bean @Inject sendMessage id: 3456\n data: ORCL\n data: $32.56\n\n

20. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 13 20 Server Building Block – ServerSent-Events Event Handler @ServerSentEvent(“trades.sse”) public class TradeServerSentEvent extends ServerSentEventHandler { final Logger logger = Logger.getLogger(this.getClass().getSimpleName()); @Override public void onConnected(ServerSentEventConnection connection) { logger.info("\n*** onConnected: " + connection.toString()); super.onConnected(connection); } void send(String msg) throws IOException { ServerSentEventData data = new ServerSentEventData().retry(10000).id(String.valueOf(System.currentTimeMillis()/1000)).data(msg); connection.sendMessage(data); } @ServerSentEvent(“trades.sse”) public class TradeServerSentEvent extends ServerSentEventHandler { final Logger logger = Logger.getLogger(this.getClass().getSimpleName()); @Override public void onConnected(ServerSentEventConnection connection) { logger.info("\n*** onConnected: " + connection.toString()); super.onConnected(connection); } void send(String msg) throws IOException { ServerSentEventData data = new ServerSentEventData().retry(10000).id(String.valueOf(System.currentTimeMillis()/1000)).data(msg); connection.sendMessage(data); }

21. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 13 21 Server Building Block – ServerSent-Events Java EE Integration @Singleton @Startup public class StockTrader { @Inject @ServerSentEventContext(“trades.sse) ServerSentEventHandlerContext ctx; @Schedule(second = "*/5", minute = "*", hour = "*", persistent = true) public void stockUpdate() { makeTrades(stocks); broadcast(toJson("update", stocks)); } private void broadcast(String msg) { for (TradeServerSentEvent sse : ctx.getHandlers()) { sse.send(msg); } @Singleton @Startup public class StockTrader { @Inject @ServerSentEventContext(“trades.sse) ServerSentEventHandlerContext ctx; @Schedule(second = "*/5", minute = "*", hour = "*", persistent = true) public void stockUpdate() { makeTrades(stocks); broadcast(toJson("update", stocks)); } private void broadcast(String msg) { for (TradeServerSentEvent sse : ctx.getHandlers()) { sse.send(msg); }

22. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 13 22 ServerSent-Event Demonstration To fill a shape with an image. 1.Use existing picture box, DO NOT delete and create new picture box. 2.Right click on the shape. 3.At the bottom of the submenu select “Format Shape” 4.Select “Fill” at the top of the “Format Shape” dialog box. 5.Select “Picture or Texture fill” from the options. 6.And select “File” under the “Insert from” option. 7.Navigate to the file you want to use and select “Insert” 8.On the “Format” tab, in the Size group, click on “Crop to Fill” in the Crop tool and drag the image bounding box to the desired size 9.DELETE THIS INSTRUCTION NOTE WHEN NOT IN USE

23. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 13 23 TopLink Data Services RESTful JPA with Live Data

24. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 13 24 Thin Server Architecture Data Server HTTP/S Web Sockets SSE Clients

25. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 13 25 TopLink Data Services Data Java EE TopLink Data Services TopLink Data Services Clients HTTP/S JSON/XML Notifications Web Socket/SSE Change Notification

26. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 13 26 What is TopLink Data Services?  Declarative: No Java SE/EE development required  Data Access over REST with JSON or XML  Live Data Notifications over WebSockets or Server Sent Events – Database Change Notification  Multiple Data Sources: Relational, NoSQL, Coherence  Multiple Clients: HTML5/JS, JavaFX, mobile devices, ADF Mobile  Java EE Standards Based: JPA, JAX-RS, JAXB, Bean Validation  Leverage all of TopLink’s features including TopLink Grid with Coherence Provide easy to configure JSON and XML access via REST to enterprise data sources

27. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 13 27 JAXB mapped Java JSON XML XML and JSON from JAXB Mappings

28. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 13 28 Client Client Development Client Developer HTML5 JavaScript Native HTML5 JavaScript Native develop Data Server TopLink Data Services config

29. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 13 29 TopLink Demo RESTful JPA with Live Data over WLS Web Sockets

30. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 13 30 Graphic Section Divider

31. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 13 31

32. Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 13 32