This chapter includes the following sections:
Oracle JDeveloper provides you with a wide range of tools to develop the frontend or view layer of your Java EE applications.
At the forefront of the web tools there are source editors, visual editors, and integrated component and property tools to add and edit the pages, elements and related properties in your pages, including your business service and localization components. You will be able to create and modify your style sheets and tag libraries, and use the Code Insight code and tag completion tools to efficiently code your HTML, JSP and JSF/facelet or Java source files.
In addition, there are handy wizards to walk you through creating all your HTML, JSP and JSF/facelet pages and related files. When you create web pages using the wizards your configuration files, bean mappings, tag libraries, and jar files are automatically set up and editable.
This chapter walks you through the web page tools and step-by-step instructions for many of the tasks you will use to develop your application web pages.
The source editor is your basic code editor for your web pages. Use the source editor to custom code your pages alongside the visual editor which shows a visual representation of your page. Figure 16-1 displays the source editor for a JSF page.
Figure 16-1 Source Editor with Typical JSF Code
The source editor comes with several features to simplify your coding tasks. The following table lists the primary source editor features.
Table 16-1 Primary Source Editor Features
Features | Description |
---|---|
Quick Doc for Tags |
View your tag definitions while you're coding. Put your curser on the tag and press Ctrl + d. A small window appears at the top of your editor with that tag definition detail. Click back in the editor and the window closes. You can also right-click and choose Quick TagDoc. |
Code Templates |
Save time by inserting pre-written code into source files instead of having to type it in manually. Templates can intelligently modify the inserted code to suit surrounding code. Use shortcuts to speed up the selection of the required template. |
Code Insight |
View and filter element and parameter options, and get code completion. The source editor provides Code Insight for tags, attribute names & values, and embedded CSS & JavaScript code. |
Jump to Managed Bean |
Quickly jump to your managed bean code from your web page source. Right-click in the source editor or Structure window and choose Go to, then select your choice from the list of all beans referenced from that page. |
Toggle Line Comments |
Adds or removes comment markers from the beginning of each line in a selected block. Select a single line to comment or uncomment that line only. |
Editor Splitting |
Toggle between code and visual views using the splitter. To split the file horizontally, grab the splitter just above the vertical scroll bar on the upper right-hand side of the window and drag it downward. To split the file vertically, grab the splitter just to the right of the horizontal scroll bar on the lower right-hand side of the window and drag it left. |
The JSP/HTML Visual Editor is used for WYSIWYG editing of your web pages including JSP, JSF, facelets, and HTML pages.
Your web page elements are visually displayed or structurally represented in the visual editor. JSP tags including JSTL, and BC4J tags are shown as icon and tag names, while HTML pages are rendered based on the browser look and feel. You can toggle back and forth or split the screen to see the source editor during design-time.
The visual editor opens up with the Components window alongside it to drop and drag to the page, as shown in Figure 16-2.
Figure 16-2 Visual Editor For a JSF Page
The following table describes available visual editing features.
Table 16-2 Primary Visual Editor Features
Features | Description |
---|---|
Instant Look and Feel |
Opening a file in the visual editor renders it in HTML and associated web formats. You immediately see the results of your edits. |
Visual and Non-Visual Element Support |
Add visual components and tags to your page, as well as scripting languages, expressions, and values. |
Stylesheet Associations |
Add or remove stylesheets to your pages, and modify text styles. |
Move or Resize Page Elements |
Manually drag to resize elements or change page element properties and in the Properties window or by right-clicking and choosing to Properties. |
Editor Splitting |
Toggle between code and visual views using the splitter. To split the file horizontally, grab the splitter just above the vertical scroll bar on the upper right-hand side of the window and drag it downward. To split the file vertically, grab the splitter just to the right of the horizontal scroll bar on the lower right-hand side of the window and drag it left. |
Table and Form Design |
Drag Table or Form Components onto the page and visually edit their design. |
Modify Element Attributes |
Select your page elements and go to the Properties window to add or edit attributes. |
Nested Components Appear in Chronological Order |
View and select your nested components in chronological order using the associated web formats, just like a browser. Immediately see your results rendered. |
Structure Review |
View the structure of page elements in the Structure window. |
Context Sensitive Editing Tools |
Components window tag library shows components available in context only. |
Context Command Menu |
Right-click anywhere in the page to bring up a menu of commands available for that selection. |
Total Tool Integration |
The Visual Editor is integrated with the Java Source Editor, the Structure window, Components window, Properties window and Data Binding palette to support the assembly of databound web pages with simple drag and drop operations. Changes to any tools is reflected across the all the tools immediately. |
There are also some additional editing tools and features that are available as icons on the top of the visual editor window.
Table 16-3 Toolbar Icon Features on the Visual Editor
Icon | Name | Description |
---|---|---|
|
Refresh |
There are two types of refresh for you to choose from. Use the dropdown menu on the refresh button. Refresh Page rebuilds and re-renders the internal data structures of a page. Use this tool if you have an included page (like a page template) that has been changed, and you want to see the affects in the including page. Full Refresh is used to first fully restart the internal design time for a page project (which includes rebuilding the servlet context from web.xml and tag libraries, and (for Faces projects) the Faces context from the faces-config.xml. With Full Refresh the internal data structures of the active page are rebuilt and it is re-rendered. |
|
Design Mode |
Lets you choose whether or not to see design affordances such as facet tables or extra container spacing. True hides affordances and shows the page as it appears at runtime. |
|
Preferences |
Brings up the Visual Editor preferences dialog. These options are also available by going to Tools > Preferences > JSP and HTML Visual Editor |
|
Display Customization |
Lets you choose from a variety of custom display sizes for the visual editing window, including a display to match your monitor resolution and size to fit the window. |
|
Browser Selection |
Lets you choose which of your available browsers you prefer to view to use to view your page. |
The following table lists the features that are available with simple keystroke commands while you are editing your web pages.
Table 16-4 Primary Visual Editor Keystroke Command Features
Features | Description |
---|---|
Breadcrumbs |
View and select your nested components in chronological order using the breadcrumb that appears at the bottom of the visual editor window. |
Component Selection |
Hovering your curser over a component on the page highlights that component with an orange outline. |
Editing Containers |
In the Structure window or visual editor window select a container. Right-click that container and choose Focus This Container. That container is selected in the editing window. This feature allows you to more easily view and edit the individual components in that selected container. |
Visual EL Expression View Preferences |
Select whether to resolve expressions for viewing, and how to view those that are unresolved. Choose the Show toolbar feature to select your preference for EL rendering, or you can also go to Tools >Preferences > JSP and HTML Visual Editor. |
Expression Builder and Text Popup |
Select your component. Slow double-click or F1 to open a popup window with a value field for editing your expressions or text. |
Corresponding Element Display |
Page elements are displayed hierarchically in the Structure window. Double-clicking a node in the Structure window shifts the focus to the Properties window. |
Visual and Code Editor Splitting |
Edit your file simultaneously with the visual and source editors by opening the page in one of the editors and using the splitter to open a second page view in the alternate editor. To split the file horizontally, grab the splitter just above the vertical scroll bar (on the upper right-hand side of the window) and drag it downward. To split the file vertically, grab the splitter just to the right of the horizontal scroll bar (on the lower right-hand side of the window) and drag it left. |
Easy Edit Focus |
By default new JSP or HTML pages are opened with the visual editor in focus. Double-clicking a node in the Applications window opens or brings the default editor to the foreground. To locate the node in the Applications window that corresponds to the file you are currently working on, right-click and choose Select in Applications Window. Or use the keyboard shortcut (default keymap, Alt+Home). |
Tag Display |
The scope of tags with embedded body content is structurally represented with the tag icon and name bounded by, or contained within, a shaded rectangle. These tag containers are nested or structurally displayed to represent, for example, an iterated row in a table. Click the tag to select a cursor for entering content in the tag container. |
Extracting CSS code from HTML/JSP to a CSS files |
Extract a CSS block from a HTML/JSP file to a new CSS file and all the references are updated automatically. This option is available to use from the Code editor and the Structure window. This can also be used for JavaScript. |
Style sheet Linking to HTML files |
Link a style sheet to your HTML files simply by dropping a |
Mobile Device Display |
For mobile-enabled JSP documents, the design view emulates the viewport of the selected device category. The device category icon is displayed on the toolbar along with the reference device dropdown list. |
Choose to show more or less detail on your web page by expanding or collapsing nested JSP and HTML page elements in the visual editor and Structure window, as shown in Figure 16-3 and Figure 16-4.
Figure 16-3 Container Tags in Nested Rectangles
Figure 16-4 Collapsed HTML Table
To collapse the container element, choose from one of the following options:
Click the + (plus) sign of the container element.
Right-click the container element and choose Expand All Below from the context menu.
Use the Preferences page to change the look and feel of your visual editing window. The following features are available:
Text foreground and background color, element and tag outline color, and caret color.
Synchronization between the visual editor and the Structure Window or the source editor.
Display of errors and warnings.
Display of tag names.
To change the default settings:
Choose to hide or not hide elements that are not shown by default, such as:
HTML named anchors, script tags, and line breaks.
JSP tag library directives and bean tags.
To change the display of invisible elements:
To get a snapshot of what the page looks like at runtime, run the tag library in a simulated JSP/Servlet container. Use the Manage Libraries page to configure your tag libraries to execute in the visual editor.
To set a JSP tag library to execute at design time:
If you want to get a simpler view of your page, display JSP tags by name only. Go to the Preference page and choose to not show embedded EL syntax. For example, <c:out value="${Row.Deptno}"></c:out>
displays as out
vs. ${Row.Deptno}.
To display JSP tags by name only:
Use the Preferences page to customize the default keymap settings, and specify the shortcut keys assignments.
To customize keymap shortcut keys:
Select a single element, or a container element along with included elements such as a table, or multiple elements. A dotted line encloses the selection. In the Structure window, a selected element is highlighted.
To select an element:
Note:
Double-clicking an element brings up an editor dialog for the tag.
Use the control key to select and manage grouped multiple elements. You can also deselect an element without losing other selections
To select multiple elements:
Use shift-click to select a large range of elements in two clicks instead of scrolling through and selecting each element.
To select a range of adjacent elements:
Tip:
For JSP tag libraries, when you pass the mouse pointer over an element, a tooltip with the tag name displays, to easily know which item you want to select.
Press Ctr+Shift+Up to select the container element for an element contained inside another element. This also works to scroll through nested containers. For example, when you add a link to text you will need to press Ctr+Shift+Up twice to move to the link target.
Use your mouse to select and edit words, strings, or groups of text on the page.
To select text:
Choose one of the following options:
Double-click a single word.
Triple-click an entire line.
Select and drag your cursor across the text.
Click at the start of the selection, scroll to the end of the selection, then hold down Shift and click.
There are visual cues on the page to locate the insertion point before, after, or contained inside a target element.
To select an insertion point in the visual editor:
When dragging an element, a vertical line | appears to pinpoint your desired insertion point. Release the mouse button to insert that element in that spot.
Visual clues for insertions:
Select the desired location on the page, indicated by a blinking cursor.
Select the element to contain the inserted element, indicated by a dotted line.
Move your elements around your pages using the Structure window. Elements are shown in chronological order, i.e., as they were added to the page. Changing their position in the Structure window changes that order on the page.
To select an insertion point in the Structure window, choose from these options to drag a page element to an insertion point:
To insert an element before a target element, drag it towards the top of the element until you see a horizontal line with an embedded up arrow, then release the mouse button.
To insert an element after a target element, drag it towards the bottom of the element until you see a horizontal line with an embedded down arrow, then release the mouse button.
To insert or contain an element inside a target element, drag it over the element until it is surrounded by a box outline, then release the mouse button. If the element is not available to contain the inserted element, the element will be inserted after the target element.
When selecting a target position by clicking, highlight the target element.
Note:
Disallowed insertion points are indicated by a slashed circle.
Use the Components window to add UI and data elements to your web pages. When you select an insertion point, the point is selected in the Structure window as well as the page, to help you verify the insertion position visually and hierarchically.
For more information, see Using the Components Window.
To insert a page element:
When you insert a page element, the source code for the element is automatically generated. When you delete an element, code is deleted.
The Properties window displays the properties of selected elements. You can set or modify the property values for any element. Set property values are marked with a green square. If the Properties window is not in view choose View >Properties window or use the shortcut Ctrl+Shift+I. To undo changes, from the main menu select Edit > Undo action. Use the Set to Default button to reset a property to its original value.
For more information, see Using the Properties Window.
To set element properties:
As an alternative to working with the Data Control Palette to create databound UI components, you can set ADF bindings in the visual editor.
Use the Properties window to set or remove data sources for element properties. From a Value Binding dialog select available data sources defined by the objects or the application ADF binding context that you specify for an EL expression. Note that before you specify an ADF binding as a data source you must first create the binding.
To databind an element property:
Tip:
To remove a data source from a JSP element property, toggle the Bind to Data button off.
By default the Properties window displays all the properties of your selected elements. Click Union in the Properties window toolbar to toggle between displaying all the properties of the selected elements and displaying only properties that the selected elements have in common (intersection). Values represented in italics are common properties that have different values.
To set properties for multiple elements:
Choose from one of the following options:
Hold down the Ctrl key and select each of the elements.
To change the list of properties displayed by the Properties window, click the Union button in the toolbar:
Select and edit your property. If the value is shown in italics, the selected elements have differing values. Editing the value of a shared property causes all selected elements to have the same value.
Cut web page elements using typical commands, and place them on the clipboard to paste in another location.
The cut command is the first step in a cut and paste action. You can also delete an element. Deleting an element removes it without changing the contents of your clipboard.
To cut page element:
Delete web page elements to remove them from the system completely. This does not change the existing clipboard content. If the element selected for deletion contains included elements, deleting the element also deletes all its contained elements.
To delete page elements:
Copy page elements using the typical commands, or use the drag copy feature.
In the visual editor you can also:
Right-click and drag an element to an insertion point, release the mouse, and then choose Copy Here from the context menu.
Hold down Ctrl and drag a copy of the selected element to an insertion point on the page.
To copy page elements:
Most elements can be dragged from one location to another. You can also right-click drag the element(s) from the original position to an insertion point in the visual editor or Structure window, and then choose Move Here from the context menu.
Resize your page elements using the Properties window or using the context menu for that element.
To resize page elements:
Use the h.dataTable
tag to display a data table. The Create Data Table Wizard inserts this tag on a JSF page. This wizard also provides basic formatting. Once created, you can further edit the table by setting or changing attribute values. You can also add or delete columns, and add components.
To create and edit a data table:
Use the right-click context menu to access many of the options to edit, move, insert, or delete your data columns.
To work with columns in a data table:
To add a single column, right-click an existing column next to where you want to add the new column, and select either Insert before h:column > Column or Insert after h:column > Column. A column is added either before or after the selected column. The new column is now selected.
To add multiple columns.
Right-click an existing column next to which you want to add the new columns, and select DataTable > Insert Columns.
Complete the dialog.
To reorder the columns, drag and drop the columns in the Structure window or in the visual editor.
To add a component or other object to a column (for example to display data), right-click the column and select Insert Inside Column.
Note:
You can also select the column in the visual editor or structure window. In the visual editor dropdown menu, select Insert inside Column > Output Text.
To delete a column, right-click the column and select Delete.
Use the JSF panelGrid
tag to display an HTML table. You can add other components inside the panel grid. Use the Create PanelGrid Wizard to create the grid.
Add the panel grid using the Components window. Once created you can change attribute values set in the wizard, by double-clicking on the h:panelGrid
component in the Structure Pane. The properties editor opens. Change any values as needed.
To insert a component into the grid, in the Structure Pane, right-click an existing component and elect to place the component either before or after the existing component. If you need to nest components in a cell, you must first place a panelGroup
tag in the cell. You can then elect to place other components inside the panelGroup
tag. Note that you cannot add rows to a panel grid. You can only add columns using the Columns attribute. Components are then placed in columns along a row in the order they appear in the Structure window.
To reorder the components, drag and drop the columns in the Structure window or in the visual editor.
To delete a grid or a component in a grid, right-click the component and select Delete.
To create and edit a panel grid:
You can copy and paste source code between JSP and HTML files in the same project or different projects. Paste source code without interpretation, for example as sample code, by selecting No in the Confirm Markup Insert dialog.
To paste markup code
HTML head content such as style definitions and the browser window title are invisible elements on web pages.
To show head content choose Design > Show Invisible Elements > Head Content. For each element of the head section, an icon appears in a bar at the top of the page.
When you select an element in the head section bar, the source code for the element is highlighted in the code editor.
To edit an element in the head section of a page:
Use the Properties window to view and edit the properties of a component.
When you select a component on your editing page the title bar of the Properties window displays the name of the component, as shown in Figure 16-5. The main area displays the component properties and their values. If one or more component is selected in the active tool, "Multiple" appears in the title bar, and only the properties shared among the selected components display.
Figure 16-5 Properties Window
The main area of the Properties window displays groups of properties in named sections that you can expand or collapse. Component properties are displayed in fields, dropdown lists, or combo boxes. For boolean properties, a checkbox before the property name indicates its current value. Boolean properties that accept EL expressions use either a field or dropdown list, depending on whether the current value is an expression or an explicit value of true or false.
To see a description or more options for a property, right-click a property name, field, dropdown list, or combo box to display a popup window. Resize the popup window by dragging the bottom right corner of the window. When you resize the popup window, the new size is used for all subsequent property popup windows that you open until you change the size again.
The Properties window has a few icon tools on the top for common tasks, as shown in Table 16-5.
Table 16-5 Toolbar Icon Features on the Properties window
Icon | Name | Description |
---|---|---|
|
Enable/Disable Auto-Extend |
Use to toggle on and off the automatic expansion of the Properties window to display the full contents when the cursor is over the window. When focus moves to another part of the user interface, the window returns to the default position. |
|
Bind to ADF Control |
Click to bind or rebind a property to an ADF data control of your choice. |
To edit a property value, enter a new value in a field or select a value from a fixed set of values using a dropdown list. When you edit a property value, a green dot appears next to the property name to indicate that it has been changed from its default setting. The following are additional options available to edit properties:
Click the dropdown arrow at the end of the field or box to use a property editor or browser tool to select and enter a value for the property.
Click the dropdown arrow at the end of the field or box to display a popup window and then choose a command, or choose a property editor or builder tool to select and enter a value for the property.
For boolean properties with checkboxes, select or deselect the checkbox to change the value.
For boolean properties that can accept EL expressions, enter an expression in the field or click the down arrow at the end of the field to use a builder tool to enter a value.
Write your own property editor to customize the display. If your editor supports tags, the editor displays those tags as a fixed set of values. If the editor does not support tags, the system checks to see if custom editing is supported. If neither are supported, a text editor appears.
When you start up the JDeveloper application you are provided the option of selecting your role. Choosing Customization Developer gives you these options:
When you edit a property value, an orange dot appears next to the property name. (Property values that were modified in Default role have green dots next to the properties.)
From the property menu next to a text-only property, choose Remove Customization to remove existing customization that was previously applied in the same customization layer context.
The Components window displays your component libraries, and provides simple drag and drop operations. The available components vary depending on the type of file open. For example, if you are editing an HTML file, the Components window displays a list of common HTML components, as shown in Figure 16-6.
Figure 16-6 HTML Components in Components window
Your file and page components are organized in the Components window as pages. Select the page you want from the dropdown list at the top.
To insert a component into a file, drag it from the to an insertion point in the editor. In some cases you click a component and click in the editor to insert.
There are a variety of features available:
To search for a component by name, enter the name or part of the name in the binocular icon field and click the green go arrow.
By default components are displayed in a list view (icon plus name). Change the display to an icon only view by right-clicking a component and choosing Icon View or List View.
To add frequently used components, right-click a component and choose Add to Favorites. The component is added to the Favorites panel.
For projects with JSP tag libraries, change the list of JSP tag libraries available for selection by right-clicking in the Components window and choosing Edit Tag Libraries.
Use the overview editor to add and edit configuration data stored in faces-config.xml
, as shown in Figure 16-7.
Figure 16-7 Overview Editor for JSF Configuration File
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.
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 in for element list on the left.
The bottom area of the main panel shows child elements at the top area.
To access JSF configuration elements:
faces-config.xml
file to open.Most elements can be managed using simple commands and dialogs that display when the element is selected.
To Add or Delete 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 is an existing class. Select the class by clicking Browse... . If no browse button appears, or if the entry is not a class name, 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.
Most child elements can be managed using simple commands and dialogs that display once the element is selected.
To view, add, delete, or edit child elements:
To view child elements. Select an element from the element list on the left. The main panel displays. Select a 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, the child element must be an existing class. 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, enter a value directly.
To edit an existing child element. Select the element from the table. The properties panel for the element opens to change the value. 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 using right-click delete.
Use the JSF Navigation Diagrammer to diagram your JSF pages, and the navigation between the pages. When you create a JSF page, the diagrammer is automatically enabled and synchronized with anything you do in the editing tools.
When you first view the navigation diagram, a diagram file is created for diagram details including the JSF configuration file that holds all the settings. If you are using versioning or source control, the diagram file is included as well as the configuration file it represents.
The pages are represented by icons, and the navigation between pages as lines. The navigation is mirrored in navigation cases in the faces-config.xml
file for the application.When a JSF navigation diagram is displayed, the Components window also displays. The JSF Diagram Objects page of the Components window shows entries for the elements that can be included on a JSF navigation diagram. To add JSF diagram elements use the Components window.
To view the navigation diagram:
faces-config.xml
.When you view the Applications window using Group by Category (default), a single entry for the JSF configuration file represents both the configuration file and the associated diagram file. If you view all files using Group by Directory, you see separate nodes for the two separate files including the configuration file using the full file name, and the diagram file with the.jsf_diagram extension.
When you first open the JSF configuration file, the configuration file node displayed in the Applications window indicates that there have been changes, even though no changes have yet been made. This is because the node displayed in the Applications window represents both the JSF configuration file and the navigation diagram. Although the JSF configuration file has not changed, a navigation diagram file has been created. Similarly, if you make changes to a navigation diagram that do not affect the JSF configuration file, such as changing the layout, the node in the Applications window indicates that changes have been made.
If you have a large or complex application, the JSF and related diagram files can be large and loading can take a long time. Choose not to use the diagram as the default editor and no related diagram file is created with your JSFs, unless you specifically request one.
Use the JSF navigation diagram and the Components window to create a diagram representing the pages in your application, and the navigation cases between them. The navigation cases you add to the diagram are automatically added in the JSF configuration file.
To add a navigation diagram element
Use the Components window to add navigation cases.
The navigation case is shown as a solid line on the diagram, and a default <from-outcome> value is shown as the label for the navigation case. To edit the <from-outcome> value, click on the label and enter the new value.
To add a JSF navigation to a diagram:
A navigation rule is added to the JSF configuration file if there is not one already for the source page, and a navigation case is added for the rule.
Use the diagram annotations feature in the Components window to add notes to your navigation diagram.
To add a note to a JSF navigation diagram
Use the Annotations feature in the Components window to attach notes to your navigation diagrams.
To attach a note to an element in a JSF navigation diagram:
Use the icons on the editor toolbar to choose your layout style.
To set layout default styles on a navigation diagram
Refreshing your navigation diagram will show changes you have across the editing tools.
You can use the navigation diagrammer to add, edit, rename, and delete JSF pages. Table Table 16-7 shows the effect of various actions you perform in the diagrammer.
Table 16-7 Diagrammer Page Management Actions and Effects
Action | Effect |
---|---|
Delete |
The associated web page is no longer visible in the JSF navigation diagram. If you created the file, it is still available from the Web Content folder in the ViewController project in the Applications window. |
Edit |
When you edit web pages manually, the JSF navigation diagram and/or the JSF configuration file is not automatically updated. |
Rename |
If you rename a JSF page on a navigation diagram, this is like removing a page with the original name from the diagram and adding a new one with the new name. If you have created the underlying page, that page remains with its original name in the file system; on the diagram, the page icon changes to the icon that indicates the page does not yet exist. If you have already created a JSF page and it is displayed on the diagram, if you rename it in the Applications window, this is equivalent to removing the original file and creating a new file. The diagram retains the original name, and now displays the page icon that indicates the page does not exist. Renaming a page on a JSF navigation diagram affects the navigation rules and cases in the JSF configuration file. |
When you edit or delete navigation cases, the associated configuration files are also updated.
Table 16-8 Diagrammer Page Management Actions and Effects
Action | Effect |
---|---|
Delete |
The associated The associated web page is still visible in the diagram and, if it has been created, is still available from the Web Content folder in the ViewController project in the Application Navigator. |
Edit |
When you edit the label for the navigation case on the diagram, the associated <navigation-case> is updated in the JSF configuration file. Once you have created a navigation case in the JSF navigation diagram, you cannot change the destination of the navigation case. To change the destination for an existing navigation case, delete the existing case and create a new one to the correct destination. If your diagram file is large and takes a long time to open in the diagrammer, you have the option to open the JSF configuration file in another editor. |
Use the Properties window to view and edit you navigation case properties.
The navigation cases are displayed on the diagram as solid lines, with the <from-outcome>
element value displayed as the label.
To view properties of a navigation case:
Use Code Insight to speed up your coding and quickly insert code parts, parameters, and elements from a dynamic list of available options.
Code Insight provides two types of coding assistance: completion insight and parameter insight. Completion insight completes regularly used code snippets for you. Parameter Insight with provide you with a quick-pick list of parameter options available in that instance.
To invoke completion insight, pause after typing the period separator or, in the default keymap, press Ctrl+Space. To invoke parameter insight, pause after typing an opening (the left) parenthesis or, in the default keymap, press Ctrl+Shift+Space. To exit either type of insight at any time, press Esc.
To use Code Insight in a web page in the source editor:
Code Insight is also available in CSS files. To use Code Insight for your CSS file, place the cursor inside any <STYLE> tag, then type the open angle-bracket and press Ctrl + Space. A list of possible completions displays. You can filter the available completions by typing the first character of the element.
To use Code Insight in a JavaScript or CSS file:
For JavaScript files, place the cursor inside any <SCRIPT> tag, then type the open angle-bracket and press Ctrl + Space. For CSS files place the curser inside the <STYLE> tag and type the open angle-bracket and press Ctrl + Space.
JDeveloper displays a list of possible completions. You can filter the available completions by typing the first character; for example, if you type the letter d, JDeveloper will display completions beginning with D (Date, decodeURI, and so on).
Code Insight will also prompt for completion inside JavaScript-specific XML attributes.
This section covers JDeveloper support and tools for your user interface development using JavaServer Faces (JSF) technology within the Java EE platform.
JDeveloper provides full support for developing user interfaces with JSF and facelets technology in accordance with the JSF 2.0 specification found at http://jcp.org/aboutJava/communityprocess/final/jsr314/index.html
. The JSF content in this section assumes you are using facelets technology for your JSF development.
To quickstart your JSF application end to end:
faces-config.xml
. See How to Edit a JSF Configuration File.You can build your application from the ground up using the features provided in JDeveloper. The first thing to do/ is build a framework or application template for your web pages using the application templates. Choose from a combination of technologies offered in the New Gallery Wizards. The application you choose determines the project folders created, and the libraries added to the folders as shown in Table 16-9.
Table 16-9 Web Application Templates
Application | Description |
---|---|
Fusion Web Application (ADF) |
Creates a databound ADF web application. This application contains one project for the view and controller components (ADF Faces and ADF Task Flows), and another project for the data model (ADF Business Components). |
Java EE Application |
Creates a databound web application. This application contains one project for the view and controller components (JSF), and another project for the data model (EJB and JPA entities) |
Generic Application |
Creates an application with a single project. The project is not preconfigured with JDeveloper technologies and can be customized to include any technologies. |
Start by using the wizards to build your customized application framework.
To create a web application and project for a JSF application:
Once you have created the framework of your application, get your pages up and running with the page building, editing, and modeling tools. Choose ADF Faces page templates or quick start layouts. ADF Faces page templates (.jsf
file) define an entire page layout in a page template definition file that allows for reuse and parametization. The quick start layouts are a a pre-defined page layout that automatically inserts and configures the ADF Faces components required to implement the layout look and behavior.
To create your JSF pages:
For your business services you have the option of using Enterprise JavaBeans (EJB), JavaBeans, or Oracle TopLink to map your Java classes and EJBs to database tables. Web Services is available if you don't need to create the backend business service and want to expose existing business services, including EJB components, stored procedures in the database, or other services writing Java and other languages.
Open the New Gallery and use the provided wizards and dialogs to create your business service, or in the case of web services, to expose the entities in your project, as shown in Table 16-10.
Table 16-10 Business Service New Gallery Options
If you want to use... | Then choose this New Gallery option... |
---|---|
Enterprise JavaBeans in the Model project |
EJB in the Business Tier category |
Oracle TopLink in the Model project |
TopLink in the Business Tier category |
JavaBeans in the Model project |
JavaBeans in the General category |
Web services that were created based on legacy code, software components (such as EJB components), or even PL/SQL in the database and make it accessible through HTTP quickly and easily. |
Web Services in the Business Tier category |
To create a business service:
The Components window contains your standard JSF components to drag and drop onto your JSF pages. When you create a JSF page, the backing beans are created and automatically bound to all of the components and corresponding properties you put on the page.
For localization, resource bundles are automatically added when you add content components to your page. You can manage your resource bundles, or create new resource bundles in the Project Properties feature of your application.
Among the many standard component options provided, there are validating and converting components that are configurable through the Properties window, as well as a Message component to help you set up the error message output for your JSF pages, as shown in Figure 16-13.
Figure 16-13 Core JSF Components Available in Components window
The components available on the Components window correspond to the JSF 2.0 facelets tag library. The tag descriptions are detailed in Table 16-11.
For complete information on this and all JavaServer Faces 2.1 component tags and API, see the Oracle Technology Network (OTN) online documentation libraries.
JavaServer Faces 2.1 Facelets Tag Library Documentation: http://docs.oracle.com/javaee/6/javaserverfaces/2.1/docs/vdldocs/facelets/
JavaServer Faces Technology 2.1 JSP Tag Library Documentation:
http://docs.oracle.com/javaee/6/javaserverfaces/2.1/docs/vdldocs/jsp/
Table 16-11 Standard JSF Core Tag Library Supported Elements
Component Tag | Syntax | Description |
---|---|---|
f:actionListener |
<f:actionListener [type] [binding] [for] /> |
Registers an action listener on the UIComponent associated with the closest parent component. |
f:ajax |
<f:ajax [disabled] [event] [execute] [immediate] [listener] [oneevent] [oneerror] [render] /> |
Registers an AjaxBehavior instance on one or more UIComponents implementing the ClientBehaviorHolder interface. This tag may be nested within a single component (enabling Ajax for a single component), or it may be "wrapped" around multiple components (enabling Ajax for many components). |
f:attribute |
<f:attribute [name] [value] /> |
Adds an attribute to the UIComponent associated with the closest parent UIComponent custom action. |
f:convertDateTime |
<f:convertDateTime [dateStyle] [locale] [pattern] [timeStyle] [timeZone] [type] [binding] [for] |
Registers a DateTimeConverter instance on the UIComponent associated with the closest parent UIComponent custom action. |
f:converter |
<f:converter [converterID] [binding] [for] /> |
Registers a named Converter instance on the UIComponent associated with the closest parent UIComponent custom action. |
f:convertNumber |
<f:convertNumber [currencyCode] [currencySymbol] [groupingUsed] [integerOnly] [locale] [maxFractionDigits] [minIntegerDigits] [pattern] [type] [binding] [for] /> |
Register a NumberConverter instance on the UIComponent associated with the closest parent UIComponent custom action. |
f:event |
<f:event [name] [listener] /> |
Allows you to install ComponentSystemEventListener instances on a component in a page. |
f:facet |
<f:facet/> |
Registers a named facet on the UIComponent associated with the closest parent UIComponent custom action. |
f:loadBundle |
<f:loadBundle [basename] [var] /> |
Loads a resource bundle localized for the Locale of the current view, and expose it as a java.util.Map in the request attributes of the current request under the key specified by the value of the “var" attribute of this tag. The Map must behave such that if a get() call is made for a key that does not exist in the Map, the literal string “KEY" is returned from the Map, where KEY is the key being looked up in the Map, instead of a Missing Resource Exception being thrown. If the Resource Bundle does not exist, a JspException must be thrown. |
f:metadata |
<f:metadata/> |
Declares the metadata facet for this view. This must be a child of the |
f:param |
<f:param [binding] [id] [name] [value] [disable] /> |
Adds a child UIParameter component to the UIComponent associated with the closest parent UIComponent custom action. |
f:phaseListener |
<f:phaseListener [type] [binding] /> |
Registers a PhaseListener instance on the UIViewRoot in which this tag is nested. |
f:selectItem |
<f:selectItem [binding] [id] [itemDescription] [itemDisabled] [itemLabel] [escape] [itemValue] [value] [noSelectionOption] /> |
Add a child UISelectItem component to the UIComponent associated with the closest parent UIComponent custom action. |
f:selectItems |
<f:selectItems [binding] [id] [value] [var] [itemValue] [itemLabel] [itemDescription] [itemDisabled] [itemLabelEscaped] /> |
Adds a child UISelectItems component to the UIComponent associated with the closed parent UIComponent custom action. When iterating over the select items, toString() must be called on the string rendered attribute values. Version 2 of the specification introduces several new attributes, described below. These are: var, itemValue, itemLabel, itemDescription, itemDisabled, and itemLabelEscaped. |
f:setPropertyActionListener |
<f:setPropertyActionListener [value] [target] [for] /> |
Registers an ActionListener instance on the UIComponent associated with the closest parent UIComponent custom action. This actionListener will cause the value given by the "value" attribute to be set into the ValueExpression given by the "target" attribute. |
f:subview |
<f:subview [binding] [id] [rendered] |
This handles the Container action for all JavaServer Faces core and custom component actions used on a nested page via "jsp:include" or any custom action that dynamically includes another page from the same web application, such as JSTL's "c:import" |
f:validateBean |
<f:validateBean [validationGroups} [disabled] [binding] [for] |
This is a validator that delegates the validation of the local value to the Bean Validation API. The validationGroups attribute serves as a filter that instructs the Bean Validation API which constraints to enforce. If there are any constraint violations reported by Bean Validation, the value is considered invalid |
f:validateDoubleRange |
<f:validateDoubleRange [disabled] [maximum] [minimum] [binding] [for] /> |
Registers a DoubleRangeValidator instance on the UIComponent associated with the closest parent UIComponent custom action. |
f:validateLength |
<f:validateLength [disabled] [maximum] [minimum] [binding] [for] /> |
registers a LengthValidator instance on the UIComponent associated with the closest parent UIComponent custom action. |
:validateRegex |
:<validateRegex [disabled] [pattern] [binding] [for] /> |
This is a validator that uses the pattern attribute to validate the wrapping component. The entire pattern is matched against the String value of the component. If it matches, it's valid. |
f:validateRequired |
<f:validateRequired [disabled] [binding] [for] /> |
This is a validator that enforces the presence of a value. It has the same affect as setting the required attribute on a UIInput to true. |
f:validator |
<f:validator [disabled] [validatorId] [binding] [for] /> |
Registers a named Validator instance on the UIComponent associated with the closest parent UIComponent custom action. |
:valueChangeListener |
<:valueChangeListener [type] [binding] /> |
Registers an ValueChangeListener instance on the UIComponent associated with the closest parent UIComponent custom action. |
f:verbatim |
<f:verbatim [escape] [rendered] /> |
Creates and register a child UIOutput component associated with the closest parent UIComponent custom action, which renders nested body content. |
f:view |
<f:view [locale] [renderKitId] [beforePhase] [afterPhase] /> |
Container for all JavaServer Faces core and custom component actions used on a page. |
f:viewParam |
<f:viewParam [converter] [converterMessage] [id] [required] [requiredMessage] [validator] [validatorMessage] [value] [valueChangeListener] [maxLength] [for] /> |
Used inside of the metada facet of a view, this tag causes a UIViewParameter to be attached as metadata for the current view. Because UIViewParameter extends UIInput all of the attributes and nested child content for any UIInput tags are valid on this tag as well. |
Use the Properties window to view and set your component tag attribute. When you select an attribute, a brief description of the attribute appears in the text area below the attribute list. Most of the standard JSF component tag attributes accept value binding expressions, #{expression}.
When you add a component to the JSF page, the Properties window displays the supported attributes for the component tag grouped in these categories:
Common. Used commonly, such as id
and title
. For localization there are language translation attributes such as lang
and dir
.
Appearance. Defines how things appear on the page such as links and text.
Style. Used for HTML presentation attributes such as background and font.
JavaScript. Used for JavaScript attributes for associating client-side scripts with events, such as onclick
, onkeypress
, and onmouseover.
Managed, or Backing beans are beans that contain logic and properties for UI components on a JSF page. Use the Managed Bean tab of the Create JSF page dialog to automatically bind your backing beans, as shown in Figure 16-14. When this option is selected, a default bean is created (or select a managed bean of your choice) for the page you are creating, and then automatically binds all the page components to a corresponding property in that bean. It also creates the associated accessor methods.
Table 16-12 Managed Bean Binding Options
If you want to... | Then choose... |
---|---|
Use a default managed bean for a JSF page |
Automatically Expose UI Components in a New Managed Bean. Accept the default names, or enter names of your choice. |
Use an existing managed bean of your choice for a JSF page |
Automatically Expose UI Components in an Existing Managed Bean. Then select a managed bean from the dropdown list. |
Creating a page and choosing to automatically bind components provides the following features:
If you elect to create a backing bean, a JavaBean using the same name as the JSF or JSPX is created, and placed in a the view.backing package. A managed bean entry is also created in the faces-config.xml
file for the backing bean. By default, the managed bean name is backing_<page_name> and the bean uses the request scope.
On the newly created or selected bean, a property and accessor method is added for each component tag you place on the page.
The component tag is binded to the property using an EL expression as the value for its binding attribute. Because JDeveloper automatically places a form component on a JSF or JSPX page on creation, properties and accessor methods for the form component are automatically created.
Properties and methods are deleted when you delete components from the page.
Figure 16-14 Create JSF Dialog - Create Managed Bean Tab
For component tags with attributes that require method binding, use the Properties window to enter method binding expressions and select from existing methods in the page backing bean (see procedure below for adding methods to backing beans). You can also enter new method names. JDeveloper creates the new skeleton method in the page backing bean. Add the logic to the method.
To create managed beans:
Create your managed beans for your JSPX pages using the XML Overview Editor.
To create managed beans with the overview editor
faces-config.xml
file. This file is located in the Web Content/WEB_INF
directory.Create your bean methods using the Events dropdown menu.
To add methods to a managed bean:
JavaServer Faces provides an expression language (JSF EL) that can be used in JSF pages to access the JavaBeans components in your page bean and in other beans in your web application, including the session and the application beans. To bind any property of a component, add the component to a page and then select the component and create the bindings from the Properties window.
You can use the Expression Builder dialog box to choose which JavaBeans property the component property is to be bound to and write your EL Expressions using the tools, as shown in Figure 16-15.
Figure 16-15 Expression Builder Dialog
The JSF expression language syntax uses the delimiters #{}. An expression can be a value-binding expression for binding UI components, or their values to external data sources, or a method-binding expression for referencing backing bean methods.
The syntax supported for a JSF value binding expression is for the most part the same as the syntax defined in the JavaServer Pages Specification (v 2.0), with the following exceptions:
The expression delimiters for a value binding expression are #{ and } instead of ${and }.
Value binding expressions do not support JSP expression language functions.
Examples of valid value binding expressions include:
#{Page1.name}
#{Foo.bar}
#{Foo[bar]}
#{Foo[“bar"]}
#{Foo[3]}
#{Foo[3].bar}
#{Foo.bar[3]}
#{Customer.status == ‘VIP'}
#{(Page1.City.farenheitTemp - 32) * 5 / 9}
Reporting Period: #{Report.fromDate} to #{Report.toDate}
Method binding expressions must use one of the following patterns:
#{expression.value}
#{expression[value]}
Expression language provides the following operators, in addition to the. and []operators:
Arithmetic: +, - (binary), *, / and div, % and mod, - (unary)
Logical: and, &&, or, ||, not, !
Relational: ==, eq, !=, ne, <, lt, >, gt, , ge, >=, le. Comparisons can be made against other values, or against boolean, string, integer, or floating point literals.
Empty: The empty operator is a prefix operation that can be used to determine whether a value is null or empty.
Conditional: A ? B : C. Evaluate B or C, depending on the result of the evaluation of A.
You can edit your EL expressions from the component field in the Properties window. Click inside the field to see long expressions. Click Ctrl+Space to invoke Code Insight from the Properties window field. You can also add or edit EL expressions by slow-clicking the component and clicking Expression Builder.
To construct an EL expression that uses JSF technology:
A composite component is type of template, that acts as a component and contains a collection of markup tags and other existing components. It is a reusable component that you create for your application for specific and defined functionality. Your composite component can have validators, converters, and listeners attached to it like any other component.
You can use the New Gallery wizard to create your Composite Components.
To create a composite component:
Automatic component binding in a page affects how you enter method binding expressions for the attributes of command and input components such as
action
actionListener
launchListener
returnListener
valueChangeListener
validator
Use the Expression Builder dialog box shown in Figure 16-15 to choose the component property that will be bound.
When automatic component binding is turned off, you have to select an existing managed bean or create a new backing bean as you enter method binding expressions for component attributes. If you create a new backing bean, a managed bean is configured in application faces-config.xml.
When automatic component binding is turned on, you do not have to select a managed bean. As you enter method binding expressions for component attributes, you can select from existing methods in the bean, or if you enter new method skeleton methods are automatically created.
In addition, when you edit a Java file that is a backing bean, a method binding toolbar appears in the source editor for you to bind appropriate methods to selected components in the page.
If you created a JSF page with the file name myfile.jsp
and you have selected to automatically create a default managed bean, then a backing bean is created as .backing.Myfile.java
, and placed in the \src directory of the ViewController project. The backing bean is configured as a managed bean in the application resources file (faces-config.xml
), and the default managed bean name is backing_myfile
.
When automatic component binding is turned on, any component that you insert in the page is automatically bound (via its binding attribute) to a property in the backing bean, as shown in the coded examples below.
... <h:form binding="#{backing_myfile.form1}"> <h:inputText binding="#{backing_myfile.inputText1}"/> <h:commandButton value="button0" binding="#{backing_myfile.commandButton1}" action="#{backing_myfile.commandButton_action}"/> ... </h:form> ...
package view.backing; import javax.faces.component.html.HtmlForm import javax.faces.component.html.HtmlCommandButton import javax.faces.component.html.HtmlInputText;
public class Myfile { private HtmlForm form1; public void setForm1(HtmlForm form1) { this.form1 = form1; } public HtmlForm getForm1() } return form1; } private HtmlInputText inputText1; public void setInputText1(HtmlInputText inputText1) { public HtmlInputText getInputText1() { return inputText1; } private HtmlCommandButton commandButton1; public void setCommandButton1(HtmlCommandButton commandButton1) { this.commandButton1 = commandButton1; } return commandButton1; } public String commandButton_action() { // Add event code here... return null; } }
Application resources file: faces-config.xml
... <managed-bean> <managed-bean-name>backing_myfile</managed-bean-name> <managed-bean-class>view.backing.Myfile</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> ...
While editing, you can turn off or turn on the automatic bind option or change the managed bean selection
If automatic bind is on and you change the managed bean selection, all existing and new component bindings are switched to the new bean.
If you turn automatic bind off, nothing changes in the existing component bindings in the page.
If you turn automatic bind on, all new and existing component bindings are bound to the chosen managed bean.
To turn off or on automatic component binding
Use the menu bar Design option to enable component binding. All existing bound components and any new components that you insert are bound to the selected managed bean
To set automatic binding for a page
Use the Properties window to value bind a property.
To value bind a component to a property:
Use the Properties window to bind component instances to properties.
To manually bind component instances to properties
Use the Properties window to bind existing methods with auto binding.
To bind to an existing method with auto component binding on:
Use the events dropdown menu to bind new default methods with auto binding off.
To bind to a new default method with auto component binding on:
Use the Properties window to bind new default methods with auto bind off.
To bind a new default method with auto binding off:
All of the content you build in your JSF application components is stored in resource Bundles. You can add or remove resource bundles easily from your application in the Default Project Properties dialog.
During development right-click your component to select text resources. The resource bundles available for the project are displayed. Select the bundles to make available for the project you are working on. New text is stored in the resource bundle you select.
You can also assign a key value string to uniquely identify the text object in the resource bundle. By default the name, or a part of the name you enter for display value is used. This value is used by translators to correlate your base content with its localized partner. Existing content strings you have previously added to resource bundles are available and displayed when you are adding new content. Reusing existing content strings optimizes localization efforts, ensuring you don't add new content strings with unique identifiers when a duplicate string with a different identifier already exists. Recycling content strings across your project and application using resource bundles reduces translation efforts and costs.
In your JSF page, you can reference a resource bundle string from any component tag attribute that accepts value binding expressions, e.g., #{bundle.key}
.
Add your resource bundles to your JSF pages dragging the LoadBundle component from the Components window.
To use localized resource bundles in JSF:
Many components use facets. When you use wizards to create complex components (such as a table or panel), output tags are automatically created and inserted into the facets. You can manually edit these components or add other components to facets. You can also add or delete facets using a context menu in the Structure window.
To add and edit facets:
Facelets technology is supported by JDeveloper.
The following features are available:
Reduces UI development and deployment time.
Faster compilation time.
Compile time validation.
High performance rendering.
Functional extensibility of components and server-side technologies through customization.
Support for code reuse through templating and composite components.
Facelets Tag Libraries
JSF uses various tags to express UI components in a web page. Facelets uses the XML namespace declarations to support the JSF tag library mechanism. All of these libraries are included in JDeveloper.
Table 16-13 Facelets Tag Libraries Included with JDeveloper
Tag Library | URI | prefix | Example | Contains |
---|---|---|---|---|
JSF UI Tag Library |
ui: |
ui:component ui:insert |
This tag Library is used for templating |
|
JSF HTML Tag Library |
|
h: |
h.head h.body h.outputText h.inputText |
This tag library contains JavaServer Faces component tags for all UIComponent + HTML RenderKit Renderer combinations defined in the JavaServer Faces 2.0 Specification. |
JSF Core Tag Library |
|
f: |
f:actionListener f:attribute |
This tag library contains tags for JavaServer Faces custom actions that are independent of any particular RenderKit. |
JSTL Functions Library |
fn: |
fn:toUpperCase fn:toLowerCase |
JSTL 1.1 Functions Tag Library |
Facelets support EL (expression language) based on the unified EL syntax defined by JSP 2.1. EL expressions are used to bind UI component objects or values or managed-bean methods or managed-bean properties. Note that for Unified EL in Facelets there is no difference between ${} and #{}.
To create a facelet:
<context-param> <param-name> Facelets.VIEW_MAPPINGS </param-name> <param-value> *.xhtml</param-value> </context-param>
<context-param> <param-name>torg.apache.myfaces.trinidad.FACELETS_VIEW_MAPPINGS</param-name> <param-value>*.xhtml</param-value> </context-param>
This is added to ensure you view your Facelets correctly, and not with the default JSP mappings. The facelets JAR, jsf-Facelets.jar
is added to your classpath via the facelets runtime library.
To convert and validate your JSF input data there is a converter component to register a named converter instance, a convert number, and convert date and time in the Components window.
You can configure your converter and validator properties in the Overview editor for your faces-config.xml
file.
To register a JSF standard converter using a supplied tag:
Use the Components window or Properties window to register your converter.
To register a JSF standard converter that does not have its own tag:
Use the Components window or Properties window to register your validator with a standard tag.
To register a JSF standard validator on a component using a standard tag:
Use the Properties window and Components window to assign an ID and add the message.
To display a message next to the component that generated the conversion or validation error:
Use the Overview Editor to register your custom converters. The Create Attribute or Create Property dialog appears for you to specify generic attributes or JavaBeans properties that may be configured on the custom converter or validator.
To register a custom converter or validator in the configuration file:
faces-config.xml
file to open it in the JSF Overview Editor. In the editor, click the Overview tab.Use the Overview Editor to edit your custom converter or validator.
To edit a custom converter or validator:
faces-config.xml
file to open it in the Overview Editor. In the editor, click the Overview tab.Use the Overview Editor to edit a custom converter.
To delete a custom converter or validator in the JSF application configuration file:
faces-config.xml
file to open it in the JSF Configuration Editor. In the editor, click the Overview tab.Use the Components window to register your custom converter on a component.
To register a custom converter on a component using a converter identifier:
Use the Properties window to register your custom converter on a component with a value binding expression.
To register a custom converter on a component using a value binding expression:
Use the Components window to register a custom validator instance on a component.
To register a custom validator instance on a component:
Use the Bind Validator property dialog to bind a component to a new validator method.
To bind a component to a new validator method:
JSF page with automatic component binding off:
<h:selectOneMenu validator="#{nonauto.validatename1}"> <f:selectItems value=""/ </h:selectOneMenu>
Default validator method code:
... public void validatename1(FacesContext facesContext, UIComponent uiComponent, Object object) { // Add event code here... } ...
JSF page with automatic component binding on:
<h:selectOneMenu binding="#{backing_auto.selectOneMenu1}" validator="#{backing_auto.selectOneMenu_validator}"> <f:selectItems value="" binding="#{backing_auto.selectItems2}"/> </h:selectOneMenu>
Default validator method code:
... public void selectOneMenu_validator(FacesContext facesContext, UIComponent uiComponent, Object object) { // Add event code here... } ...
All of the attributes supported by JDeveloper are shown in Table 16-14 and Table 16-15. Attributes in square brackets ([ ]) are not required. All accepted, predefined attribute values are separated with vertical bars (|); the default value is in boldface. For attributes that do not have a fixed set of accepted values, the values are shown in italics.
Table 16-14 JSF Standard Converter Tags
Tag | Syntax |
---|---|
f:convertDateTime |
<f:convertDateTime [dateStyle="default|short|medium|long|full"] [timeStyle="default|short|medium|long|full"] [pattern="pattern"] [type="time|date|both"] [locale="locale"] [timezone="timezone"] /> |
f:convertNumber |
<f:convertNumber [pattern="pattern"] [minIntegerDigits="min"] [maxIntegerDigits="max"] [minFractionDigits="min"] [maxFractionDigits="max"] [groupingUsed="true|false"] [integerOnly="true|false"] [type="number|currency|percent"] [currencyCode="currencyCode"] [currencySymbol="currencySymbol"] [locale="locale"] |
Table 16-15 JSF Standard Validator Tags
Tag | Syntax |
---|---|
f:validateDoubleRange |
<f:validateDoubleRange [maximum="max] [minimum="min"] /> |
f:validateLength |
<f:validateLength [maximum="max"] [minimum="min"] /> |
f:validateLongRange |
<f:validateLongRange [maximum='max"] [minimum="min"] /> |
Create and define error messages using the Message component and the Properties window to define the attributes.
To display one error message next to a component that generated an error:
Tip:
To enable a component detail message to appear as a tooltip during runtime, set the message tag tooltip attribute to true
. The tag showSummary
and showDetail
attributes must also be set to true. If you are using ADF data controls to create JSF forms and tables, the h:messages
tag is automatically added, which displays all error messages by default. You do not have to add individual h:message
tags manually.
Use the Properties window to set the display attributes for your messages.
To display all error messages generated in a page:
Tip:
Set the globalOnly
attribute to true if you want to display only global messages which are not associated with components. If you're using ADF data controls to create JSF forms and tables, JDeveloper automatically adds the h:messages
tag for you. You do not have to add the tag manually.
Create your text resource bundles and then use the overview editor to edit your configuration file and add the bundle classpath. JSF first looks for messages in any registered resource bundle before looking into the JSF standard bundle. This lets you override any JSF standard message by using the appropriate key in your resource bundle. For a list of messages see the JSF API javax/faces/Messages.properties
.
To replace the standard message texts in JSF:
faces-config.xml
to open it in the JSF Configuration Editor. Go to the Overview mode.model.login.Resources
.h:message
tag to display one error message, or h:messages
tag to display all error messages. JUse the Overview Editor to add a phase listener to your configuration file.
To add information about a form field to which a message refers:
PhaseListener
implementation that retrieves and adds a generic attribute to a message.faces-config.xml
to open it in the JSF Configuration Editor. Switch to the Overview mode, if necessary.Use the stylesheet to change you message appearance.
To change the appearance of error messages in a JSF page:
h:message
or hmessages:
component.ErrorClass
attribute to the name of a style class defined in your CSS file. To do this, in the Properties window click the column next to ErrorClass
, then select a style class.Note:
To use one or more inline styles, expand ErrorStyle in the Properties window; then enter or select a value next to the style you want to specify, for example, background-color.
In CSS file: mystyles.css: .error { font-style: italic; color:red; } .prompt { color:blue; } In the JSF file: ... <f:view> <html> <head> <link media="screen" rel="stylesheet" href="css/mystyles.css"/> </head> <body> <form> <h:inputText id="someid" value="{somebean.someproperty}"/ <h:message for="id" errorClass="error"/> <h:outputText value="{}" styleClass="prompt"/> ... </form> </body> </html> </fview> ...
Configure your referenced beans using the faces-config.xml
. By declaring the bean in this file, design-time tools can understand beans that are not available at design time (such as data access) but will be available at runtime.
When you create any JSF or facelet file a WEB-INF/faces-config.xml
is automatically created. You can have more than one JSF configuration file. You might want to create multiple configuration files for separate areas of your application. Additionally, if you choose to have packaged libraries containing custom components or renderers, you need a separate faces-config.xml
file for each library. In this case, the configuration file is stored in the META-INF directory (as opposed to the WEB-INF directory).
Use the Application section of the Overview Editor to configure child elements. For all elements that take a fully qualified class name as a value, you can use the Browse... button to launch the Class Browser to find the class. Once you exit a field, the value is populated to the XML file.
To use the overview editor for configuration files to set the <application> element:
faces-config.xml file.
This file is located in the Web Content/WEB_INF
directory.Use the New Gallery wizard to create a new JSF configuration file. You can then include this configuration file in the .jar
file that you use to distribute your components or classes.
To create a new JSF configuration file:
In the Applications window, select your project. The project contains a WEB-INF node, which contains the file web.xml.
Right-click the project node and choose New.
In the New Gallery, go to Categories, expand the Web Tier, then select JSF/Facelet.
In the Items list, select JSF Page Flow & Configuration.
Click OK. The Create JSF Configuration File dialog appears.
Set the values to purpose your file. If you are adding a configuration file for your application:
Enter a File Name for the new configuration file.
Verify or change the Directory.
Check the Add Reference to web.xml checkbox. When selected, a new web.xml
file is added, and is read as part of your application configuration.
Click OK. This creates a new configuration file using the entered name.
If you are creating a configuration file for custom components or other JSF classes delivered in a library .jar:
Set the file name to faces-config.xml
.
Change the Directory Name to META-INF.
Clear the Add Reference to web.xml checkbox.
Click OK. This creates a new configuration file using the entered name.
You can convert a project or file to facelets using the Convert to Facelets feature as shown in Figure 16-16. This process modifies your project or file in three ways:
Tag libraries added - All facelets tag libraries with the same namespaces as JSP tag libraries used by the Project are added.
Tag usage changed - Each JSP page in this project (.jspx
or .jsff
), is replaced with a facelets page.
File names changed - You specify which file extension to use for facelets in this conversion. If the file extension is not currently associated with facelets in this project (javax.faces.FACELETS_VIEW_MAPPINGS context parameter in web.xml) and in the Preferences (Tools > Preferences > File Types), then the required mappings are added to web.xml
and preferences. All .jspx files are renamed to the file extension you specify here. All references to your renamed .jspx
files are updated accordingly.
Figure 16-16 Convert to Facelets Dialog
The following should be considered before you convert to facelets:
JSP tags that cannot be converted are left unchanged in the converted page. Until these JSP tags are manually converted, the converted page is not executable.
The JSP pages in XML syntax, which typically have .jspx
file extension, are supported. JSP pages in JSP syntax, which typically have .jsp
file extension, need to be converted to XML syntax in order to use the facelets conversion feature.
The conversion is not undoable. We recommend that you make a back-up copy of the Project before running Facelets conversion.
Converting to facelets modifies your application preferences, which applies to any project you use in JDeveloper.
File names are changed unless you choose to preserve the file extension. Changed file names can cause problems with the version control system in some cases. We recommend that you test converting a single JSP file before converting many files in a project to make sure that the version control system works okay with file name changes.
If you choose to preserve the JSP file extension (.jspx
), all files with .jspx
extension will be recognized as facelets after conversion. If you want to leave some of the .jspx
files unconverted and run them as JSPs, then manually rename the .jspx
files to a new file extension for JSP documents, and ensure that the file name change does not cause any problem with the version control system.
The changes being made for the conversion are presented in three sections in the log windows, one for the tag libraries conversion, tag usage conversion, and file name conversion, as shown in Figure 16-17.
Note:
To the log window, select Window > Log.
During your preview session, you can choose to cancel the entire conversion process and back out of any changes being made. To continue the conversion, click Convert.
Figure 16-17 Log Window Showing File Names Being Converted
JDeveloper has an Integrated WebLogic Server that enables you to run and test web applications from the IDE. No special connection setup is required. Run either the entire application project or individual JSF pages.
From your JSF page use the context menu to run that page.
To run and test individual pages:
faces-config.xml
), select the JSF page to run.You can run a project using the context menu.
To run a project, you must first specify a default run target. If you have not already done so, JDeveloper prompts you to enter a default run target the first time you run a project. You can also specify the default run target by editing the project properties.
When you run a JSF application from the IDE, JDeveloper automatically:
Compiles the application.
Starts the Integrated WebLogic Server processes and launches the application in your default browser using the default address.
For example:
http://127.0.0.1:8988/myproject-ViewController-context-root/faces/home.jsp
Where 127.0.0.1 is your your_machine_IP_address and 8988 is your http_port.
Note that you can change the default application name and web context root in the project properties.
To run and test an entire project:
JDeveloper provides full support for developing applications with HTML technology in accordance with the HTML 5 W3C specification at http://www.w3.org/TR/html5/
.
There is a full set of integrated and synchronized design tools and components for creating and editing HTML pages. For information on the HTML Source Editor and Visual Editor see Using the Source Editor and Working in the Visual Editing Environment.
To get started with your HTML web pages, you first need to create a web application. Go to Table 16-9 to see the available application types.
Once you have created your web application framework, you are ready to start building your HTML pages.
Use the New Gallery wizard to create your HTML pages. A simple HTML file is generated and appears in your active project. The deployment descriptor file web.xml
is also added to your project. The deployment descriptor file is used by the Integrated WebLogic Server when you run the HTML.
To create an HTML page:
The New Gallery wizard walks you through building your web pages.
When you are building your HTML page use the Components window to click or drop and drag most of the commonly used tags into your page. JDeveloper features a commonly used set of HTML element tags as well as a set of form tags to add user input attributes and behaviors, as shown below in Figure 16-20 and Table 16-16.
Figure 16-20 Component Palette for HTML Pages
Table 16-16 HTML Common Components
Tag Name | Description |
---|---|
Anchor |
Inserts a named anchor <A name> invisible element. |
Email Link |
Inserts an HTML <A> element in your page with the email address you provide. |
Horizontal Rule |
Inserts HTML <hr> element in your page at the current cursor location to display a horizontal line. |
Hyper Link |
Inserts a link to a HTML reference you define. |
Image |
Adds the HTML |
Line Break |
Inserts a line break. |
Link |
Inserts a link to an external style sheet or any other external document. |
Noscript |
Provides alternate content when a script is not executed using an HTML |
Script |
Embeds the |
Style |
Embeds an internal style sheet in the document. |
Table |
Inserts a skeleton HTML |
Save your JSP files to HTML using Menu options from the source editor.
You can save your JSP pages as HTML pages by opening your JSP file in the source editor and choosing File > Save as HTML.
The Save as HTML option saves a copy of your file with the HTML extension leaving the original file unchanged. The HTML file preserves text formatting so when viewed in a browser it looks like the original HTML page. The saved HTML file can be reopened and viewed as HTML, but no longer understood as code.
Use the Style node in the Properties window to change formatting styles for your HTML text.
Type your text right into your HTML pages in the visual editor.
You can format inserted text using the toolbar in the visual editor. The toolbar applies manual or inline formatting in the page. For example
<H5><EM><FONT color="#ff0000">This is a Heading 5 in italics iUse the Toolbar to:n the color red</EM></FONT></H5>
To add text, do one of the following:
Click the position in the visual editor where you wish to insert text. Begin typing when the blinking cursor appears.
Copy and paste text from files in the same project or different projects.
CSS styles define the formatting for all text in a particular class or redefine the formatting for a particular tag such as h2. You can use CSS styles and manual or online HTML formatting within the same page. Manual HTML formatting overrides formatting applied by a CSS style.
To set text properties:
You can insert, move, and resize your images with the HTML editing tools.
JDeveloper supports the following graphic file formats:
JPEG/JPG
GIF
PNG
Use the Image component on the Components window to insert an image onto your HTML page.
To insert an image:
Delete images using the usual keyboard delete commands.
To delete an image, do one of the following:
Select the image and click Delete or Backspace.
Select the image and from the main menu choose Edit > Cut.
Right-click and use the Properties selection to resize your images in your HTML pages.
To resize an image, do one of the following:
Right-click and select Properties, then adjust pixels for width and height.
Select and use the resize handles at bottom and right sides of the image and in the bottom right corner to adjust the image width and height.
Select and modify the image width and height attributes in the Properties window.
Image properties set using the visual editor are marked in the Properties window with a green square. To return a resized element to its original dimensions delete the values in the width and height fields in the Properties window, or click the Reset Size button.
Use the Properties window to set your image as a background on your HTML page.
To use an image as a background:
Move images by dragging, cutting and pasting, or using the move command.
To move an image by dragging:
In the visual editor or Structure window do any of the following:
Drag the image from the original position to an insertion point in the visual editor or Structure window.
Right-click drag the image from the original position to an insertion point in the visual editor or Structure window, and then choose Move Here from the context menu.
In the visual editor or Structure window do any of the following:
Cut the image. Then, paste into some other position in the Visual Editor or Structure Window.
Cut the image. Then, paste into another file in the same project or a different project.
Use the visual editor to create and edit tables and data on your HTML pages. Use the toolbar, Properties window, and Structure window to edit tables to add text and images; add, delete, resize, reorder, split, and merge rows and columns; modify table, row, or cell properties for color and alignment; copy and paste cells, and nest tables in table cell.
Add text to a table cell by typing it directly in the cell in the editor. Using a table cell as the insertion point, you can add and remove graphics or other UI and data elements to tables.
To add text to a table cell:
Use the toolbar menu or backspace key to remove content from your cells. Only the contents of the cell, not the cell, will be removed from the table. If the entire row or column is selected, the row or column is removed along with the contents of the cell.
To remove content from one or more cells select cells:
Click Delete or Backspace.
From the main menu select Edit > Delete.
Use the Properties window to define properties that apply to the entire table or to selected cells, rows, or columns in the table. When a property such as background color or alignment is set with a value for the whole table and a different value for individual table cells, precedence in formatting is applied in the following order:
table cell, <td> tag
table row, <tr> tag
<table>
tagIf you specify a background color of green for a single cell and then set the background color of the entire table to red, the green cell will not change to red, since the <td>
tag takes precedence over the <table>
tag.
Use the Properties window to set your table and cell properties.
To set table and cell properties:
Use the visual editor toolbar to quickly set table and cell properties.
To set table and cell properties using the visual editor toolbar:
<table>
, <tr>
, and <td>
in the Structure window.There are a few choices available to choose from for resizing your tables.
To resize a table, do one of the following:
Select the table in the visual editor and use the resize handles to drag the table height, width, or both to the desired size.
Select the table in the visual editor or the corresponding <table>
element in the Structure window, and then set the table width attribute in the Properties window.
Double-click the table in the visual editor and in the Edit Table dialog reset the table width in pixels or percentage of page width.
Right-click the table in the visual editor or the corresponding <table> element in the Structure window, and then choose Edit Tag from the context menu to display an Edit Table dialog.
Drag your rows and columns to your size preference in the visual editor.
To change the size of rows or columns:
Right-click and use the context menu to add rows or columns to your tables.
To add rows or columns to a table:
Right-click and use the context menu to remove your table rows or columns.
To remove rows or columns in a table:
Right-click and use the context menu to merge your table cells.
To merge table cells:
Use the Design option in the main menu to split your table cells.
To split a table cell:
There are several options to choose from to modify your table structure.
To change the display order of rows, columns, or groups of table cells using the visual editor:
Use the Structure window to drag your rows to your preferred order.
To change the display order of rows using the Structure window:
In the Structure window, select and use the context menu to increase your row or column span.
To increase row or column span in a table:
Use HTML forms on your HTML pages to interact with or gather information from users of your web pages. Forms are comprised of:
Form tags, which include form processing information.
Form fields, which may include text fields, menus, checkboxes, or radio buttons.
Submit button, which sends the data to the form processing agent.
When you are working on your HTML pages, you can insert your HTML form tags by dragging them from the Components Form window, onto your HTML page. Figure 16-21 shows the form tags available in the Components window.
Figure 16-21 Components Palette for Forms
Drag the Form component from the Components window to your HTML page to create a form element.
After creating the skeleton form, add form fields and buttons and specify form processing information. By default, forms are created with a Get form processing attribute.
When form fields or buttons from the Components window are added to the page, a <form> element is automatically inserted as a parent element.
To create a new HTML form:
With a file open, do one of the following:
Select the insertion point in the visual editor or the Structure window where you want the form to appear, then click Form on the Components window.
Drag the Form element from the Components window to the insertion point. The HTML code to create a skeleton form is inserted. Note that a form appears as a dotted outline in the editor.
Use the usual delete or backspace to remove your form elements.
To delete a form element:
Select the form in the visual editor or the corresponding <form>
element in the Structure window, and do one of the following:
Click delete or backspace.
From the main menu select Edit > Delete. The form, and any form fields and buttons within the form are removed. To remove the form element without deleting form fields or buttons, right-click the form and select Form > Remove Form Tag.
Use the Components window to insert a form field or button on your page.
To insert a form field or button:
Right-click and use the Form selection to change a method in your form.
To change the form method from the context menu:
Delete fields or buttons using the main menu or keyboard.
To delete a form field or button, do one of the following:
Select the element and press Delete or Backspace.
Select the element and from the main menu choose Edit > Cut.
To set form processing information using the Properties window:
Use Cascading Style Sheets (The current standard is CSS2 Revision 1, and we support CSS3 as well) to control the style and layout of your web pages. CSS defines the formatting attributes for HTML tags, ranges of text identified by a class attribute, or text that meets criteria conforming to the Cascading Style Sheets (CSS2) specification.
For more information on CSS2 R1, see the W3C website at, http://www.w3.org/TR/1998/REC-CSS2/
For more information on CSS3, see the W3C website at, http://www.w3.org/Style/CSS/current-work.en.html
There are variety of CSS features to help you create and edit you CSS files. Table 16-17 lists the CSS Source features:
Table 16-17 CSS Source Editing Features
Feature | Description |
---|---|
Code insight for CSS |
Displays a list of HTML selectors, properties, values, pseudo-classes and pseudo-elements, for the CSS file under the cursor, to select an appropriate completion. For example, if you place the cursor just after the opening brace in a style rule, it displays a list of all possible properties to enter at that point in the file. |
Reformat for CSS |
Correctly reformats your code on that CSS page. Right-click on your file in the CSS editor or from the Applications window and choose Reformat. |
CSS Error handling |
Highlights invalid CSS properties, values, and missing semicolon and braces. |
Stylesheet linking to HTML files |
Links a stylesheet to your HTML files simply by dropping a Link element into your HTML page. Another option is to choose CSS in the Components window. The list of available CSS files displays in the Components window. You can then drag and drop any CSS file from the Components window to the page. |
Style preview |
Allows you to see what your styles look like while you're coding. |
Code colors |
Helps you easily spot properties, values, and keywords. |
CSS Refactoring |
Refactors across the application when you rename CSS files, class and ID attributes, or move, copy, and safe delete files. |
Brace Matching for CSS Code Editor |
Highlights the matching braces, brackets, and parentheses in the code editor based upon the cursor position. |
Toggle Line Comments |
Adds or removes comment markers from the beginning of each line in a selected block. Select a single line to comment or uncomment that line only. |
ADF Skin Editor |
Creates and modifies ADF skins. ADF skin is a type of CSS file that applies to an ADF application. |
Drag and Drop Linking |
Links a CSS file to an HTML or JSP page. |
Quick docs |
Opens the description from the W3C standard. |
When a CSS file is open for editing, CSS selectors are displayed in the Structure window using icons:
Elements
Element is the HTML element or tag defined by the CSS selector. Property and value are separated by a colon and surrounded by curly braces. For example: body {color:black;.}
Class represents different styles defined for the same type of HTML element. For example p.right {text-align:right;}
to define right-aligned paragraph text, and p.left {text-align:left;}
to define left aligned paragraph text. You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class. For example center {text-align:center;}
defines all HTML elements with class="center"
to be center-align.
IDs
ID represents a style unique to one HTML element. For example p#para1 {color:green;}
defines the p element that has the id value="para1" and *#ver905 {background-color:red;}
defines the first HTML element with id value="ver905"
.
You can use the Categories dropdown list in the Structure window toolbar to show CSS selectors by categories, as shown in Figure 16-22.
Figure 16-22 CSS Selector For Sorting Options
There are three group types from which to choose
No Category
When No Category is selected, your Structure window display is in the order of appearance in the CSS file. This is the default setting.
Type Category
When you select Type Category, your Structure window display is arranged by the CSS selector types of element, class or ID.
Element Category
When you select Element Category, your Structure window display is arranged by HTML element or tag.
Select a CSS selector in the Structure window to highlight the selector in the editing window and edit associated properties and values in the Properties window.
Select the Separate Grouped Selectors icon to separate or ungroup the selector categories in the Structure window.
Select an element group and right click and select Comment Out, to comment out the selected element in your CSS file.
Use the New Gallery to create your simple CSS page.
To create a simple Cascading Style Sheet:
Use the Properties window to set your CSS properties and values.
To set or modify CSS selector properties and values:
You can also use CSS to automatically update text and page formatting within a page or across several web pages. CSS styles define the formatting for all text in a class or redefines the formatting for a particular tag such as h2.
You can use CSS styles and manual or online HTML formatting within the same page. Manual HTML formatting overrides formatting applied by a CSS style.
To format CSS text properties:
This section covers JDeveloper support and tools for your user interface development using JavaServer Faces (JSP) technology within the Java EE platform.
JDeveloper provides a complete user interface development environment for Java Server pages (JSP) development in accordance with the JSP 2.1 specification defined at http://jcp.org/aboutJava/communityprocess/final/jsr245/index.html
.
You can build your application from the ground up using the features provided in JDeveloper. The first thing to do is build a framework, or application template for your web pages. Start by using the application project templates. Choose from a combination of options in the New Gallery.
JDeveloper comes with a Components window with standard JSP components that you can easily drag and drop onto your JSP pages, as shown in Figure 16-23 and Table 16-18.
Figure 16-23 JSP Core Components Window
Table 16-18 JSP Core Components
Tag | Description |
---|---|
Attribute |
Defines the value of a tag attribute in the body of an XML element instead of in the value of an XML attribute. |
Body |
Specifies the body of the tag. |
Declaration |
Declares a method or variable valid in the scripting language used in the JSP page. |
EL Expression |
Contains an expression in the JSP Expression Language (EL) to provide easy access to application data stored in JavaBeans components. |
Element |
Dynamically defines the value of the tag of an XML element. This action can be used in JSP pages, tag files and JSP documents |
Expression |
Contains an expression valid in the scripting language used in the JSP page. The expression is evaluated, converted to a String, and inserted into the response where the expression appears in the JSP page. |
Fallback |
Displays a text message if the dialog to initiate the download of plug-in software fails. A translation error will occur if the element is used elsewhere. |
Forward |
Forwards the request object containing the client request information from one JSP page to another resource. The target resource can be an HTML file, another JSP page, or a servlet, as long as it is in the same application context as the forwarding JSP page. |
GetProperty |
Gets a bean property value using the property's getter methods and insert the value into the response. |
Hidden Comment |
Documents the JSP page without inserting the comment in the response. |
Include |
Sends a request to an object and include the result in a JSP file. |
Include Directive |
Inserts a static file of text or code in a JSP page at translation time, when the JSP page is compiled. |
Page Directive |
Defines attributes that apply to the entire JSP page. |
Param |
Passes one or more name/value pairs as parameters to an included resource. |
Params |
Provide key value information. |
Plugin |
Executes an application or JavaBean in the specified plugin. |
Scriptlet |
Inserts a code fragment valid in the page scripting language. |
SetProperty |
Sets a property value or values in a JavaBean |
Taglib Directive |
Defines a tag library and prefix for the custom tags used in the JSP page. |
UseBean |
Locates or instantiate a JavaBean with a specific name and scope. |
The New Gallery wizard walks you through all of the necessary steps to build the web pages for of your application. After you create the page, a simple JSP is generated and appears in your active project. The deployment descriptor file web.xml
is also added to your project. The deployment descriptor file is used by the Integrated WebLogic Server when you run the JSP.
To create a new JSP page:
The Create Servlet Filter wizard available from the Web Tier category in the New Gallery creates a new filter you can use to process requests or responses to or from your JavaServer Page.
A new servlet filter is generated and appears in your active project. The deployment descriptor file web.xml is updated with the <filter> element. The deployment descriptor file is used by the embedded web server in JDeveloper when you run the JSP.
To register a servlet filter in a JSP page:
Web applications implement flow control by directing the display content of the web browser in response to specific user actions. Generally it makes sense to create separate JSP pages or sets of pages for each task in the workflow. The user makes choices in one page and clicks a link to submit their choices on the Request object. The link they click directs the Request object to the page responsible for handing the action.
The following flow-control approaches are supported in JDeveloper:
In all-in-one JSP page development, JDeveloper helps to reduce the amount of Java code visible in your JSP pages through tag libraries that provide JSP tags which encapsulate complex behavior such as implementing databound, performing data actions (such as query, browse, edit, and update), and generating reports.
If you use JSP includes, you can benefit from the Oracle Business Components Data Tag library that implements a set of JSP page-level tags (known as component tags) that handle common actions such as navigation, querying, browsing, editing, and scrolling.
If you fully separate the JSP display content and JSP action-handler classes, JDeveloper supports two Java EE frameworks.
JavaServer Faces page navigation.
JDeveloper provides full support to allow you to visually design page flows for web applications based on either framework.
When you want to build applications for the web and benefit from a framework that implements many of the Java EE design patterns for interactive applications, JDeveloper provides the Oracle Application Development Framework (Oracle ADF). One of its central features is a data binding layer that uses a standard declarative way to bind data from a business service, such as web services, EJB, JavaBeans, and Oracle ADF Business Components, to UI components, such as Oracle ADF Faces components and standard HTML elements.
You decide the way your application handles the Request object. JDeveloper supports various options for implementing JSP page flow control:
You can write JSP pages that use a combination of HTML generating code and Java scriplet code to link back to themselves and handle the actions. In this case, the entire action handling code is contained in the JSP page that also displays the content. This mixes HTML and flow control logic within the same file.
You can cleanly separate JSP pages and their actions by implementing the controller outside of the JSP page.
JDeveloper supports deploying Web applications on any Java EE application server through the creation of a Web Module Archive (WAR). There is additional support for deployment to Integrated WebLogic Server.
You can debug your JSP pages in a couple of clicks.
JDeveloper performs the following functions when debugging a JSP:
Translates the JSP into a servlet and compiles it.
Starts the Integrated WebLogic Server process.
Runs the resulting classes directly from the output project directory.
Invokes the JSP in your default Web browser. For example, your browser is launched as follows:
http://<your_machine_IP_address>:<http_port>/<context_root>/<path_to_JSP>
for example:
http://127.0.0.1:8988/Project1-context-root/untitled1.jsp
To debug a JSP:
The are a few ways to create a web deployment descriptor. You can use the New Gallery, or add a JSP page. New deployment descriptors are added to the WEB-INF folder in the project, and it will be opened in an XML editor window.
To create a web deployment descriptor:
Right-click to open the properties dialog and edit your descriptor properties.
To edit web deployment descriptor properties:
The descriptor file is in XML format in the WEB-INF folder. You can open the file in the XML source editor or the Overview editor.
To edit a web deployment descriptor as an XML file:
WEB-INF
folder.The Integrated WebLogic Server handles running your JSPs in JDeveloper. You can run your JSP pages right from the page.
After building your JSP, you can run it in a couple of clicks. You can also edit your JSP while you are running it.
To run a JSP:
Several things automatically happen when you run your JSPs:
The JSP is translated into a servlet and compiled.
The resulting classes are run directly from the output project directory.
The web.xml file is modified to include the servlet name and class information.
The JSP is invoked in your default Web browser. Your browser is launched using this format:
http://<your_machine_IP_address>:<http_port>/<context_root>/<path_to_JSP>
for example,
http://127.0.0.1:8988/Project1-context-root/untitled1.jsp.
You can modify and view changes that you make to your JSP files as they are running, without having to restart WebLogic Server. To view changes in your browser, you can either reload the page from the browser or run the page again.
If you are running JSPs with business components application modules in both the Integrated WebLogic Server and in a remote server instance, and have two JSPs contained in two different projects that depend on the same middle tier project, you need to declare that middle tier is running inside of a WebLogic Server instance with the jbo.server.in_wls=true
property.
When developing, compiling, and running JSPs, if the timestamp of a source JSP file is ever changed to an earlier timestamp, the JSP will not automatically be recompiled by JDeveloper or by WebLogic Server. It must be forced to recompile. To force recompilation, right-click on the JSP and select Rebuild, use Build->Rebuild, Build->Rebuild All, Build->Clean, or Build->Clean All.
Timestamps can go backwards in time when using source control systems (restoring an older version) or using timestamp preserving copy commands like xcopy
or mv
.
A JSP fragment is a JSP page that can be included in another JSP page.
JSP segments use .jspf
as a filename extension. By default JSP fragment files are placed with the rest of the static content in the web application folder. JSP segments that are not complete pages should always use the .jspf
extension.
JSP segments are defined using JSP syntax as the body of a tag for an invocation to a SimpleTag handler, or as the body of a <jsp:attribute>
standard action specifying the value of an attribute that is declared as a fragment, or to be of type JspFragment in the TLD.
A servlet is a platform-independent, server-side Java component used to extend the capabilities of a web server. Using servlets, you can dynamically tailor content, function, and the look and feel of your web pages. Servlets process client requests and can respond by returning any MIME type to the requesting client, including images, XML, and HTML. Servlets run inside web servers, so they do not require a graphical user interface. They are typically used to dynamically generate HTML content and present it to the requesting client. You can think of a servlet as the server-side counterpart to an applet.
Servlets are based on a standard API and protocol defined by JavaSoft. To run a servlet, your environment needs a web server that supports the JavaSoft servlet API, such as Oracle WebLogic Server, JavaSoft Java Server, and Apache Tomcat, among others. JDeveloper provides support for servlet filters and listeners, annotations and deployment descriptors, web fragments for pluggability and extensibility, and asynchronous support (Servlet API 3.0). When you use the Create Filter wizard and Create Listener wizard, it updates the web.xml with filter and listener entries. The web.xml can also be manually edited to include or modify these entries.
For more information, see the Oracle Fusion Middleware Developing Web Applications, Servlets, and JSPs for Oracle WebLogic Server.
Servlets are often used to process HTTP requests submitted by a client, and to provide dynamic content by returning results of a database query to a client. This type of Java servlet is known as an HTTP servlet. A typical runtime scenario for an HTTP servlet is as follows:
A client sends an HTTP request to the servlet. The client could be a web browser or some other application.
The servlet processes the request and responds by returning data to the client. In the case of HTML servlets, these servlets generate and send dynamic HTML content back to the client. If the servlet is designed to do so, it may request data from a database server on behalf of the client, then package and return the results to the client in an HTML form. This can be done using JDBC or by working with Oracle ADF Business Components.
The client user can then interactively view and respond to the generated HTML content, perhaps making additional requests through the generated HTML form.
A filter is a reusable piece of code that can transform the content of HTTP requests, responses, and header information. Filters do not usually create a response; instead you use filters to modify the requests or responses, or to perform some other action based on the requests or responses, including:
Examining a request before calling a servlet.
Modifying the request or response headers or data (or both) by providing a custom version of the object that wraps the real request or response objects.
Performing some action before the servlet is invoked, after it completes, or both (for example, logging).
Intercepting a servlet after the servlet is called.
Blocking a servlet from being called.
By default, the Create Servlet Filter wizard available from the Web Tier Servlets category in the New Gallery creates a filter that dynamically intercepts requests and responses to transform or use the information contained in the requests or responses.
A listener can be used to monitor and react to events on a servlet's life cycle by defining listener objects whose methods get invoked when life cycle events occur. Application event listeners are classes that implement one or more of the servlet event listener interfaces. Servlet event listeners support notification for state changes in the ServletContext
and HttpSesion
objects, specifically:
Servlet context listeners are used to manage resources or state held at a VM level for the application.
HTTP session listeners are used to manage state or resources associated with a series of requests made into a web application from the same client or user.
You can have multiple listener classes listening to each event type and specify the order in which the container invokes the listener beans for each event type.
The Create Servlet Listener wizard available from the Web Tier > Servlets category in the New Gallery creates a new listener you can use with your servlet or other web components; you can run this wizard multiple times to create additional listeners.
JDeveloper will create the servlet for you based on information you specify, including the methods and parameters for the servlet.
A simple servlet is generated and appears in your active project. The deployment descriptor file web.xml
is also added to your project. The deployment descriptor file is used by the Integrated WebLogic Server in JDeveloper when you run the servlet.
Note that the deployment descriptor file will take precedence over any annotations you have made to your servlet. For example, while you can create a class with an annotation such as @Servlet
, the deployment descriptor file will override it if the values are different. Be sure to reconcile any differences between the annotations and their declarations in the deployment descriptor file.
To generate the HTTP Servlet:
When you use the Create HTTP Servlet wizard to create an HTTP servlet, the wizard creates a Java class for the servlet. This class contains an initialization method and the HTTP methods you specified for the servlet when using the wizard. To customize the servlet, you must implement the servlet's HTTP methods.
The following methods are available from the Create HTTP Servlet wizard:
doGet
handles GET
, conditional GET
, and HEAD
requests.
doPost
handles POST
requests.
doPut
handles PUT
requests.
doDelete
handles DELETE
requests.
service
handles Service
requests.
JDeveloper creates skeleton code for these methods. These methods take two objects as arguments HttpServletRequest
and HttpServletResponse
. You can also pass in additional parameters and get them programmatically by calling the ServletRequest.getParameter
method within your servlet's Java code.
The first HTTP argument in a basic servlet method is an HttpServletRequest
object. This object provides methods to access
HTTP header data, including cookies found in the request.
The HTTP method used to make the request.
The arguments sent by the client as part of the request.
The methods you call when implementing your servlet methods depend on the kind of HTTP request the servlet will receive. Table 16-19 summarizes the relationship between the possible kinds of HTTP requests and the corresponding methods you should use when implementing your servlet methods.
Table 16-19 Types of HTTP Requests
Possible Client HTTP Requests | Corresponding Client Data Access Methods and Techniques to Use in Your Servlet Code |
---|---|
Any HTTP request |
Use the |
HTTP GET request |
Use the |
HTTP POST, PUT, and DELETE requests |
In general, use the |
The second HTTP argument in a basic servlet method is an HttpServletResponse
object. This object encapsulates the information from the servlet to be returned to the client. This object supports the following ways of returning data to the client:
A writer for text data (via the getWriter
method)
An output stream for binary data (via the getOutputStream
method)
You can also send a cookie in the response using the addCookie
method.
To change the HTTP Response Type:
By default, the Create HTTP Servlet wizard creates a servlet that dynamically generates HTML content (MIME type: text/html
). You can change to another MIME type by selecting the desired type from the Generate Content Type dropdown in the Create HTTP Servlet wizard. The wizard adds the setContentType
method in the servlet's Java file with the selected type to set. For example, if you choose the XML content type, the wizard generates:
public class HelloWorld extends HttpServlet { private static final String CONTENT_TYPE = "text/xml; charset=windows-1252"; private static final String DOC_TYPE; public void init(ServletConfig config) throws ServletException { super.init(config); } public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType(CONTENT_TYPE); PrintWriter out = response.getWriter(); if (DOC_TYPE != null) { out.println(DOC_TYPE); } out.close(); } }
The Create Servlet Filter wizard available from the Web Tier - Servlets category in the New Gallery creates a new filter you can use to process requests or responses to or from your servlet or JavaServer Page.
The Create Servlet Filter wizard creates the servlet filter for you based on information you specify, including the implementation class and initialization parameters.
There is an option when you enter servlet details for your new servlet filter to select the registration vehicle for your servlet. You can either add a servlet entry to the Configuration file, or select Annotations to create annotations in the source code.
A new servlet filter is generated and appears in your active project. The deployment descriptor file web.xml
is updated with the <filter>
element. The deployment descriptor file is used by the Integrated WebLogic Server in JDeveloper when you run the servlet or JSP.
Note also that you can use the annotation @ServletFilter
to declare a filter class.
To create a servlet filter:
The Create Servlet Listener wizard available from the Web Tier - Servlets category in the New Gallery creates a new listener you can use with your servlet or other web components.
A new servlet listener is generated and appears in your active project. The deployment descriptor file web.xml
is updated with the <listener>
element. The deployment descriptor file is used by the Integrated WebLogic Server in JDeveloper when you run the servlet.
The Create Servlet Listener wizard creates the servlet listener for you based on information you specify, including the implementation class and interface.
There is an option when you enter servlet details for your new servlet filter to select the registration vehicle for your servlet. You can either add a servlet entry to the Configuration file, or select Annotations to create annotations in the source code.
The annotation @ServletContextListener, added to a class definition, can also be used to declare a class of servlet listener:
@ServletContextListener
public class MyListener {
public void contextInitialized (ServletContextEvent sce) {
}
.....
}
To create a servlet listener:
The Create Servlet Filter wizard available from the Web Tier category in the New Gallery creates a new filter you can use to process requests or responses to or from your JavaServer Page.
A new servlet filter is generated and appears in your active project. The deployment descriptor file web.xml
is updated with the <listener>
element. The deployment descriptor file is used by the Integrated WebLogic Server in JDeveloper when you run the JSP.
To register a servlet filter in a JSP page:
A servlet is a Java program that runs in a Java EE application server. Think of a servlet as the server-side counterpart to a Java applet. The Integrated WebLogic Server is responsible for running servlets in JDeveloper.
As an alternative to running your servlets inside the Integrated WebLogic Server, your servlet can contain a main() routine that lets you run the servlet class as an application. That declaration is: public static void main(String[] args)
This is useful when you want to test servlet classes without running under the Oracle WebLogic Server.
To run a servlet:
After building your servlet, you can run it by executing the run command in one of the following ways:
JDeveloper performs the following functions when a servlet is run in Integrated WebLogic Server:
Compiles the servlet source code.
Starts the embedded Integrated WebLogic Server process.
Runs the resulting classes directly from the output project directory.
Edits the embedded Integrated WebLogic Server web.xml file to include the servlet name and class information.
Invokes the servlet in your default Web browser. For example, your browser is launched as follows:
http://<your_machine_IP_address>:<http_port>/<context_root>/servlet/<servlet_full_class_name>
For example:
http://127.0.0.1:8988/Project1-context-root/servlet/package1.Servlet1
You can debug a servlet using the embedded Integrated WebLogic Server in JDeveloper. The Debug command attempts to debug the selected Java file containing your servlet. In JDeveloper, you can set breakpoints within servlet source code and the debugger will follow calls from servlets into JavaBeans.
To debug a servlet:
JDeveloper performs the following functions when a debugging a servlet:
Compiles the servlet source code.
Starts the Integrated WebLogic Server process.
Runs the resulting classes directly from the output project directory.
Invokes the servlet in your default Web browser. For example, your browser is launched as follows:
http://<your_machine_IP_address>:<http_port>/<context_root>/servlet/<servlet_full_class_name>
For example:
http://127.0.0.1:8988/Project1-context-root/servlet/package1.Servlet1
JDeveloper supports deploying your Servlet applications on any Java EE application server through the creation of a Web Module Archive (WAR).
For more information, see the Oracle Fusion Middleware Developing Web Applications, Servlets, and JSPs for Oracle WebLogic Server.
JDeveloper provides scripting functionality, including support for basic JavaScript when working with JSP and HTML pages.
JDeveloper supports script languages, specifically JavaScript and JSON, through the 1.8.1 and 1.8.5 standards, which include native support for JSON encoding and decoding. JDeveloper offers the script developer tools including code insight, breadcrumb support, and the JDeveloper structure pane. JDeveloper JavaScript Code Insight completes labels, variables, parameters and functions when typing inside a script region, or inside an HTML event handler. Breadcrumb support displays the location of a selected JavaScript function in the hierarchy as you work on the file. And the Structure Pane shows the hierarchy of functions defined in the file, and also of the variables defined in the functions.
JDeveloper also provides the following kinds of support during script language development:
Audit support . Warnings are shown as yellow lines and errors as red lines in the code editor. Also, warnings and errors are indicated on the right hand side in the file overview margin.
Quick JsDoc support on JavaScript identifiers. This is similar to the quick JavaDoc available when developing in Java.
Code hover support. Pressing the shift key over JavaScript identifiers displays the definition in a ghost popup pane.
Brace matching and all other editing support, as available in other languages like Java.
The JDeveloper JavaScript Code Insight completes labels, variables, parameters and functions when typing inside a script region, or inside an HTML event handler.
The JavaScript Code Insight feature displays a dynamic list of possible completions for a given JavaScript function at the bottom of the editing pane. As you type, the Code Insight feature will display a list of possible values appropriate to the global values you have already typed. To see a list of possible entries that have already been used or defined in your project, click on the drop-down arrow and then select Show.
JavaScript Code Insight is available when editing an .html
, .jsp
, or .jspx
source file, or an included .js
file for both user-defined and built-in JavaScript functions. The assist window displays any referenced .js
files as well as any .js
file in the project not yet included.
The JavaScript Code Insight feature creates code templates for the following elements.
To invoke Code Insight:
Type the JavaScript element or its abbreviation:
case
for
foreach
if
ife (if-else)
sw (switch)
wh (while)
fori
(for loop with range)
try
trycf
tryf
al
(alert)
fn
(function)
fne
(function-expression)
dne
(do-while loop)
JavaScript Code Insight is DOM-based and browser-aware, displaying one or more browser icons for Internet Explorer, Mozilla, or Safari, to indicate browser support for a method or variable. Furthermore, JavaScript Code Insight supports the HTML 5 standard.
When you are editing a JavaScript file in the Source Editor and have the cursor located in a function, JDeveloper displays a breadcrumb trail in the lower margin of the Source Editor window.
This breadcrumb trail shows the position of this function in the JavaScript hierarchy, along with its subelements such as methods, parameters, and such. JDeveloper also displays breadcrumbs for if
, if-else
, do
, while
, for
, and try
/catch
/finally
(just as it does for Java).
To explore available functions within the hierarchy:
From the breadcrumb trail, click on a dropdown (at the file level) to go into the functions defined within that parent.
Working with script languages not only includes the direct use of script elements inside an HTML or JSP page, but also involves using references to script files which are associated with the overall application.
The JDeveloper code editor provides a syntax highlighting feature which assists in determining the proper code for a script or script-language element.
Other elements of working with script languages include creating a JavaScript Object Notation (JSON) file.
You can create a client-side script to include or embed in an HTML or JSP page.
To create a script in JDeveloper:
text/javascript
, text/tcl
, text/vbscript
) and enter the script code. For additional assistance, press F1 or click Help in the dialog.A script element that references the external script file is embedded in the page similar to the following:
<script language="JavaScript" src="foo.js"></script>
or
The script code is embedded in the page and visible from the Source editor similar to the following:
<SCRIPT type="text/vbscript">
<!--
>Sub foo()
...
End Sub
' -->
</SCRIPT>
JDeveloper provides basic JavaScript support when working with HTML and JSP pages. In addition to drag and drop support, you can change the text presentation of the JavaScript code in the Java Code Editor and associate file extensions for JavaScript file recognition in JDeveloper.
To insert a JavaScript into a JSP or HTML page:
Note:
You can also import a JavaScript file into the project.
Syntax highlighting is a JDeveloper feature that lets you more easily identify syntax elements (such as brace matching) while you are editing Java, JavaScript, and JSON files.
To set syntax highlighting options for JavaScript in the Code Editor:
When you return to work in the Java Code Editor, JavaScript syntax is highlighted according to these style settings.
By default, JDeveloper recognizes files with the .js
file extension as JavaScript. You can associate any other file extension for JDeveloper to recognize.
To add or remove file extensions for JavaScript file recognition in JDeveloper:
When you open a file with any of these extensions, JDeveloper recognizes the file as JavaScript.
You can create a JSON (JavaScript Object Notation) file in JDeveloper. A JSON file allows you to pass structured data easily between applications or between files within an application, in a lightweight format that is easily readable by humans and easily interpreted by dozens of programming languages.
To create a JSON file:
The JSON file is now available to be edited in JDeveloper. Use the normal functions of the JavaScript editor to add content.
While you are editing a JavaScript file, JDeveloper tracks the location in the structure of the project or application you are building and displays it in the Structure Pane.
The Structure Pane shows the hierarchy of functions defined in the file, and also of the variables defined in the functions.
To find a location in the code editor from the Structure Pane:
Double-click any element in the Structure pane to take your focus to the corresponding place in the code editor. If there are errors in the file, they also show up in the Structure Pane.
JDeveloper provides support for renaming references to a function or variable. JDeveloper also replaces all occurrences of function names with the new name when you perform delete operations. This method of renaming and replacing function names is known as refactoring.
Refactoring is an editing technique that modifies code structure without altering program behavior. A refactoring operation is a sequence of simple edits that transforms a program's code but keeps it in a state where it compiles and runs correctly. JDeveloper provides a collection of automated refactoring operations for JavaScript code and files.
Use refactoring when you modify a program's source code to make it easier to maintain, extend, or reuse. Perform the modification as a series of refactoring steps. After each step you can rebuild and revalidate the program to insure that no errors have been introduced.
JDeveloper supports these refactoring operations for JavaScript code and files:
Renaming references to a function, variable, or label. Each occurrence of the function or variable name is replaced by the new name.
Safe deletion. The definition of the function is replicated, and all occurrences of the function name in the replicated definition are replaced by the new name.
You can search within a JavaScript file for specific usages of code elements such as functions, variables and labels. This allows you, when refactoring, to determine where an element is used so that you can safely change it, or choose not to.
To search in a JavaScript file for a function, variable or label:
JDeveloper will search through the JavaScript file for the element you have selected.
You can make two optional selections while searching for the element:
Select this if you want JDeveloper to search inside comments for the variable, label or function name. This can be useful if you have commented out a section of code that you plan to restore at a later date, or if you simply want to ensure that the comments reflect the updated name of the element involved in the refactoring.
Select this if you want JDeveloper to display the results of the search in a new tab. If you do not select this, JDeveloper displays the results in the Log window.
Note:
The Log Window is not displayed by default when you start JDeveloper. To display the Log Window, select Windows > Log.
While working with JavaScript code you can easily rename the definition and all references to a function or variable. If you wish, you can first generate a preview — a list of the usages that will be replaced. Use the preview to inspect and modify or exclude selected usages, before causing the rest to be renamed.
The scope of a renaming operation is the full scope of the element in the project. Function usages are replaced anywhere they appear in the project. Variables are renamed only in the lexical scope of their definitions; other elements with the same name are not modified.
By default, the operation will be run on JavaScript files, excluding comments (but not documentation comment tags that name code elements) and annotations. Usages that are not ambiguous will be replaced.
To rename a code element:
While developing your JavaScript code, you can safely delete the definition of a function, label or variable. The deletion will not be performed without your confirmation if the element is still in use.
If the element is in use, a log showing the usages will be displayed. Use the list to inspect and resolve the usages. If you then confirm the deletion, any remaining usages will remain in the code as undefined references.
To delete a code element:
When performing a refactoring operation that may modify many usages, it is useful to preview the refactoring to identify those usages that should be modified by hand or be excluded. You have the option, before committing these operations, of having usages listed in the Preview Log window, from which you can inspect and resolve them. Once you have confirmed the modifications, you can commit the operation.
The log displays a collapsible tree of packages and Java files. Under each file, the log displays lines of code containing modified usages. For more information about the Preview window, press F1.
In the case of a very lengthy refactoring operation (for example, one involving many calls to the same JavaScript function in a long source file), JDeveloper displays the processing status in the status bar (below the Log window).
To view a usage in an Edit window:
Double-click the entry in the log.
To exclude a usage from the refactoring operation:
Right-click the usage, and then select Exclude.
To commit the refactoring operation:
Often when editing JavaScript, you can lose sight of the initial scheme for indentations, braces, and other visual cues that help you maintain a sense of the scope of the operation you are editing and where it fits in the overall structure of the function. To aid clarity, JDeveloper can reformat your JavaScript code, causing parallel elements to line up and make it easier for you to find visual cues to the parts of the function you are editing. In addition, reformatting removes extraneous line breaks and other whitespace from the JavaScript, rendering it more compact, which can improve the efficiency of deployment by reducing file size.
To reformat a section of JavaScript code:
The selected section of JavaScript code is reformatted. When you save the file, the code will be saved in the new format.
You can customize the code editor look and feel, general behavior, and Code Insight and Java Insight options.
To change code formatting preferences
From the main menu, select Tools > Preferences > Code Editor.
Note:
From this dialog, you can also choose options for editing Java files in the Java source editor. Your selections apply to JavaScript as well as Java files.
You can also reformat a .js
file if you have made modifications that affect readability or file size. In addition, code folding can help with readability, as it lets you concentrate only on specific areas of the file by "folding" selected logical elements (such as function definitions) of the file. When folded, only the initial few key words of the code element (such as the name of the function being defined) are displayed; the rest are indicated by ellipsis (...) after the initial keywords.
To use code folding:
Click on the - sign to the left of the first column of text in the JavaScript editor.
This folds the code in the selected element, and changes the - sign to a +.
Click on the + sign to unfold the code, displaying the full contents of the area you previously folded.
Note that all JavaScript code formatting and highlighting features, as well as code folding, also apply if you are editing or creating a JSON file.
When you move a file, references to that file need to change throughout your application. JDeveloper helps with this task during refactoring by changing references in the <script src=...>
tag.
To refactor and move a JavaScript function:
On completion of the refactor, JDeveloper updates the <script src=...>
tag in all HTML files affected by the refactoring.
JDeveloper supports JSP 2.0, 2.1, and1.2, as well as Facelet 2.0 custom tag libraries, which enable the development of reusable modules called custom actions. Form processing, accessing databases or email, and flow control are examples of tasks that can be performed by custom actions. To invoke a custom action, add a custom tag inside a JSP page. A collection of custom tags forms a custom tag library. A tag library descriptor (.tld
) file is an XML document that describes your tag library and each tag in it. The taglib.xml file is the document that describes your facelets tags.
After you create a custom tag library, you can reuse it in other applications you are developing. JDeveloper includes a tag library as part of a deployment descriptor when you use it in an application.
There are several tools to simplify the task of creating new JSP or facelet custom tag libraries as well as importing and registering custom tag libraries from another source. Custom tag libraries are supported by JDeveloper Code (tag) Insight and can be added to the Components window. When working with custom tag libraries you can create custom tag libraries and tags. Register custom tag libraries in order to invoke Code (Tag) Insight for the tags while you are editing pages in the Java Code Editor. Add customized pages to the Components window to display the available tags on the Components window while you are editing pages.
The tags are common to many JSP or facelet applications. There is support for core iteration and control-flow features, text inclusion, internationalization-capable formatting tags, and XML-manipulation tags. Such standardization lets you learn a single tag and use it on multiple containers for easy recognition and optimization across containers. Using the expression language (EL) and a set of four standard tag libraries, JSTL lets you develop dynamic, Java-based web sites.
With JSTL, using the Business Components Data Tag library is simpler since tags such as <jbo:showvalue>
and <jbo:rowsetiterate>
are no longer required. Instead of spending time on coding these common operations, you can focus on developing tags and web pages that are specific to your own web application project.
You can manage your libraries, including locating the source for your tag libraries by going to Tools > Manage Libraries > JSP Tag Libraries or Facelets Tag Libraries.
For a complete list of included tag libraries see the JDeveloper Tag Library Reference under the Javadoc and Tag Library Reference node in the Help Table of Contents.
Tag support includes these standard tag libraries that you can use to create JSP or Facelet pages:
JSTL Core. This tag library provides tags related to expressions, flow control, and a generic way to access URL-based resources whose content can then be included or processed within the JSP page.
JSTL Format. This tag library provides tags that support I18N and localized formatting and parsing.
JSTL SQL. This tag library provides tags that allow direct database access from within JSPs.
JSTL XML. This tag library provides tags that allow parsing and XSL transformation of XML documents.
Facelets 2.1. This tag library provides tags that allow you to create, manage and handle UI components within a web page. For more information see the Facelets Tag Library documentation at: http://docs.oracle.com/javaee/6/javaserverfaces/2.1/docs/vdldocs/facelets/
Trinidad Components 2.0. For more information, see the Apache Trinidad page at: http://myfaces.apache.org/trinidad/index.html
.
ADF Faces Components 12. For more information, see the Oracle Fusion Middleware Tag Reference for Oracle ADF Faces.
Manage your libraries from the Application option on the main menu.
To add, delete, or edit project level tag libraries
You can right-click from anywhere on a JSP page to get to the tag library browse option.
To browse to a JSP tag library descriptor (TLD) file:
<%@ taglib
.To create a custom tag library, create the tag library descriptor file and then create simple tags or component tags. A tag library descriptor file (TLD) is an XML document that describes your tag library and each tag in it. It is used by a container to validate the tags. Once you create tags, you can add attributes and scripting variables to them.
Use the New Gallery tag library wizards to create your custom tags. You can choose to create a project based or deployable library type, depending on whether you want to share the library or keep it within one project. The second step in the wizard lets you name and add location details for you tag library, as shown in Figure 16-24.
Figure 16-24 Facelets Tag Library Wizard
To create a custom JSP or facelets tag library:
To make your registered custom tag libraries available in the Components window of your projects, go to Application > Project Properties > JSP Tag Libraries/Facelet Tag Libraries > Add. Check Show Tag Library in Palette.
When you create a custom tag library with the New Gallery wizard, it is added to the Components window only if you select the Project Based option in the Create Facelets Tag Library wizard. If you select, or leave the default choice of Deployable at creation time, you will need to perform additional steps to register your library and add it to your project through the Project Properties Add Tag Libraries feature. The tag library will then show in your Components window.
To add a unregistered custom tag library to the Components window:
Register your tag libraries to tell facelets that they exist.
To register a JSP or facelet custom tag library:
You can edit your TLD file and change your element attributes.
To edit a TLD file in the XML Source Editor:
Tip:
To edit a TLD file with the Components window, choose View > Components window to open the Palette and select Tag Lib or one of the available pages from the dropdown list. Then choose elements from the page.
Scripting variables are variables that are available to the JSP page when any JSP page is called. Scripting variables may be any scripting variables but when you are dealing in reference of JSP page it means page level variables declared by the JSP page. You can access scripting variables in scriptlet, declaration, expressions.
To add a scripting variable to a tag:
Tag.java
or WebTag.java
file.Use the deploy to context menu to deploy your custom tag libraries.
To deploy your custom JSP tag library or facelets tag library as a JAR File: