Marrying HTML5 and Angular to ADF - Oracle OpenWorld 2014 Preview
•Download as PPTX, PDF•
3 likes•6,177 views
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.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (9)
Similar to Marrying HTML5 and Angular to ADF - Oracle OpenWorld 2014 Preview
Similar to Marrying HTML5 and Angular to ADF - Oracle OpenWorld 2014 Preview (20)
More from Lucas Jellema
More from Lucas Jellema (20)
Recently uploaded
Recently uploaded (20)
Marrying HTML5 and Angular to ADF - Oracle OpenWorld 2014 Preview
- 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
Editor's Notes
- Marrying together the worlds of ADF and HTML5 & AngularJS 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.