How to Configure the Calendar Component

Creating a Calendar Application 15-9 additional functionality, see Section 15.4, Adding Functionality Using Popup Components. The calendar also supports events that are fired when certain changes occur. The CalendarActivityDurationChangeEvent is fired when the user changes the duration of an activity by dragging the box that displays the activity. The CalendarDisplayChangeEvent is fired whenever the component changes the value of a display attribute, for example when the view attribute changes from month to day. When a CalendarDisplayChangeEvent is fired, the calendar component adds itself as a partial page rendering PPR target, allowing the calendar to be immediately refreshed. This is because the calendar assumes that if the display changed programatically, then the calendar must need to be rerendered. For example, if a user changes the view attribute from day to month, then the calendar is rerendered automatically.

15.4 Adding Functionality Using Popup Components

When a user acts upon an activity, a CalendarActivityEvent is fired. This event causes the popup component contained in a facet to be displayed, based on the user’s action. For example, if the user right-clicks an activity, the CalendarActivityEvent causes the popup component in the activityContextMenu to be displayed. The event is also delivered to the server, where a configured listener can act upon the event. You create the popup components for the facets or if you do not want to use a popup component, implement the server-side listener. It is in these popup components and facets where you can implement functionality that will allow users to create, delete, and edit activities, as well as to configure their instances of the calendar. Table 15–1 shows the different user actions that invoke events, the event that is invoked, and the associated facet that will display its contents when the event is invoked. The table also shows the component you must use within the popup component. You create the popup and the associated component within the facet, along with any functionality implemented in the handler for the associated listener. If you do not insert a popup component into any of the facets in the table, then the associated event will be delivered to the server, where you can act on it accordingly by implementing handlers for the events. Table 15–1 Calendar Faces Events and Associated Facets User Action Event Associated Facet Component to Use in Popup Right-click an activity. CalendarActivity Event activityContextMenu: The enclosed popup component can be used to display a context menu, where a user can choose some action to execute against the activity, for example edit or delete. menu Select an activity and press the Delete key. CalendarActivity Event activityDelete: The enclosed popup component can be used to display a dialog that allows the user to delete the selected activity. dialog 15-10 Web User Interface Developers Guide for Oracle Application Development Framework

15.4.1 How to Add Functionality Using Popup Components

To add functionality, create the popups and associated components in the associated facets. To add functionality using popup components: 1. In the Structure window, expand the af:calendar component node so that the calendar facets are displayed, as shown in Figure 15–6 . Figure 15–6 Calendar Facets in the Structure Window

2. Based on

Table 15–1 , 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. For more information about creating popup components, see Chapter 13, Using Popup Dialogs, Menus, and Windows. Click or double-click an activity, or select an activity and press the Enter key. CalendarActivity Event activityDetail: The enclosed popup component can be used to display the activity’s details. dialog Hover over an activity. CalendarActivity Event activityHover: The enclosed popup component can be used to display high-level information about the activity. noteWindow Right-click the calendar not an activity or the toolbar. CalendarEvent contextMenu: The enclosed popup component can be used to display a context menu for the calendar. menu Click or double-click any free space in the calendar not an activity. CalendarEvent create: The enclosed popup component can be used to display a dialog that allows a user to create an activity. dialog Table 15–1 Cont. Calendar Faces Events and Associated Facets User Action Event Associated Facet Component to Use in Popup Creating a Calendar Application 15-11 Example 15–1 shows the JSF code for a dialog popup component used in the activityDelete facet. Example 15–1 JSF Code for an Activity Delete Dialog f:facet name=activityDelete af:popup id=delete contentDelivery=lazyUncached -- dont render if the activity is null -- af:dialog dialogListener={calendarBean.deleteListener} affirmativeTextAndAccessKey=Yes cancelTextAndAccessKey=No rendered={calendarBean.currActivity = null} af:outputText value=NOTE: This popup is for demo purposes only, it is not part of the built in functionality of the calendar. af:spacer height=20 af:outputText value=Are you sure you want to delete this activity? af:panelFormLayout af:inputText label=Title value={calendarBean.currActivity.title} readOnly=true af:inputDate label=From value={calendarBean.currActivity.from} readOnly=true af:convertDateTime type=date dateStyle=short timeZone={calendarBean.timeZone} pattern={calendarBean.currActivity.dateTimeFormat} af:inputDate af:inputDate label=To value={calendarBean.currActivity.to} readOnly=true af:convertDateTime type=date dateStyle=short timeZone={calendarBean.timeZone} pattern={calendarBean.currActivity.dateTimeFormat} af:inputDate af:inputText label=Location readOnly=true rendered={calendarBean.currActivity.location = null} value={calendarBean.currActivity.location} af:panelFormLayout af:dialog af:popup f:facet Figure 15–7 shows how the dialog is displayed when a user clicks an activity and presses the Delete key. Figure 15–7 Delete Activity Dialog

3. Implement any needed logic for the calendarActivityListener. For

example, if you are implementing a dialog for the activityDeleteFacet, then implement logic in the calendarActivityListener that can save-off the current activity so that when you implement the logic in the dialog listener in the next step, you will know which activity to delete. Example 15–2 shows the calendarActivityListener for the calendar.jspx page in the ADF Faces demo application.