Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

5 x HTML5 worth using in APEX (5)

2,425 views

Published on

HTML5 is still evolving and, naturally, APEX cannot yet support all the new functionality declaratively. This doesn’t mean you cannot use new advanced HTML5 features and API’s in your application. In my session, I will explain and demonstrate 5 HTML5 functionalities that can add valuable functionality to your APEX application and how to (easily) integrate them in APEX.
In this session I will explain and demonstrate 5 HTML5 elements and API’s and how to integrate those in an Oracle Application Express application. The selected features are not declaratively supported by Application Express (yet) but can add functionality that improves functionality and user experience.

Published in: Software
  • Be the first to comment

5 x HTML5 worth using in APEX (5)

  1. 1. 5 x HTML5 in APEX (5) Christian Rokitta HTML5 + APEX5 = Perfect 10 (Shakeeb)
  2. 2. Program • HTML 5 – What‘s new? • HTML5 Tags o <dialog> element: Modals made easy o <output> • HTML5 API’s o Drag and Drop o Geolocation API o SSE
  3. 3. Why HTML5? • Multiple Devices (Mobile, Mobile, Mobile) • Modular • Multimedia • Semantics (cleaner code, accessibility) • Interactivity (tighter integration with JavaScript) • Structure vs Presentation, CSS3
  4. 4. What is New in HTML5? • Simplified DOCTYPE: <!DOCTYPE html> • New HTML Elements • HTML APIs • Elements Removed in HTML5  CSS <center>, <frame>/<frameset>, <big>, <font>, …
  5. 5. Standard? Sorry, not yet. Version Year Tim Berners-Lee invented www 1989 Tim Berners-Lee invented HTML 1991 Dave Raggett drafted HTML+ 1993 HTML Working Group defined HTML 2.0 1995 W3C Recommended HTML 3.2 1997 W3C Recommended HTML 4.01 1999 W3C Recommended XHTML 1.0 2000 HTML5 WHATWG* First Public Draft 2008 HTML5 WHATWG Living Standard 2012 HTML5 W3C Final Recommendation 2014 *) Web Hypertext Application Technology Working Group - was formed in response to slow W3C development, and W3C's decision to close down the development of HTML, in favor of XHTML
  6. 6. HTML5 New Elements • Semantic/Structural Elements <article>, <aside>, <dialog> <footer>, <header>, <menuitem>, <nav>, <section>, … • Form Elements <datalist>, <output>, … • Input Types tel, timcolor, date, email, number,search, e, url, … • Input Attributes autocomplete, autofocus, min/max, placeholder, … • New Attribute Syntax <input type="text" value=John>, <input type="text" value='John Doe'>, … • HTML5 Graphics <canvas>, <svg> • New Media Elements <audio>, <video>, <track>, …
  7. 7. <dialog> element: Modals made easy <table> <tr> <th>January <dialog open>This is an open dialog window</dialog></th> <th>February</th> <th>March</th> </tr> <tr> <td>31</td> <td>28</td> <td>31</td> </tr> </table> <table> <tr> <th>January <dialog>This is an open dialog window</dialog></th> <th>February</th> <th>March</th> </tr> <tr> <td>31</td> <td>28</td> <td>31</td> </tr> </table>
  8. 8. <dialog> element: specs • show(): Open dialog. • close(): Close dialog. Takes an optional argument which if present dialog.returnValue is set to. • showModal(): Open modal dialog. • ::backdrop: Pseudo-element to style background behind a modal dialog. • close event: Fired when a dialog is closed. • cancel event: Fired when the Escape key is pressed on a modal dialog.
  9. 9. <dialog> demo
  10. 10. <dialog>, some final questions • Why do we need <dialog> element while it's possible using libraries? o great for accessibility o modal dialogs are pushed on a well-ordered stack (no z- index) • How do I position a dialog? CSS! default CSS includes "position: absolute; left: 0; right: 0; margin: auto;" which horizontally centers the element within its container. • Can I open multiple dialogs? Yes. Much like multiple <div> elements stacked on eachother.
  11. 11. <output> element: input Antipode <form> <label for="ticketcount">Number of passes</label> <input type="number" name="ticketcount" id="ticketcount" min="1" max="12" value="1" onchange="spinny()"> <span id="price">@ $25 per ticket</span> = <output name="total" for="ticketcount price">$25</output> </form> var total = document.querySelector('output[name="total"]'); var ticketcount = document.getElementById('ticketcount'); function spinny() { total.value = "$" + parseInt(ticketcount.value) * 25; }
  12. 12. <output> element: specs <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output> </form> HTML5 valueAsNumber input element property: <form oninput="x.value=a.valueAsNumber+b.valueAsNumber">0 <input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output> </form>
  13. 13. <output> element: Attributes Attribute Value Description for element_id Specifies the relationship between the result of the calculation, and the elements used in the calculation form form_id Specifies one or more forms the output element belongs to name name Specifies a name for the output element
  14. 14. <output> demo
  15. 15. Drag and Drop API Drag and drop is a very common feature. It is when you "grab" an object and drag it to a different location. In HTML5, drag and drop is part of the standard, and any element can be draggable.
  16. 16. Drag and Drop Example <!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html>
  17. 17. Parts of a Drag and Drop event • Make an Element Draggable <img draggable="true"> • What to Drag - ondragstart and setData() function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } • Where to Drop – ondragover event.preventDefault() • Do the Drop - ondrop function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); }
  18. 18. Drag and Drop demo
  19. 19. Geolocation API The HTML Geolocation API is used to get the geographical position of a user/device*. Since this can compromise user privacy, the position is not available unless the user approves it. *) accurate for devices with GPS
  20. 20. Using HTML Geolocation <script> var x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser."; } } function showPosition(position) { x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script>
  21. 21. Geolocation Example explained • Check if Geolocation is supported • If supported, run the getCurrentPosition() method. If not, display a message to the user • If the getCurrentPosition() method is successful, it returns a coordinates object to the function specified in the parameter ( showPosition ) • The showPosition() function gets the displays the Latitude and Longitude
  22. 22. Handling Errors and Rejections navigator.geolocation.getCurrentPosition(showPosition,showError); function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML = "User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML = "Location information is unavailable." break; case error.TIMEOUT: x.innerHTML = "The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML = "An unknown error occurred." break; } }
  23. 23. getCurrentPosition() - Return Data Property Description coords.latitude The latitude as a decimal number coords.longitude The longitude as a decimal number coords.accuracy The accuracy of position coords.altitude The altitude in meters above the mean sea level coords.altitudeAccuracy The altitude accuracy of position coords.heading The heading as degrees clockwise from North coords.speed The speed in meters per second timestamp The date/time of the response The getCurrentPosition() method returns an object if it is successful. The latitude, longitude and accuracy properties are always returned. The other properties below are returned if available.
  24. 24. Geolocation - Other Methods id = navigator.geolocation.watchPosition( success , error , options); options = { enableHighAccuracy: false , timeout: 5000 , maximumAge: 0 }; navigator.geolocation.clearWatch(id);
  25. 25. Geolocation Demo
  26. 26. Server-Sent Events - One Way Messaging • A server-sent event is when a web page automatically gets updates from a server. • A web app "subscribes" to a stream of updates generated by a server and, whenever a new event occurs, a notification is triggered on the client.
  27. 27. Server-Sent Events vs. WebSockets Websockets: • APIs like WebSockets provide a richer protocol to perform bi-directional, full-duplex communication. • Two-way channel is more attractive for things like games, messaging apps, and for cases where you need near real-time updates in both directions.
  28. 28. Server-Sent Events vs. WebSockets Server-Send Events: • Two-way channel is more attractive for things like games, messaging apps, and for cases where you need near real-time updates in both directions. • SSE in favor when you simply need updates from some server action. If you'll need to send data to a server, XMLHttpRequest is always a friend.
  29. 29. Server-Sent Events vs. WebSockets SSEs are sent over traditional HTTP. That means they do not require a special protocol or server implementation to get working. WebSockets on the other hand, require full- duplex connections and new Web Socket servers to handle the protocol. In addition, Server-Sent Events have a variety of features that WebSockets lack by design such as automatic reconnection, event IDs.
  30. 30. SSE API - subscribe to an event stream if (!!window.EventSource) { var source = new EventSource('stream.php'); } else { // Result to xhr polling :( } URL passed to the EventSource constructor is an absolute URL, its origin (scheme, domain, port) must match that of the calling page
  31. 31. SSE API - handler for the message event source.addEventListener('message', function(e) { console.log(e.data); }, false); Optioneel: source.addEventListener('open', function(e) { // Connection was opened. }, false); source.addEventListener('error', function(e) { if (e.readyState == EventSource.CLOSED) { // Connection was closed. } }, false);
  32. 32. SSE API • When updates are pushed from the server, the onmessage handler fires and new data is be available in its e.data property. • The magical part is that whenever the connection is closed, the browser will automatically reconnect to the source after ~3 seconds. • Your server implementation can even have control over this reconnection timeout. • That's it.
  33. 33. SSE - Event Stream Format Plaintext response, served with a text/event-stream Content-Type, that follows the SSE format. In its basic form, the response should contain a "data:" line, followed by your message, followed by two "n" characters to end the stream: data: My messagenn Multiline Data: data: first linen data: second linenn
  34. 34. SSE - Send JSON Data data: {n data: "msg": "hello world",n data: "id": 12345n data: }nn source.addEventListener('message', function(e) { var data = JSON.parse(e.data); console.log(data.id, data.msg); }, false );
  35. 35. SSE - Controlling the Reconnection- timeout The browser attempts to reconnect to the source roughly 3 seconds after each connection is closed. You can change that timeout by including a line beginning with "retry:", followed by the number of milliseconds to wait before trying to reconnect. The following example attempts a reconnect after 10 seconds: retry: 10000n data: hello worldnn
  36. 36. SSE Server – APEX Before Header Proces DECLARE dummy VARCHAR2(10); BEGIN sys.HTP.flush; sys.HTP.init; sys.OWA_UTIL.mime_header('text/event-stream', FALSE); sys.OWA_UTIL.http_header_close; sys.HTP.p('retry: 10000'); sys.HTP.p('data: {'); sys.HTP.p('data: "msg": "hello world",'); sys.HTP.p('data: "id": 12345'); sys.HTP.p('data: }'); sys.HTP.p(dummy); APEX_APPLICATION.stop_apex_engine; END;
  37. 37. SSE - Demo bit.ly/1QGhkBz apex.oracle.com/pls/apex/f?p=ac15geo
  38. 38. 10. Juni, 11:00 – 11:45, Landskrone
  39. 39. Q & A http://rokitta.blogspot.com @crokitta christian@rokitta.nl http://www.themes4apex.com http://plus.google.com/+ChristianRokitta http://nl.linkedin.com/in/rokit/

×