Thursday, December 8, 2016

Video - Live Webinar - Master Class - ADF Bindings Explained

Posting 2 hours long video recording for yesterday webinar - Master Class - ADF Bindings Explained. Thanks to everyone for attending. It was large crowd, nearly 100 attendees live. I enjoyed answering to all of your questions, hopefully this will be useful in your daily work.


Webinar topics:

1. ADF Bindings overview. Why ADF Bindings are required and how they are useful
2. Drill down into ADF Bindings. Explanation how binding object is executed from UI fragment down to Page Definition
3. ADF Binding types explanation. Information about different bindings generated, when using JDeveloper wizards. What happens with ADF Bindings, when using LOV, table, ADF Query, Task Flow wizards.
4. Declarative ADF binding access with expressions
5. Programmatic ADF binding access from managed beans
6. ADF binding sharing and access from ADF Task Flows. How to create binding layer for Task Flow method call or router activities.
7. Best practices for ADF Bindings
8. Your questions

Download webinar ADF 12c app from GitHub - ADFAltaApp

Monday, December 5, 2016

Simple CRUD Implementation with Oracle JET - Part III

This is third and last part in JET CRUD series. I already had a post about JET CRUD few months ago - Very Practical CRUD with JET and ADF BC - POST and DELETE Methods. But current approach is more simple and better structured. I will go through CREATE, UPDATE and DELETE operations.

You can download or view source code (JET app and ADF BC REST app) directly in GitHub  repository - jetcrud.

CREATE

We need to initalize new model when creating new row, this is done in addCustomer.js - empty model is initialized. Model is initialized from common module definition - customController (read more about it in my previous post - Better Oracle JET Code Structuring with Your Own Modules - Part II):


Important trick which will save lines of code - you can reference model attributes directly, no need to list all of them in advance. Data bind form component to JET model variable:


Each input could point to the attribute, this is UI will get/set value to View Model:


New model must be posted through JET model API create operation. Here we can convert model to JSON and use it as parameter for create:


This is how it looks on UI - form with new customer data. Press Save button:


Behind the scenes REST POST method will be executed and data will be posted to the backend, where it will be processed and inserted into DB:


New row is saved and visible in the results table:


UPDATE

Edit form implementation is very similar to create, actually it can be even combined into one. The only difference is how you initialize current row for editing (check - Oracle JET CRUD - Search and Edit Form - Part I). And how you save the changes - must use different method from Oracle JET model API - save. The rest is very similar to create operation handling:


Edit form UI - it renders different set of fields:


Behind the scenes it executes REST PATCH method, which will update only changed attributes:


DELETE

This is the simplest operation from all three. You should get instance of row to delete. This can be done through JavaScript promise, JET would not return actual model instantly. It return promise and you get model asynchronously. Call JET model API destroy operation to remove row entry:


Row is selected and removed:


Behind the scenes it calls REST DELETE method and removes row from backend:


Read previous posts:

1. Oracle JET CRUD - Search and Edit Form - Part I
2. Better Oracle JET Code Structuring with Your Own Modules - Part II

Sunday, December 4, 2016

Oracle Developer Cloud Service and ADF Build/Deployment Automation Summary

We are moving our internal development to Oracle Cloud production instance. This weekend I was going through build automation and deployment process with Oracle Developer Cloud Service. I would like to share few hints with you.

There are excellent video tutorials recorded by Shay Schmeltzer, I would not repeat here all the steps, will post only key steps in the process and few extra tips. Watch Shay's videos to get understanding how it works and how to configure Developer Cloud Service (UI was changed since then, but still all config steps are valid):

1. Using Oracle Developer Cloud Service for Git and code review with JDeveloper Applications

2. Oracle ADF Build Automation on the Oracle Developer Cloud Service

Download ADF 12.2.1.1/12.2.1.2 example configured with Ant scripts for build automation on Dev CS - ADFAltaApp.

JDeveloper/ADF version. When I run OJDeploy build in Dev CS (Developer Cloud Service), I can see in the log it prints version 12.2.1.1. This means currently Dev CS supports ADF up to 12.2.1.1:


Locally I prefer working on 12.2.1.2, since JDeveloper is more stable in 12.2.1.2. When I was trying to build code commited from 12.2.12, Dev CS complained it can't open project file. I have solved it by changing 12.2.1.2 to 12.2.1.1 in *.jws and *.jpr files (luckily my local JDeveloper 12.2.1.2 doesn't complain about it and continues to work with the application). With such changes, Dev CS is able to recognize project files and runs build process. Change in the project file:


Development process is centralized around pushing your local changes to Dev CS Git repository branch (this can be done directly from JDeveloper):


In this example, I commit my local changes into fixbugs branch, later changes can be merged into master branch through Dev CS UI:


Build. To merge changes in Dev CS into master branch, we need to register merge request. In the wizard you can specify Git repository name, target branch and review branch (the one from where we are going to get changes and apply to master branch):


You can specify approvers and later when changes are approved, they are merged to master branch.

Next step is build automation (this can invoked on demand or automatically). You can associate build process to Git branch and review past build results:


