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.

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:

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:

Live Webinar - Master Class - ADF Bindings Explained

I will be running free online webinar on Wed, Dec 7, 2016 7:00 PM - 9:00 PM CET. Everyone who wants to learn more about ADF Bindings is welcome to join !

Registration URL: https://attendee.gotowebinar.com/register/3325820742563232258
Webinar ID: 806-309-947

Title

Master Class - ADF Bindings Explained (Andrejus Baranovskis, Oracle ACE Director)

Description

This 2 hours long webinar is targeted for ADF beginners with main goal to explain ADF bindings concept and its usage to the full potential. ADF Bindings is one of the most complex parts to learn in ADF, every ADF developer should understand how ADF bindings work. Goal is to have interactive session, participants could ask questions and get answers live. This live event is completely free - join it on December 7th at 7:00 PM CET (Central European Time) (which is respectively 1:00 PM New York and 10:00 AM San Francisco on December 7th).

In order to join live webinar, you need to complete registration form on GoToWebinar. Number of participants is limited, don't wait - register now.

Topics to be covered: 

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

ADF LOV Auto Suggest Functionality

ADF Faces LOV component can be easily enabled with auto suggest functionality. This is really powerful feature and should save time for user to search for required list values.

Auto suggest can be configured to be invoked only when certain number of characters is entered. I have configured Job ID list to trigger auto suggest, when two or more characters are entered. No auto suggest with single character:

Two or more characters entered - auto suggest displays filtered LOV values. What is nice about it - it automatically shows all these attributes included into LOV list:

In the background ADF BC executes SQL with bind variable from auto suggest:

LOV is defined on attribute in standard way, nothing special here:

To enable auto suggest behaviour, enough to drag and drop ADF af:autoSuggestBehavior tag into ADF Faces LOV component. Point suggestItems property to LOV binding suggestItems expression. Number of characters when to start auto suggest search is configure through minChars property:

Download sample application - ADFLovAutoSuggestApp.zip

Oracle JET Composite Component and ADF BC REST

I decided to implement sample app for JET composite component. This is powerful thing, it allows to build pretty much any UIs with HTML - package as components and reuse in the apps. Not only UI - JET composite component gets data as any other standard JET component. This allows to build your own components for forms, tables, various widgets. It allows to simplify code complexity, you could hide frequently used code into JET components and use component with parameters only on the page.

My sample is based on example from Geertjan Wielenga blog - Minimal Oracle JET Composite Component and I show how to supply data from ADF BC REST to be displayed in JET composite component. Read more about JET composite components in JET Cookbook - Composite Components. Sample is implemented with latest JET distribution 2.2.0 (it didn't work for me with 2.1.0 - JET app was blocked, after composite component was displayed) - JETSimpleCompositeApp.zip.

Composite component from sample app renders a list of customers including last and first names:

To attach composite component to JET project, you need to copy (or just implement inside existing project) package into the project. Composite component resides in simple folder structure and is based on HTML implementation, metadata JSON file and JavaScript loader file:

HTML implementation for this sample is simple, renders two text entries (binded to properties, so we could provide dynamic values in the consumer later) with different heading. You can implement here pretty much anything supported by HTML:

Metadata JSON file contains description for properties referenced in HTML UI implementation:

JavaScript loader is a central registry where HTML implementation is mapped with metadata:

Composite component is consumed in customer module. To consume it, make sure to add required references into module define block - highlighted:

On HTML side of customer module, composite component is rendered in the loop - for each entry from the array fetched from ADF BC REST service. We provide array elements as values for composite component attributes:

Data is fetched from ADF BC REST service by executing fetch operation on top of JET collection and then processing results into observable array (each entry is displayed by composite component on the UI):