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 GanttScheduling 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 TaskCreate, 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 FormADF 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 SelectionADF 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.