If you are building with Ant, make sure to add build.properties and build.xml files into ADF application (described in Shay's video). Here is example of build.properties file I'm using in the sample app for ADF 12.2.1.1/12.2.1.2:

Example of build.xml file to run build automation in Dev CS for ADF 12.2.1.1/12.2.1.2:

At first build process was always returning success, even I there were compilation issues left in the code on purpose. In order to force build process to return failure when it should, you need to check "Archive the artifacts" option in Post Build section of build job configuration. This will force build process to produce EAR and if this fails (because of compilation issues), it marks build process failure:


Deploy. Dev CS knows how to deploy EAR into Java Cloud Service. This can be done on demand or automatically, when build is successfully completed. Configuration is simple and straightforward, you need to provide connection details to Java Cloud Service and it works - you can deploy or redeploy:


Application is successfully deployed to Java Cloud Service and visible in EM:


Besides all this, Dev CS offers Wiki's, issue tracking and bunch of other useful features for day to day work in development. So far no complaints, good job Oracle.

Thursday, December 1, 2016

Better Oracle JET Code Structuring with Your Own Modules - Part II

You can end up into long lines of JavaScript code when implementing more complex use cases in JET. This will complicate maintenance and make code hardly readable. To prevent this - plan code structure carefully and use your own modules. Structure code into different modules - to reuse common code across multiple use cases.

Check my JET/ADF BC sample available on GitHub - jetcrud. This sample implements one common module - Customer Controller. Module is responsible to define ADF BC REST service connection. It contains REST service URL, JET model definition with ID attribute and JET collection created based on JET model and assigned with fetch size. This allows not to repeat same definitions again and again in each of JET modules implementing use cases (edit, add, etc.):


Such module is created as any other JET module with define header. We can use it in any other JET module, by specifying module name in define block. For example customers.js module imports Customer Controller through define block:


Within customer.js module we access function from Customer Controller to obtain collection.

Same Customer Controller module is reused inside another module editCustomer.js. Here we are accessing function from Customer Controller to obtain model:


Such approach allows to simplify JavaScript code and render different UIs based on one module. Readonly table is based on customerController.js:


Edit form is based on same customerController.js:


Read previous post - Oracle JET CRUD - Search and Edit Form - Part I.

Monday, November 28, 2016

Red Samurai - Oracle Cloud Customer (DBaaS, JCS, DevCS)

We understand importance of Cloud services and decided to move out internal development infrastructure (ADF and JET) into Oracle Cloud. From today we are Oracle Cloud customers and users for the following services:

1. Oracle Database Cloud Service

2. Oracle Java Cloud Service

3. Oracle Developer Cloud Service

Exciting times ahead. Expect more interesting topics about Oracle Cloud and ADF/JET.

Saturday, November 26, 2016

ADF 12.2.1.1 New Feature - Masonry Layout Custom Size Dashboard

ADF 12.2.1.1 and 12.2.1.2 respectively comes with improvement for Masonry Layout component. Now we can define custom sizes for tiles - 9.4.1 How to Use a masonryLayout Component. This helps to define larger tiles and organize dashboard layout in more accurate way.

I have uploaded working demo app on GitHub, you can download it directly from repository or browse through the code - ADFAltaApp. I will be using this app for ADF Bindings webinar - Live Webinar - Master Class - ADF Bindings Explained.

To access Masonry Layout dashboard with custom tile sizes, go to Employees section and open Profile tab. You should see such dashboard layout (one tile 2x4, one tile 4x2 and two tiles 2x2). All four tiles are defined with custom size:


Masonry Layout is responsive out of the box. On narrow screen tiles will be re-arranged automatically:


Custom tiles for Masonry Layout are defined through CSS. You should create custom style class and set it for Masonry Layout component. I have define custom style class - RedSamuraiDashboard:


Each tile group with custom size must be defined in CSS separately. Width and hight should be proportional. If you define 250px for size 2, this means size for 4 must be 500px:


Masonry Layout tiles are assigned with style class which defines size:


You could have ADF region inside tile, it renders perfectly well:

Saturday, November 19, 2016

Oracle JET CRUD - Search and Edit Form - Part I

I'm going to post a series of articles about CRUD functionality (on top of ADF BC) implementation in JET. I already had a couple of posts about JET CRUD implementation, this new series will bring improved and simplified structure for JET code implementation.

Today I will start with explanation and example how to pass selected object ID from search screen into edit screen. I have uploaded complete sample (with ADF BC and JET) into GitHub repository. Download ready to be run code or browse it directly from GitHub repository.

There are two essential parts to understand, when you implement search/edit form.

1. How to get selected object ID

I have implemented read-only table where user could select a record and navigate to edit form. JET table is enhanced with template. Each row renders edit action link. When this link is pressed, it calls our custom editCustomer function and also it sends across a key value from selected row (EmployeeId):


Inside editCustomer function we can access key parameter value and store it into JET router (this will make it accessible from another JET module, where we navigate for editing - editCustomer):


2. How to use selected object ID for edit

Edit module contains initialize function. It gets invoked automatically, each time we navigate to edit screen. Inside this function we can can access and retrieve parameter value stored in JET router. It can be used to fetch data model for editing:


This is how it looks like. User can select a row in JET table (enabled with pagination) and click on edit action:


Edit module will be loaded and data will be fetched for editing by key passed through JET router: