Home Services Clients Careers News Blog Contact

You are here: Blog » Oracle ADF » ADF Calendar step-by-step implementation Search in blog GO

ADF Calendar step-by-step implementation Bogdan Petridean

August 27th, 2010 | Posted by Bogdan Petridean in Oracle ADF | No Comments

In what follows we shall provide an implementation for the af:calendar component.

ADFCalendar sample application – implemented using JDeveloper IDE version 11.1.1.3.0 – can be View all articles by this author (8)
downloaded from here.
Categories
The application uses an extended version of the HR database(contains a new table called
CALENDAR) which has been packed as a .sql script – AdfCalendarHRscript.sql – and stored within
the ADFCalendar application. Oracle ADF (33)
The script alone can be downloaded from here.

Database Authors

If you want to use the script to create the database follow the steps below: Anca Capatana (3)
1. Download AdfCalendarHRscript.sql Bogdan Petridean (8)

2. Drag & drop it into your JDevelopper IDE Delia Coman (2)

3. Open a new SQL Worksheet Dorin Simina (6)

4. Copy the content of the script and paste it into the worksheet Eniko Zsido (2)

Florian Leonard Gozman (4)

5. Press F5 to run the script.
Ioana Goga (3)
If you want to extend an existing database use the code below to create the CALENDAR table:
Pompei Avram (5)
01 CREATE TABLE CALENDAR
02 (

PDFmyURL.com
 03 ID VARCHAR2(20 CHAR) NOT NULL
04 , PROVIDER VARCHAR2(100 CHAR) NOT NULL Tag Cloud
05 , START_DATE DATE NOT NULL
06 , END_DATE DATE NOT NULL adf calendar ADF maps
07 , DESCRIPTION VARCHAR2(200 CHAR) NOT NULL
08 , CONSTRAINT CALENDAR_PK PRIMARY KEY autosuggest basic
09 ( authentication best practices
10 ID block ui calendar
11 ) clientListener combo box crud
12 ENABLE bounded task flow custom
13 )
search digital certificate
You can also choose to extend an existing table. In this case you need to add 5 new attributes: 3 drag and drop
strings – for the Activity Id , Activity Provider and Activity Title and 2 dates – for the Start Time and
dynamic page include e-
End Time of the activity; the names are not important, only the data types are.
conomic enterprise manager
Next, create a new FMW application or use an existing one and follow the steps below: exception handler filters
geographic map glass pane
Model implementation Google Maps Jasper job

Create a connection with the database and use it to create the CALENDAR Entity and View Object:
schedule keytool lov maps
MDS menu Metadata
New -> Business Tier -> ADF Business Components -> Business Components from Tables -> multiple choice ofm progress
CALENDAR – > Entity and Updatable VO indicator page security popup
progress indicator RCU
Open the Calendar entity and set the default value for StartDate attribute, as an expression, to
adf.currentDateTime and for EndDate to adf.currentDate+1.
reports repository REST
search selection
Also, the EndDate should allways be greater than the StartDate; this is done by adding a new SelectOneChoice
validator for the EndDate attribute:
serverListener simple search
status status indicator
table table filter task flows
security Timer task upload file

PDFmyURL.com
Open the Calendar VO and add 3 new bind variables as in the image below(only the data types are
important):

View Controller implementation

Business
Create a new java class, name it Business– contains the calendar business. Each method
implemented within this bean will be presented with respect to the visual component for which it
provides service.

Now, open adfc-config.xml -> Overview -> Managed Beans and set Business bean scope to request
as presented in the below image:

User Interface
Create a new .jspx web page, name it ”calendar” and follow the steps below:

Open Data Controls -> AppModuleDataControl and drag&drop the CalendarView as a Calendar onto
the newly created .jspx page:

PDFmyURL.com
The Calendar option will be available only if the view object is configured correctly: contains the
correct data types and the necessary bind variables; otherwise the Calendar option will not be
provided.

Configure it:

After Finish is pressed you will notice that the calendar binding and an ExecuteWithParams
operation have been added to the Bindings area of the .jspx page definition:

PDFmyURL.com
af:calendar is customized to show the list view by default, start day of the week will be Monday,
start hour is 9 AM and the list view will present activities for the last 356 days:

1 <af:calendar value="#{bindings.CalendarView1.calendarModel}" id="c1"

2 partialTriggers="cb3 ctb1" availableViews="all"
3 view="list" startDayOfWeek="mon" startHour="9"
4 listCount="356"
5 calendarActivityListener="#{Business.activityListener}">

The activityListener method is used in order to syncronize the CalendarViewIterator with the
af:calendar component. When an activity event occurs the CalendarViewIterator current row is
updated to match the selected activity in the UI:

01 public void activityListener(CalendarActivityEvent calendarActivityEvent) {

02 CalendarActivity activity =
03 calendarActivityEvent.getCalendarActivity();
04
05 if (activity != null) {
06 DCBindingContainer dcbindings =
07 (DCBindingContainer)BindingContext.getCurrent().getCurrentBindingsEntry();
08 DCIteratorBinding iterator =
09 dcbindings.findIteratorBinding("CalendarView1Iterator");
10 Key key = new Key(new Object[] { activity.getId() });
PDFmyURL.com
 11 RowSetIterator rsi = iterator.getRowSetIterator();
12 Row row = rsi.findByKey(key, 1)[0];
13 rsi.setCurrentRow(row);
14 }
15 }

