1.
Dimitri Gielis
A Primer on Web
Components in APEX
www.apexRnD.be
dgielis.blogspot.com
@dgielis
dgielis@apexRnD.be

2.
Dimitri Gielis
❖ Founder & CEO of APEX R&D
❖ 17+ years of Oracle Experience (OCP & APEX Certified)
❖ Oracle ACE Director
❖ “APEX Developer of the year 2009” by Oracle Magazine
❖ Presenter at Oracle Conferences (OOW, ODTUG, OGh, UKOUG, …)

3.
http://dgielis.blogspot.com @dgielis

4.
Demo

5.
Adding a slider
(normal way)

6.
Adding a slider
(web components way)

7.
Web Components

8.
HTML Templates
<template id=“”>
</template>

9.
Creating a Template
<template id="mytemplate">
<img src="" alt="image">
<div class="comment"></div>
</template>

10.
Template
❖ Not rendered (hidden to DOM)
❖ Scripts don’t run, audio doesn’t play, …
❖ Templates can be placed anywhere
❖ Templates can be nested (but are not automatically activated)

11.
Activating a Template
var t = document.querySelector('#mytemplate');
// Populate the src at runtime.
t.content.querySelector('img').src = 'logo.png';
var clone = document.importNode(t.content, true);
document.body.appendChild(clone);

12.
Shadow DOM
div
#document-fragment
span

13.
Creating a Shadow DOM

14.
Custom Elements
<my-element>
</my-element>

15.
Creating a Custom Element

16.
Creating a Custom Element

17.
Custom Elements
❖ Name must contain a dash
❖ Its prototype must extend HTMLElement

18.
HTML Imports
<link rel=“import” href=“part.html”>

19.
End of theory

20.
Examples

21.
https://customelements.io

22.
http://component.kitchen

23.
https://elements.polymer-project.org

24.
http://builtwithpolymer.org

25.
How to get started

26.
Demo

27.
Web Components & APEX

28.
Browser Support

29.
Polyfills to the resque
❖ Snippets/Library of code that provide the technology that the
browser should provide natively
❖ Two common libraries:
❖ Polymer (by Google)
❖ X-Tag (by Mozilla)

30.
Lessons learned
❖ Web Components (frameworks) actively being developed
❖ Components not always backwards/forwards compatible

31.
References
❖ Eric Bidelman
❖ http://java.dzone.com/articles/introduction-web-components
❖ http://www.html5rocks.com
❖ https://css-tricks.com/modular-future-web-components/
❖ http://slides.com/jasonmayes/introduction-to-web-
components#/

32.
Recap
❖ What are Web Components
❖ Examples of Web Components
❖ How to get started and use them in APEX

33.
Q&A
www.apexRnD.be
dgielis.blogspot.com
@dgielis
dgielis@apexRnD.be

34.
❖ Looking for consulting, training and development in Oracle
Application Express (APEX)?
❖ Contact : www.apexRnD.be
❖ Mail : info@apexRnD.be
Consulting, Development, Training