Working With ADF Faces Calendar Component

Working with ADF Faces Calendar

Component

An Oracle JDeveloper How To Document

Written by Dana Singleterry, Oracle Corporation

July, 2009

Introduction

Oracle JDeveloper 11g Release 1 has a number of new features and this How To Document

highlights the new ADF Calendar Component and includes a sample application to

demonstrate use of the component.

The ADF Faces calendar component displays created activities in daily, weekly, monthly,

or list view for a given provider or providers where the provider is the owner of an activity.

ADF Faces Calendar Showing Weekly View

The calendar component also includes the following functionality:

A toolbar that allows users to switch between monthly, weekly, daily, and list

views.

Configurable start of the week days and start of the day hours.

Configurable styles using skinning keys.

Additionally, you can implement the following functionality using other ADF Faces

components and the rich client framework:

Popup functionality.

Drag and drop cabability.

Toolbar customization.

Skinning

Software Requirements

JDeveloper 11g Release 1 (11.1.1.1.0).

Download included schema and unzip the archive. Create a user in your database

with the credentials of fod/fusion. Load the schema in an XE database for example

via a command line as follows: imp fodcal.dmp. Use the user fod/fusion when

prompted. Alternatively , you can download the fodcalendar.zip sql script and unzip

the archive. This still requires the creation of the user fod/fusion and then you can

load the fodcalendar sql script through sqlplus.

Download sample application and unzip the archive.

Oracle XE database or equivalent.

Data Model Requirements

An ADF Faces Calendar component must be bound to a CalendarModel class. This

class can be created for you when you use ADF Business Components to manage

your calendar's data. For example, say you have data in your data store that

represents the details of an activity, such as the date, time, title, location, and owner.

When you create an entity object to represent that data, and then a view object to

display the data, you can drag and drop the associated collection from the Data

Controls panel to create the calendar. JDeveloper will declaratively create the model

and bind the view to that model so that the correct data will display when the

calendar is launched. However, in order for the model to be created, your Business

Components must contain certain attributes, and your view object must contain

certain variables that will be used to modify the query to use named bind variables

that represent the date range and current time zone to display. This will allow the

query to return only the activities that should be displayed in the given view of the

calendar. For specifics on required and optional attributes for the Entity Object as

well as required bind variables for the View Object please refer to the Oracle Fusion

Middleware Developer's Guide for Oracle Application Development Framework

11g Release 1 (11.1.1.1.0).

Note: A Calendar can also be based on a non ADF BC data source. For further information

please review the Oracle Fusion Middleware Web User Interface Developer's Guide for

Oracle Application Development Framework 11 g Release 1 (11.1.1.1.0)

Using the ADF Faces Calendar component: Create business components

based on your data source

If you haven't already created an application workspace then do so now and give it an

appropriate name. This should be a Fusion Web Application (ADF). For the model Default

package name give it something like oracle.otn.adf.sample.model. Likewise, for the view

Default package name, give it something like oracle.otn.adf.sample.view. After creating the

application workspace proceed to creating a entity and view object based on the

fod_cal_event schema. This is done by right selecting on the Model project and selecting

new from context followed by selecting the ADF Business Components in the Business

Tier node and Business Components from Tables.

Create the Connection to the schema for the calendar.

Query the schema and shuttle the FOD_CAL_EVENT schema from the available to the

selected tables for the Entity Object. Note that their are Required Attributes for a Calendar

and they can be found in the Oracle Fusion Middleware Developer's Guide for Oracle

Application Development Framework 11g Release 1 (11.1.1.1.0). Also note that an

application module is required in order to create and expose the data control to the view of

the calendar application.

The Summary of Create Business Components from Tables page should resemble the

following:

Select Finish.

Now you can proceed to additional requirements and modifications to the EO Business

Component just created such as ensuring that EID is the primary key by right selecting on

the FODCALEVENTEO EO and selecting Open from context. This may require deleteing

a default created primary key of rowID. Select the Attributes Tree Item for the

FodCalEventEO and right selecting Eid and selecting Edit from context. Ensure that the

Primary Key is selected.

Now proceed with creating the Updateable View Object by right selecting on the

FodCalEventEO withing the Application Navigator and selecting New Default View Object

from context

After creating the associated view object various enhancements are needed such as

assigning a random value to the primary key if an insert is performed, creation of required

bind variables, and additional attributes that can be used to add events. The first thing is to

open the view object for editing and select Attributes from the Tree. Right select the

primary key of Eid and select Edit from context.. Add the following expression which will

create a unique value for Eid upon insert of a new event.

Ensure that the Default Value Type in the Property Inspector for Eid is set to Expression.

(Eid==null?UUID.randomUUID().toString():Eid)

Now a few attributes that will be utilized when adding events to the calendar will be created

in the View Object. Select the Attributes node within the Tree for FodCalEventVO and add

the following attributes:

Name Type Column Info

Recurring String Transient

TimeType String Transient

AllDay Boolean Transient

Add the following Named bind variable that will be used in the SQL query of this view

