How to Create and Use Toolbars

14-18 Web User Interface Developers Guide for Oracle Application Development Framework ■ Text : Enter the label for this toolbar button. ■ Action : Use an EL expression that evaluates to an action method in an object such as a managed bean that will be invoked when a user presses this button. The expression must evaluate to a public method that takes no parameters, and returns a java.lang.Object object. If you want to cause navigation in response to the action generated by the button, instead of entering an EL expression, enter a static action outcome value as the value for the action attribute. You then must set either partialSubmit to false, or use a redirect. For more information about configuring navigation, see Section 2.3, Defining Page Flows. ■ ActionListener : Specify the expression that refers to an action listener method that will be notified when a user presses this button. This method can be used instead of a method bound to the action attribute, allowing the action attribute to handle navigation only. The expression must evaluate to a public method that takes an ActionEvent parameter, with a return type of void.

6. Expand the Appearance section and set the following properties:

■ HoverIcon : Use the dropdown list to select the icon to display when the mouse cursor is directly on top of this toolbar button. If the icon is not in this menu, use the dropdown menu to the right of the list to choose Edit, and browse to select the icon. ■ DepressedIcon : Use the dropdown list to select the icon to display when the toolbar button is activated. If the icon is not in this menu, use the dropdown menu to the right of the list to choose Edit, and browse to select the icon.

7. Expand the Behavior section and set ActionDelivery to none if you do not want

to fire an action event when the button is clicked. This is useful if you want the button to simply open a popup window. If set to none, you must have a popup component in the popup facet of the toolbar button see Step 8, and you cannot have any value set for the action or actionListener attributes. Set to clientServer attribute if you want the button to fire an action event as a standard command component 8. To have a toolbar button invoke a popup menu, insert a menu component into the popup facet of the commandToolbarButton component. For information, see Section 14.2.1, How to Create and Use Menus in a Menu Bar. 9. If you want a toolbar to stretch so that it equals the width of the containing parent component, set stretchId to be the ID of the component within the toolbar that should be stretched. This one component will stretch, while the rest of the components in the toolbar remain a static size. For example, in the File Explorer application, the inputText component that displays the selected folder’s name is the one that should stretch, while the outputText component that displays the words Current Folder remains a static size, as shown in Example 14–6 . Example 14–6 Using the stretchId Attribute af:toolbar id=headerToolbar2 flex=2 stretchId=pathDisplay af:outputText id=currLocation noWrap=true value={explorerBundle[menuitem.location]} af:inputText id=pathDisplay simple=true inlineStyle=width:100 contentStyle=width:100 binding={explorer.headerManager.pathDisplay} value={explorer.headerManager.displayedDirectory} Using Menus, Toolbars, and Toolboxes 14-19 =true validator={explorer.headerManager.validatePathDisplay} af:toolbar You can also use the stretchId attribute to justify components to the left and right by inserting a spacer component, and setting that component ID as the stretchId for the toolbar, as shown in Example 14–7 . Example 14–7 Using a Spacer to Justify Toolbar Components af:toolbar flex=1 stretchId=stretch1 af:commandToolbarButton text=Forward icon=imagesfwdarrow_gray.gif disabled=trueaf:commandToolbarButton af:commandToolbarButton icon=imagesuplevel.gif -- Insert a stretched spacer to push subsequent buttons to the right -- af:spacer id=stretch1 clientComponent=true af:commandToolbarButton text=Reports af:commandToolbarButton id=toggleRefresh text=Refresh:OFF af:toolbar

14.3.2 What Happens at Runtime: Determining the Size of Menu Bars and Toolbars

When a page with a menu bar or toolbar is first displayed or resized, the space needed for each bar is based on the value of the bar’s flex attribute. The percentage of size allocated to each bar is determined by dividing its flex attribute value by the sum of all the flex attribute values. For example, say you have three toolbars in a toolbox, and those toolbars are grouped together to display on the same line. The first toolbar is given a flex attribute value of 1, the second toolbar also has a flex attribute value of 1, and the third has a flex attribute value of 2, giving a total of 4 for all flex attribute values. In this example, the toolbars would have the following allocation percentages: ■ Toolbar 1: 14 = 25 ■ Toolbar 2: 14 = 25 ■ Toolbar 3: 24 = 50 Once the allocation for the bars is determined, and the size set accordingly, each element within the toolbars are placed left to right. Any components that do not fit are placed into the overflow list for the bar, keeping the same order as they would have if displayed, but from top to bottom instead of left to right.