The calendar component that we have just added to the page contains a set of facets that can be
customized to fulfill our needs.

Below, we have provided an implementation for each facet that the af:calendar component provides:

activityContextMenu facet – displays its child popup when right-click event is fired over an activity:

01 <f:facet name="activityContextMenu">
02 <af:popup id="p1">
03 <af:menu text="menu 1" id="m2">
04 <af:commandMenuItem text="Update activity" id="cmi1">
05 <af:showPopupBehavior popupId="p3" triggerType="click"/>
06 </af:commandMenuItem>
07 <af:commandMenuItem text="Delete activity" id="cmi2">
08 <af:showPopupBehavior popupId="p4" triggerType="click"/>
09 </af:commandMenuItem>
10 </af:menu>
11 </af:popup>
12 </f:facet>

The above showPopupBehaviour operation registers a click listener with the commandMenuItem
component for which is declared. As a result, when the click event occurs on a commandMenuItem
the popup pointed by the popupId attribute is displayed.

contextMenu facet – displays its child popup when right-click event is fired over an empty space
within the calendar:

1 <f:facet name="contextMenu">
2 <af:popup id="p2">
3 <af:menu text="menu 2" id="m3">
4 <af:commandMenuItem text="Create new activity" id="cmi3">
5 <af:showPopupBehavior popupId="p5" triggerType="click"/>
6 </af:commandMenuItem>
7 </af:menu>
8 </af:popup>
9 </f:facet>

activityDelete facet – for delete purposes:

PDFmyURL.com
 01 <f:facet name="activityDelete">
02 <af:popup id="p4">
03 <af:dialog closeIconVisible="false" modal="true"
04 id="pw_deleteAction" styleClass="allertBox"
05 type="none" title="Delete Activity">
06 ...
07 <f:facet name="buttonBar">
08 ...
09 <af:commandButton text="Yes"
10 actionListener="#{Business.onDelete}"
11 id="cb1"/>
12 <af:commandButton text="Cancel" id="cb2">
13 <af:resetActionListener/>
14 </af:commandButton>
15 ...
16 </f:facet>
17 </af:dialog>
18 </af:popup>
19 </f:facet>

When Yes commandButton is pressed the selected activity is deleted by calling onDelete method
from Business bean:

01 public void onDelete(ActionEvent actionEvent) {

02 BindingContainer bindings = getBindings();
03 OperationBinding operationBinding =
04 bindings.getOperationBinding("Delete");
05 operationBinding.execute();
06 if (operationBinding.getErrors().isEmpty()) {
07 operationBinding = bindings.getOperationBinding("Commit");
08 operationBinding.execute();
09 }
10 }

activityDetail facet – displays its child popup when left-click event is fired over an activity:

01 <f:facet name="activityDetail">
02 <af:popup id="p3" contentDelivery="lazyUncached"
03 binding="#{Business.updatePopup}">
04 <af:dialog closeIconVisible="false" modal="true"
05 id="pw_editAction" type="none" styleClass="cruBox"
06 title="Update Activity">
07 <f:facet name="buttonBar">
08 ...
09 <af:commandButton text="Save" id="cb3"
10 partialSubmit="true"

PDFmyURL.com
 11 actionListener="#{Business.onSave}"/>
12 <af:commandButton text="Undo" partialSubmit="true"
13 immediate="true"
14 actionListener="#{Business.onUndo}"
15 id="cb4">
16 <af:resetActionListener/>
17 </af:commandButton>
18 <af:commandButton text="Cancel" immediate="true"
19 actionListener="#{Business.onCancel}"
20 id="cb6" partialSubmit="true">
21 <af:resetActionListener/>
22 </af:commandButton>
23 ...
24 </f:facet>
25 <af:panelFormLayout id="pfl1">
26 ...
27 </af:panelFormLayout>
28 </af:dialog>
29 </af:popup>
30 </f:facet>

When Save commandButton is pressed onSave method is called:

01 public void onSave(ActionEvent actionEvent) {

02 BindingContainer bindings = getBindings();
03 OperationBinding operationBinding =
04 bindings.getOperationBinding("Commit");
05 operationBinding.execute();
06 if (operationBinding.getErrors().isEmpty()) {
07 if (actionEvent.getComponent().getId().equals("cb3")) {
08 hidePopup(getUpdatePopup());
09 } else {
10 hidePopup(getCreatePopup());
11 }
12
13 }
14 }

When Undo commandButton is pressed onUndo method is called:

01 public void onUndo(ActionEvent actionEvent) {

02 DCBindingContainer dcbindings =
03 (DCBindingContainer)BindingContext.getCurrent().getCurrentBindingsEntry();
04 DCIteratorBinding iterator =
05 dcbindings.findIteratorBinding("CalendarView1Iterator");
06 Row currentRow = iterator.getCurrentRow();
07
08 if (currentRow != null) {
PDFmyURL.com
 09 currentRow.refresh(Row.REFRESH_UNDO_CHANGES);
10 }
11 }

