5 x HTML5 worth using in APEX (5)

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

http://www.w3schools.com/tags/att_output_for.asp

http://www.w3schools.com/tags/att_output_form.asp

http://www.w3schools.com/tags/att_output_name.asp

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


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

[email protected]

http://www.themes4apex.com

? ? ?

http://plus.google.com/+ChristianRokitta

http://nl.linkedin.com/in/rokit/

Software

5 x HTML5 worth using in APEX (5)