Create a Custom ADF Component

During UKOUG Tech14 in Liverpool, Wilfred and I had a presentation about how to create your own Custom ADF Component. Since we were busy on preparing the presentation there were no blogs about these beforehand.
I thought it would be nice to give a small recap, for anyone interested in going into creating Custom ADF Components.

In our sample application we created an ADF Component called ‘multi select’ which offers the user the ability to show a list of items and the ability to add items, delete items and select an item. The result is the component within the red line:

During our presentation, we had an overview of the components involved in creating a custom ADF component. The overview looked as followed:

The slide deck on slideshare will take you through these components, the responsibilities and the code involved in creating this component. We have added comments to the code in the slides, so you are able to follow this without our voice over. The server side classes are all Java classes as where the client side is all JavaScript. The Skin is created in a css file using the ADF skin style.

At the end of the slide deck there is a slide with links to several documentation, we advise you to keep links to these documents close by you while starting to code your component. As you will see, we link to documentation from the ADF release 11.1.2.4 while we have build our component in ADF 12.1.3. This is because Chapter 31 ‘Creating Custom ADF Faces Components’ is not available in the 12c Documentation.

Last but not least, all our effort is available on a github repository, both the Custom ADF Component we have created as well as an example of a consuming ViewController project using this multiSelect component.

Resources:
- Presentation: http://www.slideshare.net/ROlrichs/adf-component-tech14
- GitHub Repository: https://github.com/wvanderdeijl/adfcomponent