This tutorial provides a tour of the major components in the Oracle JDeveloper 12c IDE, and shows you how they can be used to build a basic Java-based application. You start by creating a simple Java class. Using this new class, you then explore some of the features of the JDeveloper IDE, including Code Assist and the Debugger. Finally you create a page flow diagram, add a Java class as a managed bean and use the managed bean in a JSF page.

Before starting this tutorial you should have access to or have installed Oracle JDeveloper 12.1.3. You can download it from Oracle Technology Network. Install it into a directory of your choice, which, in this tutorial is referred to as JDEVELOPER_HOME.

Purpose Duration Application
This tutorial shows you how to work with the JDeveloper IDE. To see the complete application you will create, click the Download button to download a zip of the finished application, and unzip it to your JDeveloper mywork folder. 105 minutes Download My First Application
Step 1: Launch JDeveloper
  1. Start JDeveloper by selecting Start > Programs > <JDEVELOPER_HOME> > OracleHome > Oracle JDeveloper Studio > Oracle JDeveloper Studio

    If a dialog box opens asking if you would like to import preferences from a previous JDeveloper installation, click NO.

  2. In the Select Role dialog, select Studio Developer and click OK.

    Select Role dialog with Studio Developer (All Features) selected by default
  3. Shaping, which is based on the role of the user, allows the JDeveloper environment to tailor itself. It does this by removing unneeded items from the menus, preferences, new gallery, and even individual fields on dialogs.

    Shaping can even control the default values for fields on dialogs within the tool. When you first start JDeveloper, you are prompted to select a role that describes how you are going to use JDeveloper. If you select a role of "Java Developer" versus "Database Developer " versus "Customization Developer " you will get a totally different experience!

    Close the Tip of the Day window.

  4. Once loaded, the JDeveloper IDE appears. The very first time you open JDeveloper, the Start Page displays. You can re-invoke the Start Page later by choosing Help > Start Page.

    Notice the various options available to help you learn about JDeveloper. After exploring some of these options, close the Start Page by clicking the X on its tab (the X appears when you mouse over the tab).

    The Start Page which has various options to help you explore more about JDeveloper
Step 2: Create Your First Application
  1. Click the New Application link in the Applications window.

    The Applications window with New Application selected by default
  2. In the New Gallery, select the Custom Application and click OK.

    New Gallery with category Applications selected on the left and item Custom Application selected on the right
  3. In the Name your application page of the Create Custom Application wizard, modify the default application name to MyFirstApplication, and make sure that the Application Package Prefix is empty. Note that the Directory Name changes accordingly. Click Next.

    By default all applications are stored in \JDeveloper\mywork\ directory.

    First page of the Create Custom Application wizard, application name
  4. In the Name your project page of the wizard, change the default Project Name to MyProject, and in the list of available project features, select JavaServer Faces (JSF) and click the Add button to move it into the selected pane.

    The second page of the Create Custom Application wizard, project name

    Notice that Java, JSP and Servlets, and XML are also moved into the Selected pane.

    The Create Custom Application wizard with Java, JavaServer Faces, JSP and Servlets, and XML moved to Selected on the right

    Click Next.

  5. In the Project Java Settings page of the wizard, accept all defaults and click Finish.

    The Project Java Setting page of the wizard with the default package my project selected, and default paths for Java Source Path and Output Directory

  6. The application is the highest level in the control structure. It is a view of all the objects you need while you are working. An application keeps track of all your projects while you are developing your Java programs.

    Applications are stored in files with the extension .jws. When you open JDeveloper, the last application used is opened by default, so that you can resume where you left off.

    In JDeveloper you always work with projects contained within an application. A JDeveloper project is a logical grouping of related files. You can add multiple projects to an application to easily access, modify and reuse your source code.
  7. In the Applications window, projects are displayed as the second level in the hierarchy under the application. The Applications window should look like this:

    The Applications window with the nodes under My Project expanded
  8. The Applications window is the main JDeveloper window from which you access the components of your application. The structure of the Applications window is hierarchical and supports, for a given application, projects, images, .html files, and many more. By default the Applications window displays on the left side of the IDE.
    Notice that the project folder is a child of the application folder.
  9. In the Applications window, notice the names of three accordion panes

    The Applications window showing three accordion panes at the bottom, Application Resources, Data Controls, Recent Files
  10. Click the Application Resources node to expand it.

    The Application Resources accordian expanded to show the nodes, Build Files, Connections, Descriptors, Libraries
  11. Expand the 4 resource node below it, then collapse the Application Resources node.

    Application Resources accordion in Applications window with Descriptors node expanded
  12. Accordions are also available in other JDeveloper panes, such as the Structure window or Resource Palette.

