How to – Scheduling Gantt chart in ADF 11g

ADF 11g has many cool data visual components which are very useful. And I
was exploring one of them “Scheduling Gantt chart’. A Gantt chart is a graphical
representation of the duration of tasks against the progression of time. In ADF we
can create three types of Gantt charts:-

Project Gantt chart: - used to show the progress of a project task against time.
Resource utilization Gantt chart: - used to show the utilization of resources
against time.
Scheduling Gantt chart: - shows the schedule or utilization of resource against
progression of time. This post I am going to cover this type of Gantt chart only.

Problem summary; - In my office, we have many meeting rooms. Various project

teams keep booking the meeting rooms. But right now the process of booking the
meeting room is manual. If we can automate the meeting room booking system
where: -
 Project teams can book the meeting rooms
 Other teams can view the existing bookings
 Delete an already booked meeting
 Edit the meeting details

Sample application is here

I have created following two database tables “Rooms” and ‘Meetings’ for this:-

Rooms( Room id is primary key)

Meetings (meetings_id is primary key, Room id is reference to rooms table)

Step 1) Create an application based on fusion template.

Step 2) Create two entity objects based on above tables. And two view objects
based on the created entity objects. In the meetings entity object, for the
MeetingId attribute, un-check the mandatory propty.
Step 3) Create an application module and add the above two view objects in
application module to create the data control.
We need to add the room view object twice in the application module, one
will be used in Gantt chart and second to show the room list in drop down in
create meeting popup.

Step 4) Create a jspx page based on out of box provided Oracle Three column
layout template.
Step 5) Drop the RoomVO1 from data control palette and drop it on center facet.
And select GanttScheduling from context menu.
Step 6) Form the create scheduling Gantt chart window, select the following;-

Step 7) we will change the major and minor axis of the Gantt chart. By default
the major axis is weeks and minor axis is days. We will change the major axis to
days and minor axis to hours. You can change it by opening the created .jspx
page in “source’ view.

As per your requirement you can change it further. Possible values for the time
scale in given in ADF faces web user interface developer guide in section 28.8.3.
Step 8) Now we will change start time and end time of the minor axis. By default,
it will show the time from 24:00 hrs to 24:00hrs. So we will change it , so that time
in minor axis start from 8:00 hrs and ends at 18:00 hrs.
To achieve the same, create a managed bean and add two variables say
startTime and endTime with type java.util.Date and generate the getters and
setters of same. And bind the created variable with the startTime and endTime
property of the created scheduled Gantt chart.

Also set the horizontalGridVisible property of the Gantt chart to true. You can run
your application to check if every this is fine till now or not. But you will see,still
the menu bar and toolbar components of the Gantt chart is not enabled.

Step 9) We will enable our application so that we can create meetings. When
user will select TaskCreate, we will show a popup to user where he will give
details about the meeting.

9.1) Select popup component from the component palette and drop it on af:form.
Set the contentDelivery property of popup to lazyuncached. Setting this property
will refresh popup contents every time it’s shown. Thanks to Krithika on OTN to
help to identify this. By default the property is set to lazy, which means popup will
show the contents only first request to popup is finished. Because of which
popup was giving weird behavior.

And select the dialog component from component palette and drop it as a child of
the above popup. Set the type property of the dialog to “Cancel”. This will add a
cancel button on the popup.

9.2) From the data control palette, select MeetingVO1 and drop it on above
created dialog component and select FormADF form from context menu.
Click ok on the Edit Form field. Set the required property of the meetings id input
text to true.

9.3) Select the af:convertDateTime under both the af:inputDate components and
set the type property of it to “both”. This will allow the user to select the time from
the date picker popup.

9.4) Select the room id input text from the above created adf form and delete it.
Now select the Room id from MeetingVO1 and drop it on the af;formLayout and
select Single SelectionADF Select one choice from context menu.
9.5) Select following from the Edit List binding popup.
9.6) Go to the page definition of the jspx page and add the “create” and
“commit” action binding based on MetingsVO1.

10) bind the dataChangeListener property of the schedule Gantt chart with a
method in above created backing bean.
This method will be called when user will click on create Task or Create resource
menu options from Gantt chart toolbar. And add the code to handle the create
meeting.

This code will create a new row in meeting view object and will open the above
created popup after that.

11) In the button bar facet of the dialog, add a command buttons, Save and set
action and partialSubmit property for save button to true.

12) In your backing bean add code which will do needful action when user will
click on the create and update edit in Gantt chart toolbar.

13) Set the partialTriggers property of the schedule Gantt chart to Save
command button.

14) Set the popupCanceledListener property of the popup component, so that

when user cancel the create/update meeting, we can undo the changes done at
view level.

15) Setting the tooltipKeyLabels and tooltipKeys properties at the scheduling

gantt chart level will show the meeting contents when you hover over the icon on
task.