Introduction to the JDeveloper
IDE
This tutorial provides a tour of the major components in the Oracle
JDeveloper 11g 11.1.1.2.0 IDE, and shows you how they can be used to
build a basic Java based application.
Approximately 50 minutes.
This tutorial covers the following topics:
Place
the cursor over this icon to load and view all
the screenshots for this tutorial. (Caution: This action loads all screenshots
simultaneously, so response time may be slow depending on your Internet connection.)
Note: Alternatively, you can place the cursor
over an individual icon in the following steps to load and view only the screenshot
associated with that step. You can hide an individual screenshot by clicking it.
In the tutorial, you learn how to create a simple Java class. Using
your new class, you then explore some of the features of the JDeveloper IDE,
including Code Assist and the Debugger.
Back to Topic List
Before you begin this tutorial, you should:
Back to Topic List
| 1. |
Start JDeveloper by selecting Start > All Programs >
Oracle Fusion Middleware 11.1.1.2.0 > JDeveloper Studio 11.1.1.2.0
If a dialog box opens asking if you would like to migrate from a previous
version of JDeveloper, click NO.
|
| 2. |
In the Select Role dialog, choose Default
Role and click OK.
Note: 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 choose a role that describes how you use JDeveloper. If you choose
a role of "Java Developer" versus "CRM Applications Developer"
versus "Default Role" you will get a totally different experience!
Close the Tip of the Day window.
|
| 3. |
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 these options, close the Start Page by clicking the
X on its tab (the X appears when you mouse over the tab).
|
Back to Topic List
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.
When creating a new application you have the option to base it on a template.
The application template you select determines the initial project structure,
that is, the named project folders within the application.
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.
The Application Navigator is the main JDeveloper window from which you access
the components of your application. The structure of the Application Navigator
is hierarchical and supports, for a given application, projects, images, .html
files, and many more. By default the Application Navigator displays on the left
side of the IDE.
To create an application, perform the following steps:
| 1. |
Click the New Application link in the Application
Navigator.
|
| 2. |
In the Create Application dialog, modify the default application name
to MyFirstApp,
and make sure that the Application Package Prefix is empty. Note that
the Directory Name changes accordingly.
|
| 3. |
Scroll down the Application Template pane to review
the list of available templates. Select the Generic Application
to configure this application with a single project that has access to
all JDeveloper technologies.
Click Next.
|
| 4. |
In this new step, change the default Project Name to MyProject,
and then click Finish.
|
| 5. |
In the Application Navigator, projects are displayed as the second
level in the hierarchy under the application. The Application Navigator
should look like this:
Note that the project folder is a child of the application
folder.
|
| 6. |
The Visual Editor displays an application Overview
information about the various categories of JDeveloper, and at the bottom
of each category, provides links to enable you to discover more information
about that category.
|
| 7. |
Within the Application Navigator, notice the
three titles corresponding to accordion type of panes.
|
| 8. |
Click in the accordion title to expand it.
|
| 9. |
Click in the title bar of an expanded accordion
to collapse it.
|
| 10. |
Accordions are also available in other panes
of JDeveloper such as the Structure pane or Resources
Palette.
|
Back to Topic List
To create a new Java class, perform the following steps:
| 1. |
Right-click the MyProject node in the Application
Navigator and select New... from the context menu.
|
| 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 different technologies to build the various tiers of an application.
Click the + sign to the left of the General
category to expand it, and take note of the sub-categories that are available.
Select the Java node, and then select Java Class
in the Items list in the right portion of the window. Click OK.
|
| 3. |
In the Create Java Class dialog, change the default name to Dog.
Because you did not specify a package name when creating the application,
the package name defaults to the project name in lowercase. You could
change this if desired, but you do not need to do so for this tutorial.
Accept all other defaults and click OK.
|
| 4. |
The new class opens automatically in the source editor, where you
see 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()
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 Working with Code
Assist later in this tutorial.
|
| 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.
Notice that auto-completion is also accessible
from the Source | Complete Statement menu option.
|
| 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
" + "Kate";
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. |
Back to Topic List
Editors are where most of the application
development work takes place; this is where you write code
and design user interfaces. In this topic you explore some of the features of
the Java Source Editor.
Using code templates
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 topic 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.
The main
method template is suggested.
|
| 2. |
Press Enter again to accept the suggestion and incorporate
the template.
|
| 3. |
Create a Dog object in
the main method by adding the following code:
Dog myDog = new Dog();
If you mouse over the myDog variable, a tooltip
displays to tell you that the variable has not been used.
You see other examples like this in Working 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.
|
| 5. |
You decide to create an integer-based loop using a for
type code template. Type fo
to restrict the list.
Four templates are suggested.
|
| 6. |
Double-click the third of the four suggestions, the fori intBased
"for" Loop (Simple Limit), to select it.
The template code is incorporated into the file.
|
| 7. |
Modify the template code.
Replace i with count.
Notice that changing the first i variable
name in the loop changes all subsequent references.
Limit the loop to 3 iterations.
|
| 8. |
Enter a System.out.println
statement.
Place the cursor on the blank line inside the curly braces of the for
loop, and type System. (be
sure to include the dot at the end of the word.) A list of suggested code
appears.
Type the letter o
and press [Enter] to select the suggested out
code.
Type .
(dot), and when the list of suggested code appears, type the letter p,
then scroll down and double-click the println()
suggested code.
Note: An even quicker way to enter a System.out.println()
statement is to enter sop
and then press [Ctrl]+[Enter]. The technique above is
given to illustrate how to use code completion.
|
| 9. |
Add code to use the loop to display the sayHi
message. Inside the parentheses after println,
you want to enter the following code:
count + myDog.sayHi().
Start typing count + myDog.
and select the sayHi
method from the list.
The complete line should read:
System.out.println(count
+ myDog.sayHi());
|
| 10. |
Right-click within the editor view and select
Reformat to have JDeveloper restructure your code.
|
| 11. |
Your code should now look like this:
|
| 12. |
Save your work. Go to File-->Save All, or click
the Save All button 
in the toolbar.
|
Back to Topic
Compiling and running
your Java class
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 run a class, it is automatically compiled and saved.
| 1. |
In the Application Navigator or in the source editor, right-click Dog.java
and select Make from the context menu.
|
| 2. |
At
the bottom right of the JDeveloper IDE, the log window should show
successful compilation. If the log window does not display, use View | Log
to display it ( or press [Ctrl]+[Shift]+[L]).
Notice that when using the Make option to compile your class, JDeveloper
saves all the files in your project.
|
| 3. |
In the Application Navigator or in the source editor, right-click Dog.java
again, and this time select Run from the context
menu.
.
|
| 4. |
The log window displays 3 counts of the ' woof Kate'
message.
|
Back to Topic
Working 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();
|
| 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 from the code popup window.
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.
|
| 4. |
Click the icon to see what they are.
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
|
| 5. |
Select View | Tasks to see a list of tasks that
you have created.
|
| 6. |
The Tasks window displays a list of the tasks you have created (in
this case, it is your only task).
|
| 7. |
If you double-click a task in the list (create a Cat class
in our example), JDeveloper takes you to the relevant task, inserting
the cursor at the start of the line.
|
| 8. |
Notice the pink marker at the top 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.
|
| 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.
|
| 10. |
Check out the new toolbar in the code editor.
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;
|
| 11. |
In the code editor, right click and select the Generate
Accessors option from context.
The generate accessor option is also available
from the code editor toolbar using the Generate Accessors
icon.
|
| 12. |
In the Generate Accessors dialog, check the
Dog box to generate Getter and Setter methods
for both variables.
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.
|
| 13. |
Right click within the code editor and from context select Source
--> Generate Constructor from fields.
|
| 14. |
In the Generate Constructor from Fields dialog, select both fields
and click OK.
|
| 15. |
The new constructor method is added to your code.
|
| 16. |
Click the Undo button since we don't need this constructor
method.
|
Back to Topic
Searching and Highlighting
code
Using the code editor, you can search for text and display
all occurrences of the search criteria. You can also use a highlighting facility
that retrieves all occurrences of an object.
| 1. |
Use the Search/Code highlight feature. 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.
|
| 2. |
Click the 'down' arrow to move to the next occurrence
of the string.
|
| 3. |
Click the binocular icon 
to have access to additional options and check the Highlight Occurrences
option. Then, click the down arrow to highlight all Occurrences.
Notice that the search function retrieves all Occurrences of a string
in the code.
|
| 4. |
Click the Clear All Highlighting icon in the editor
toolbar.
|
| 5. |
Remove name
from the Search field.
|
| 6. |
From the menu, choose Search | Auto Code Highlight.
|
| 7. |
In the code editor click within the age
parameter of the setAge
method. Notice that then the highlighted occurrences are restricted to
occurrences of the same semantic object. The age variable being excluded.
|
| 8. |
Now select the age
variable in the setAge method to highlight all occurrences of that variable.
|
| 9. |
In the right margin, hover over the top
yellow marker with the mouse to display the code.
|
| 10. |
Double click this yellow marker.
This moves you to the corresponding location in the source editor.
|
| 11. |
Configure JDeveloper to allow a 'ghost' window to display additional
information. From the main menu, select Tools | Preferences.
|
| 12. |
In the Preferences dialog, expand the Code Editor
node and select Code Insight. You can determine the way
you want code insight to behave (when and how fast). There are many preferences
you can set to customize your development environment.
Click OK.
|
| 13. |
You can view the definition of a variable or
method without navigating to a different file or opening a new editor.You
can 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 pane, move your mouse over one
of the nodes and click the [Shift] key. This way you
can also display the code front structure from the class structure.
The ghost window closes as you release the shortcut keys.
|
| 14. |
Now back in the source editor window, hover your mouse over the sayHi
method in the System.out.println(count
+ myDog.sayHi()); and press the [Ctrl]+[1]
keys. This displays the method definition.
|
| 15. |
Reformat your code by clicking the Reformat icon in
the code editor toolbar.
|
Back to Topic
Refactoring 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, 'Kate' in the sayHi()
method code and select Refactor --> Introduce Parameter...from
the context menu
|
| 2. |
In the Introduce Parameter dialog, type name
in the Name field, and click OK.
|
| 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 'Kate' in the method return value, and the literal
'Kate' has been inserted as a parameter in the method call.
|
| 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, choose Refactor -->
Extract Interface...
|
| 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.
|
| 6. |
The IntAnimal interface is created and
opens in the source editor.
|
| 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, choose Refactor -->
Rename.
|
| 8. |
In the Rename Method dialog, change the sayHi
method name to sayHowDoYouDo.
Select the Preview check box to see all the usages that
are affected by the name change. Click OK.
|
| 9. |
The log 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.
|
| 10. |
Note that the name change has taken place in the IntAnimal
interface......
|
| 11. |
.....and in the Dog class.
|
| 12. |
Select the Navigate menu option. The Back
option allows you to return to the previous location.
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.
|
| 13. |
From the menu select Search | Auto Code Highlight
to turn off this option, and in the code editor toolbar click the Clear
All Highlighting icon.
|
Back to Topic
Viewing 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. |
Notice the three tabs at the foot of the editor window.
Click the 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.
The revisions for the selected date and time are summarized in the
status line at the bottom of the IDE, in this case 6 differences:
3 added, 0 removed, 3 changed.
|
| 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.
|
| 4. |
The green boxes indicate additions to the code.
In the top portion of the window, select Load External State
near the bottom of the list.
In the bottom of the window, select the //Cat myCat = new Cat();
line in the green box in the right hand window. Hover over the red
X with your mouse. Notice the message indicating that to delete
the addition(s), you click the X.
|
Back to Topic
Navigating through
code
JDeveloper provides easy ways to navigate to related 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 Dog.java
file in the editor.
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.
Click the arrow
icon next to the sayHowDoYouDo()
method in the Dog.java file.
|
| 2. |
JDeveloper takes you to the IntAnimal
interface where the method is declared and highlights the appropriate
line for you.
|
| 3. |
To return to where you were in the Dog
class, click the green Back button in the toolbar.
You can also Navigate backward or forward using the [Alt]
+ [left] or [right] arrow key.
|
| 4. |
You can also navigate to the Javadoc for a given element. In the
Dog.java
file in the editor, right-click within the sayHowDoYouDo()
method. From the context menu, choose Quick Javadoc.
|
| 5. |
The Javadoc popup window displays additional information about
the selected method.
|
| 6. |
Click the String link to get more info about the
String class.
Click within the code editor window to remove the doc 'ghost' window.
|
| 7. |
Click [Ctrl]+[-] (minus) key to popup the Go to
Java Class dialog. It allows you to display Source or Javadoc information
of the selected class.
In the Name field type String then press Enter
on the String - java.lang highlighted suggestion.
|
| 8. |
The source code for the String class opens in
the editor.
Close the String.java tab.
|
| 9. |
Code folding 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.
Notice that a blue vertical line displays beside the main method
body.
|
| 10. |
Click the minus (-)
sign at the top of the vertical blue line to contract this section
of code.
|
| 11. |
Hover over the plus (+)
sign next to the contracted section of code. The contracted lines
of code display in a blue bordered box.
|
| 12. |
The new 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.
The Quick Outline 'ghost' window displays.
|
| 13. |
Click the Show Methods icon (first icon from
the left) to see all the methods in the Dog class.
|
| 14. |
Filter by typing ge in the
field.
|
| 15. |
Use the down arrow key or
your mouse to select the getName() method, then Enter.
That's a new feature that provides built-in
navigation in the class you are looking at.
|
| 16. |
Back in the code editor, double-click within the ellipses of the
main() {...}
method. JDeveloper expands the collapsed code.
|
Back to Topic
Back to Topic List
The integrated JDeveloper debugger enables you to debug
Java programs in the source editor. This topic 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 Dog.java
file. To do this, click in the margin to the left of
this line:
System.out.println(count
+ myDog.sayHowDoYouDo("Kate"));
The breakpoint icon, which looks like a red ball, is displayed in the margin.
|
| 2. |
Right-click in the source editor and select Debug
from the context menu.
|
| 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.
|
| 4. |
Click the Step Over icon in the toolbar to execute
the first iteration of the myDog.sayHowDoYouDo()
method.
|
| 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 Kate message.
|
| 6 |
Notice the Smart Data window to the right of the
Debugging Log tab. Select the count
variable, and double-click in the Value column to display
the Modify Value dialog.
|
| 7. |
Type 2 as the new value. Click OK.
|
| 8. |
In the toolbar, click Resume to continue program
execution.
|
| 9. |
The count variable is incremented and exceeds its limit,
so the program terminates, and the debugger disconnects.
|
Back to Topic List
The integrated JDeveloper tool allows search functionalities
on files belonging to your current application or across multiple applications.
To experiment these functionalities perform the following steps:
| 1. |
From the menu, select Application | Find Application Files.
|
| 2. |
In the File List tab, use the Look in
field to select the scope of your search. Select MyProject.jpr
choice.
|
| 3. |
Select File Extension and type .java
to retrieve all files of this type, then click Search.
|
| 4. |
The Results window returns the file names corresponding to your
criteria.
Note that clicking on one of the file name from the list opens the
file in the editor.
|
| 5. |
You can indicate complex search criteria using the Add
icon  combined
with the logical Match operators.
|
| 6. |
You can also retrieve files recently used from the Application Navigator,
click the Recently Opened Files to deploy the accordion.
|
| 7. |
You can also click [Ctrl] + [=] key to open a Recent
Files dialog and then make your selection.
|
| 8. |
To retrieve a file, click [Ctrl] + [Alt] + [-] key
stroke to open a dialog. In the File Name field, type D,
then select the Dog.java from the list, then Enter.
|
Back to Topic List
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 others, it doesn't claim to illustrate
a relevant use. To create these components perform the following steps:
| 1. |
Right click MyProject and select Project
Properties from context.
|
| 2. |
Select the Technology Scope node and move the JSF
available technology into the Selected pane. Notice
that Java, JSP and Servlets are also
moved in the selected pane.
|
| 3. |
A new hierarchy is created underneath the Web Content node. Double
click the faces-config.xml node.
A page flow diagram opens up.
|
| 4. |
The Component Palette shows the usable components in the context
of a page flow diagram.
|
| 5. |
Select the JSF Page icon and drop it onto the page
diagram.
Type page1.jspx as the name of the page.
Save your work.
|
| 6. |
Click the Overview tab of the page flow diagram.
|
| 7. |
In the overview presentation, with the Managed Beans
tab selected, click the Add button
to create a Managed Bean.
|
| 8. |
In the Create Managed Bean, type Dog as the Bean
Name and click the Browse button next to the Class
Name.
In the Class Browser, click the Hierarchy tab and
expanding the node myproject, select Dog
as the class.
Click OK. Back in the Create Managed Bean dialog,
click OK.
|
| 9. |
The Managed Bean named Dog is added to your page flow, allowing you
to use the class from your pages.
Save your work.
|
| 10. |
In the faces-config.xml editor, click the Diagram
tab and double click the page1.jspx page to create
it.
|
| 11. |
In the Create JSF Page dialog, make sure the Create as XML
Document checkbox is selected and click OK.
|
| 12. |
A new page design opens up.
|
| 13. |
The Component Palette, shows the available components useable in
the page context. Select the inputText component and
drop it onto the page.
|
| 14. |
From the Component Palette, select the CommandButton
component and drop it onto the page next to the inputText component.
|
| 15. |
In the Property Inspector [CTRL] + [Shift]
+ [I] - or View --> Property Inspector
for the Command Button, in the Value field enter Click Me.
|
| 16. |
Right click the Page1.jspx tab and select Split
Document to open simultaneously the Design
and the Source view of the page.
|
| 17. |
In the Source pane, add an exclamation point at the Click
Me string. Notice that both views are updated synchronously.
|
| 18. |
In either pane, select the inputText component.
|
| 19. |
In the Property Inspector for the inputText, click the Down
Arrow next to the Value field and select Expression
Builder.
|
| 20. |
In the Expression Builder dialog, select JSF Managed Beans
| Dog | name.
Click OK.
|
| 21. |
Navigating from component to component.
In the Source pane, using [CTRL] + [click] on dog.name
takes you to the Overview of the faces-config.xml editor.
|
| 22. |
Click the Source tab and then [CTRL] +
[click] on the Dog class name
takes you to the Class definition.
|
| 23. |
In the Dog class enter "Rex"
as a static value for the name variable.
|
| 24. |
Save your work.
|
| 25. |
In the Application Navigator, right click the page1.jspx
node and select Run from context.
|
| 26. |
Weblogic server is started and the page1
page is loaded in your browser. Exposing the name value and a CommandButton
as defined using components from the Component Palette.
|
Back to Topic List
This tutorial gave you a basic programming tour of the
JDeveloper IDE. You created an application, a project, and a Java class. You
then used the class to explore a number of features of the Java IDE, including
incorporating code templates, using Code Assist, refactoring,and reviewing your
code modification history. You also saw how to debug your program by using the
integrated debugger. Finally, you created a JSF page using a java class as a
managed bean and run the page in a browser.
You've learned how to:
 |
Create
a new application and project in JDeveloper |
|
Create a new Java
class |
|
Exploit some of the
productivity and code assistance features of the Java IDE |
|
Use the Java code
debugger |
|
Retrieve files |
|
Create JSF pages using a java class as a
managed bean |
Back to Topic List
Place the cursor over this icon to hide all screenshots.
|
Bookmark