Step 3: Create Your First Java Class
  1. Right-click the MyProject node in the Applications window and select New > From Gallery... from the context menu.

    Context menu of the project in the Applications window with the New option selected, and From Gallery selected
  2. The New Gallery displays. By default, the first category, General, is highlighted in the Categories list. The other categories enable you to work with other JDeveloper technologies to build the various tiers of an application.

    In the Items list in the right-hand pane select Java Class. Then click OK.

    In the New Gallery dialog, Category General and Item Java Class are selected
  3. In the Create Java Class dialog, change the default class name to Dog.
    Accept all other defaults and click OK.

    The create java class dialog showing that the class name has been changed to dog.
  4. The new class opens automatically in the source editor, displaying the skeleton class definition.
    Add a method to the class. After the constructor, press [Enter] to create a new line, and type the following code:

    public String sayHi()

    The source editor showing the skeleton class definition. The cursor is hovering over the new code and the tooltip message is displayed

    Notice that the line that you just entered has a wavy red line under it, indicating a problem with the syntax. There are also red boxes in the right margin of the source editor. If you mouse over these boxes or over the wavy red line, a tooltip displays information about the error or errors. You see other examples like this in the Working with Code Assist topic later in this tutorial.

    Source editor with cursor over the red mark line in right-hand gutter. Tool tip displays message that the method is missing a return statement
  5. At the end of the line, press [Ctrl] + [Shift] + [Enter] and JDeveloper provides auto-completion of the method structure, and some of the error indicators disappear. However some indicators remain, showing that the syntax is still not complete.

    Source editor completes method declaration by adding final curly bracket. One red marker still remains

    Notice that auto-completion is also accessible from the Source > Complete Statement menu option.

    Cursor is on the Complete Statement menu option under the Source menu option on top menu bar.
  6. Add code to provide the missing return statement.
    In the blank line between the two curly braces that were added to the method, add the following code:

    return " woof "+ "Jeff";

    Source editor with Dog Class code. Shows new return statement added:

    Notice that when you type the first double quote symbol ("), JDeveloper automatically provides you with the second double quote, enclosing the cursor between them, so that you can easily type the literal. Notice also that a green box has appeared in the upper right margin to indicate that there are now no syntax errors.

Step 4: Use Code Templates

Code templates are a feature of the Java Source Editor. Code templates assist you in writing code more quickly and efficiently while you are in the source editor. You can edit existing templates or create your own. This step shows you how to use some of the existing code templates in the Dog class.

  1. There is a code template for adding a main method to a Java class.
    Press [Enter] to create a new line after the sayHi() method. Type the letter m, and press [Ctrl] + [Enter] to invoke code templates.

    Source editor: shows template offering when letter 'm' is typed.

    The main method template is suggested.

  2. Press [Enter] again to accept the suggestion and incorporate the template.

    Source editor: main method code template is added to source.
  3. Create a Dog object in the main method by adding the following code:

    Dog myDog = new Dog()

    Source code editor: code to create Dog object added to main method.

    If you mouse over the myDog variable, a tooltip displays to tell you that the variable has not been used and possible resolutions.

    Source editor: cursor placed over myDog variable, and a tooltip displays to tell you that the variable has not been used

    You see other examples like this in Work with Code Assist later in this tutorial.

  4. Add a new line and press [Ctrl] + [Enter] to see the list of code templates that are available.

    Source editor - list of templates displayed.
  5. Create an integer-based loop using a for type of code template. Type fo to restrict the list.

    Source editor: letters 'fo' cause list of templates to be reduced to only those that contain the letters 'fo'.

    Four templates are suggested.

  6. Double-click the third of the four suggestions, the fori intBased "for" Loop (Simple Limit) template, to select it.

    Source editor with the fori intBased

    The template code is incorporated into the file.

    Source code editor with the template code inserted.
  7. Source editor displaying the word 'count' in place of the 'i' variable.

    Limit the loop to 3 iterations.

    Source editor with 3rd instance of 'count' replaced by '3'.
  8. Enter a System.out.println statement.
    Place the cursor on the blank line inside the curly braces of the for loop, and type sop.

    Source editor: new line displays letters 'sop'

    Press [Ctrl] + [Enter] to incorporate the template code.

    Source editor: template code inserted.
  9. Add code to use the loop to display the sayHi message. Inside the parentheses after println, enter the following code: count + myDog.sayHi(). Start typing count + myDog.s and JDeveloper completes the sayHi method for you.

    Source editor: 'count + myDog.sayHi()' inserted into parentheses following print ln.

    The complete line should read:

    System.out.println(count + myDog.sayHi());

  10. Right-click in the editor and select Reformat from the menu to have JDeveloper restructure your code.

    Source editor context menu; Reformat option selected.
  11. Your code should now look like this, with a bit more breathing room around the methods:

    Source editor with reformatted code.
  12. Save your work. Go to File > Save All, or click the Save All button in the toolbar. In code and all other cases, the file name will be in italics until it it saved.

Step 5: Compile and Run Your Java Class

  1. In the Applications window or in the source editor, right-click and select Make from the context menu.

    App Navigator, context menu for, with Make menu option selected.
  2. At the bottom right of the JDeveloper IDE, the log window should show successful compilation. If the log window does not display, use Window > Log to display it ( or press [Ctrl] + [Shift] + [L]).

    Log window with successful compilation message highlighted.

    Log window with successful compilation message highlighted.
  3. When you successfully compile a .java file, you create a .class file in the \src directory of the project. Compiling a class in JDeveloper automatically saves the .java file as well. When you use the Make option to compile your class, JDeveloper saves all the files in your project. When you run a class, it is automatically compiled and saved.
  4. In the Applications window or in the source editor, right-click again, and this time select Run from the context menu.

    Context menu for Source editor, with Run menu option selected.
  5. The log window displays 3 counts of the 'woof Jeff' message.

    Log window with 3 iterations of 'woof Kate' message.

Step 6: Work With Code Assist

Code Assist examines your code in the editor and provides assistance to fix common problems. Here you use the Dog class to explore some examples of the suggestions that are offered.

  1. Create a Cat object.
    At the start of the main method, just after the first curly brace, press [Enter] to create a new line. In the new line, enter the following code:

    Cat myCat = new Cat();

    Source editor with code to create Cat object in the main method.
  2. Notice that the red wavy lines and margin indicators have again appeared. Place the mouse over a margin indicator to see what the problem is.

    Source editor with cursor on red error marker, saying that Cat type not found.

    Notice that the popup box displays the problematic lines as well as telling you what the problem is.

  3. Hover your mouse over the light bulb icon in the left hand margin of the 'cat' line. A message tells you that 'quick fixes and code assists' are available for this line.

    Source editor with cursor on light bulb icon displaying message that 'quick fixes and code assists' are available for this line
  4. Click the icon to see what they are.

    Source editor with list of code suggestions for this line.

    You need a Cat class to instantiate a Cat object. If you click on the first suggestion in the list offered, JDeveloper creates a class called Cat.
    On this occasion you don't want to create the Cat class immediately, so you remind yourself to do it later by setting yourself a task: press [Enter] after new Cat(); to open a new line and in the new line enter the following code:

    //TODO create a Cat class

    Source editor: task list - reminder to create a Cat object
  5. Select Window > Issues to see a list of tasks that you have created.

     Menu item View Tasks
  6. The Tasks window displays a list of the tasks you have created (in this case, it is your only task).

    New tab displays in Log window showing list of tasks (just this one at present).

    Also you see all the errors, warnings, incomplete items and informational messages.
    Click the four left most icons to remove their listings and you'll see the task you have to complete

    New tab displays in Log window showing list of tasks (just this one at present).
  7. If you double-click a task in the list (TODO create a Cat class in our example), JDeveloper takes you to the relevant task, highlighting the line of code.

    Source editor: the TODO item is highlighted in the code.
  8. Notice the light green marker in the right margin of the editor. It indicates where you have created a task. Hover over the marker with the mouse to see what the task is.

    Source editor: cursor is over pink marker in right-hand gutter to display details of the task.
  9. Comment out the line that creates the Cat object. Notice that the red markers have now disappeared, to be replaced by a green marker indicating that there are no errors in your code.

    Source editor with comment markers at front of line that creates Cat object.
  10. Add two variables to the class. Hit [Enter] to create a new line after the class declaration. Declare two variables as follows:

    String name;
    int age;

    Source editor showing name and age variables added to Dog class.
  11. In the code editor, right-click and select the Generate Accessors option from the context menu.

    Source editor context menu displayed with Genearte Accessors menu option selected.

    The Generate Accessors option is also available from the code editor toolbar using the Generate Accessors icon.

    Source editor menu bar with the Generate Accessors icon indicated.
  12. In the Generate Accessors dialog, check the Dog box to generate Getter and Setter methods for both variables.
    Make sure the Notify listeners when property changes is not selected.

    Generate Accessors dialog box showing check boxes to generate getters and setters for both variables checked.

    Notice that you can define the scope for the methods, and define other properties to be implemented in the setter methods such as involving listeners and verifying the new value.

    Click OK. Getter and Setter methods are generated into the Dog class

    Source editor showing the getters and setters that have been generated for the name and age variables.
  13. Right-click within the code editor and from the context menu select Source > Generate Constructor from Fields.

    Source editor context menu with menu option Source > Generate Constructor from Fields menu option selected.
  14. In the Generate Constructor from Fields dialog, check the checkboxes for both fields and click OK.

    Generate Constructor from Fields dialog with check boxes to left of name and age fields checked.
  15. The new constructor method is added to your code.

    Source editor with the constructor method added to the Dog class.
  16. Although you won't use this constructor in this tutorial, you can leave it in place just to have some more interesting code in the class.

Step 7: Use the Search and Code Highlight Feature

Using the code editor, you can search for text and display all occurrences of the specified search criteria. You can also use a highlighting facility that retrieves all occurrences of an object.

  1. Place your cursor in the code window and then make sure the Search option Auto Code Highlight is not selected. Select Search from the menu, and make sure there is not a check mark beside Auto Code Highlight. If there is, then click the menu option and when you revisit it, the check will be gone.

    Search option from the main menu with Auto Code Highlight not selected
  2. In the Search box on the left of the code editor toolbar, type name. The first instance of name found after your cursor location is highlighted in the code editor.

    Source editor with 'name' in the Search box at top left of window, and name variable selected.
  3. Click the Find next arrow to move to the next occurrence of the string.

    Source editor menu bar with down arrow in Search box indicated.
  4. Click the magnifying glass icon binocular icon to view additional options and ensure the check the Highlight Occurrences option is selected. Then, click the Find next arrow to highlight all occurrences.

    Search field options: Highlight Occurrences option is checked and all occurrences of 'name' are highlighted in the code

    Notice that the search function highlights all the occurrences of "name" in the code.

    Search field options: Highlight Occurrences option is checked and all occurrences of 'name' are highlighted in the code.

  5. Deselect the Clear All Highlighting menu option.

    Source editor menu bar with Clear All Highlighting icon indicated.
  6. Remove name from the Search field.

    Source editor - Search field blank.
  7. From the menu, select Search > Auto Code Highlight.

    Source editor menu bar with Search menu option selected and Auto Code Highlight menu item selected from the list.
  8. In the code editor, click within the age argument of the Dog(String name, int age) constructor. Notice that the highlighted occurrences are then restricted to occurrences of the same semantic object, the age variable being excluded.

    Source editor with 'age' parameter highlighted in yellow; 'age' variable is not highlighted.
  9. Now, select the age class variable to highlight (in yellow) all occurrences of that variable.

    Source editor: this time all occurrences of 'age' variable are highlighted in yellow.
  10. In the right margin, hover over the top yellow marker with the mouse to display the message.

    Source editor with cursor over yellow marker in right-hand gutter. Message pointing out usage of 'age' is displayed
  11. Double-click this yellow marker. This moves you to the corresponding usage in the code.

    Source editor with 'age' variable highlighted in yellow.
  12. You can determine the way you want code insight to behave (when and how fast).
    From the main menu, select Tools > Preferences.

    Tools menu on source editor menu bar with Preferences option selected.
  13. In the Preferences dialog, expand the Code Editor node and select Code Insight.
    This is just one of the preferences you can set to customize your coding environment.

    Code Insight selected on left: on right, scroll bar for changing the time taken for Code Insight to provide assistance

    Click OK.

  14. You can view the definition of a variable or method without navigating to a different file or opening a new editor.

    Hold down the Shift key and then hover over a variable or method to show its definition in a ghost window. This feature makes it convenient to quickly view code without moving cursor focus from your current code.

    In the Structure window, move your mouse over one of the nodes and press the [Shift] key. This way you can also display the code structure within the class structure.

    Strucure window with the sayHi method selected: pop up window displays the full method signature.

    The ghost window closes as you release the shortcut keys.

  15. Reformat your code by clicking the Reformat icon in the code editor toolbar.

    Source editor with the Reformat icon on main menu bar indicated.

Step 8: Refactor Your Code

Refactoring is an editing technique that modifies the 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 refactoring operations.

  1. One example of a refactoring operation is replacing a constant expression in a method body by a parameter for the method. The expression is replaced by the parameter name. The new parameter is added to the method's parameter list and to all invocations of the method.
    To do this in the Dog class, right-click the literal, 'Jeff' in the sayHi() method code and select Refactor > Introduce Parameter... from the context menu.

    Source editor with the literal 'Kate' launching context menu: Refactor > Introduce Parameter menu option selected.
  2. In the Introduce Parameter dialog, type name in the Name field, and click OK.

    Introduce Parameter dialog box with 'name' in the Name field.
  3. Examine the code to see the results of the refactor operation. The method declaration now contains String name in its parameter list; the parameter name has replaced the literal 'Jeff' in the method return value, and the literal 'Jeff' has been inserted as a parameter in the method call.

    Source editor: occurrences of 'name' that have replaced the literal, are  highlighted in yellow.
  4. Another refactoring operation is to derive a new interface from selected methods in an existing class.
    To do this in the Dog class, right-click the Dog class declaration method, and from the context menu, select Refactor > Extract Interface...

    Source editor: Dog class declaration context menu with Refactor > Extract Interface menu option selected.
  5. In the Extract Interface dialog, type IntAnimal as the name of the interface, and select the sayHi(String) method in the Extract Interface list. Click OK.

    Extract Interface dialog: IntAnimal typed in interface name field, and list of methods below, with the check box next to sayHi(String) checked.
  6. The IntAnimal interface is created and opens in the source editor.

    Source editor showing declaration of IntAnimal
  7. Another simple refactoring operation is to rename a method, whereby every occurrence of the method name is replaced by the new name.
    To do this in the IntAnimal interface, right-click in the sayHi() method, and from the context menu, select Refactor > Rename.

    Source editor context menu for IntAnimal: Refactor > Rename selected from the context menu
  8. In the Rename Method dialog, change the sayHi() method name to sayHowDoYouDo. Select the Show Usages button to see all the usages that are affected by the name change. Click OK.

    Rename method dialog for the sayHi method: new method name, sayHowDoYouDo, in Rename field: Preview check box checked.
  9. The Rename window lists all usages of the sayHi() method. You should examine each usage to check that you want each occurrence of sayHi() to be changed to sayHowDoYouDo(). If so, click Do Refactoring in the log window toolbar.

    Log window below source editor shows 3 usages of the sayHi method. The cursor is pointing to the Do Refactoring icon.
  10. Note that the name change has taken place in the IntAnimal interface...

    Source editor for IntAnimal shows that the sayHi method has been replaced by sayHowDoYouDo (highlighted).
  11. ...and in the Dog class.

    Source editor for Dog class with each occurrence of the newly named method highlighted in yellow.
  12. Click Navigate in the menu bar. The Back menu option allows you to return to the previous location.

    Source editor with Navigate menu option in main menu bar selected and Back menu item chosen from the list of menu items.

    This option is also available from the toolbar, using the Back button. Clicking the down arrow next to the Back button, shows the history of the navigation.

    Source editor menu bar with the cursor on the  'down arrow' icon.List of previous locations is displayed.
  13. From the menu select Search > Auto Code Highlight to turn off the code highlight option. (You can also click the Clear All Highlighting icon in the code editor toolbar.)

    Search menu option on main menu bar selected: Auto Code Highlight menu item selected from the list of options.

Step 9: View Code Modification History

JDeveloper has a built-in history feature. This local history does not require a version control system to provide a recent change record and visual "diff" between versions. Versions are automatically created based on user interactions such as Save, Compile, Rename, and so on.

  1. Navigate to the editor window. Notice the two tabs at the foot of the code editor window. Click the History tab.

    Source editor showing the Source, Design and History tabs at bottom of window. Cursor is positioned over History tab.
  2. The History window displays. The top part of the window contains a list of revisions and dates, while a list of changes to the code displays in the bottom part of the window. The two windows are synchronized, so that the detail in the bottom part of the window matches the selection in the top part.

    History window showing history of changes to the Dog class.
  3. The lilac-colored boxes indicate changes to the code.
    In the top portion of the window, select Introduce Parameter near the top of the list.In the bottom left portion of the editor, position your mouse over the green right-pointing arrow in the lilac box that contains the sayHi() method declaration. Notice that a message displays, indicating that clicking the green arrow enables you to replace the adjacent difference. In this case, clicking the green arrow would revert the sayHowDoYouDo() method to sayHi(). Don't revert now.

    History window with Introduce Parameter revision selected in top part of window. The sayHi method is selected in the bottom part of the window, next to the revision - the sayHowDoYouDo method.
  4. The center part of the History window has an area where changes to the structure of the Java code are recorded. In this example it contains the three methods in the Dog class; the red minus sign next to the sayHi() method indicates that this method has been removed and the green plus sign next to the sayHowDoYouDo() method indicates that this method is an addition. Hovering the mouse over these symbols displays the appropriate message.

    Focus is on center part of History window (Changes to Java Structure) listing the methods of the Dog class as described.

Step 10: Navigate through Source Code
JDeveloper provides easy ways to navigate between related items of code and to Javadoc, and the ability to expand or contract sections of code, improving navigability in large programs. To explore these features, perform the following steps:
  1. Click the Source tab for the file in the editor. Click the arrow icon next to the sayHowDoYouDo() method in the file.

    Source editor for Dog class. Cursor is on blue upwards-pointing arrow in the left-hand gutter next to the sayHowDoYouDo method.

  2. You can navigate from one part of the code to another related part. One example of this is navigating from a method to its declaration in an interface.

    A method that implements a declaration from an interface displays a callout icon in the left-hand margin. Clicking this icon takes you to where the method is declared.

  3. JDeveloper takes you to the IntAnimal interface where the method is declared and highlights the appropriate line for you.

    Source editor for IntAnimal interface - where the sayHowDoYouDo method is declared.
  4. To return to where you were in the Dog class, click the green Back button in the toolbar.

    Source editor main menubar. Cursor indicates the green left-facing arrow that, when clicked, takes you back to the Dog class.

    You can also navigate backwards or forwards using the [Alt] + [left] or [right] arrow key.

  5. You can also navigate to the Javadoc for a given element. In the file in the editor, right-click within the sayHowDoYouDo() method. From the context menu, select Quick Javadoc.

    Source editor context menu, with Quick Javadoc menu option selected.
  6. The Javadoc popup window displays additional information about the selected method.

    Source editor with window over, containing Javadoc information about the  selected method.
  7. Click the String link to get more information about the String class.

    Source editor with superimposed window giving detailed information about the String class
  8. Click [Ctrl] + [-] (minus key) to pop up the Go to Java Type dialog. It allows you to display Source or Javadoc information of the selected class.

    Source editor with small 'Go to Type' window superimposed over it

    In the Name field type String and then select the String - java.lang highlighted suggestion. Then, press Enter.

    Same window as above with String in the Name field, and then below, a list of String-based classes, and String - java.lang selected in the list.
  9. The source code for the String class opens in the editor.

    New tab with the source code for the String class.

    Close the tab. tab with cursor positioned over the X to close the window.
  10. The code folding feature enables you to expand and contract sections of code, making large programs more manageable.
    Place your mouse in the space between the dotted and solid lines to the left of the Cat line in the blue margin.

    Source editor showing a narrow blue vertical line alongside the main method body on the left.

    Notice that a blue vertical line displays beside the main method body.

  11. Click the minus (-) sign at the top of the vertical blue line to contract this section of code.

    Source editor for Dog class: cursor over + sign, where code has been contracted, and is no longer visible.
  12. Hover over the plus (+) sign next to the contracted section of code. The contracted lines of code display in a blue shaded box.

    Source editor: cursor over + sign revealing large blue box displaying the 'hidden' code.
  13. The Quick Outline Navigator enables you to quickly navigate to methods and fields of a class and its super classes.
    In the code editor toolbar click the Quick Outline icon.

    Source editor main menubar: cursor indicating the 'Quick Outline' icon on the toolbar.

    The Quick Outline 'ghost' window displays.

  14. Click the Show Methods icon (first icon from the left in the 'ghost' window) to see all the methods in the Dog class.

    Source editor with Quick Outline ghost window over the top in dark blue:cursor indicates the Show Methods icon.
  15. Deselect the Show Methods button and filter the list by typing ge in the field.

    Same window as previous step: 'ge' appears in the Show Methods input box, and the methods of the Dog class are listed.
  16. Deselect the Show Methods button and use the down arrow key or your mouse to select the getName() method, then press Enter.

    As previous step but with the getName method selected.

    Focus is switched to the getName() method in the source code, and the method is highlighted.

    Source editor showing the getName method in the code.
  17. Scroll back to the main() method, and double-click within the ellipses {...} at the end of the line.

    Source editor showing the contracted code from earlier step; cursor is positioned in the ellipsis at the end of method declaration line.

    JDeveloper expands the collapsed code.

Step 11: Use the JDeveloper Debugger

The integrated JDeveloper debugger enables you to debug Java programs in the source editor. This step shows you how to control the execution of a program by setting breakpoints. When program execution encounters a breakpoint, the program pauses, and the debugger displays the line containing the breakpoint in the source editor. You can then use the debugger to view the state of the program.

  1. Set a breakpoint in the file. To do this, click in the margin to the left of this line:

    System.out.println(count + myDog.sayHowDoYouDo("Jeff"));

    Source editor for Dog class;breakpoint (red dot) is displayed in left-hand gutter margin alongside the selected line.

    The breakpoint icon, which looks like a red ball, is displayed in the margin. If you hover over your breakpoint, you'll see a popup where properties for the breakpoint can be specified.

  2. Right-click in the source editor and select Debug from the context menu.

    Source editor showing context menu with Debug menu option selected.
  3. Program execution proceeds up to the breakpoint. The red arrow in the left margin of the source editor indicates where the break is occurring. The debugger window opens and displays the debugging trace.

    Source editor with breakpoint line in blue and a red arrow at left-hand end of the line.
  4. Click the Step Over icon in the toolbar to execute the first iteration of the myDog.sayHowDoYouDo() method.

    Source editor toolbar with cursor pointing to Step Over icon.
  5. Click the Debugging: MyProject.jpr tab at the bottom of the log window and then click the Log tab in the debugger window. Note that the log window displays the first 0 woof Jeff message.

    Source editor with Log window open below, showing execution to first breakpoint.
  6. Click the Data window to the right of the Smart Data tab. Select the count variable, and double-click in the Value column to display the Modify Value dialog.

    Smart Data window with 'count' selected and Modify Value dialog, showing 0 as current value.
  7. Type 2 as the new value. Click OK.

    Modify Value window with 2 as the new value.
  8. In the toolbar, click Resume to continue program execution.

    Source editor toolbar with cursor indicating the Resume icon.
  9. The count variable is incremented and exceeds its limit, so the program terminates, and the debugger disconnects.

    Debugging window displaying message that the program has terminated.

Step 12: Manage Your Files

JDeveloper enables you to search for files belonging to the current application or across multiple applications.

  1. From the menu, select Application > Find Application Files.

    Source editor with Application menu option on main menu selected, and then Find Application Files menu item selected.
  2. In the File List tab, use the Look in field to define the scope of your search. Select MyProject.jpr.

    File List tab drop down menu, with MyProject.jpr selected.
  3. Select File Extension and type .java to retrieve all files of this type, then click Search.

    File List tab with .java in the Search field and cursor pointing to Search button.
  4. The Results window returns the file names that match the search criteria.

    File List tab displaying results of the search.

    Note that double clicking a file name from the list opens the file in the editor.

  5. You can use complex search criteria by clicking the Add icon plus icon and choosing from the logical Match operators.

    File List tab; green + has revealed greater number of Search criteria.
  6. You can also retrieve recently-used files in the Applications window; click the Recently Opened Files accordion.

    Application Navigator with the Recently Opened Files accordion expanded to show and files.
  7. Alternatively you can click [Ctrl] + [=] to open the Recent Files dialog and then make your selection.

    Recent Files dialog box showing the and files.

Step 13: Create a Managed Bean and Use it in a JSF Page
The following section shows how, using JDeveloper, you can create a page flow diagram, add a Java class as a managed bean and use the managed bean in a JSF page. The example developed in the following steps is just to illustrate how these components are related to each other, it doesn't claim to illustrate a relevant use.

  1. Expand the Web Content node under the MyProject project.

    Application Navigator; cursor is over the Web Content node (having expanded it).
  2. Expand the WEB-INF node and double-click faces-config.xml.

    Application Navigator with WEB-INF node expanded and faces-config.xml below it expanded.

    The faces-config.xml opens in the Page Flow Diagrammer opens.

    faces-config.xml tab showing empty page flow diagram.
  3. The Components window, on the upper right side of the interface, shows the available components in the context of a page flow diagram.

    Component Palette to left of page flow diagrammer, displaying components available to be used in a page flow diagram.
  4. Select JSF Page and drag it onto the page flow diagram, in the center of the screen.

    As previous diagram but with JSF Page selected in the Component Palette, and the cursor in the diagrammer ready to drop the selected component onto the diagram.
  5. Type page1.jspx as the name of the page.

    Page icon on the diagram with the name selected

    Save your work.

  6. Click the Overview tab of the page flow diagram.

    Page flow diagram showing the tabs at the bottom, with cursor positioned on the Overview tab.
  7. In the overview page, with the Managed Beans tab selected, click the Add button plus icon to create a managed bean.

    Overview page of faces-config with Managed Beans finger tab selected. Cursor points to green + to create a managed bean.
  8. In the Create Managed Bean dialog, type Dog as the Bean Name and click the Browse button next to the Class Name.

    Create Managed bean dialog with Dog as the Bean Name and cursor on the Browse button beside the Class Name field.
  9. In the Class Browser, click the Hierarchy tab and, expanding the myproject node, select Dog as the class. Click OK.

    Class Browser with Hierarchy tab selected, and the myproject node expanded and Dog selected.

    Back in the Create Managed Bean dialog, click the Configuration File radio button and then click OK.

    Create Managed Bean dialog with Configuration File radio button selected.

  10. The managed bean named Dog is added to your page flow, allowing you to use the class in your pages.

    Managed Bean tab in Overview tab showing the Dog managed bean that has just been created.
  11. In the faces-config.xml, click the Diagram tab and double click the page1.jspx page to create it.

    Diagram tab of faces-config showing the page icon with cursor positioned over it.
  12. In the Create JSF Page dialog, make sure the JSP XML radio button is selected.

    Create JSF Page dialog with values for page1.jspx. Cursor indicates JSP XML radio button.

    Click OK.

  13. A new page design opens.

    page1.jspx opens up in diagrammer.
  14. The Components window shows the available components for use in a JSF page. Select the Input Text component and drag it onto the page.

    page1.jspx tab with Component Palette on the right with Input Text component selected and cursor dragging the component onto page.
  15. From the Components window, select the Command Button component and drop it onto the page next to the Input Text component.

    page1.jspx tab with Input Text component. Command Button component is selected in Component Palette, and cursor positioning this component on the page.
  16. With the button selected, find the Properties window and set the value field for the Command Button property to Click Me.If the Properties window is not viewable, press [CTRL] + [Shift] + [I] or View > Properties window to display it.

    page1.jspx with the two components in place: commandButton is selected, and in the Property Inspector on the right, the Value property shows Click Me.

    When you navigate to a different property, the editor will be updated.

    page1.jspx with the two components in place: commandButton is selected, and in the Property Inspector on the right, the Value property shows Click Me.
  17. Right-click the page1.jspx tab and select Split Horizontally.

    Design editor for page1.jspx with context menu and Split Document menu item selected.
  18. Click the Source tab on one part of the split document so that you can see the Design and the Source view of the page at the same time. In the Source pane, add an exclamation mark at the end of the Click Me string. Notice that both views are updated synchronously.

    Design editor and source editor for page1.jspx with Click Me string selected in both editors.
  19. In the Structure window, select the h:inputText component. Notice that the same component is also selected in the Diagram and Source tabs. If the Structure window is not visable, press [CTRL] + [Shift] + [S] or View > Structure to display it.

    Structure window with the inputText component selected, and same component selected in both source and Design editors for page1.jspx.
  20. In the Properties window for the Input Text component, move the cursor to the left of the Value property, click the blue gear and select Expression Builder.

    Property Inspector for inputText component showing dropdown box to right of the Value property, and Expression Builder menu item selected in the list.
  21. In the Expression Builder, select JSF Managed Beans > Dog > name. Click OK.

    Expression Builder dialog, with JSF Managed Beans node expanded and name variable selected in the Dog managed bean. The expression shows the EL value for the variable.
  22. Back in the Dog class enter "Rex" as a static value for the name variable.

    Source editor for, with code = String name =

    Save all your work.

  23. Right-click in the page1.jspx and select Run from the context menu.

    Application Navigator with page1.jspx selected and in context menu, Run menu item selected.
  24. If this is the first time you have run the integrated Weblogic server, it may prompt you for the administrative password. The default password is weblogic1.

  25. The WebLogic server is started and the page1 page is loaded in your browser, displaying the name value from the managed bean, and the Click Me command button, defined using components from the Components window.

    Browser window showing the input field containing the name 'Rex' and the Click Me! command button.

Step 14: Examine Usages with the Dependency Explorer
In the following section examines how to look at dependencies within your application.

Lets say you have a request to refactor the name of a method or class.

You wouldn't want to just blindly use the Refactor > Rename options and be done with it. An examination of all the files that are affected would be warranted.In this section you'll see how to use the Dependency explorer to examine usages between application components.
  1. Expand the Web Content node and select the page1.jspx file.

    Then in the menu, select Search > Explore Dependencies.

    Application Navigator; cursor is over the Web Content node (having expanded it).
  2. The Dependency Explorer should appear in the editor pane. Notice page1.jspx has an arrow pointing the class it consumes.

    Application Navigator with WEB-INF node expanded and faces-config.xml below it expanded.
  3. Click the "1" to the lower left of the icon. The page has a single usage of the as an inputText item.

    Application Navigator with WEB-INF node expanded and faces-config.xml below it expanded.
  4. In the Applications navigator, expand the Page Flows node and select the faces-config.xml file. Then from the context menu, select Explore Dependencies.

    Application Navigator with WEB-INF node expanded and faces-config.xml below it expanded.
  5. Again, the Dependency Explorer is invoked, this time showing the faces-config.xml file using the Click on the "1" in the lower left corner of the to see that the usage of it by the faces-config.xml is as a managed bean.

    Application Navigator with WEB-INF node expanded and faces-config.xml below it expanded.
  6. This is fine for looking at dependencies between files, but what if you want a finer grained look?

    In the Applications navigator, double-click the file to open it in the editor.

    Application Navigator with WEB-INF node expanded and faces-config.xml below it expanded.
  7. To see all the places where the sayHowDoYouDo() is used, select it. Then from the context menu, select Find Usages...

    Application Navigator with WEB-INF node expanded and faces-config.xml below it expanded.

  8. In this pane, you can specify the scope of the usage search, what to find and where to look. Keep the default values and click OK.

    Application Navigator with WEB-INF node expanded and faces-config.xml below it expanded.
  9. In the results window you can see all the places where usage is found.

    Application Navigator with WEB-INF node expanded and faces-config.xml below it expanded.
  10. Congratulations, you have completed this tutorial..


In this tutorial you learned how to find your way around the JDeveloper IDE. You learned how to:

To learn more about the JDeveloper IDE, refer to:

Bookmark Print Expand all | Hide all
Back to top

Did you find this page helpful?

Copyright © 2017, Oracle and/or its affiliates. All rights reserved.