1. Marrying together the worlds of
ADF and HTML5 & AngularJS
Lucas Jellema (& Paco van der Linden)
Oracle OpenWorld 2014, San Francisco, CA, USA

2. Overview
• Why – Objectives
• Exploration –rich HTML5 component, reusable in ADF
• Approach
– Stand alone AngularJS/HTML5 application
– Extract ‘3D Tag Cloud component’
– Create ADF Taskflow wrapper around Tag Cloud component
– Creating ‘plumbing’ – connect Tag Cloud to
pageFlowScope and contextual events
– Further integration: absorb ADF skins, i18n and customization
into Tag Cloud component
• Demonstration
• Conclusion:
– We can leverage the world of HTML5/AngularJS resources to add spiffy, productive
functionality to ADF Faces Web Applications
ADF
Faces
HTML5
AngularJS

3. 3
ADF Match Center application

4. 4
ADF Match Center application
ViewController
World Cup
database
schema
Model
Rich Table
Popup
MatchCenter.jspx
Taskflow match
Taskflow taglist
Taskflow match-details

5. 5
Objective: Interactive Tag
Cloud integrated into ADF app

6. Thick Client Thin Client
Presentation
Rendering
Presentation
Rendering
Presentation
Logic
Enterprise Resources
(Data & Documents)
Presentation
Logic
Business
Logic
Client == Browser Server
Presentation
Rendering
Presentation
Logic
Business
Logic
Business
Logic
Presentation Logic
Business
Logic
Presentation
Rendering
Presentation
Logic
Business
Logic
Business
Logic

7. Rich Client
HTML5/JS
SPA
Client
Presentation Services
Business Services
Enterprise Resources
Client
Server
Angular ADF APEX
Thin Client
Web Application
JSON
XML
XML
HTML HTML
JSON
XML
POJO
XML
session state
stateless session state

8. 8
Final Result
Web Developer
community
Taskflow
Databound
ADF Rich Table
World Cup
database
schema
ADF World Cup 2014 Match Center application
AngularJS TagCloud application
Angular
TagCloud
Module
3D interactive,
animated Tag Cloud
Taskflow

9. 9
Step One – Stand Alone
AngularJS TagCloud application
• Locate reusable JavaScript/HTML5
Tag Cloud: TagCanvas

10. 10
Step One – Stand Alone
AngularJS TagCloud application
• Locate reusable JavaScript/HTML5
Tag Cloud: TagCanvas
• Set up HTML5/AngularJS development
environment:
– IDE: Sublime Text Editor
– Package Manager: Node.js - NPM
– Build (Ant-like): Gulp
– Dependency Management (Maven-style): Bower
– Run Time: Google Chrome browser

11. 11
Step One – Stand Alone
AngularJS TagCloud application
• Locate reusable JavaScript/HTML5
Tag Cloud: TagCanvas
• Set up HTML5/AngularJS development
environment:
– IDE: Sublime Text Editor
– Package Manager: Node.js - NPM
– Build (Ant-like): Gulp
– Dependency Management (Maven-style): Bower
– Run Time: Google Chrome browser
• Construct AngularJS application
– tagcloud-html
– bower.json
– gulpfile
– AngularJS Module TagCloud

12. tagcloud.html
tagcloud.js
tagcloud-html.
html
Angular
Module
tagcloud
Angular Module myApp
myController
$scope.tags = [ … ];
$scope.tagClicked = function (tag) {…}
Angular scope
log
tags
tagClicked()

13. 13
Step 2 - Bridge
• Multiple tag-cloud components in a single page
• Exchange events from the host-page to the guest-tagcloud and back
• New AngularJS Module: angularGuest
– Uses the OTNBridge JavaScript library
• Guests register with the bridge
• The bridge can receive messages from the guests
and callback to host to pass
them through
• Host can call bridge to call
guests to pass message
• Guests can embed other
AngularJS modules
– Such as tagcloud
angularGuest – bridge1
angularGuest.js
Angular
Module
angularGuest
OTNBridge
hostCallBack()
guests
toGuest()
guestCallbacks
Angular
Module
Angular
Module

14. Angular
Module
tagcloud
tagcloud.html
tagcloud.js
tagcloud-bridge.
html
angularGuest – bridge1
Angular scope
toHost(msg)
myTagcloud
tagClicked()
angularGuest.js
Angular
Module
angularGuest
OTNBridge
hostCallBack()
guests
toGuest()
guestCallbacks

15. Angular
Module
tagcloud
tagcloud.html
tagcloud.js
tagcloud-bridge.
html
angularGuest – bridge1
Angular scope
toHost(msg)
myTagcloud
tagClicked()
angularGuest.js
Angular
Module
angularGuest
OTNBridge
hostCallBack()
guests
angularGuest – bridge 2
Angular scope
toHost(msg)
myTagcloud
tagClicked()
toGuest() toGuest()
guestCallbacks
OTNBridge
hostCallBack()
guests
guestCallbacks

16. 16
Integrating Angular Bridge into
ADF applications
• Containerize the AngularJS + Tagcloud + Bridge application (single JS file)
• Create an ADF TaskFlow with a page fragment and PageFlowScope beans
otnBridge and tagCloudBean
– The former (generic) loads the JavaScript and publishes data to the AngularJS Scope
– The latter (special) handles the ’tag is clicked event’

