
Then you will write a method that takes the value entered in the input field and show it in the display field. To hook up the method to the button on the page, you will create a managed bean and register the method on the button. When you test run the page, the page in the browser will look like this:
Purpose | Duration | Application |
---|---|---|
This tutorial shows you how to build and run a simple JSF application. To see the complete application you will create, click the Download button to download a zip of the final application, and then unzip it in your JDeveloper mywork folder. |
20 minutes | ![]() |
-
From the main menu, choose File > New. In the New Gallery, expand the General category and select Applications. Then in the Items list, select Custom Application and click OK.
To follow along with the example, enter
JSFApplication
as the application name.Accept the defaults and click Finish.
The Projects panel in the Application Navigator should look like this:

Based on prebuilt templates, a JDeveloper application allows you to specify a predefined type of environment, depending on the type of application you want to create (web application, Java application, and so on). Application templates provide you with a quick way to create the project structure for standard applications with the appropriate combination of features already specified. The application template also filters the work you do in JDeveloper such that the choices available are focused only on the features you are working with.
In this tutorial, you will use the Custom Application template, which makes available objects associated with all the features that JDeveloper supports in a single project.
Once you have created an application using a suitable template, you can still add new projects to the application and specify what features are to be included. To do this, in the Application Navigator, right-click the application name and choose New Project. In the New Gallery, you can select any type of project in the Items list.

A JDeveloper project, which is used to logically group files that are related, keeps track of the source files, packages, classes, images, and other elements that your program may need. Projects manage environment variables such as the source and output paths used for compiling and running your program. Projects also maintain compiler, runtime, and debugging options so that you can customize the behavior of those tools per project.
You can add multiple projects to your application to easily access, modify, and reuse your source code. Different projects might contain files representing different tiers of a multi-tier application, for instance, or different subsystems of a complex application. These files can reside in any directory and still be contained within a single project.

In the Application Navigator you can collapse and expand any panel. You adjust the size of panels by dragging the splitter between two panels. To group and sort items in the Projects panel, use the


JDeveloper has the capability of recognizing many different file types, displaying each in its appropriate viewer or editor when you double-click the file in the Application Navigator. Closing an application or project closes all open editors or viewers for files in that application or project and unloads the files from memory.
Note: Nodes in italics in the Application Navigator mean that the elements have not yet been saved. A project node is bold when a file in the project is selected.
From the main menu, choose Application > Show Overview. The Application Overview window opens in the editor window area.

All objects that you create within JDeveloper appear in the Application Overview file summary pages, arranged by object type. As you create new files and artifacts, you can view them filtered by status and project.
You can optionally close the Application Overview window, since you will not be using it to create objects for this application.
In the Application Navigator, right-click the project and choose New > Web Tier > JSF/Facelets > Page, then click OK.
In the Create JSF Page dialog, enter
Start.jsf
as the file name. Make sure Facelets is the selected document type.The New Gallery
The JSF navigation diagrammer
The ADF task flow diagrammer (available only in the Studio edition of JDeveloper)
On the Page Layout page, select Blank Page. On the Managed Bean page, select Do Not Automatically Expose UI Components in a Managed Bean.
Click OK.
By default JDeveloper displays the new JSF Facelets page in the visual editor.Web Content folder: Contains the pages you create, along with other files that must be visible to the client browser (such as stylesheet files and images) for your application.
/WEB-INF/ folder: Contains the required Web Application Deployment Descriptor (
web.xml
) and the JSF configuration file (faces-config.xml
).web.xml file: The web application deployment descriptor for your application. This is an XML file describing the components that make up your application, along with any initialization parameters and container-managed security constraints that you want the server to enforce for you.
faces-config.xml file: Where you register the JSF application's configuration resources, such as validators, converters, managed beans, and navigation rules.
jsf
) or JSP documents written in XML syntax (which have file extension .jspx
).

You can create both types of JSF pages with the Create JSF Page dialog, opening it from:

By default components are not exposed to managed beans. If you wish to bind components to managed beans, select one of the automatic binding options on the Managed Bean page in the dialog.