When Cancel commandButton is pressed onCancel method is called:

01 public void onCancel(ActionEvent actionEvent) {

02 DCBindingContainer dcbindings =
03 (DCBindingContainer)BindingContext.getCurrent().getCurrentBindingsEntry();
04 DCIteratorBinding iterator =
05 dcbindings.findIteratorBinding("CalendarView1Iterator");
06 Row currentRow = iterator.getCurrentRow();
07
08 if (actionEvent.getComponent().getId().equals("cb6")) {
09 if (currentRow != null) {
10 currentRow.refresh(Row.REFRESH_UNDO_CHANGES);
11 }
12 hidePopup(getUpdatePopup());
13 }
14
15 else {
16 BindingContainer bindings = getBindings();
17 OperationBinding operationBinding =
18 bindings.getOperationBinding("Delete");
19 operationBinding.execute();
20
21 hidePopup(getCreatePopup());
22 }
23 }

Cancel button has its immediate attribute set to “true” in order to avoid the validation process.

The partialSubmit attribute is set to “true” for all the above buttons because we use our hidePopup
custom method to close the popup(otherwise the button press event would close the popup):

1 public void hidePopup(RichPopup popup) {

2 FacesContext facesContext = FacesContext.getCurrentInstance();
3 ExtendedRenderKitService service =
4 Service.getRenderKitService(facesContext,
5 ExtendedRenderKitService.class);
6 service.addScript(facesContext,
7 "AdfPage.PAGE.findComponent('" + popup.getClientId(facesContext) +
8 "').hide();");
9 }

PDFmyURL.com
create facet – displays its child popup when left-click event is fired over an empty space within the
calendar:

01 <f:facet name="create">
02 <af:popup contentDelivery="lazyUncached" id="p5"
03 popupFetchListener="#{Business.onPopupFetch}"
04 binding="#{Business.createPopup}">
05 <af:dialog id="d2" type="none" title="Create Activity"
06 closeIconVisible="false">
07 <f:facet name="buttonBar">
08 ...
09 <af:commandToolbarButton text="Save" id="ctb1"
10 actionListener="#{Business.onSave}"/>
11 <af:commandToolbarButton text="Cancel" id="ctb2"
12 immediate="true"
13 actionListener="#{Business.onCancel}"/>
14 ...
15 </f:facet>
16 <af:panelFormLayout id="pfl3">
17 ...
18 </af:panelFormLayout>
19 </af:dialog>
20 </af:popup>
21 </f:facet>

The popupFetchListener attribute points to the onPoupFetch method, which is called when the
popup open event occurs. CreateInsert operation is executed upon the CalendarViewIterator to host
the new activity that is to be created(Create operation is not enough because the iterator doesn’t get
updated with the newly created row):

1 public void onPopupFetch(PopupFetchEvent popupFetchEvent) {

2 BindingContainer bindings = getBindings();
3 OperationBinding operationBinding =
4 bindings.getOperationBinding("CreateInsert");
5 operationBinding.execute();
6 }

When Save and Cancel buttons are pressed the same methods are called as in the case of
activityDetail facet(the context is resolved in the if statement).

The partialSubmit attribute is set to true by default in the case of commandToolbarButton

component and this can be seen by using the Property Inspector(default values are not shown in the
code).

activityHover facet – displays its child popup when mouse-over event is fired over an activity:

PDFmyURL.com
 1 <f:facet name="activityHover">
2 <af:popup id="p6" contentDelivery="lazyUncached">
3 <af:noteWindow id="nw1">
4 <af:panelFormLayout id="pfl2">
5 ...
6 </af:panelFormLayout>
7 </af:noteWindow>
8 </af:popup>
9 </f:facet>

The contentDelivery attribute value of the popup component must be set as presented above for
each popup.

For a complete description of all the customizations that the af:calendar component supports and
the business that comes embedded within the component check the link below:

http://download.oracle.com/docs/cd/E12839_01/web.1111/b31973/af_calendar.htm#CHDICFDG

Running the application

Open ADFCalendar OFM sample application in your JDevelopper IDE, navigate to calendar.jspx
page and run it.

After the application has been successfully deployed the following page will be loaded into your
browser:

PDFmyURL.com
We have customized af:calendar to display, by default, the list view (you can also choose day, week
and month) and to show the activities for the last 365 days.

Mouse over an activity displays a window with more details about that activity:

Right-click over an activity displays a menu:

PDFmyURL.com
Left-click onto an activity opens the update activity panel:

Right-click over an empty space within the calendar displays the create new activity option:

Left-click onto an empty space opens the create new activity panel:

The delete activity panel is displayed when Delete activity menu item is pressed:

PDFmyURL.com
 Leave a Reply

Name (required)

Mail (w ill not be published) (required)

Website

Submit Comment

© 1999-2010 Global e-Business Solutions. All rights reserved.

PDFmyURL.com