HTML5 Application Development with Oracle WebLogic Server

2. HTML5 Application Development with Oracle WebLogic Server Doug Clarke Director of Product Management

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. Agenda • HTML 5 and the Mobile Revolution! • Supporting Rich Clients with WebLogic Server • Real Live Data with TopLink Data Services

5. Modern Web Development Create Some sense of problem Definition ... What and why? • 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

6. 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

7. Architectural Integration in Fusion Middleware Oracle Traffic Director ADF WebLogic Server Cloud Application Foundation and HTML 5 ADF Mobile JAX-RS HTTP/S EnterpriseManager HTML 5 Data Services ADF Infrastructure JMX REST Web Sockets JavaFX Jersey Data Sources client.js JMS JAXB SSE client.jar POJO/EJB JPA Database Coherence Adapters

8. Server Support for Rich Clients Thin Server Architecture • 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

9. HTML5 - Thin Server Architecture Data HTML CSS JavaScript WebLogicServer HTTP/S Web Sockets JavaScript APIs SSE DOM Tree Browser Offline store

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. HTML5 Connectivity - WebSockets The WebSocket Handshake Request 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<EMPTY LINE> Response HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk= Sec-WebSocket-Protocol: chat<EMPTY LINE>

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(Stringmsg) throws IOException { ServerSentEventData data = new ServerSentEventData() .retry(10000) .id(String.valueOf(System.currentTimeMillis()/1000)) .data(msg); connection.sendMessage(data); } }

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. Server Building Block - WebSockets WeSocket Support in WebLogic Server 12.1.2 • 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

15. HTML5 Connectivity - WebSockets Server Code @WebSocket(pathPatterns = "/helloworld.ws") public class HelloWorldWebSocketextendsWebSocketAdapter { 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. To fill a shape with an image. Use existing picture box, DO NOT delete and create new picture box. Right click on the shape. At the bottom of the submenu select “Format Shape” Select “Fill” at the top of the “Format Shape” dialog box. Select “Picture or Texture fill” from the options. And select “File” under the “Insert from” option. Navigate to the file you want to use and select “Insert” 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 DELETE THIS INSTRUCTION NOTE WHEN NOT IN USE WebSocketDemonstration

17. HTML5 – ServerSent Events HTML 5 Streaming • 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

18. HTML5 – ServerSent-Events Client Code <html> <head> <script type='text/javascript'> varsource = new EventSource(‘trades.sse'); source.onmessage= function (event) { trades = document.getElementById(’trades'); trades.innerHTML+= "<p>Trade: " + event.data +”</p>” }; </script> </head> <body> <div id=”trades"></div> </body> </html>

19. HTML5 – ServerSent-Events HTML5 Streaming EventSource(’trades.sse') Events stream trades.sse @Inject Java EE EJB, ManagedBean sendMessage id: 3456\n data: ORCL\n data: $32.56\n\n Server • Client

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(Stringmsg) throws IOException { ServerSentEventData data = new ServerSentEventData() .retry(10000) .id(String.valueOf(System.currentTimeMillis()/1000)) .data(msg); connection.sendMessage(data); } }

21. Server Building Block – ServerSent-Events Java EE Integration @Singleton @Startup public class StockTrader { @Inject @ServerSentEventContext(“trades.sse) ServerSentEventHandlerContext<TradeServerSentEvent> ctx; @Schedule(second = "*/5", minute = "*", hour = "*", persistent = true) public void stockUpdate() { makeTrades(stocks); broadcast(toJson("update", stocks)); } private void broadcast(Stringmsg) { for (TradeServerSentEventsse : ctx.getHandlers()) { sse.send(msg); } } }

22. To fill a shape with an image. Use existing picture box, DO NOT delete and create new picture box. Right click on the shape. At the bottom of the submenu select “Format Shape” Select “Fill” at the top of the “Format Shape” dialog box. Select “Picture or Texture fill” from the options. And select “File” under the “Insert from” option. Navigate to the file you want to use and select “Insert” 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 DELETE THIS INSTRUCTION NOTE WHEN NOT IN USE ServerSent-EventDemonstration

23. TopLink Data ServicesRESTful JPA with Live Data

24. Thin Server Architecture Clients Data Server HTTP/S Web Sockets SSE

25. TopLink Data Services Clients Data Java EE TopLink Data Services HTTP/SJSON/XML ChangeNotification NotificationsWeb Socket/SSE

26. What is TopLink Data Services? Provide easy to configure JSON and XML access via REST to enterprise data sources • 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

27. XML and JSON from JAXB Mappings XML JAXB mapped Java JSON

28. Client Development Client HTML5 JavaScript Native develop ClientDeveloper config Server Data TopLink DataServices

29. TopLink DemoRESTful JPA with Live Data over WLS Web Sockets

30. Graphic Section Divider