5 x html5 worth using in apex (5)
TRANSCRIPT
5 x HTML5in
APEX (5)
Christian Rokitta
HTML5 + APEX5 = Perfect 10(Shakeeb)
Program
• HTML 5 – What‘s new?• HTML5 Tags
o <dialog> element: Modals made easyo <output>
• HTML5 API’so Drag and Dropo Geolocation APIo SSE
Why HTML5?
• Multiple Devices (Mobile, Mobile, Mobile)• Modular• Multimedia• Semantics (cleaner code, accessibility)• Interactivity (tighter integration with
JavaScript)• Structure vs Presentation, CSS3
What is New in HTML5?
• Simplified DOCTYPE: <!DOCTYPE html>• New HTML Elements• HTML APIs• Elements Removed in HTML5 CSS
<center>, <frame>/<frameset>, <big>, <font>, …
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
HTML5 New Elements
• Semantic/Structural Elements<article>, <aside>, <dialog> <footer>, <header>, <menuitem>, <nav>, <section>, …
• Form Elements<datalist>, <output>, …
• Input Typestel, timcolor, date, email, number,search, e, url, …
• Input Attributesautocomplete, 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>, …
<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>
<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.
<dialog> demo
<dialog>, some final questions• Why do we need <dialog> element while it's
possible using libraries?o great for accessibilityo 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.
<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; }
<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>
<output> element: AttributesAttribute 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
<output> demo
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.
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>
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 – ondragoverevent.preventDefault()
• Do the Drop - ondropfunction drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data));}
Drag and Drop demo
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
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>
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
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; }}
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.
Geolocation - Other Methods
id = navigator.geolocation.watchPosition( success , error , options);
options = { enableHighAccuracy: false , timeout: 5000 , maximumAge: 0 };
navigator.geolocation.clearWatch(id);
Geolocation Demo
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.
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.
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.
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.
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
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);
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.
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 message\n\n
Multiline Data:
data: first line\ndata: second line\n\n
SSE - Send JSON Data
data: {\ndata: "msg": "hello world",\ndata: "id": 12345\ndata: }\n\n
source.addEventListener('message', function(e) { var data = JSON.parse(e.data); console.log(data.id, data.msg); }, false);
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: 10000\ndata: hello world\n\n
SSE Server – APEX Before Header ProcesDECLARE 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;
SSE - Demo
bit.ly/1QGhkBz
apex.oracle.com/pls/apex/f?p=ac15geo
10. Juni, 11:00 – 11:45, Landskrone
Q & A
http://rokitta.blogspot.com
@crokitta
http://www.themes4apex.com
? ? ?
http://plus.google.com/+ChristianRokitta
http://nl.linkedin.com/in/rokit/