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

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

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.

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

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?

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

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

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

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

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

Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 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: 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/ Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk= Sec-WebSocket-Protocol: chat Request Response

Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide HTML5 Connectivity - WebSockets Client public class TradeServerSentEvent extends ServerSentEventHandler { final Logger logger = 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); public class TradeServerSentEvent extends ServerSentEventHandler { final Logger logger = 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); }

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

Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide 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 – WebSocketHandler, WebSocketConnection – Based on Grizzly/GlassFish API  Plan to support JSR 356 once spec is finalized WeSocket Support in WebLogic Server

Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide HTML5 Connectivity - WebSockets Server = "/helloworld.ws") public class HelloWorldWebSocket extends WebSocketAdapter { final String MSG = 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); = "/helloworld.ws") public class HelloWorldWebSocket extends WebSocketAdapter { final String MSG = 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); }

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

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

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

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

Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide Server Building Block – ServerSent-Events Event public class TradeServerSentEvent extends ServerSentEventHandler { final Logger logger = 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); public class TradeServerSentEvent extends ServerSentEventHandler { final Logger logger = 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); }

Copyright © 2012, Oracle and/or its affiliates. All rights reserved.Insert Information Protection Policy Classification from Slide Server Building Block – ServerSent-Events Java public class ServerSentEventHandlerContext = "*/5", minute = "*", hour = "*", persistent = true) public void stockUpdate() { makeTrades(stocks); broadcast(toJson("update", stocks)); } private void broadcast(String msg) { for (TradeServerSentEvent sse : ctx.getHandlers()) { public class ServerSentEventHandlerContext = "*/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); }

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

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

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

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

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

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

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

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

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

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

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