Please disable your adblock and script blockers to view this page

Search this blog

Showing posts with label Oracle ADF. Show all posts
Showing posts with label Oracle ADF. Show all posts

Thursday 3 January 2019

Using Bean Data Control in Oracle ADF

 This post talks about a basic requirement that is creating bean data control in an ADF Application. Here I'll show you how to create POJO based Java class and use it as data control to populate data on the page.

Let's start by creating a fusion web application with a model and view controller project


Now create a POJO class PersonDetail in the model project, This class represents a person and captures his details like name, date of birth and phone number.

  1. package beandatacontrol.model.bean;
  2. public class PersonDetail {
  3. public PersonDetail() {
  4. // TODO Auto-generated constructor stub
  5. }
  6. public PersonDetail(String name, String phoneNo, String dateOfBirth) {
  7. this.name = name;
  8. this.phoneNo = phoneNo;
  9. this.dateOfBirth = dateOfBirth;
  10. }
  11. private String name;
  12. private String phoneNo;
  13. private String dateOfBirth;
  14. public void setName(String name) {
  15. this.name = name;
  16. }
  17. public String getName() {
  18. return name;
  19. }
  20. public void setPhoneNo(String phoneNo) {
  21. this.phoneNo = phoneNo;
  22. }
  23. public String getPhoneNo() {
  24. return phoneNo;
  25. }
  26. public void setDateOfBirth(String dateOfBirth) {
  27. this.dateOfBirth = dateOfBirth;
  28. }
  29. public String getDateOfBirth() {
  30. return dateOfBirth;
  31. }
  32. }

The second class is Society that holds the list of people and it goes like this.

  1. package beandatacontrol.model.bean;
  2. import java.util.ArrayList;
  3. import oracle.binding.AttributeContext;
  4. import oracle.binding.RowContext;
  5. public class Society {
  6. public ArrayList<PersonDetail> person = new ArrayList<PersonDetail>();
  7. public Society() {
  8. super();
  9. if (person.size() == 0) {
  10. person.add(new PersonDetail("Ashish Awasthi", "+91672938", "02/01/1991"));
  11. person.add(new PersonDetail("Shyam Kumar", "+91345545343", "06/09/1991"));
  12. person.add(new PersonDetail("Alex Smith", "+458954638", "08/02/1991"));
  13. person.add(new PersonDetail("Raghav Mani", "+914512698", "09/06/1991"));
  14. person.add(new PersonDetail("Ahmad Sheikh", "+7459654245", "12/05/1991"));
  15. }
  16. }
  17. public void setPerson(ArrayList<PersonDetail> person) {
  18. this.person = person;
  19. }
  20. public ArrayList<PersonDetail> getPerson() {
  21. return person;
  22. }
  23. }

Now right click on Society class and select Create Data Control


In the next step, I have selected Custom CRUD operation support in ADF Data Control Features


Click on Next and don't change access mode, the default value is Scrollable

 


Click on Finish and you can see all the details


Now you can see a DataControl.dcx file is created in the project, In short bean data control is ready for use.


Right-click on the view controller project and create a page and drop person data control on the page as ADF table. Also, drop create operation as a button and run the application.


Check to create button, click on that and see a new row added in the ADF table.


Cheers 🙂 Happy Learning

Monday 19 November 2018

Use Font Awesome 5 Icons in Oracle ADF Application

Font Awesome is a standard icon package that has a collection of lots of beautiful customizable icons. In this post, I'll describe how to use Font Awesome 5 Icons in the Oracle ADF Application.

You can check these posts to use Font Awesome's older version 4 in ADF

Font Awesome with ADF

Leveraging Icon Fonts (Font Awesome) in Oracle ADF - 500 New Icons for your app

I suggest you try the latest version 5 as the new version is written from scratch and has many new icons pack support.

Let's start the process to use Font Awesome 5 Icons in Oracle ADF

  • Create an ADF Application and a page under view controller project


  • Now add Font Awesome CSS file reference in the page using resource tag like this
  1. <af:resource type="css" source="https://use.fontawesome.com/releases/v5.5.0/css/all.css"/>
  • Drop af:icon on the page and search for the desired icon here, click on the icon and copy icon class name and put in style class property of af:icon. See in the below image icon class name is highlighted

    and it is used in ADF page like this (here I have added 4 icons for example)


and it is used in ADF page like this (here I have added 4 icons for example)

  1. <af:form id="f1">
  2. <af:spacer width="10" height="70" id="s1"/>
  3. <af:icon name="fab fa-apple" id="i1" styleClass="fab fa-apple"/>
  4. <af:spacer width="10" height="10" id="s2"/>
  5. <af:icon name="fab fa-android" id="i2" styleClass="fab fa-android"/>
  6. <af:spacer width="10" height="10" id="s3"/>
  7. <af:icon name="fab fa-codepen" id="i3" styleClass="fab fa-codepen"/>
  8. <af:spacer width="10" height="10" id="s4"/>
  9. <af:icon name="fas fa-car-side" id="i4" styleClass="fas fa-car"/>
  10. </af:form>
  • Now run and check the application, In the below image, you can see that icons are smaller in size


  • To increase icon size append fa-5x in style class of icon, Here you can change 5x to any value like 1x,2x etc.


  • And to change color of the icon just put CSS in the inline style property of af:icon like this
  1. <af:form id="f1">
  2. <af:spacer width="10" height="150" id="s1"/>
  3. <af:icon name="fab fa-apple" id="i1" styleClass="fab fa-apple fa-10x"/>
  4. <af:spacer width="10" height="10" id="s2"/>
  5. <af:icon name="fab fa-android" id="i2" styleClass="fab fa-android fa-10x" inlineStyle="color:green;"/>
  6. <af:spacer width="10" height="10" id="s3"/>
  7. <af:icon name="fab fa-codepen" id="i3" styleClass="fab fa-codepen fa-10x" inlineStyle="color:Tomato;"/>
  8. <af:spacer width="10" height="10" id="s4"/>
  9. <af:icon name="fas fa-car-side" id="i4" styleClass="fas fa-car fa-10x" inlineStyle="color: Dodgerblue;"/>
  10. </af:form>
and icons look like this now


All done :) You can see that Font Awesome icons look much better than png images and reduce the page load time.

Sample ADF Application - Download

Cheers ðŸ™‚ Happy Learning