Note: The option to bind to an existing managed bean is enabled only if the application has a managed bean already configured.
If you choose to automatically expose UI components in a managed bean, JDeveloper automatically creates a backing bean for any new JSF page that you create. When you drop a component on the page, JDeveloper inserts a bean property for each component, and uses the
binding
attribute to bind component instances to those properties, allowing the
bean to accept
and return component instances.
If you choose not to let JDeveloper use automatic component binding at page creation time, you can use the Property Inspector to manually bind any component on the page. For example, if you insert an input text component, click the



When you create a new JSF page as a Facelets document type (with file extension
.jsf
), JDeveloper automatically
creates a starter page structure with two xmlns
attributes for the JSF Core and JSF HTML tag libraries.
The other elements included in a starter file are elements for laying out a page,
specifically everything else within <f:view>
and </f:view>
. For example, the
following code is generated for the new page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<f:view xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<html xmlns="http://www.w3.org/1999/xhtml">
<h:head>
<title>Start</title>
</h:head>
<h:body>
<h:form></h:form>
</h:body>
</html>
</f:view>
When you complete the steps for creating a JSF page, the Application Navigator should look something like this:

In the project, the folders and files that conform to the Java EE Web module directory structure are:
In the editor window, click the Design tab at the bottom to make sure the visual editor of
Start.jsf
is in focus.In the Component Palette, select JSF from the dropdown list, then expand the HTML panel.
The JavaServer Faces HTML tag library, which contains tags representing common HTML user interface components.
-
The JavaServer Faces Core tag library, which contains tags that perform core actions such as event handling and data conversion.
-
Click and drag
Input Text to the visual editor, then drop it on the blank page to add an input text field.
Click and drag
Command Button to the page, then drop it next to the input field you just added. In the Property Inspector, Common section, click in the Value field and change the default text to
Click here
.Common: Commonly used attributes, which varies from component to component. Also includes the attributes
id
andbinding
. Theid
is the unique identifier of a component, which must be a valid XML name; you cannot use leading numeric values or spaces in the id name. Thebinding
is the EL expression that binds a component instance to a property in a bean.Appearance: Basic attributes that control the visible parts, including
title
andaccessKey
.Style: HTML style and presentation attributes such as
background
,border
,cellpadding
,cellspacing
,font
,margin
,style
, andoutline
. Most of the attributes that the HTML 4.01 specification declares for corresponding HTML elements are supported.Behavior: Basic attributes that control the component's behavior, including HTML pass-through attributes such as
disabled
andreadOnly
. Also includes an Internationalization section for HTML language translation attributes such aslang
anddir
.JavaScript: HTML event attributes (for associating client-side scripts with events) such as
onclick
,onkeypress
, andonmouseover
.In the Component Palette, select HTML from the dropdown list, then expand the Common panel.
-
Drag and drop
Line Break next to the command button on the page.
-
In the Structure window, right-click br and choose Insert After br > JSF.
In the Insert JSF Item dialog, select
Output Text and click OK.
This should add the output text component below the input text field.-
In the Property Inspector of the output text component, Common section, delete the default text in the Value field and press Enter, leaving the field blank.
Click
Save All to save your work.
The visual editor should look similar to this:

The tabs at the top of the editor window are the document tabs. Selecting a document tab gives that file focus, bringing it to the foreground of the window in the current editor.


When designing a page in the visual editor, you can use the breadcrumb links to select an existing component or tag on the page. When you click a component or tag in the editor breadcrumb links, JDeveloper shows the selected component or tag on the page with a dropdown menu icon at the top right corner of the selected item. When you click the dropdown menu, JDeveloper displays a context menu of actions that you can perform on the selected component or tag.

The visual editor is also fully integrated with the Structure window. While inserting, copying, or moving JSF components, you may select an insertion point on the page in the visual editor or in the Structure window in relation to a target page element. JDeveloper provides visual cues to indicate the location of the insertion point before, after, or contained inside a target component.
After inserting components, you can set the properties of the components either using a dialog displayed at the time you drop the component, if one is required, or later using the Property Inspector.
Your application pages can also use a style sheet, either one provided by JDeveloper or one of your own. You can add a style sheet to a page at the time you create it, or later, by editing the page. If you have added a style sheet to your page, you can set the text on the page, such as the heading text, to a style chosen from the dropdown list:


