5 x HTML5 worth using in APEX (5)

5 x HTML5
in
APEX (5)
Christian Rokitta
HTML5 + APEX5 = Perfect 10
(Shakeeb)

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

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 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>, …

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

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

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) {
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 – ondragover
event.preventDefault()
• Do the Drop - ondrop
function drop(ev) {
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}

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);

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 messagenn
Multiline Data:
data: first linen
data: second linenn

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
);

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

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;

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
christian@rokitta.nl
http://www.themes4apex.com
http://plus.google.com/+ChristianRokitta
http://nl.linkedin.com/in/rokit/

5 x HTML5 worth using in APEX (5)

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to 5 x HTML5 worth using in APEX (5) (20)

More from Christian Rokitta (10)

Recently uploaded (20)

5 x HTML5 worth using in APEX (5)