This chapter describes the visual editor for creating ADF skins, the Selector Tree that you use to browse the items that you can configure in an ADF skin, the Property Inspector that you use to set properties, and how you can navigate to an ADF skin that you extend.
This chapter includes the following sections:
Section 3.4, "Navigating to the ADF Skins That Your ADF Skin Extends"
Section 3.8, "Working with the Overview Editor in the ADF Skin Editor"
The ADF Skin Editor provides a range of features that facilitate the creation and modification of ADF skins. The following list, for which each item has a corresponding label number in Figure 3-2, describes the individual features that the editor exposes when you create an ADF skin, as described Section 4.4, "Creating an ADF Skin File":
The Projects node in the Application Navigator contains a node named skins where the source files for the ADF skins that you create are stored. The skins node is not created until after you create the first ADF skin, as described in Chapter 4, "Creating the Source Files for an ADF Skin."
The Structure window lists the selectors, global selector aliases, and style classes that you add to the ADF skin file.
For more information, see Chapter 2, "Working with ADF Skin Selectors."
Click the Hide/Show Divider icon to hide or show the Selector Tree.
Filter the selectors that appear in the Selector Tree to display all selectors (Available Selectors) or only those that you modified in the ADF skin (Updated Selectors).
The Extended Skins list displays the list of ADF skins from which the current ADF skin extends.
For more information, see Section 3.4, "Navigating to the ADF Skins That Your ADF Skin Extends."
Use the Add icon to create a new style class or alias selector.
For more information about creating a new style class, see Chapter 9, "Working with Style Classes." For information about creating an alias selector, see Chapter 8, "Working With Global Selector Aliases."
Use the Delete icon to remove a selector that you added to the ADF skin.
Click the Refresh icon to update the Preview Pane after you make changes to the properties of a selector in the Property Inspector.
Click the Add Pseudo-Class icon to apply a pseudo-class to the item that you selected in the Selector Tree.
For more information about pseudo-classes, see Section 2.2, "Pseudo-Classes in the ADF Skinning Framework."
Click the Clear Property Settings icon to undo any change that you made to the item selected in the Selector Tree.
Click the Delete Pseudo-Class from Skin File icon to delete any pseudo-classes that you specified in the ADF Skin.
The View as list allows you to preview how changes you make to a global selector alias in the Selector Tree affect the components that reference the global selector alias. The View as list displays all components that reference the global selector alias. The View as list also allows you to preview how changes you make to the properties of one component-specific selector impact all sub-types of that component. For example, Figure 3-1 shows the ADF Data Visualization component selector for the graph
component (af|dvt-graph
) that exposes a single set of component-specific selectors that apply changes to all graph types. Use the View as list to preview a change that you make to a selector in one of the other types of graph (for example, Bar, Funnel, Pareto, and so on).
For more information about global selector aliases, Chapter 8, "Working With Global Selector Aliases."
The Selector Tree displays the list of selectors, global selector aliases, and style classes that you can configure values for in an ADF skin.
For more information, see Section 3.2, "Working with the Selector Tree.".
The Preview Pane renders a preview of the changes that you make to a selector in an ADF skin after you click the Refresh icon (8).
You can also view the source of an ADF skin file.
Tip:
Select Split Document from a context menu that you can invoke from the Preview Pane to render the source and design views of an ADF skin side by side.The Property Inspector identifies properties that you can configure for the ADF skin.
For more information, see Section 3.3, "Working with the Property Inspector."
The tabs for themes allow you to preview changes that you make for supported themes.
For more information, see Section 5.6, "Applying Themes to ADF Faces Components."
The Images window helps you manage the images that you want to use with an ADF skin.
For more information, see Section 6.3, "Working with the Images Window."
The Selector Tree displays a list of the style classes, global selector aliases, and selectors for which you can configure properties to change the appearance of ADF Faces and ADF Data Visualization components.
Figure 3-3 shows the nodes that the Selector Tree exposes:
Style Classes
A style class defines one or more style properties that you can apply to specific instances of a component. The Selector Tree categorizes the inherited style classes into style classes defined for general usage, note windows, and popups. For more information, see Chapter 9, "Working with Style Classes."
Global Selector Aliases
A global selector alias defines style properties that you apply to one or more selectors. The Selector Tree categorizes the inherited global selector aliases into selector aliases defined for general usage, icons, and messages. For more information, see Chapter 8, "Working With Global Selector Aliases."
Grouped Selectors
Identifies style properties grouped into one declaration to apply to more than one selector. For example, Figure 3-3 shows a grouped selector for the commandImageLink
and goImageLink
component's selectors.
Faces Component Selector
Selectors identify the ADF Faces components for which you can configure properties. The Selector Tree displays subcategories for pseudo-elements, component selector aliases, and descendant selectors. For brevity, the ADF Faces components node is not expanded. For more information, see Chapter 5, "Working with Component-Specific Selectors."
Data Visualizations Component Selectors
Selectors identify the ADF Data Visualization components for which you can configure properties. The Selector Tree displays subcategories for pseudo-elements, component selector aliases, and descendant selectors. For more information, see Chapter 5, "Working with Component-Specific Selectors."
The Property Inspector serves a number of functions apart from its primary role of allowing you to set values for CSS properties and ADF skin properties for the selectors that the ADF skinning framework exposes. These functions are the ability to:
Copy an image into the project where you develop the ADF skin.
For more information, see Chapter 6, "Working with Images in Your ADF Skin."
Identify the properties that inherit their values from an extended ADF skin and identify the properties that you configured in the ADF skin, as shown in Figure 3-4.
Present ADF skin properties that you can configure for a selector.
For more information, see Section 2.3, "Properties in the ADF Skinning Framework."
Navigate to the selector in an extended ADF skin that defines an inherited property in your ADF skin (Go to Declaration).
For more information, see Section 3.4, "Navigating to the ADF Skins That Your ADF Skin Extends."
Invoke a dialog where you can define the colors for properties that support color value.
Figure 3-4 presents an overview of the various controls that the Property Inspector exposes when you edit an ADF skin.
When you create an ADF skin, as described in Section 4.4, "Creating an ADF Skin File," you choose an ADF skin from which to extend. The ADF skin that you choose to extend from defines properties that your newly created ADF skin inherits. When you create your first ADF skin, you must choose one of the ADF skins that Oracle ADF provides.
Subsequent ADF skins that you create can extend an ADF skin that you created or one of the ADF skins provided by Oracle ADF. For example, you create your first ADF skin named skinA
that extends the simple
ADF skin provided by Oracle ADF. You then create a second ADF skin named skinB
. When creating skinB
, you have the choice of extending from skinA
or from any of the ADF skins provided by Oracle ADF. If you choose to extend skinB
from skinA
, the inheritance relationship between the ADF skins is as illustrated in Figure 3-5.
For more information about the ADF skins that Oracle ADF provides, see Section 1.4, "Inheritance Relationship of the ADF Skins Provided by Oracle ADF," and Section 11.4, "ADF Skins Provided by Oracle ADF."
The Extended Skins list in the visual editor displays the list of ADF skins that the current ADF skin extends. Figure 3-6 shows the list of ADF skins that appears if you implement the inheritance relationship described in Figure 3-5. You open an extended ADF skin that you want to view by clicking it in the Extended Skins list.
Note:
You cannot edit the properties of the selectors in the ADF skins provided by Oracle ADF. You can only edit the properties of selectors in extended ADF skins that you created.Using the Go to Declaration menu that the Property Inspector exposes, you can navigate to the location in an extended ADF skin where the extended ADF skin declares style properties inherited by other ADF skins. For example, assume that the skinA
ADF skin defines a background color of Red
for the af|goButton
selector's access-key
pseudo-element, as shown in Figure 3-4.
The skinB
ADF skin that extends from skinA
ADF skin inherits the property values, as shown in Figure 3-4.
To go to the declaration of a property:
Identify a property in your ADF skin that inherits its values from an extended ADF skin. A blue upward-pointing arrow, as shown in Figure 3-8, identifies these properties.
Click the list beside this property to invoke a context menu where you select Go to Declaration, as shown in Figure 3-9.
The extended ADF skin opens in the source view, as shown in Figure 3-10. If the extended ADF skin is one that you created, you can modify the property values defined in it. The ADF skins provided by Oracle ADF, described in Section 11.4, "ADF Skins Provided by Oracle ADF," are read-only.
You can alter the appearance and functionality of a variety of ADF Skin Editor features.
You can alter the appearance of the ADF Skin Editor using pre-defined settings.
To change the look and feel of the ADF Skin Editor:
From the main menu, choose Tools > Preferences. For more information at any time, press F1 or click Help from within the Preferences dialog.
In the Preferences dialog, select the Environment node if it is not already selected.
On the Environment page, select a different look and feel from the Look and Feel list.
Click OK.
Restart the ADF Skin Editor.
Note:
The key bindings in Motif are different from key bindings in Windows. Under Motif, the arrow keys do not change the selection. Instead they change the lead focus cell. You must press Ctrl + Space to select an item. This is expected behavior.You can customize the default display options (such as whether dockable windows are always on top), as well as other general behavior, such as whether the ADF Skin Editor will automatically reload externally modified files and whether output to the Log window is automatically saved to a file.
To change the general environment settings for the ADF Skin Editor:
From the main menu, choose Tools > Preferences. For more information at any time, press F1 or click Help from within the Preferences dialog.
In the Preferences dialog, select the Environment node if it is not already selected.
On the Environment page, select the options and set the fields as appropriate.
Click OK.
Restart the ADF Skin Editor.
For information about how to start the ADF Skin Editor, see the Oracle Fusion Middleware Installation Guide for Oracle Application Development Framework Skin Editor.
You can customize the layout for dockable windows in their docked position. You can also set dockable windows to remain on top of other GUI elements, or not, when those windows are moved.
To change the shape of one or more of the four docking areas:
From the main menu, choose Tools > Preferences. For more information at any time, press F1 or click Help from within the Preferences dialog.
In the Preferences dialog, select the Environment node select Dockable Windows.
On the Dockable Windows page, click the corner arrows to lengthen or shorten each docking area's shape.
Click OK.
To change whether dockable windows remain on top or not when moved:
From the main menu, choose Tools > Preferences. For more information at any time, press F1 or click Help from within the Preferences dialog.
In the Preferences dialog, select the Environment node select Dockable Windows.
On the Dockable Windows page, select or deselect Dockable Windows Always on Top as appropriate.
Click OK.
The ADF Skin Editor provides a source editor where you can view, edit, and search the syntax that the visual editor generates for an ADF skin.
You can search the source files of an ADF skin in a number of ways.
To search a source file currently open in the source editor, with the option to replace text:
With the file open in the source editor, make sure that the editor has focus.
Optionally, if an instance of the text you want to search for is easily found, you can highlight it now.
From the main menu, choose Search > Find. Alternatively, press Ctrl+F.
In the Find Text Dialog, enter or select the text to locate.
Text previously searched for in this session of the ADF Skin Editor appears in the Text to Search For list.
Select other search parameters accordingly.
For more information, press F1 or click Help from within the dialog.
Click OK.
To do a simple search in the open source file for a single text string:
With the file open in the editor, ensure that the editor has focus.
Place the cursor in the file at the point you wish to search from.
From the main menu, choose Search > Incremental Find Forward or Search > Incremental Find Backwards.
In the dialog, enter the search text.
As you type, the cursor jumps to the next instance of the group of letters displayed.
Alternatively, enter the text string in the search box. As you type, the cursor jumps to the next instance of the group of letters displayed. Use the Previous or Next buttons to search up and down the file. Click in the search box to set Match Case, Whole Word, or Highlight Occurrences.
Extensions are components that are loaded and integrated with the ADF Skin Editor after it is started. Extensions can access the editor and perform many useful tasks. You can add existing extensions into the ADF Skin Editor, or create your own.
This section contains information on finding and installing extensions. The simplest way to find and download extensions is through the Check for Updates wizard.
If you need additional capabilities (such as integration with a version control system or a special editor), you can add external tools to the ADF Skin Editor. See Section 3.9, "Adding External Tools to the ADF Skin Editor" for more information.
In addition, you can obtain additional extension development tools and functionality in the Extension Software Development Kit (SDK). You can download the Extension SDK via the Check for Updates wizard.
You can also download the Extension SDK from the Oracle Technology Network Web page.
Note:
Any time an extension is added or upgraded, the migration dialog appears at startup in case you need to migrate any previous settings related to that extension.The easiest way to find and install extensions is to use the Check for Updates wizard.
To install extensions using the Check for Updates wizard:
From the Help menu, select Check for Updates.
Follow the steps in the wizard to browse, download, and install patches and extensions.
Although the ADF Skin Editor creates the faces-config.xml
file by default when you create a new ADF skin project, this file is not required for ADF skin projects. In the unlikely event that you need to edit the faces-config.xml
file, you can use the overview editor for JSF configuration files. Figure 3-11 displays the overview editor.
When you open faces-config.xml
its contents are displayed in an editor group. When you select the Overview tab at the bottom of this group, the overview editor appears.
When the overview editor is open, the Property Inspector displays the metadata child elements for the currently selected element. Use the Property Inspector to manage these. For instance, you use the Property Inspector to set the <description>
and <display-name>
child elements.
The overview editor has three sections:
The left-hand column displays the main JSF configuration elements.
The top area of the main panel shows child elements for the element selected in the element list on the left.
The bottom area of the main panel shows child elements for the element selected at the top area.
You can add, delete, or edit your JSF element and child elements using the Overview Editor.
To work with a main JSF configuration element and its immediate child elements:
In Application Navigator, open the workspace that contains your JSF application.
In the workspace, open the project that contains your JSF pages.
In the project, open the WEB-INF node.
Under the WEB-INF node, double-click the faces-config.xml
file to open.
At the bottom of the editor, select the Overview tab.
Select an element from the element list on the left. The main panel displays corresponding configurable child elements in a table at the top of the main panel.
To add, delete, or edit JSF configuration elements:
To add a new child element. Click New. A dialog box opens to create the element. If no new button displays, the child element must be an existing class. You can select the class by clicking Browse... . If no browse button appears, or if the entry is not a class name, you can enter a value directly.
To delete an existing child element. Select the element from the table and click Delete. The element is removed from the table. If no delete button displays, the entry can be deleted manually.
To edit an existing child element. Select the element from the table and click Edit. The Properties panel for the element opens to change the value.
To view, add, delete, or edit child configuration element child element:
To view child elements. Select an element from the element list on the left. The main panel displays. Select an existing child element from a table at the top of the main panel. Allowed child elements display in a table at the bottom of the main panel. If a child element allows child elements, but no children are currently defined, the list area for those children might be hidden. To display the list area and add children, click the show arrow to the left of the area title. To hide the list area, click the hide arrow.
To add a new child element. Click New. If no new button displays and the child element must be an existing class, you can select the class by clicking Browse... to open the Class Editor dialog box. If no browse button appears, or if the entry is not a class name, you can enter a value directly.
To edit an existing child element. Select it from the table and click Edit. The Properties panel for the element opens to change the value. If no edit button displays, you can either select a new class (if applicable), or edit the entry To delete an existing child element, select it from the table and click Delete.To delete an existing child element. Select it from the table and click Delete. The element is removed from the table. If no delete button displays, you can delete the entry manually.
External tools are custom ADF Skin Editor menu items and toolbar buttons that launch applications installed on your system, applications that are not packaged as part of the ADF Skin Editor.
You find and add available external tools to the ADF Skin Editor using the External Tools menu.
To find all external programs that the ADF Skin Editor is preconfigured to support:
From the main menu, choose Tools > External Tools.
In the External Tools dialog, click Find Tools.
To add access to an external program from the ADF Skin Editor:
From the main menu, choose Tools > External Tools.
In the External Tools dialog, click New. Follow the instructions in the wizard.
To change how an external program appears, or remove access to an external program from the ADF Skin Editor:
From the main menu, choose Tools > External Tools.
In the External Tools dialog, click Edit or Delete. If you are editing the options, display, integration or availability of an external tool from the ADF Skin Editor, select the corresponding tab and change the values. Click Help for help choosing valid values.
Click OK. Your changes are reflected immediately.
You can accomplish any task in the ADF Skin Editor using the keyboard as you use the mouse.
The ADF Skin Editor comes with several predefined keyboard schemes. You can choose to use one of these, or customize an existing set to suit your own coding style by changing which keyboard shortcuts map to which actions.
To load preset keyboard schemes:
From the main menu, choose Tools > Preferences.
In the Preferences dialog, select the Shortcut Keys node. For more information at any time, press F1 or click Help from within the Preferences dialog.
On the shortcut keys page, click More Actions and then select Load Keyboard Scheme. The Load Keyboard Scheme dialog appears, with the currently loaded keyboard scheme highlighted.
In the Load Keyboard Scheme dialog, select the scheme you wish to load and click Ok.
On the Shortcut Keys page, if you have finished, click Ok.
To view the ADF Skin Editor commands and their associated keyboard shortcuts (if assigned):
From the main menu, choose Tools > Preferences.
In the Preferences dialog, select the Shortcut Keys node.
On the Shortcut Keys page, under Available Commands, you can view the complete set of the ADF Skin Editor commands, and what keyboards shortcuts (if any) are assigned to each. If you are looking for a particular command or shortcut, or want to look at shortcuts for a particular category of commands only, enter a filtering expression in the Search field.
You can also define new shortcuts, or change existing ones.
To define a new keyboard shortcut for a command within a given keyboard scheme:
From the main menu, choose Tools > Preferences.
In the Preferences dialog, select the Shortcut Keys node. For more information at any time, press F1 or click Help from within the preferences dialog.
On the Shortcut Keys page, under Available Commands, select the command that you wish to define a new shortcut for.
To define a new shortcut for this action, place focus on the New Shortcut field, and then press the key combination on the keyboard.
If this proposed shortcut already has a command associated with it, that command will now appear in the Conflicts field. Any conflicting shortcuts are overwritten when a new shortcut is assigned.
To assign this shortcut to the action selected, click Assign. If you want to delete an already-assigned shortcut, click the Delete button in the toolbar.
If you want to assign more than one shortcut to a command, select the command and click the Duplicate button. Then, type the shortcut key in the New Shortcut field and click Assign.
When you are finished, click Ok.
To import or export keyboard schemes:
From the main menu, select Tools > Preferences to open the Preferences dialog.
Click More Actions > Export or Import. Keyboard schemes are stored as XML files.
For any action that can be accomplished with a mouse, including selection, there is a way to accomplish the action solely from the keyboard. You can accomplish any task in the ADF Skin Editor using the keyboard as you can using the mouse.
The shortcut keys defined in the Java Look and Feel guidelines provide the base set for the ADF Skin Editor. The various predefined keyboard schemes available in the ADF Skin Editor are then overlaid upon this base set. If the same shortcut key exists in both the look and feel guidelines and the ADF Skin Editor keyboard scheme, the ADF Skin Editor scheme prevails. If a shortcut key defined by the look and feel guidelines does not appear in the ADF Skin Editor scheme, then it is the original look and feel definition that remains in effect when the scheme in question is enabled.
At any given time, then, the shortcut keys enabled in the ADF Skin Editor depend upon the interaction of the currently enabled scheme with the Java look and feel guidelines. When you first open the ADF Skin Editor, the default scheme is enabled. You can change this scheme whenever you wish, and within each scheme, you can customize any of the shortcut key assignments that you would like. Note that any customized shortcuts you create in a scheme are not retained when another predefined keyboard scheme is activated (or even if the same scheme is reloaded).
To load predefined keyboard schemes, view current shortcut assignments within a scheme, and customize those assignments, you will need to open the preferences dialog. To open the dialog, choose Tools > Preferences (or on the keyboard, press Alt+T+P) from the main menu and then, using the arrow keys in the left-hand pane, navigate to the Shortcut Keys node. For details on working with the dialog, with the page displayed, click Help (or on the keyboard press H).
The following table describes the common methods of moving the cursor in the ADF Skin Editor:
Table 3-1 Common Methods of Moving the Cursor
Key | Cursor Movement | Ctrl+cursor Movement |
---|---|---|
Left Arrow |
Left one unit (e.g., a single character) |
Left one proportionally larger unit (e.g., a whole word) |
Right Arrow |
Right one unit |
Right one proportionally larger unit |
Up Arrow |
Up one unit or line |
Up one proportionally larger unit |
Down Arrow |
Down one unit or line |
Down one proportionally larger unit |
Home |
Beginning of the line |
To the beginning of the data (top-most position) |
End |
End of the line |
To the end of the data (bottom-most position) |
Tab |
Next field or control, except when in a text area or field. In this case, press Ctrl+Tab to navigate out of the control. Where there are fields and controls ordered horizontally as well as vertically, pressing Tab moves the cursor first horizontally to the right, then at the end of the line, down to the left of the next line. |
To the next pane which may be a navigator, an editor, or a palette, except when in a text area or field. In this case, press Ctrl+Tab to navigate out of the control |
Shift+Tab |
Previous field |
To previous tab position. In property sheets, this moves the cursor to the next page |
Enter |
Selects and highlights the default button, except when in a combo box, shuttle button, or similar control. Note: The default button changes as you navigate through controls. |
n/a |
This section describes keyboard navigation in the standard ADF Skin Editor components.
The following table describes the keyboard actions to perform navigation tasks involving buttons.
Table 3-2 Keyboard Navigation for Buttons
Navigation | Keys |
---|---|
Navigate forward to or from button |
Tab |
Navigate backward to or from button |
Shift+Tab |
Activate the default button (when the focus is not on a button) |
Enter |
Activate any button while it has focus |
Enter, Spacebar, or keyboard shortcut (if one has been defined) |
Activate Cancel or Close buttons on a dialog |
Esc |
The following table describes the keyboard actions to perform navigation tasks involving checkboxes.
Table 3-3 Keyboard Navigation for Checkboxes
Navigation | Keys |
---|---|
Navigate forward to or from checkbox |
Tab |
Navigate backward to or from checkbox |
Shift+Tab |
Select or deselect (when the focus is on the checkbox) |
Spacebar or keyboard shortcut (if one has been defined) |
Navigate to checkbox and select or deselect (when the focus is not on the checkbox) |
Keyboard shortcut (if one has been defined) |
Dropdown Lists And Combo Boxes
The following table describes the keyboard actions to perform navigation tasks involving dropdown lists and combo boxes.
Table 3-4 Keyboard Navigation for Dropdown Lists and Combo Boxes
Navigation | Keys |
---|---|
Navigate forward to or from a combo box or dropdown list |
Tab or keyboard shortcut (if one has been defined) |
Navigate backward to or from a combo box or dropdown list |
Shift+Tab |
Toggle list open and closed |
Spacebar (the current selection receives the focus) |
Open a list |
Down Arrow to open (first item on list receives focus) |
Move up or down within list |
Up and Down Arrow keys (highlighted value has focus) |
Move right and left within the initial entry on a combo box |
Right and Left Arrow keys |
Select list item |
Enter Note: The first time you press Enter, the item in the list is selected. The second time you press Enter, the default button is activated. |
Close list (with the highlighted value selected) |
Esc |
The following table describes the keyboard actions to perform navigation tasks involving list boxes.
Table 3-5 Keyboard Navigation for List Boxes
Navigation | Keys |
---|---|
Navigate forward into or out of a list |
Tab |
Navigate backward into or out of list |
Shift+Tab |
Make a selection |
Up Arrow, Down Arrow, Spacebar, or Enter Note: The first time you press Enter, the highlighted item in the list is selected. The second time you press Enter, the default button is activated. |
Move within list |
Up Arrow or Down Arrow |
Move to beginning of list |
Home or Ctrl+Home |
Move to end of list |
End or Ctrl+End |
Select all entries |
Ctrl+A |
Toggle (select or deselect) an item |
Spacebar or Ctrl+Spacebar |
Select next item up in list without deselecting item with current focus |
Shift+Up Arrow Key |
Select next item down in list without deselecting item with current focus |
Shift+Down Arrow Key |
Select current item and all items up to the top of the list |
Shift+Home |
Select current item and all items up to the bottom of the list |
Shift+End |
Select current item and all items visible above that item |
Shift+Page Up |
Select current item and all items visible below that item |
Shift+Page Down |
Select item with current focus without deselecting other items (to select items that are not adjacent) |
Ctrl+Spacebar |
Navigate through list without deselecting item with current focus. |
Ctrl+Up Arrow or Ctrl+Down Arrow |
Table 3-6 Keyboard Navigation for Radio Buttons
Navigation | Keys |
---|---|
Navigate forward to or from radio button |
Tab |
Navigate backward to or from radio button |
Shift+Tab |
Navigate forward from radio button |
Arrow Keys |
Navigate backward from radio button |
Shift+Arrow Keys |
Select radio button |
Arrow key (navigating to a radio button via arrows selects it) or keyboard shortcut (if one has been defined) |
Deselect radio button |
Select a different radio button in the group using one of the commands above |
The following table describes the keyboard actions to perform navigation tasks involving shuttles.
Table 3-7 Keyboard Navigation for Shuttles
Navigation | Keys |
---|---|
Navigate forward into or out of a list |
Tab |
Navigate backward into or out of list |
Shift+Tab |
Make a selection |
Up Arrow or Down Arrow |
Move within list |
Up Arrow or Down Arrow |
Move to beginning of list |
Home or Ctrl+Home |
Move to end of list |
End or Ctrl+End |
Select all entries |
Ctrl+A |
Toggle (select or deselect) an item |
Spacebar or Ctrl+Spacebar |
Select next item up in list without deselecting item with current focus |
Select next item up in list without deselecting item with current focus |
Select next item down in list without deselecting item with focus |
Shift+Down Arrow Key |
Select current item and all items up to the top of the list |
Shift+Home |
Select current item and all items up to the bottom of the list |
Shift+End |
Select current item and all items visible above that item |
Shift+Page Up |
Select current item and all items visible below that item |
Shift+Page Down |
Select item with current focus without deselecting other items (to select items that are not adjacent) |
Ctrl+Spacebar |
Navigate through list without deselecting item with current focus. |
Ctrl+Up Arrow or Ctrl+Down Arrow |
The following table describes the keyboard actions to perform navigation tasks involving sliders.
Table 3-8 Keyboard Navigation for Sliders
Navigation | Keys |
---|---|
Navigate forward to or from slider |
Tab |
Navigate backward to or from slider |
Shift+Tab |
Increase value |
Up Arrow or Right Arrow |
Decrease value |
Left Arrow or Down Arrow |
Minimum value |
Home |
Maximum value |
End |
The following table describes the keyboard actions to perform navigation tasks involving spin controls.
Table 3-9 Keyboard Navigation for Spin Controls
Navigation | Keys |
---|---|
Navigate forward to or from spin control |
Tab |
Navigate backward to or from spin control |
Shift+Tab |
Increase value |
Up Arrow or Right Arrow, or type the value you want |
Decrease value |
Left Arrow or Down Arrow, or type the value you want |
Minimum value |
Home |
Maximum value |
End |
The following table describes the keyboard actions to perform navigation tasks involving text fields.
Table 3-10 Keyboard Navigation for Text Fields
Navigation | Keys |
---|---|
Navigate forward into or out of text box |
Tab or keyboard shortcut (if one has been defined) |
Navigate backward into or out of text box |
Shift+Tab |
Move to previous/next character within text box |
Left Arrow/Right Arrow |
Move to start/end of box |
Home/End |
Select all text |
Ctrl+A |
Deselect all text |
Left Arrow or Right Arrow |
Select current item and all items up to the Left/Right |
Shift+Left Arrow, Shift+Right Arrow |
Select current item and all items up to the Start/End |
Shift+Home, Shift+End |
Select current item and all items up to the previous/next word |
Ctrl+Shift+Left Arrow, Ctrl+Shift+Right Arrow |
Copy selection |
Ctrl+C |
Cut selection |
Ctrl+X |
Paste from clipboard |
Ctrl+V |
Delete next character |
Delete |
Delete previous character |
Backspace |
This section contains information about keyboard shortcuts for complex UI components.
The following table describes the keyboard actions to perform navigation tasks involving dockable windows.
Table 3-11 Keyboard Navigation for Dockable Windows
Navigation | Keys |
---|---|
Navigate forward in or out of dockable window |
Ctrl+Tab |
Navigate backward in or out of dockable window |
Ctrl+Shift+Tab |
Display context menu |
Shift+F10 |
Navigate between tabs within a dockable window |
Alt+Page Down, Alt+Page Up |
Move between elements including dropdown lists, search fields, panels, tree structure (but not individual elements in a tree), individual component buttons |
Tab |
Move up/down through dockable window contents (scrollbar) |
Up Arrow, Down ArrowThis scrolls the window contents if the focus moves beyond visible area of canvas. |
Move left/right (scrollbar) |
Up Arrow, Down ArrowThis scrolls the pane contents if focus moves beyond visible area of canvas. |
Move to start/end of data (component buttons) |
Ctrl+Home, Ctrl+End |
Select an element |
Enter or Spacebar |
Scroll left/right within the canvas area (without moving through the window contents) |
Ctrl+Left/Ctrl+Right |
Scroll Up/Down within the canvas area (without moving through the window contents) |
Ctrl+Up/Ctrl+Down |
Context menus are accessed using Shift+F10. Menus from the main menu bar are accessed using the keyboard shortcut for the menu.
The following table describes the keyboard actions to perform navigation tasks involving the menu bar.
Table 3-12 Keyboard Navigation for Menus
Navigation | Keys |
---|---|
Navigate to menu bar |
F10 |
Navigate out of menu bar |
Esc |
Navigate between menus in menu bar |
Right Arrow, Left Arrow |
Navigate to menu item |
Up Arrow, Down Arrow |
Navigate from menu item |
Up Arrow, Down Arrow |
Activate item |
Enter, Spacebar, or keyboard shortcut (if one has been defined) |
Open submenu |
Right Arrow |
Retract submenu |
Left Arrow or Esc |
The following table describes the keyboard actions to perform navigation tasks involving panels.
Table 3-13 Keyboard Navigation for Panels
Navigation | Keys |
---|---|
Navigate in/out forward |
Tab |
Navigate in/out backward |
Shift+Tab |
Expand panel (when focus on header) |
Right Arrow |
Collapse panel (when focus on header) |
Left Arrow |
Navigate within panel |
Up Arrow, Down Arrow |
Navigate to panel header from contents (when focus is on top item in list) |
Up Arrow |
Navigate to panel contents from header (when focus is on header) |
Down Arrow |
Arrow keys move focus in the direction of the arrow, except when a web widget has focus; in that case, the down arrow or enter key initiates the widget control action, such as opening a choice list. tab moves the focus right, shift+tab moves the focus left.
The following table describes the keyboard actions to perform navigation tasks involving tables.
Table 3-14 Keyboard Navigation for Tables
Navigation | Keys |
---|---|
Navigate forward in or out of table |
Ctrl+Tab |
Navigate backward in or out of table |
Shift+Ctrl+Tab |
Move to next cell (wrap to next row if in last cell) |
Tab Arrow or Right Arrow |
Move to previous cell (wrap to previous row if in first cell) |
Shift+Tab or Left Arrow |
Controls in cells open |
Down Arrow or Enter |
Block move left |
Ctrl+Page Up |
Block move right |
Ctrl+Page Down |
Block move up |
Page Up |
Block move down |
Page Down |
Move to first cell in row |
Home |
Move to last cell in row |
End |
Move to first cell in table |
Ctrl+Home |
Move to last cell in table |
Ctrl+End |
Select all cells |
Ctrl+A |
Deselect current selection (and select alternative) |
Any navigation key |
Extend selection on row |
Shift+Up Arrow |
Extend selection one column |
Shift+Down Arrow |
Extend selection to beginning of row |
Shift+Home |
Extend selection to end of row |
Shift+End |
Extend selection to beginning of column |
Ctrl+Shift+Home |
Extend selection to end of column |
Ctrl+Shift+End |
Edit cell without overriding current contents, or show dropdown list in combo box |
F2 |
Reset cell content prior to editing |
Esc |
This section refers to the tabs that appear within a dockable window, view or dialog. The following table describes the keyboard actions to perform navigation tasks involving tabs in dockable windows, views and dialogs.
Table 3-15 Keyboard Navigation for Tabs
Navigation | Keys |
---|---|
Navigate forward into or out of tab control |
Tab |
Navigate backward into or out of tab control |
Ctrl+Tab |
Move to tab (within control) left/right |
Left Arrow/Right Arrow |
Move to tab (within control) above/below |
Up Arrow/Down Arrow |
Move from tab to page |
Ctrl+Down |
Move from page to tab |
Ctrl+Up |
Move from page to previous page (while focus is within page) |
Ctrl+Page Up |
Move from page to next page (while focus is within page) |
Ctrl+Page Down |
The following table describes the keyboard actions to perform navigation tasks involving trees.
Table 3-16 Table Navigation for Trees
Navigation | Keys |
---|---|
Navigate forward into or out of tree control |
Tab |
Navigate backward into or out of tree control |
Shift+Tab |
Expand (if item contains children) |
Right Arrow |
Collapse (if item contains children) |
Left Arrow |
Move to parent from child (if expanded) |
Left Arrow |
Move to child from parent (if already expanded) |
Right Arrow |
Move up/down one item |
Up Arrow, Down Arrow |
Move to first item |
Home |
Move to last entry |
End |
Select all children of selected parent |
Ctrl+A |
Select next item down in list without deselecting that item that currently has focus |
Shift+Down Arrow |
Select next item up in list without deselecting that item that currently has focus |
Shift+Up Arrow |
Select current item and all items up to the top of the list |
Shift+Home |
Select current item and all items up to the bottom of the list |
Shift+End |
Select the item with current focus without deselecting other items (to select items that are not adjacent) |
Ctrl+Spacebar |
Navigate through list without deselecting item with current focus |
Ctrl+Up/Down Arrow |
The Following Table Describes The Keyboard Actions To Perform Navigation Tasks Involving Wizards.
Table 3-17 Keyboard Navigation for Wizards
Navigation | Keys |
---|---|
Navigate between stops on the roadmap or between pages |
Up Arrow, Down Arrow (these do not wrap) |
Navigate forward between components on wizard panel, wizard navigation bar buttons, and navigation panel |
Tab |
Navigate backward between components on wizard panel, wizard navigation bar buttons, and navigation panel |
Shift+Tab |
Navigate between buttons on Navigation Bar |
Right and Left Arrow Key (does not wrap) |
Navigate between stops on Roadmap/between wizard pages |
Ctrl Page Up and Ctrl Page Down |
This section contains information about keyboard shortcuts for the ADF Skin Editor-specific UI components.
The following table describes the keyboard actions to perform navigation tasks involving dialogs.
Table 3-18 Keyboard Navigation for Dialogs
Navigation | Keys |
---|---|
Close dialog without making any selections or changes |
Esc |
Activate the default button (if one is defined) |
Enter |
Overview Editor (Form + Mapping)
The following table describes the keyboard actions to perform navigation tasks involving overview editors.
Table 3-19 Keyboard Navigation for the Overview Editor
Navigation | Keys |
---|---|
Navigate into or out of overview editor from other pages in editor (for example Source or History) |
Alt+Tab |
Navigate from the tab group to next control in editor) |
Tab or Ctrl+Down Arrow |
Navigate forward or backwards between controls on overview editor |
Tab or Alt+Tab |
Move between tabs in the side tab control (when the focus in the tab group) |
Up Arrow, Down Arrow |
Move between tabs in side tab control (when focus on Page) |
Ctrl+Page Up/Ctrl+Page Down |
Move from page to tab group (from next control in editor) |
Ctrl+Tab |
Move from page to tab group (from any control in editor) |
Ctrl+Up Arrow |
Open and close Sections (when focus is on a section header) |
Enter, Spacebar, Right Arrow/Left Arrow |
Component and Resource Palettes
The following table describes the keyboard actions to perform navigation tasks involving palettes.
Table 3-20 Keyboard Navigation for Component and Resource Palettes
Navigation | Keys |
---|---|
Navigate forward in or out of palette |
Ctrl+Tab This moves you into first item within the pane. |
Navigate backward in or out of palette |
Ctrl+Shift+Tab |
Move between elements including dropdown lists, search fields, panels, tree structure (but not individual elements in a tree), individual component buttons |
Tab, Shift+Tab |
Move up/down elements in a list or tree |
Up Arrow/Down Arrow |
Move left/right elements in a list or tree |
Left Arrow/Right Arrow |
Move to start/end of data (component buttons) |
Ctrl+Home/Ctrl+End |
Select a component button |
Enter |
The following table describes the keyboard actions to perform navigation tasks involving navigators.
Table 3-21 Keyboard Navigation for Navigators
Navigation | Keys |
---|---|
Navigate forward in or out of navigator |
Ctrl+Tab This moves you into first item within the pane. |
Navigate backward in or out of navigator |
Ctrl+Shift+Tab |
Move between elements including dropdown lists, search fields, panels, tree structure (but not individual elements in a tree), individual component buttons |
Tab |
Move up/down elements in a list or tree |
Up Arrow/Down |
Move left/right elements in a list or tree |
Left Arrow/Right Arrow |
Move to start/end of data (component buttons) |
Ctrl+Home/Ctrl+End |
Select a component button |
Enter |
Select an element |
Enter |
The following table describes the keyboard actions to perform navigation tasks involving the Property Inspector.
Table 3-22 Keyboard Navigation for the Property Inspector
Navigation | Keys |
---|---|
Navigate forward into or out of Property Inspector |
Ctrl+Tab |
Navigate backward into or out of Property Inspector |
Ctrl+Shift+Tab |
Navigate from side tab group to page |
Tab |
Navigate backward and forwards between elements on page |
Tab, Shift+Tab |
Move to tab above/below (when focus is on the side tab) |
Up Arrow, Down Arrow |
Move to tab right or left, above or below (when focus is on the internal tab group) |
Up Arrow, Down Arrow, Right Arrow, Left Arrow |
Move from side tab group to page |
Ctrl+Down Arrow |
Move from page to side tab group |
Ctrl+Up Arrow |
Move to side tab above (previous) when focus on page |
Ctrl+Page Up |
Move to side tab below (next) when focus on page |
Move to side tab below (next) when focus on page |
Open and Close sections (when focus is on a section header) |
Enter |
The following table describes the keyboard actions to perform navigation tasks involving the pane elements of text editors.
Table 3-23 Keyboard Navigation for Text Editors
Navigation | Keys |
---|---|
Navigate forward in or out of editor |
Ctrl+Tab |
Navigate backward in or out of editor |
Ctrl+Shift+Tab |
Move from page to previous page |
Alt+Page Up |
Move from page to next page |
Alt+Page Down |
The following table describes the keyboard actions to perform navigation tasks involving the text or canvas areas of text editors.
Table 3-24 Keyboard Navigation for Canvas Areas of Text Editors
Navigation | Keys |
---|---|
Move up/down one line |
Up Arrow, Down Arrow |
Move left/right one character |
Left Arrow, Right Arrow |
Move to start/end of line |
Home, End |
Move to previous/next word |
Ctrl+Left Arrow, Ctrl+Right Arrow |
Move to start/end of text area |
Ctrl+Home/Ctrl+End |
Move to beginning/end of data |
Ctrl+Home/Ctrl+End |
Move up/down one vertical block |
Page Up/Page Down |
Block move left |
Ctrl+Page Up |
Block move right |
Ctrl+Page Down |
Block extend up |
Shift+Page Up |
Block extend down |
Shift+Page Down |
Block extend left |
Ctrl+Shift+Page Up |
Block extend right |
Ctrl+Shift+Page Down |
Select all |
Ctrl+A |
Deselect all |
Up Arrow, Down Arrow, Left Arrow, Right Arrow |
Extend selection up/down one line |
Shift+Up Arrow/Shift+Down Arrow |
Extend selection left/right one component or char |
Shift+Left Arrow/Shift+Right Arrow |
Extend selection to start/end of line |
Shift+Home/Shift+End |
Extend selection to start/end of data |
Ctrl+Shift+Home/Ctrl+Shift+End |
Extend selection up/down one vertical block |
Shift+Page Up/Shift+Page Down |
Extend selection to previous/next word |
Ctrl+Shift+Left Arrow /Ctrl+Shift+Right Arrow |
Extend selection left/right one block |
Ctrl+Shift+Page Up/Ctrl+Shift+Page Down |
Copy selection |
Ctrl-C |
Cut selection |
Ctrl-X |
Paste selected text |
Ctrl-V |
The following table describes the keyboard actions to perform navigation tasks involving graphical editors.
Table 3-25 Keyboard Navigation for Graphical Editors
Navigation | Keys |
---|---|
Navigate forward in or out of editor |
Ctrl-Tab |
Navigate backward in or out of editor |
Ctrl+Shift+Tab |
Move from page to previous page |
Alt+Page Up |
Move from page to next page |
Alt+Page Down |
The following table describes the keyboard actions to perform navigation tasks involving the canvas areas of graphical editors.