This blog-post accompanies the OTN Article Marrying the Worlds of ADF and HTML 5 – to provide some details about setting up the environment for the ADF & HTML5/AngularJS World Cup Football 2014 Match Center application and about some implementation details in this application.

Development Environment

In order to inspect the applications, you will need to install JDeveloper 11g (11.1.1.7). This comes with its integrated WebLogic Server, and for running all but two of the ADF sample applications, that set up suffices. To also run the World Cup Football 2014 Match Center application itself, you will need to have access to an Oracle Database (XE or otherwise).

The easiest way to get hold of a complete environment – a VM with JDeveloper, the Oracle XE database and all sample applications up and almost running – is to follow the instructions in this article (that leverages Vagrant and Puppet to generate the VM for you and downloads the source code from GitHub): https://technology.amis.nl/2014/07/29/creating-automated-jdeveloper-12-1-3-oracle-xe-11gr2-environment-provisioning-using-vagrant-and-puppet/.

If you fancy a more manual set up procedure – which I can understand but would like to suggest against – you can find plenty of instructions for installing JDeveloper 11g (or 12c) and an Oracle Database. Additionally, you would have to clone the GitHub source repository that accompanies this article (https://github.com/pavadeli/adf-html5) or download the source as a zip-file (https://codeload.github.com/pavadeli/adf-html5/zip/master) and extract the zip-file to your local file system.

The file system would look like as shown in the next figure:

All ADF sample applications described in the article are in the sub folders adf, and adf-step1..6. Sub folder database contains the SQL scripts required for the creation of the database schema with the tables and types used by the World Cup 2014 application. Note: only the ADF applications in sub folders adf and adf-step1 actually need the database set up. All other sample applications run without database interaction.

We assume a database user schema (for example WC) has been created in the database and has been granted several system privileges, including connect, create session, create table, create or replace type and some quota on the default tablespace. Use SQL*Plus, SQLDeveloper or your favorite tool to create the database objects using the ddl.sql script. Then use the dml.sql script to load the data into the tables. The file queries.sql contains a number of sample queries against the database schema; these queries have been used in the ADF BC ViewObjects in the World Cup 2014 application.

After starting JDeveloper and opening either one of the two applications that require database access, look under application resources and set the properties for the database connection to the values appropriate for your environment. To test whether the settings are correct, you can run the ADF BC Application Module WorldCupService.

Special Features

This section is work in progress and will contain references to detailed explanation about certain features in the ADF World Cup Football 2014 Match Center application. By inspecting the code for the application you will find out the details on your own – it is all there. Below are some references to resources that were helpful in the creation of this sample application.

Some features that deserve special attention:

* Creation of the Language Selector and the Skin Switcher

* Using contextual events to communicate the current set of tags to the OTNBridge and eventually the tagcloud and to communicate the selected tags from the tagcloud via the OTNBridge to the host ADF Taskflow

* Refreshing the ADF BC ViewObject when a tag has been selected (and this has been published through a contextual event) (and ensuring that the contents of the table is refreshed as well)

* use of client side ADF JavaScript to communicate manual tag creation and deletion

* Opening the popup with taskflow inside from the context info element and passing the proper (match) context to the taskflow:

* Visualizing the match progress using panelGridLayout:

Resources

GitHub Repository with Vagrant (and Puppet) configuration files for the generation of the Virtual Box VM with the complete development environment including the sample applications: https://github.com/lucasjellema/adf-12-1-3-vm .

Some blog articles discussing the SQL queries behind the tag cloud and the group standings:

SQL Challenge: Find World Cup Football matches with a comeback

SQL Challenge: Drilling down into World Cup Football Tag Cloud

SQL Challenge: Dynamically producing a tag cloud for World Cup Football matches

SQL Challenge – World Cup Football 2014 – Retrieving matches and Calculating Group standings

Use REGEXP_SUBSTR for string tokenizing https://blogs.oracle.com/aramamoo/entry/how_to_split_comma_separated_string_and_pass_to_in_clause_of_select_statement

Add logging: http://blog.iadvise.eu/2013/01/02/starting-with-adf-11g-logging/ in ADF applications

Note: popup and setpropertylistener do not go together well (https://community.oracle.com/thread/677678?start=0&tstart=0, https://community.oracle.com/thread/2235404?start=0&tstart=0, http://amit-adf-work.blogspot.nl/2012/12/adf-issue-with-popup-and.html )

http://www.jobinesh.com/2010/10/how-to-set-bind-variable-values-at.html

http://dailydevfixes.blogspot.nl/2011/07/setting-bind-parameters-on-hierarchy-of.html

http://jdeveloper-adf.googlecode.com/svn/trunk/TGPrototype2/ViewController/src/com/tgslc/defaultManagement/utils/ADFUtils.java

Set width for panelCollection: http://cbhavsar.blogspot.nl/2008/10/using-panelcollection-with-master.html