How to Add Functionality Using Popup Components

Creating a Calendar Application 15-13 Figure 15–9 Customized Toolbar for a Calendar

15.5.1 How to Customize the Toolbar

Place the toolbar and toolbar buttons you want to add in custom facets that you create. Then, reference the facet or facets from an attribute on the toolbar, along with keywords that determine how or where the contained items should be displayed. To customize the toolbar: 1. In the JSF page of the Component Palette, from the Core panel, drag and drop a Facet for each section of the toolbar you want to add. For example, to add the custom buttons shown in Figure 15–9 , you would add four facet tags. Ensure that each facet has a unique name for the page. 2. In the ADF Faces page of the Component Palette, from the Common Components panel, drag and drop a Toolbar to each facet and add toolbar buttons and configure the buttons and toolbar as needed. For more information about toolbars and toolbar buttons, see Section 14.3, Using Toolbars. 3. In the Property Inspector, from the dropdown menu next to the toolboxLayout attribute, choose Edit. 4. In the Edit Property: ToolboxLayout dialog set the value for this attribute. It should be a list of the custom facet names, in the order in which you want the contents in the custom facets to appear. In addition to those facets, you can also include all, or portions of the default toolbar, using the following keywords: ■ all: Displays all the toolbar buttons and text in the default toolbar ■ dates: Displays only the previous, next, and today buttons ■ range: Displays only the string showing the current date range ■ views: Displays only the buttons that allows the user to change the view For example, if you created two facets named customToolbar1 and customToolbar2, and you wanted the complete default toolbar to appear in between your custom toolbars, the value of the toolboxLayout attribute would be the following list items: Tip: To ensure that there will be no conflicts with future releases of ADF Faces, start all your facet names with customToolbar. For example, the section of the toolbar that contains the alignment buttons shown in Figure 15–9 are in the customToolbarAlign facet. Note: If you use the all keyword, then the dates, range, and views keywords are ignored. 15-14 Web User Interface Developers Guide for Oracle Application Development Framework ■ customToolbar1 ■ all ■ customToolbar2 You can also determine the layout of the toolbars using the following keywords: ■ newline: Places the toolbar in the next named facet or the next keyword from the list in the toolboxLayout attribute on a new line. For example, if you wanted the toolbar in the customToolbar2 facet to appear on a new line, the list would be: – customToolbar1 – all – newline – customToolbar2 If instead, you did not want to use all of the default toolbar, but only the views and dates sections, and you wanted those to each appear on a new line, the list would be: – customToolbar1 – customToolbar2 – newline – views – newline – dates ■ stretch: Adds a spacer component that stretches to fill up all available space so that the next named facet or next keyword from the default toolbar is displayed as right-aligned in the toolbar. Example 15–3 shows the value of the toolboxLayout attribute for the toolbar displayed in Figure 15–9 , along with the toolbar placed in the customToolbarAlign facet. Note that the toolbar buttons displayed in the customToolbarBold facet are right-aligned in the toolbar because the keyword stretch is named before the facet. Example 15–3 Value for Custom Toolbar af:calendar binding={editor.component} id=calendar1 value={calendarBean.calendarModel} timeZone={calendarBean.timeZone} toolboxLayout=customToolbarAlign all customToolbarTZ stretch customToolbarBold newline customToolbarCreate . . . f:facet name=customToolbarAlign af:toolbar af:commandToolbarButton id=alignLeft shortDesc=align left icon=imagesalignleft16.png type=radio selected=true af:commandToolbarButton id=alignCenter shortDesc=align center icon=imagesaligncenter16.png type=radio selected=false af:commandToolbarButton id=alignRight shortDesc=align right icon=imagesalignright16.png type=radio selected=false af:toolbar Creating a Calendar Application 15-15 f:facet . . . af:calendar

15.6 Styling the Calendar

Like other ADF Faces components, the calendar component can be styled as described in Chapter 20, Customizing the Appearance Using Styles and Skins. However, along with standard styling procedures, the calendar component has specific attributes that make styling instances of a calendar easier. These attributes are: ■ activityStyles: Allows you to individually style each activity instance. For example, you may want to show activities belonging to different providers in different colors. ■ dateCustomizer: Allows you to display strings other than the calendar date for the day in the month view. For example, you may want to display countdown or countup type numbers, as shown in Figure 15–10 . This attribute also allows you to add strings to the blank portion of the header for a day. Figure 15–10 Customized Display of Dates in a Calendar

15.6.1 How to Style Activities

The activityStyles attribute uses InstanceStyles objects to style specific instances of an activity. The InstanceStyles class is a way to provide per-instance inline styles based on skinning keys. The most common usage of the activityStyles attribute is to display activities belonging to a specific provider using a specific color. For example, the calendar shown in Figure 15–11 shows activities belonging to three different providers. The user can change that color used to represent a provider’s activities in the left panel. The activityStyles attribute is used to determine the color displayed for each activity, based on the provider with which it is associated.