17. 17
Integrating Angular Bridge into
ADF applications
ViewController
Taskflow tagcloud
MainPage.jspx
Taskflow tagcloud
Page Fragment tagcloud.jsff
integration.js
OTNBridge
OTNBootstrapper
tagcloud.js
angularGuest
tagcloud
pageflowScope
otnBridge
tagCloudBean

18. 18
TagCloudBean
1
4
3 2
5

19. 19
Make AngularJS component
bound on ADF Data Binding
• The input parameter for the tagcloud Taskflow is set with a reference to
the animalCloud bean in the (page’s) viewScope
– This bean returns a list of tags
– Alternatively, a reference to an ADF data bound collection could have been used
ViewController
Taskflow tagcloud
pageflowScope
otnBridge
tags tagCloudBean
viewScope
animalCloud

20. 20 Two TagClouds embedded in
ADF page
ViewController `
Taskflow tagcloud
pageflowScope
otnBridge
tags tagCloudBean
viewScope
animalCloud
carsCloud
Taskflow tagcloud
pageflowScope
otnBridge
tags tagCloudBean

21. 21
Forwarding the tag clicked
event from tagcloud to ADF
• Event in Angular component is turned into ADF Contextual Event to be
consumed in host (ADF) application
ViewController
Taskflow tagcloud
pageflowScope
viewScope tagCloudBean
zooKeeper
zebra

22. 22
Client Side events in Angular –
pushed to ADF client => server
ViewController
Taskflow tagcloud
pageflowScope
tagCloudBean
OTNBridge
hostCallBack()
zebra

23. 23
Consume ADF Contextual
Event into Angular component
• Actions in the ADF side
of the applications can
[need to have] consequences
in the embedded components
• ADF Contextual Events are
the vehicle for this ‘from host
to guest’ interaction
– Just like they are for the
reverse route
• For example: add a tag from
outside the TagCloud Taskflow

24. Consume ADF Contextual
Event into Angular component
ViewController
Taskflow tagcloud
pageflowScope
tagCloudBean
1
viewScope
2
4
zooKeeper
parkingAttendant
horse
3
5
6
7

25. 25
Apply ADF Skinning to
embedded Angular components
• Skinning is a server side mechanism that generates CSS styles to apply
to UI components rendered in the browser
– CSS generation depends on selected skin, browser (version), locale, etc.
• The objective right now:
– apply these generated styles to the UI elements inside the embedded Angular
TagCloud component – to make them assume the same look and feel
• The challenge:
– Skinning knows nothing about the embedded elements and vice versa.
• The trick:
– Add a number of invisible ‘dummy’ components in the ADF Tasfklow
– At run time, using JavaScript, retrieve the skin-based CSS styles that are applied to
these dummy components
– Pass the style properties to the Angular scope [for each interested guest] and inside
the guest, apply these properties to the target components

26. ViewController
Taskflow tagcloud
pageflowScope
tagCloudBean
integration.js
sendMessage
ToGuest
inspectStyles

28. 28
Apply Resource Bundles & i18n to
embedded Angular components
• Internationalization (i18n) is the adaptation of the user interface to current
locale (language, region)
– ADF (and Java) uses resource bundles per language that contain key-value pairs for
locale specific attributes – such as boilerplate text
• The objective right now:
– apply these translated values to i18n-enabled attributes in the embedded component
• The challenge:
– AngularJS and our JavaScript component are unaware of ADF Faces and of i18n
based on resource bundles
• The trick:
– Add an invisble inputText component in the ADF Tasfklow
– Define a clientAttribute on this component with a JSON collection that contains
resource bundle entries
– At run time, ADF Faces ensures that
these entries are translated
– Read the clientAttribute in JavaScript
and pass the value to the guest

29. ViewController
Taskflow tagcloud
pageflowScope
tagCloudBean
integration.js
sendMessage
ToGuest
extractTagsFor
Resource
BundleEntries

31. 31
Customize and Personalize the
embedded AngularJS component
• Customization and Personalization is the adaptation of the user interface
based on context specific and personal settings and preferences
– ADF supports design time and run time customizations to be created (in MDS) and to be
applied at run time to UI components
• The objective right now:
– Create and apply customizations and personalizations to embedded Angular components
such as the 3D Tag Cloud
• The challenge:
– AngularJS and our JavaScript component are unaware of ADF Faces and of customization
and MDS
• The trick:
– Add invisible ADF Faces components in the ADF Tasfklow and define customizations on
their properties in the regular way
– To define customizations at run time – open a popup that shows ‘proxies’ for the UI
elements in the embedded component and define customizations on those
– At run time, ADF Faces ensures that customizations are applied according to the current
content
– Read the relevant customized properties in JavaScript and pass the values to the guest

32. 32
World Cup 2014 Match Center

33. 33
Summary and Conclusion
• Rich Client web applications are popular
– User experience is smooth and rich, optimally benefitting from HTML5 capabilities
– Development is relatively simple and productive
– Many resources are available
• ADF provides an enterprise application framework
– With a number of robust enterprise infrastructure facilities
– Fairly thick-server architecture with large but limited set of UI components
• ADF Web Applications can be enhanced using HTML5 components
– (for example) AngularJS modules can be created as stand-alone components, then
containerized and embedded in a reusable ADF Taskflow
– Using contextual events, embedded components can exchange data and events with
the ADF host and vice versa
• Without sacrificing the benefits of ADF, organizations can benefit from
many of the richness of HTML5