Most of the standard JSF component tag attributes accept value expressions, that is,
#{expression}
using JSF
Expression Language (EL). For example, #{personData.username}
.
When you add a component to the JSF page, the Property Inspector displays the supported attributes for the component tag grouped in these categories:



Click the Source tab at the bottom of the editor window to switch to the XML editor. Within
<h:form><h:form/>
you should see the code for the four components you added:
<h:form>
<h:inputText/>
<h:commandButton value="Click here"/>
<br/>
<h:outputText/>
<h:form/>
You will create a method and attach it to the button on the page. The method will capture the value entered by the user in the input field, then display the value below the input field.
-
In the editor window, click the Start.jsf document tab at the top.
From the main menu, choose Design > Page Properties.
In the Page Properties dialog, select the Component Binding tab and select Auto Bind. Then click New next to the Managed Bean dropdown list.
In the Create Managed Bean dialog, enter the following values or select the option:
Field or Option Value Bean Name backing_start
Class Name StartInfo
Package project1.backing
Extends java.lang.Object
Scope request Registration Annotations application
: The bean is available for the duration of the web application. This is helpful for global beans such as LDAP directories.session
: The bean is available to the client throughout the client's session.request
: The bean is available from the time it is instantiated until a response is sent back to the client. This is usually the life of the current page.none
: The bean is instantiated each time it is referenced. This is helpful if the bean is referenced within another bean.-
Click OK to close the Create Managed Bean dialog.
You should see backing_start selected in the Managed Bean dropdown list.
-
Click OK to close the Page Properties dialog.
JDeveloper displays the backing bean fileStartInfo.java
in the source editor. In the editor window, click the Start.jsf tab to bring the visual editor forward, then double-click the command button on the page.
In the Bind Action Property dialog, ensure that backing_start is shown in the Managed Bean dropdown list. You should also see commandButton1_action populated in the Method dropdown box. Click OK.
In the source editor for StartInfo.java, enter code to retrieve the value entered in the input text field and display the value in the output text field.
For example, after the comment line in the generated code:
// Add event code here...
Insert the following code shown in bold:-
In the Application Navigator, right-click Start.jsf, and choose Run.
If the Create Default Domain dialog displays, enter the default password, for exampleweblogic1
, in the Password and Confirm Password fields, then click OK.
The page in the browser should look similar to this:
Starts Integrated WebLogic Server, if not already running.
Compiles and deploys the application to Integrated WebLogic Server.
-
Launches the application in your default browser using the following default address:
http://<your_machine_IP_address>:<http_port>/<your_application_name>-<your_project_name>-context-root>/faces/<path_to_the_page>
For example:http://127.0.0.1:7101/JSFApplication-Project1-context-root/faces/Start.jsf
faces-config.xml
or
has special managed bean annotations in the bean class.

Either way, you use a symbolic name to identify the class to be used to instantiate the bean, and you use the symbolic name to refer to the bean's properties and methods. Because you are using a symbolic name rather than referring to the bean directly, the presentation is kept separate from the application logic, which means that you can change the model without affecting the view.
When automatic component binding is enabled on a page, JDeveloper automatically exposes UI components on the page to properties in a backing bean and uses the
binding
attribute to bind component instances to those properties. A backing bean is a
managed bean that contains logic and properties for UI components specific to a page. The JavaBean can be any existing
class (such as a data transfer class), or it can be a class specific to a page only (hence it is called a backing bean).
Backing beans can act as the state holder of user input and the UI components' data, and they are useful for implementing
validation methods and event handler methods that invoke back end application
code with component values.
When you enable automatic component binding in the Page Properties dialog, you can choose to bind components to an existing managed bean or you can configure a new managed bean and then create the backing bean for the page.
You can turn off or turn on automatic component binding by deselecting or selecting the Auto Bind checkbox in the Page Properties dialog. For example, if you want JDeveloper to automatically generate properties and accessor methods for some components you are adding to a page, turn on automatic component binding just before adding the components, then turn it off after you're done adding.