14.3.3 What You May Need to Know About Toolbars

Toolbars are supported and rendered by parent components such as panelHeader, showDetailHeader, and showDetailItem, which have a toolbar facet for adding toolbars and toolbar buttons to section headers and accordion panel headers. Note: If the application is configured to read right to left, the toolbars will be placed right to left. For more information, see Section A.6.2.6, Language Reading Direction. 14-20 Web User Interface Developers Guide for Oracle Application Development Framework Note the following points about toolbars at runtime: ■ A toolbar and its buttons do not display on a header if that header is in a collapsed state. The toolbar displays only when the header is in an expanded state. ■ When the available space on a header is less than the space needed by a toolbar and all its buttons, ADF Faces automatically renders overflow icons that allow users to select hidden buttons from an overflow list. ■ Toolbars do not render on printable pages. 15 Creating a Calendar Application 15-1 15 Creating a Calendar Application This chapter describes how to use the ADF Faces calendar component to create a calendar application. This chapter includes the following sections: ■ Section 15.1, Introduction to Creating a Calendar Application ■ Section 15.2, Creating the Calendar ■ Section 15.3, Configuring the Calendar Component ■ Section 15.4, Adding Functionality Using Popup Components ■ Section 15.5, Customizing the Toolbar ■ Section 15.6, Styling the Calendar

15.1 Introduction to Creating a Calendar Application

ADF Faces includes a calendar component that by default displays created activities in daily, weekly, monthly, or list views for a given provider or providers a provider is the owner of an activity. Figure 15–1 shows an ADF Faces calendar in weekly view mode with some sample activities. Figure 15–1 ADF Faces Calendar Showing Weekly View You can configure the calendar so that it only displays a subset of those views. For example, you may not want your calendar to use the month and list views. You can 15-2 Web User Interface Developers Guide for Oracle Application Development Framework configure it so that only the day and week views are available, as shown in Figure 15–2 . Because only day and week views are available, those are the only buttons displayed in the toolbar. Figure 15–2 Calendar Configured to Use Only Week and Day Views By default, the calendar displays dates and times based on the locale set in the trinidad-config.xml file for example, Section A.6, Configuration in trinidad-config.xml . If a locale is not set in that file, then it is based on the locale sent by the browser. For example, in the United States, by default, the start day of the week is Sunday, and 2 p.m. is shown as 2:00 PM. In France, the default start day is Monday, and 2 p.m. is shown as 14:00. The time zone for the calendar is also based on the setting in trinidad-config.xml. You can override the default when you configure the calendar. For more information, see Section 15.3, Configuring the Calendar Component. The calendar uses the CalendarModel class to display the activities for a given time period. You must create your own implementation of the model class for your calendar. If your application uses the Fusion technology stack, then you can create ADF Business Components over your data source that represents the activities, and the model will be created for you. You can then declaratively create the calendar, and it will automatically be bound to that model. For more information, see the Using the ADF Faces Calendar Component section of the Oracle Fusion Middleware Fusion Developers Guide for Oracle Application Development Framework. If your application does not use the Fusion technology stack, then you create your own implementation of the CalendarModel class and the associated CalendarActivity and CalendarProvider classes. The classes are abstract classes with abstract methods. You must provide the functionality behind the methods, suitable for your implementation of the calendar. For more information, see Section 15.2, Creating the Calendar. The calendar includes a toolbar with built-in functionality that allows a user to change the view between daily, weekly, monthly, or list, go to the previous or next day, week, or month, and return to today. The toolbar is fully customizable. You can choose which buttons and text to display, and you can also add buttons or other components. For more information, see Section 15.5, Customizing the Toolbar.