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

ADFFaces

HTML5AngularJS

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

BusinessLogic

Client =

= B

rowser

Server

Presentation Rendering

Presentation Logic

BusinessLogic

Presentation Rendering

BusinessLogic

Presentation Logic

Presentation Rendering

BusinessLogic

Presentation Logic

Presentation Rendering

BusinessLogic

Presentation Logic

BusinessLogic

Thick Client Thin Client

7

Rich ClientHTML5/JS

SPA

Business Services

Enterprise Resources

Presentation Services

Client

Server

Client

Angular ADF APEX

Thin Client

Web Application

JSONXML

XMLHTML HTML

JSONXML

POJOXML

session state

sess

ion

stat

est

ate

less

8

Final Result

Web Developer community

Taskflow

Databound ADF Rich Table

World Cup database schema

ADF World Cup 2014 Match Center application

AngularJS TagCloud applicationAngular

TagCloud Module

3D interactive, animated Tag Cloud

Taskflow

9

Step One – Stand Alone AngularJS TagCloud application

• Locate reusable JavaScript/HTML5Tag Cloud: TagCanvas

10

Step One – Stand Alone AngularJS TagCloud application

• Locate reusable JavaScript/HTML5Tag Cloud: TagCanvas

• Set up HTML5/AngularJS developmentenvironment:– 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/HTML5Tag Cloud: TagCanvas

• Set up HTML5/AngularJS developmentenvironment:– 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.htmltagcloud.js

tagcloud-html.html

Angular Module

tagcloud

Angular Module myApp

Angular scopelogtagstagClicked()

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 passthem through

• Host can call bridge to callguests to pass message

• Guests can embed otherAngularJS modules– Such as tagcloud

angularGuest – bridge1

angularGuest.js

Angular Module

angularGuest

OTNBridge

guests

hostCallBack()

guestCallbacks

toGuest()

Angular Module

Angular Module

tagcloud.htmltagcloud.js

Angular Module

tagcloud

tagcloud-bridge.html

angularGuest – bridge1

Angular scopetoHost(msg)myTagcloudtagClicked()

angularGuest.js

Angular Module

angularGuest

OTNBridge

guests

hostCallBack()

guestCallbacks

toGuest()

tagcloud.htmltagcloud.js

Angular Module

tagcloud

tagcloud-bridge.html

angularGuest – bridge1

Angular scopetoHost(msg)myTagcloudtagClicked()

angularGuest.js

Angular Module

angularGuest

OTNBridge

guests

hostCallBack()

guestCallbacks

OTNBridge

guests

hostCallBack()

guestCallbacks

toGuest() toGuest()

angularGuest – bridge 2

Angular scopetoHost(msg)myTagcloudtagClicked()

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

tagcloudangularGuest

integration.js

OTNBootstrapper

OTNBridge

pageflowScopeotnBridgetagCloudBean

18

TagCloudBean

1

23

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

pageflowScopeotnBridgetagCloudBeantags

viewScopeanimalCloud

20Two TagClouds embedded in ADF page

`ViewController

Taskflow tagcloud

pageflowScopeotnBridgetagCloudBeantags

viewScopeanimalCloudcarsCloud

Taskflow tagcloud

pageflowScopeotnBridgetagCloudBeantags

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

pageflowScopetagCloudBeanviewScope

zooKeeper

TagClickedEvent

zebra

22

Client Side events in Angular – pushed to ADF client => server

ViewController

Taskflow tagcloud

pageflowScopetagCloudBean

OTNBridge

hostCallBack()

zebra

23

Consume ADF Contextual Event into Angular component

• Actions in the ADF sideof the applications can[need to have] consequencesin the embedded components

• ADF Contextual Events arethe vehicle for this ‘from hostto guest’ interaction– Just like they are for the

reverse route

• For example: add a tag fromoutside the TagCloud Taskflow

Consume ADF Contextual Event into Angular component

ViewController

Taskflow tagcloud

pageflowScopetagCloudBean

1

viewScopezooKeeperparkingAttendant

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

pageflowScopetagCloudBean

integration.js

inspectStyles

sendMessageToGuest

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

pageflowScopetagCloudBean

integration.js

extractTagsForResourceBundleEntries

sendMessageToGuest

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

Tag clicked event

Tag collection refreshed event

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