marrying together the worlds of adf and html5 & angularjs - oracle openworld 2014 preview amis
DESCRIPTION
Leveraging the full power of HTML5 and the capacity of modern browsers, rich client applications are very popular right now. In this session we will demonstrate how we can bring the world of HTML5 and AngularJS to ADF applications. We take rich reusable TagCloud component and integrate it into a standalone AngularJS application. Next we embed the AngularJS module inside an ADF TaskFlow. This taskflow is then reused in a regular ADF web application and participates in ADF skinning, internationalization and customization. The rich client component receives data from the ADF application and exchanges events with it. The flexibility, [multitude of] resources and richness in functionality offered from the HTML5/AngularJS world beyond ADF can still be integrated with and leveraged from ADF. This presentation provides a solid introduction into the question how to achieve thus.TRANSCRIPT
Lucas Jellema (& Paco van der Linden)
Oracle OpenWorld 2014, San Francisco, CA, USA
Marrying together the worlds of ADF and HTML5 & AngularJS
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
ADF Match Center application
4
ADF Match Center application
ViewController
World Cup
database
schema
Model
Rich Table
Popup
MatchCenter.jspx
Taskflow match
Taskflow match-details
Taskflow taglist
5
Objective: Interactive Tag Cloud integrated into ADF app
Enterprise Resources
(Data & Documents)
Presentation
Logic
Business
Logic
Clie
nt =
= B
row
se
r S
erv
er
Presentation
Rendering
Presentation
Logic
Business
Logic
Presentation
Rendering
Business
Logic
Presentation Logic
Presentation
Rendering
Business
Logic
Presentation
Logic
Presentation
Rendering
Business
Logic
Presentation
Logic
Business
Logic
Thick Client Thin Client
7
Rich Client
HTML5/JS
SPA
Business Services
Enterprise Resources
Presentation Services
Client
Server
Client
Angular ADF APEX
Thin Client
Web Application
JSON
XML
XML
HTML HTML
JSON
XML
POJO
XML
se
ssio
n s
tate
se
ssio
n s
tate
sta
tele
ss
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
Step One – Stand Alone AngularJS TagCloud application
• Locate reusable JavaScript/HTML5 Tag Cloud: TagCanvas
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
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
tagcloud.html
tagcloud.js
tagcloud-
html.html
Angular
Module
tagcloud
Angular Module myApp
Angular scope log
tags
tagClicked()
myController
$scope.tags = [ … ];
$scope.tagClicked = function (tag) {…}
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
guests
hostCallBack()
guestCallbacks
toGuest()
Angular
Module
Angular
Module
tagcloud.html
tagcloud.js
Angular
Module
tagcloud
tagcloud-
bridge.html
angularGuest – bridge1
Angular scope toHost(msg)
myTagcloud
tagClicked()
angularGuest.js
Angular
Module
angularGuest
OTNBridge
guests
hostCallBack()
guestCallbacks
toGuest()
tagcloud.html
tagcloud.js
Angular
Module
tagcloud
tagcloud-
bridge.html
angularGuest – bridge1
Angular scope toHost(msg)
myTagcloud
tagClicked()
angularGuest.js
Angular
Module
angularGuest
OTNBridge
guests
hostCallBack()
guestCallbacks
OTNBridge
guests
hostCallBack()
guestCallbacks
toGuest() toGuest()
angularGuest – bridge 2
Angular scope toHost(msg)
myTagcloud
tagClicked()
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
Integrating Angular Bridge into ADF applications
ViewController
Taskflow tagcloud
MainPage.jspx
Taskflow tagcloud
Page Fragment tagcloud.jsff
tagcloud.js
tagcloud
angularGuest
integration.js
OTNBootstrapper
OTNBridge
pageflowScope otnBridge
tagCloudBean
18
TagCloudBean
1
2 3
4
5
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
tagCloudBean tags
viewScope animalCloud
20 Two TagClouds embedded in ADF page
`
ViewController
Taskflow tagcloud
pageflowScope otnBridge
tagCloudBean tags
viewScope animalCloud
carsCloud
Taskflow tagcloud
pageflowScope otnBridge
tagCloudBean tags
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
tagCloudBean viewScope
zooKeeper
zebra
22
Client Side events in Angular – pushed to ADF client => server
ViewController
Taskflow tagcloud
pageflowScope
tagCloudBean
OTNBridge
hostCallBack()
zebra
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
Consume ADF Contextual Event into Angular component
ViewController
Taskflow tagcloud
pageflowScope tagCloudBean
1
viewScope zooKeeper
parkingAttendant
2
horse
3
4
5
6
7
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
ViewController
Taskflow tagcloud
pageflowScope tagCloudBean
integration.js
inspectStyles
sendMessage
ToGuest
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
ViewController
Taskflow tagcloud
pageflowScope tagCloudBean
integration.js
extractTagsFor
Resource
BundleEntries
sendMessage
ToGuest
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
World Cup 2014 Match Center
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