faces-config.xml
. When you choose to use managed bean annotations, JDeveloper adds the annotations in the JavaBean class file. For example:
@ManagedBean(name="backing_mypage")
@RequestScoped
public class MypageInfo {
...
}
If you choose to register JavaBeans in
faces-config.xml
, you do so either by editing the XML in the configuration file manually or using
the configuration file overview editor, which provides creation dialogs and browse features for finding class file
references for your beans.

When you use the configuration file overview editor to create and configure a managed bean, JDeveloper adds relevant code in
faces-config.xml
for you. For example:<managed-bean>
<managed-bean-name>backing_mypage</managed-bean-name>
<managed-bean-class>project1.backing.MypageInfo</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
<!--oracle-jdev-comment:managed-bean-jsp-link:1Mypage.jsf-->
</managed-bean>
The comment line
<!--oracle-jdev-comment...-->
tells you that the managed bean is the backing bean for
the Mypage.jsf
page when automatic component binding is turned on.
Using managed bean annotations reduces the size and complexity of the
faces-config.xml
file, which can grow quite substantially.

@ManagedBean(name="backing_start")
@RequestScoped
public class StartInfo {
...
}
When automatic component binding is enabled, JDeveloper adds to the backing bean file a bean property and accessor methods for each UI component on the JSF page. For example:
private HtmlInputText inputText1;
public void setInputText1(HtmlInputText inputText1) {
this.inputText1 = inputText1;
}
public HtmlInputText getInputText1() {
return inputText1;
}
Note: JDeveloper does not create managed properties for any of the properties on the backing bean. Managed
properties are any properties of the bean that you would like populated with a value when the bean is instantiated. If you
wish the bean to be instantiated with certain property values, you must add the managed properties configuration entries in
the faces-config.xml
file manually.
When automatic component binding is enabled, in the JSF page JDeveloper uses the
binding
attribute on a component to bind the component instance to the bean property. For example:
<h:inputText binding="#{backing_start.inputText1}" id="inputText1"/>
where
backing_start
is the symbolic bean name.
In the source code for a page that uses automatic component binding, JDeveloper also inserts an auto binding comment line at the bottom of the page. For example:
<!--oracle-jdev-comment:auto-binding-backing-bean-name:backing_start-->
outputText1.setValue("Hello "+inputText1.getValue());
return null;


In the Application Sources folder under Project1, you should see
StartInfo.java
in the package project1.backing.
By default, JDeveloper automatically configures an integrated server named Integrated WebLogic Server that references a user-specific instance of Oracle WebLogic Server bundled with the IDE. Integrated WebLogic Server is a Java EE runtime service for packaged archive deployment. Based on zero-copy deployment, Integrated WebLogic Server lets you run and test an application and its projects as a Java EE application in a Java EE container. No special connection setup is required to use Integrated WebLogic Server. You can run the entire application, a project, or individual JSF pages.
When you run a JSF application in the IDE, JDeveloper automatically:
faces-config.xml
is parsed and registered managed beans (if any) are made available. Also,
any JavaBeans marked by annotations become managed beans at runtime. Whenever a managed bean
is referenced (for example in an EL expression as a value for a component's tag attribute - called a value expression), the
Managed Bean Creation Facility instantiates the bean by calling the default constructor method on the bean. If any properties
are also declared, they are populated with the declared default values.
In the running application, when you enter a name in the input field and then click the button, you should see the text "Hello" plus the name you entered directly below the input field.

To stop the application, click

Note: Terminating the application stops and undeploys the application from Integrated WebLogic Server but it does not terminate Integrated WebLogic Server.
- Use JDeveloper wizards and dialogs to create applications and starter pages
- Use the visual editor, Component Palette, and Property Inspector to create UI pages
- Use component binding to programmatically manipulate UI components on a page
- Use Integrated WebLogic Server to run a JSF application