object.

Name Type Default Info

Tz String

StartDayTime Timestamp

EndDayTime Timestamp

Right select the TimeZone (Tz) variable, and select Edit from context. Add the following

expression and ensure the Value Type is set to Expression. This is to get the current

timezone for the calendar in use.

TimeZone.getDefault().getID()

The Entity and View Object are complete at this point, however, the Application Module

needs the View Object added to it Data Model Components. Open the

FODADFCalAppModule and select the Data Model node in the Tree. Select the

FodCalEventVO and shuttle it from the Available View Objects to the Data Model and

rename it to FodCalEventVO. Shuttle it over a second time for the insert operation and

name it FodCalEventVOInsert.

At this point the entity and view objects based on the provided calendar schema, including

required attributes, have been created along with the required bind variables. Now the

calendar component can be added to a JSF page, further configured, and additional

functionality can be added if desired. In the next section, additional logic will be added to a

managed bean containing logic for the calendar, activities, and providers along with popup

functionality for the basic CRUD operations.

Creating the View for your Calendar

The busiiness components have been created and while not required, a Task Flow with a

view will be created so that this calendar implementation can be reused. Additionally,

popup functionality will be added for basic CRUD operations. Right select on the

ViewController project and select new from context. Select the Web Tier node followed by

JSF in the Tree and ADF Task Flow from the Items.

Select ADF Task Flow from the Component Palette drop down and within the Components

accordion drag and drop a View on to the task flow and give it the name of calendar.

Double click on the calendar View to create the new JSF page fragment.

Now the calendar can be created and configured. Expand the Data Controls accordion and

drag the collection that represents the view object for the activity created above

(FodCalEventVO) and drop it as a Calendar.

Configure the calendar to utilize the schema attributes and select Finish. Further

configuring of the calendar will be done through the Bindings section of the calendar.jsff

page fragment.

Once the calendar has been created select the bindings tab in the editor of the calendar.jsff

page fragment and ensure that the Model resembles the following:

The following Executables and Bindings will have to be added to the Page DataBinding

Definition as illustarted above.

Executables: Add the following Iterator

FodCalEventVOInsertIterator

Bindings: Add the following actions, attributesValues, and buttons all from the

FODADFCalAppModuleDataControl.FodCalEventVOInsert

CreateInsert (action)

Commit (action)

Rollback (action)

Eid1 (attributeValues)

CommunityId1 (attributeValues)

Summary1 (attributeValues)

StartTime1 (attributeValues)

EndTime1 (attributeValues)

Location1 (attributeValues)

IsAllDayEvent1 (attributeValues)

IsAllDayEvent (button)

Create the Managed Bean. The Managed Bean contains the logic for the calendar, activities

and the providers. The class itself is provided in the Application workspace that can be

downloaded so all the details around the logic are left for the reader to review. Also

provided are a couple of Utility classes ( ADFUtils.java and JSFUtils.java) that the

Managed Bean utilizes.

Now that the Managed Bean has been created, open the calendar-task-flow.xml and select

the Managed Beans node of the Tree. Add the Managed Bean to the calendar-task-flow.xml

Managed Beans section .

Add Functionality using popup

components

The basic functionality for the calendar has been created but now popup features will be

included for the CRUD operations. This is done by creating the popups and associated

components in the associated facets.

In the Structure window, expand the calendar component node so that the calendar facets

are displayed.

Based on Table 15-1 of the Fusion Middleware Web User Interface Developer's Guide for

Oracle Application Development Framework, create popup components in the facets that

correspond to the user actions for which you want to provide functionality. For example, if

you want users to be able to delete an activity by clicking it and pressing the Delete key,

you add a popup dialog to the activityDelete facet.

To add a popup component, right-click the facet in the Structure window and choose Insert

inside facetName > ComponentName. In this case, a popup for creating a new event is

being created so this is done by inserting inside of the create facet.

A second popup editing and deleting calendar events is also utilized in the sample calendar

application provided and that is created inside of the activityDetail facet. The details are left

to the reader and can be reviewed by referring to the source in the calendar.jsff page

fragment. For more information about creating popup components, see Chapter 13, "Using

Popup Dialogs, Menus, and Windows".

Implement any needed logic for the calendarActivityListerner. For example, if you are

implementing a dialog for the activityDetail facet, then implement logic in the

calendarActivityListener that can save-off the current activity so that you will know which

activity to delete. As before, the details are in the code in the CalendarBean Managed Bean

and are left to the reader to review.

Save your work at this point and create a jsf xml document and give it an appropriate name

such as index.jspx. Drop the calendar-task-flow onto the index.jspx page and create it as a

Region.

Run the Calendar Application.

To run the application simply right click on the index.jspx page and select Run from

context. This packages up the application, starts up the integrated WebLogic server and

deploy the application to the server so that you can test your work. Click anywhere in the

calendar and a popup dialog will appear to create an event. Also, experiment with the

various views that are provided by default with the calendar component.

Select an existing event to update or delete.