Google Git
Sign in
apache / netbeans-website / refs/heads/asf-site / . / tutorial / main / kb / docs / javaee / javaee-gettingstarted / index.html
blob: 22b2bba53c02a179d3fcf142462f30ddff94327e [file] [log] [blame]
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Getting Started with Java EE Applications</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Getting Started with Java EE Applications - Apache NetBeans">
<meta name="author" content="Apache NetBeans">
<meta name="description" content="Getting Started with Java EE Applications - Apache NetBeans">
<meta name="keywords" content="Apache NetBeans, Tutorials, Getting Started with Java EE Applications">
<meta name="generator" content="Apache NetBeans">
<link rel="stylesheet" href="../../../../../../_/css/font-awesome.min.css">
<link rel="alternate" type="application/atom+xml" title="Apache NetBeans Blog" href="https://netbeans.apache.org/blogs/atom" />
<link rel="stylesheet" href="../../../../../../_/css/highlightjs/default.min.css">
<link rel="stylesheet" href="../../../../../../_/css/netbeans.css">
<link rel="apple-touch-icon" sizes="180x180" href="../../../../../../_/images/fav/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="../../../../../../_/images/fav/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="../../../../../../_/images/fav/favicon-16x16.png">
<link rel="manifest" href="../../../../../../_/images/fav/site.webmanifest">
<link rel="mask-icon" href="../../../../../../_/images/fav/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#ffc40d">
<meta name="theme-color" content="#ffffff">
<link href="../../../../../../_/css/font-open-sans.css" rel="stylesheet">
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
</head>
<body>
<div class="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="medium">
<button type="button" data-toggle="responsive-menu"><i style='font-size: 32px; color: #fff; padding: 8px' class='fa fa-bars'></i></button>
<div class="title-bar-title">Apache NetBeans</div>
</div>
<div class="top-bar" id="responsive-menu">
<div class='top-bar-left'>
<a class='title' href="../../../../../../index.html"><img src='../../../../../../_/images/apache-netbeans.svg' style='padding: 8px; height: 48px;'> Apache NetBeans</a>
</div>
<div class="top-bar-right">
<ul class="vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
<li> <input id="search-input" type="text" placeholder="Search the docs"> </li>
<li> <a href="../../../../../../front/main/community">Community</a> </li>
<li> <a href="../../../../../../front/main/participate">Participate</a> </li>
<li> <a href="../../../../../../front/main/blogs">Blog</a></li>
<li> <a href="../../../../../../front/main/help">Get Help</a> </li>
<li> <a href="https://plugins.netbeans.apache.org/">Plugins</a> </li>
<li> <a href="../../../../../../front/main/download">Download</a> </li>
</ul>
</div>
</div>
<!-- src/templates/news -->
<section class="hero news alternate">
<div class='grid-container'>
<div class='cell'>
<div class="annotation">Latest release</div>
<h1>Apache NetBeans 28</h1>
<p><a class="button success" href="../../../../../../front/main/download/nb28">Download</a></p>
</div>
</div>
</section>
<div class='grid-container main-content tutorial'>
<article class="doc">
<h1 class="sect0">Getting Started with Java EE Applications</h1>
<div class="sectionbody">
<div class="admonitionblock note">
<table>
<tbody><tr>
<td class="icon"><i class="fa icon-note" title="Note"></i></td>
<td class="content">This tutorial needs a review.
You can <a href="https://github.com/apache/netbeans-antora-tutorials/edit/main/modules/ROOT/pages/kb/docs/javaee/javaee-gettingstarted.adoc" title="Edit this tutorial in github">edit it in GitHub </a>
following these <a href="../../../../../../tutorial/main/kb/docs/contributing">contribution guidelines.</a></td>
</tr></tbody>
</table>
</div>
</div>
<div id="toc" class="toc">
<div id="toctitle"></div>
<ul class="sectlevel1">
<li><a href="#_creating_the_web_application_project">Creating the Web Application Project</a></li>
<li><a href="#_creating_the_entity_class_and_session_facade">Creating the Entity Class and Session Facade</a>
<ul class="sectlevel2">
<li><a href="#_creating_the_entity_class">Creating the Entity Class</a></li>
<li><a href="#_creating_the_session_facade">Creating the Session Facade</a></li>
</ul>
</li>
<li><a href="#_creating_the_jsf_managed_bean_and_jsf_pages">Creating the JSF Managed Bean and JSF Pages</a>
<ul class="sectlevel2">
<li><a href="#_creating_the_managed_bean">Creating the Managed Bean</a></li>
<li><a href="#_modifying_the_index_page">Modifying the Index Page</a></li>
<li><a href="#_creating_the_results_page">Creating the Results Page</a></li>
</ul>
</li>
<li><a href="#_running_the_application">Running the Application</a></li>
<li><a href="#_downloading_the_solution_project">Downloading the Solution Project</a></li>
<li><a href="#_see_also">See Also</a></li>
</ul>
</div>
<div id="preamble">
<div class="sectionbody">
<div class="paragraph">
<p>This document provides a brief introduction to some of the features introduced as part of Java Enterprise Edition 6 (Java EE 6) specification. To illustrate the new features, this tutorial will demonstrate how to create a simple Java EE web application that contains an EJB 3.1 stateless session bean facade for an entity class. You will use wizards in the IDE to generate the entity class and the session bean. The code generated by the wizard uses queries that are defined in the Criteria API that is part of JPA 2.x and contained in the Java EE 6 specification. You will then create a named managed bean that accesses the session facade and a presentation layer that uses the Facelets view framework as specified in JSF 2.x.</p>
</div>
<div class="paragraph">
<p>This tutorial is based on the blog post <a href="http://www.adam-bien.com/roller/abien/entry/simplest_possible_jsf_2_ejb">+ Simplest Possible JSF 2 / EJB 3.1 / JPA Component - With WAR Deployment+</a> by Adam Bien. You can find additional Java EE examples at Adam Bien&#8217;s Kenai project <a href="http://kenai.com/projects/javaee-patterns">+ Java EE Patterns and Best Practices+</a> and in his book "Real World Java EE Patterns - Rethinking Best Practices", available at <a href="http://press.adam-bien.com">http://press.adam-bien.com</a>.</p>
</div>
<div class="paragraph">
<p><strong>Tutorial Exercises</strong></p>
</div>
<div class="ulist">
<ul>
<li>
<p><a href="#Exercise_1">Creating the Web Application Project</a></p>
</li>
<li>
<p><a href="#Exercise_2">Creating the Entity Class and Session Facade</a></p>
</li>
<li>
<p><a href="#Exercise_2a">Creating the Entity Class</a></p>
</li>
<li>
<p><a href="#Exercise_2b">Creating the Session Facade</a></p>
</li>
<li>
<p><a href="#Exercise_3">Creating the JSF Managed Bean and JSF Pages</a></p>
</li>
<li>
<p><a href="#Exercise_3a">Creating the Managed Bean</a></p>
</li>
<li>
<p><a href="#Exercise_3b">Modifying the Index Page</a></p>
</li>
<li>
<p><a href="#Exercise_3c">Creating the Results Page</a></p>
</li>
<li>
<p><a href="#Exercise_4">Running the Project</a></p>
</li>
<li>
<p><a href="#Exercise_5">Downloading the Solution Project</a></p>
</li>
</ul>
</div>
<div class="paragraph">
<p><strong>To follow this tutorial, you need the following software and resources.</strong></p>
</div>
<table class="tableblock frame-all grid-all stretch">
<colgroup>
<col style="width: 50%;">
<col style="width: 50%;">
</colgroup>
<thead>
<tr>
<th class="tableblock halign-left valign-top">Software or Resource</th>
<th class="tableblock halign-left valign-top">Version Required</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><a href="../../../../../../front/main/download/" class="xref page">NetBeans IDE</a></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">7.2, 7.3, 7.4, 8.0, Java EE version</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Java Development Kit (JDK)</a></p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">version 7 or 8</p></td>
</tr>
<tr>
<td class="tableblock halign-left valign-top"><p class="tableblock">GlassFish Server Open Source Edition</p></td>
<td class="tableblock halign-left valign-top"><p class="tableblock">3.x, 4.x</p></td>
</tr>
</tbody>
</table>
<div class="paragraph">
<p><strong>Prerequisites</strong></p>
</div>
<div class="paragraph">
<p>This document assumes you have some basic knowledge of, or programming experience with, the following technologies:</p>
</div>
<div class="ulist">
<ul>
<li>
<p>Java Programming</p>
</li>
<li>
<p>NetBeans IDE</p>
</li>
</ul>
</div>
<div class="paragraph">
<p>You can download <a href="https://netbeans.org/projects/samples/downloads/download/Samples/JavaEE/SimpleEE6App72.zip">a zip archive of the finished project</a>.</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_creating_the_web_application_project"><a class="anchor" href="#_creating_the_web_application_project"></a>Creating the Web Application Project</h2>
<div class="sectionbody">
<div class="paragraph">
<p>In this exercise you create a simple web application. When you create the web application you will specify GlassFish Server as the target Java EE container. The GlassFish server is Java EE-compatible and includes the JSF 2.x libraries that are required in this application.</p>
</div>
<div class="paragraph">
<p>In the New Project wizard you can choose Java EE 6 Web or Java EE 7 Web as the Java EE version. Java EE 6 Web and Java EE 7 Web are lightweight Java EE profiles that contain a subset of the full Java EE platform. The Java EE Web profiles are designed for web applications that do not require advanced Java EE technologies such as support for remote interfaces, the full EJB 3.1 specification and the Java Message Service (JMS) API.</p>
</div>
<div class="paragraph">
<p>The Web profiles support the transaction processing and persistence management that are commonly used in enterprise web applications. You can use Java EE Web profiles for web applications that use session beans with a local interface or no interface. The full Java EE profile is required if the application uses a remote interface.</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Choose File &gt; New Project (Ctrl-Shift-N; ⌘-Shift-N on Mac) from the main menu.</p>
</li>
<li>
<p>Select Web Application from the Java Web category and click Next.</p>
</li>
<li>
<p>Type <strong>SimpleEE6App</strong> for the project name and set the project location.</p>
</li>
<li>
<p>Deselect the Use Dedicated Folder option, if selected. Click Next.
(For this tutorial there is little reason to copy project libraries to a dedicated folder because you will not need to share libraries with other users or projects.)</p>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Select the GlassFish server and set the Java EE Version to Java EE 6 Web or Java EE 7 Web. Click Next.</p>
</li>
</ol>
</div>
</li>
</ol>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/javaee/newappwizard.png" alt="newappwizard">
</div>
<div class="title">Figure 1. Server and Settings panel in New Project wizard</div>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Select JavaServer Faces in the Frameworks pane. Click Finish.</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>By default, the IDE will select the JSF 2.x library if you are developing a Java EE web application and deploying to the GlassFish server. The version of the default JSF library depends on the version bundled with your GlassFish server. The JSF 2.x library enables you to use Facelets as the page language and also provides support for JSF 1.2 and JSP.</p>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/javaee/newappwizard2.png" alt="newappwizard2">
</div>
<div class="title">Figure 2. Frameworks panel in New Project wizard</div>
</div>
<div class="paragraph">
<p>When you click Finish, the IDE creates the project and opens the project in the Projects window. The IDE automatically creates the page <code>index.xhtml</code> and opens the page in the editor.</p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_creating_the_entity_class_and_session_facade"><a class="anchor" href="#_creating_the_entity_class_and_session_facade"></a>Creating the Entity Class and Session Facade</h2>
<div class="sectionbody">
<div class="paragraph">
<p>In this section you will create an entity class and a session facade for the entity class. An entity class is a plain old Java object (POJO), a simple Java class that is identified as an entity by the <code>@Entity</code> annotation. Starting with the Java EE 5 specification, you can use entity classes as persistent objects to represent tables in a database. The Java Persistence API enables you to use persistence in web applications without the need to create an EJB module.</p>
</div>
<div class="paragraph">
<p>The session facade for the entity class in this application is a stateless session bean. The Enterprise JavaBean (EJB) 3.1 architecture introduced as part of the Java EE 6 specification enables you to create session beans without the business interfaces that were required in EJB 3.0. The Java EE 6 specification also allows you to package EJB components directly in a WAR archive. This simplifies development of smaller web applications by eliminating the need to create separate EJB modules that are packaged as a JAR archive in an EAR archive. However, for larger enterprise applications that are distributed across different machines, you will still want to create EAR archives to separate your business logic from the presentation layer.</p>
</div>
<div class="paragraph">
<p>For more about using EJB 3.1 in the IDE, see the tutorial <a href="../javaee-entapp-ejb/" class="xref page">Creating an Enterprise Application with EJB 3.1</a>.</p>
</div>
<div class="paragraph">
<p>For more details about entity classes, see the chapter <a href="http://docs.oracle.com/javaee/7/tutorial/doc/persistence-intro.htm">Introduction to the Java Persistence API</a> in the <a href="http://download.oracle.com/javaee/7/tutorial/doc/">Java EE 7 Tutorial</a>.</p>
</div>
<div class="paragraph">
<p>For more information about session beans, see the chapter <a href="http://docs.oracle.com/javaee/7/tutorial/doc/ejb-intro002.htm">What is a Session Bean?</a> in the <a href="http://download.oracle.com/javaee/7/tutorial/doc/">Java EE 7 Tutorial</a>.</p>
</div>
<div class="sect2">
<h3 id="_creating_the_entity_class"><a class="anchor" href="#_creating_the_entity_class"></a>Creating the Entity Class</h3>
<div class="paragraph">
<p>In this exercise you will use the New Entity Class wizard to create a simple persistent entity class. You will also use the wizard to create a persistence unit that defines the data source and entity manager used in the application. You will add one field in the class to represent the data in your table and generate a getter and setter for the new field.</p>
</div>
<div class="paragraph">
<p>An entity class must have a primary key. When you create the entity class using the wizard, the IDE by default generates the field <code>id</code> and annotates the field with the <code>@Id</code> annotation to declare the field as the primary key. The IDE also adds the <code>@GeneratedValue</code> annotation and specifies the key generation strategy for the primary id field.</p>
</div>
<div class="paragraph">
<p>Using Java Persistence in your project greatly simplifies application development by removing the need for configuring deployment descriptors to provide object-relational mapping information for persistent fields or properties. Instead, you can use annotations to define these properties directly in a simple Java class.</p>
</div>
<div class="paragraph">
<p>Entity persistence is managed by the EntityManager API. The EntityManager API handles the persistence context, and each persistence context is a group of entity instances. When developing your application, you can use annotations in your class to specify the persistent context instance of your entity instances. The life-cycle of the entity instances is then handled by the container.</p>
</div>
<div class="paragraph">
<p>To create the entity class, perform the following steps.</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Right-click the project node and choose New &gt; Other.</p>
</li>
<li>
<p>Select Entity Class from the Persistence category. Click Next.</p>
</li>
<li>
<p>Type <strong>Message</strong> for the Class Name.</p>
</li>
<li>
<p>Type <strong>entities</strong> for the Package.</p>
</li>
<li>
<p>Select Create Persistence Unit. Click Next.</p>
</li>
<li>
<p>Select a datasource (for example, select <code>jdbc/sample</code> if you want to use JavaDB).</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>The datasource for <code>jdbc/sample</code> is bundled with the IDE when you install the IDE and the GlassFish server, but you can specify a different datasource if you want to use a different database.</p>
</div>
<div class="paragraph">
<p>You can keep the other default options (persistence unit name, EclipseLink persistence provider). Confirm that the persistence unit is using the Java Transaction API and that the Table Generation Strategy is set to Create so that the tables based on your entity classes are created when the application is deployed.</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Click Finish in the New Entity Class wizard.</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>When you click Finish, the IDE creates the entity class and opens the class in the editor. You can see that the IDE generated the id field <code>private Long id;</code> and annotated the field with <code>@Id</code> and <code>@GeneratedValue(strategy = GenerationType.AUTO)</code> .</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>In the editor, add the <code>message</code> field (in bold) below the <code>id</code> field.</p>
</li>
</ol>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">private Long id;
*private String message;*</code></pre>
</div>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Right-click in the editor and choose Insert Code (Alt-Insert; Ctrl-I on Mac) and then select Getter and Setter.</p>
</li>
<li>
<p>In the Generate Getters and Setters dialog box, select the <code>message</code> field and click Generate.</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>The IDE generates getter and setter methods for the field <code>message</code> .</p>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/javaee/getters-dialog.png" alt="getters dialog">
</div>
<div class="title">Figure 3. Create Persistence Unit wizard</div>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Save your changes.</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>The entity class represents a table in the database. When you run this application, a database table for Message will be automatically created. The table will contain the columns <code>id</code> and <code>message</code> .</p>
</div>
<div class="paragraph">
<p>If you look at the persistence unit in the XML editor, you can see that the application will use the Java Transaction API (JTA) ( <code>transaction-type="JTA"</code> ). This specifies that the responsibility for managing the lifecycle of entities in the persistence context is assigned to the container. This results in less code because the entity lifecycle is managed by the container and not by the application. For more about using JTA to manage transactions, see the <a href="http://www.oracle.com/technetwork/java/javaee/jta/index.html">Java Transaction API</a> documentation.</p>
</div>
</div>
<div class="sect2">
<h3 id="_creating_the_session_facade"><a class="anchor" href="#_creating_the_session_facade"></a>Creating the Session Facade</h3>
<div class="paragraph">
<p>In this exercise you will use a wizard to create a stateless session facade for the Message entity. The EJB 3.1. specification states that business interfaces for session beans are now optional. In this application where the client accessing the bean is a local client, you have the option to use a local interface or a no-interface view to expose the bean.</p>
</div>
<div class="paragraph">
<p>To create the session bean, perform the following steps.</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Right-click the project node and choose New &gt; Other.</p>
</li>
<li>
<p>Select Session Beans for Entity Classes from the Enterprise JavaBeans category. Click Next.</p>
</li>
<li>
<p>Select the <code>Message</code> entity and click Add. Click Next.</p>
</li>
<li>
<p>Type <strong>boundary</strong> for the package. Click Finish.</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>Notice that you did not need to create a business interface for the session bean. Instead, in this application the bean will be exposed to a local managed bean using a no-interface view.</p>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/javaee/sessionwizard.png" alt="sessionwizard">
</div>
<div class="title">Figure 4. Session Beans for Entity Classes wizard</div>
</div>
<div class="paragraph">
<p>When you click Finish, the IDE generates the session facade class <code>MessageFacade.java</code> and <code>AbstractFacade.java</code> and opens the files in the editor. As you can see in the generated code, the annotation <code>@Stateless</code> is used to declare <code>MessageFacade.java</code> as a stateless session bean component. <code>MessageFacade.java</code> extends <code>AbstractFacade.java</code> , which contains the business logic and manages the transaction.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">@Stateless
public class MessageFacade extends AbstractFacade&lt;Message&gt; {
@PersistenceContext(unitName = "SimpleEE6AppPU")
private EntityManager em;</code></pre>
</div>
</div>
<div class="paragraph">
<p>When you create the facade for the entity using the wizard, by default the IDE adds the <code>PersistenceContext</code> annotation ( <code>@PersistenceContext(unitName = "SimpleEE6AppPU")</code> ) to inject the entity manager resource into the session bean component and to specify the name of the persistence unit. In this example the name of the persistence unit is declared explicitly, but the name is optional if the application has only one persistence unit.</p>
</div>
<div class="paragraph">
<p>The IDE also generates methods in <code>AbstractFacade.java</code> to create, edit, remove and find entities. The EntityManager API defines the methods that are used to interact with the persistence context. You can see that the IDE generates some commonly used default query methods that can be used to find entity objects. The <code>findAll</code> , <code>findRange</code> and <code>count</code> methods use methods defined in the Criteria API for creating queries. The Criteria API is part of the JPA 2.x specification that is included in the Java EE 6 specification.</p>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_creating_the_jsf_managed_bean_and_jsf_pages"><a class="anchor" href="#_creating_the_jsf_managed_bean_and_jsf_pages"></a>Creating the JSF Managed Bean and JSF Pages</h2>
<div class="sectionbody">
<div class="paragraph">
<p>In this section you will create the presentation layer for the application using JavaServer Faces (JSF) 2.x and a managed backing bean that is used by the JSF pages. The JSF 2.x specification adds support for Facelets as the preferred view technology for JSF-based applications. Starting with JSF 2.x, you can also use the <code>@ManagedBean</code> annotation in your source code to declare a class a managed bean. You are no longer required to add entries in the <code>faces-config.xml</code> file to declare JSF managed beans. You can use bean names in JSF pages to access methods in the managed bean.</p>
</div>
<div class="paragraph">
<p>For more about IDE support for the JavaServer Faces 2.x specification, see <a href="../../web/jsf20-support/" class="xref page">JSF 2.x Support in NetBeans IDE</a>.</p>
</div>
<div class="paragraph">
<p>For more about the JavaServer Faces 2.x specification, see the <a href="http://docs.oracle.com/javaee/7/tutorial/doc/jsf-intro.htm">JavaServer Faces Technology</a> chapter in the Java EE 7 Tutorial.</p>
</div>
<div class="sect2">
<h3 id="_creating_the_managed_bean"><a class="anchor" href="#_creating_the_managed_bean"></a>Creating the Managed Bean</h3>
<div class="paragraph">
<p>In this exercise you will create a simple JSF managed bean that is used to access the session facade. The JSF 2.x specification enables you to use annotations in the bean class to identify the class as a JSF managed bean, to specify the scope and to specify a name for the bean.</p>
</div>
<div class="paragraph">
<p>To create the managed bean, perform the following steps.</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Right-click the project node and choose New &gt; Other.</p>
</li>
<li>
<p>Select JSF Managed Bean from the JavaServer Faces category. Click Next.</p>
</li>
<li>
<p>Type <strong>MessageView</strong> for the Class Name.</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>You will use the Managed Bean name <code>MessageView</code> as the value for the <code>inputText</code> and <code>commandButton</code> in the JSF page <code>index.xhtml</code> when calling methods in the bean.</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Type <strong>my.presentation</strong> for the Package.</p>
</li>
<li>
<p>Type <strong>MessageView</strong> for the Name that will be used for the managed bean.</p>
</li>
</ol>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<i class="fa icon-note" title="Note"></i>
</td>
<td class="content">
When you create a managed bean using the wizard, the IDE will by default assign a name to the bean based on the name of the bean class and beginning with a lower-case letter. For this tutorial and demonstration purposes, you are explicitly assigning the bean a name that begins with an upper-case letter. When you reference the bean in the JSF pages you will use <code>MessageView</code> instead of <code>messageView</code> . If you did not explicitly assign the name, you would use the default <code>messageView</code> in the JSF page.
</td>
</tr>
</table>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Set Scope to Request. Click Finish.</p>
</li>
</ol>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/javaee/newjsfbean.png" alt="newjsfbean">
</div>
<div class="title">Figure 5. New JSF Managed Bean wizard</div>
</div>
<div class="paragraph">
<p>When you click Finish, the IDE creates the bean class and opens the class in the editor. In the Projects window you will see the following files.</p>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/javaee/projectswindow.png" alt="projectswindow">
</div>
<div class="title">Figure 6. Project window showing file structure</div>
</div>
<div class="paragraph">
<p>In the editor, you can see that the IDE added the <code>@ManagedBean</code> and <code>@RequestScoped</code> annotations and the name of the bean.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">@ManagedBean(name="MessageView")
@RequestScoped
public class MessageView {
/** Creates a new instance of MessageView */
public MessageView() {
}
}</code></pre>
</div>
</div>
<div class="paragraph">
<p>You will now add an <code>@EJB</code> annotation to use dependency injection to obtain a reference to the MessageFacade session bean. You will also call the <code>findAll</code> and <code>create</code> methods that are exposed in the facade. The IDE&#8217;s code completion can help you when typing the methods.</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Right-click in the editor and choose Insert Code (Alt-Insert; Ctrl-I on Mac) and choose Call Enterprise Bean in the popup menu.</p>
</li>
<li>
<p>Select MessageFacade in the Call Enterprise Bean dialog box. Click OK.</p>
</li>
</ol>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/javaee/callbean.png" alt="callbean">
</div>
<div class="title">Figure 7. Call Enterprise Bean dialog</div>
</div>
<div class="paragraph">
<p>When you click OK, the IDE adds the following code (in bold) to inject the bean.</p>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">public class MessageView {
/** Creates a new instance of MessageView */
public MessageView() {
}
// Injects the MessageFacade session bean using the @EJB annotation
*@EJB
private MessageFacade messageFacade;*
}</code></pre>
</div>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Add the following code to create a new instance.</p>
</li>
</ol>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java">/** Creates a new instance of MessageView */
public MessageView() {
this.message = new Message();
}</code></pre>
</div>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Add the following code to the class.</p>
</li>
</ol>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-java hljs" data-lang="java"> // Creates a new field
private Message message;
// Calls getMessage to retrieve the message
public Message getMessage() {
return message;
}
// Returns the total number of messages
public int getNumberOfMessages(){
return messageFacade.findAll().size();
}
// Saves the message and then returns the string "theend"
public String postMessage(){
this.messageFacade.create(message);
return "theend";
}</code></pre>
</div>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Right-click in the editor and choose Fix Imports (Alt-Shift-I; ⌘-Shift-I on Mac) and save your changes.</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>You can use the code completion in the editor to help you type your code.</p>
</div>
<div class="paragraph">
<p>Notice that the <code>postMessage</code> method returns the string "theend". The JSF 2.x specification enables the use of implicit navigation rules in applications that use Facelets technology. In this application, no navigation rules are configured in <code>faces-config.xml</code> . Instead, the navigation handler will try to locate a suitable page in the application. In this case, the navigation handler will try to locate a page named <code>theend.xhtml</code> when the <code>postMessage</code> method is invoked.</p>
</div>
</div>
<div class="sect2">
<h3 id="_modifying_the_index_page"><a class="anchor" href="#_modifying_the_index_page"></a>Modifying the Index Page</h3>
<div class="paragraph">
<p>In this exercise you will make some simple changes to the <code>index.xhtml</code> page to add some UI components. You will add a form with an input text field and a button.</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Open <code>index.xhtml</code> in the editor.</p>
</li>
<li>
<p>Modify the file to add the following simple form between the <code>&lt;h:body&gt;</code> tags.</p>
</li>
</ol>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-xml hljs" data-lang="xml">&lt;h:body&gt;
*&lt;f:view&gt;
&lt;h:form&gt;
&lt;h:outputLabel value="Message:"/&gt;&lt;h:inputText value="#{MessageView.message.message}"/&gt;
&lt;h:commandButton action="#{MessageView.postMessage}" value="Post Message"/&gt;
&lt;/h:form&gt;
&lt;/f:view&gt;*
&lt;/h:body&gt;</code></pre>
</div>
</div>
<div class="paragraph">
<p>The JSF code completion can help you when you type the code.</p>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/javaee/jsfcodecompletion1.png" alt="jsfcodecompletion1">
</div>
<div class="title">Figure 8. Code completion in the source editor</div>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<i class="fa icon-note" title="Note"></i>
</td>
<td class="content">
If you copy and paste the code into the file, you will see a warning in the left margin next to the line containing <code>&lt;f:view&gt;</code> . You can place your insert cursor in the line and type Alt-Space to open the hint on how to resolve the error. The hint informs you that you need to add the <code>xmlns:f="http://xmlns.jcp.org/jsf/core"</code> library declaration.
</td>
</tr>
</table>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Save your changes.</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>The <code>inputText</code> and <code>commandButton</code> components will invoke the methods in the named JSF managed bean <code>MessageView</code> . The <code>postMessage</code> method will return "theend", and the navigation handler will look for a page named <code>theend.xhtml</code> .</p>
</div>
</div>
<div class="sect2">
<h3 id="_creating_the_results_page"><a class="anchor" href="#_creating_the_results_page"></a>Creating the Results Page</h3>
<div class="paragraph">
<p>In this exercise you will create the JSF page <code>theend.xhtml</code> . The page will be displayed when the user clicks the Post Message button in <code>index.xhtml</code> and invokes the <code>postMessage</code> method in the JSF managed bean.</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Right-click the project node and choose New &gt; Other.</p>
</li>
<li>
<p>Select JSF Page from the JavaServer Faces category. Click Next.</p>
</li>
<li>
<p>Type <strong>theend</strong> as the File Name.</p>
</li>
<li>
<p>Confirm that the Facelets option is selected. Click Finish.</p>
</li>
</ol>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/javaee/result-jsf-page.png" alt="result jsf page">
</div>
<div class="title">Figure 9. Creating the theend JSF file in the New JSF File wizard</div>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Modify the file by typing the following between the &lt;h:body&gt; tags.</p>
</li>
</ol>
</div>
<div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-xml hljs" data-lang="xml">&lt;h:body&gt;
*&lt;h:outputLabel value="Thanks! There are "/&gt;
&lt;h:outputText value="#{MessageView.numberOfMessages}"/&gt;
&lt;h:outputLabel value=" messages!"/&gt;*
&lt;/h:body&gt;</code></pre>
</div>
</div>
<div class="paragraph">
<p>When you start typing, the IDE automatically adds the <code>xmlns:h="http://xmlns.jcp.org/jsf/html"</code> tag library definition to the file for the JSF elements.</p>
</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_running_the_application"><a class="anchor" href="#_running_the_application"></a>Running the Application</h2>
<div class="sectionbody">
<div class="paragraph">
<p>You are now finished coding the application. You can now test the application in your browser.</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Right-click the project node in the Projects window and choose Run.</p>
</li>
</ol>
</div>
<div class="paragraph">
<p>When you choose Run, the IDE builds and deploys the application and opens <code>index.xhtml</code> in your browser.</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Type a message in the text field. Click Post Message.</p>
</li>
</ol>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/javaee/browser1.png" alt="browser1">
</div>
<div class="title">Figure 10. Application in browser</div>
</div>
<div class="paragraph">
<p>When you click Post Message, the message is saved to the database and the number of messages is retrieved and displayed.</p>
</div>
<div class="imageblock">
<div class="content">
<img src="../../../../_images/kb/docs/javaee/browser2.png" alt="browser2">
</div>
<div class="title">Figure 11. Application in browser showing results</div>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_downloading_the_solution_project"><a class="anchor" href="#_downloading_the_solution_project"></a>Downloading the Solution Project</h2>
<div class="sectionbody">
<div class="paragraph">
<p>You can download the sample projects used in this tutorial in the following ways.</p>
</div>
<div class="ulist">
<ul>
<li>
<p>Download <a href="https://netbeans.org/projects/samples/downloads/download/Samples/JavaEE/SimpleEE6App72.zip">a zip archive of the finished project</a>.</p>
</li>
<li>
<p>Checkout the project sources from the NetBeans Samples by performing the following steps:</p>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Choose Team &gt; Subversion &gt; Checkout from the main menu.</p>
</li>
<li>
<p>In the Checkout dialog box, enter the following Repository URL:
<code><a href="https://svn.netbeans.org/svn/samples~samples-source-code" class="bare">https://svn.netbeans.org/svn/samples~samples-source-code</a></code>
Click Next.</p>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Click Browse to open the Browse Repository Folders dialog box.</p>
</li>
<li>
<p>Expand the root node and select <strong>samples/javaee/SimpleEE6App</strong>. Click OK.</p>
</li>
<li>
<p>Specify the Local Folder for the sources (the local folder must be empty).</p>
</li>
<li>
<p>Click Finish.</p>
</li>
</ol>
</div>
</li>
</ol>
</div>
</li>
</ul>
</div>
<div class="paragraph">
<p>When you click Finish, the IDE initializes the local folder as a Subversion repository and checks out the project sources.</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>Click Open Project in the dialog that appears when checkout is complete.</p>
</li>
</ol>
</div>
<div class="admonitionblock note">
<table>
<tr>
<td class="icon">
<i class="fa icon-note" title="Note"></i>
</td>
<td class="content">
You need a Subversion client to checkout the sources. For more about installing Subversion, see the section on <a href="../../ide/subversion/#settingUp" class="xref page">Setting up Subversion</a> in the <a href="../../ide/subversion/" class="xref page">Guide to Subversion in NetBeans IDE</a>.
</td>
</tr>
</table>
</div>
<div class="paragraph">
<p><a href="../../../../../../front/main/community/mailing-lists/" class="xref page">Send Feedback on This Tutorial</a></p>
</div>
</div>
</div>
<div class="sect1">
<h2 id="_see_also"><a class="anchor" href="#_see_also"></a>See Also</h2>
<div class="sectionbody">
<div class="paragraph">
<p>For more information about using NetBeans IDE to develop Java EE applications, see the following resources:</p>
</div>
<div class="ulist">
<ul>
<li>
<p><a href="../javaee-intro/" class="xref page">Introduction to Java EE Technology</a></p>
</li>
<li>
<p><a href="../../web/jsf20-support/" class="xref page">JSF 2.x Support in NetBeans IDE</a></p>
</li>
<li>
<p><a href="../../java-ee/" class="xref page">Java EE &amp;amp; Java Web Learning Trail</a></p>
</li>
</ul>
</div>
<div class="paragraph">
<p>You can find more information about using Java EE technologies to develop applications in the <a href="http://download.oracle.com/javaee/7/tutorial/doc/">Java EE 7 Tutorial</a>.</p>
</div>
<div class="paragraph">
<p>To send comments and suggestions, get support, and keep informed on the latest developments on the NetBeans IDE Java EE development features, <a href="../../../../../../front/main/community/mailing-lists/" class="xref page">join the nbj2ee mailing list</a>.</p>
</div>
</div>
</div>
<section class='tools'>
<ul class="menu align-center">
<li><a title="Facebook" href="https://www.facebook.com/NetBeans"><i class="fa fa-md fa-facebook"></i></a></li>
<li><a title="Twitter" href="https://twitter.com/netbeans"><i class="fa fa-md fa-twitter"></i></a></li>
<li><a title="Github" href="https://github.com/apache/netbeans"><i class="fa fa-md fa-github"></i></a></li>
<li><a title="YouTube" href="https://www.youtube.com/user/netbeansvideos"><i class="fa fa-md fa-youtube"></i></a></li>
<li><a title="Atom Feed" href="https://netbeans.apache.org/blogs/atom"><i class="fa fa-mf fa-rss"></i></a></li>
<li><a title="Slack" href="https://tinyurl.com/netbeans-slack-signup/"><i class="fa fa-md fa-slack"></i></a></li>
<li><a title="Issues" href="https://github.com/apache/netbeans/issues"><i class="fa fa-mf fa-bug"></i></a></li>
</ul>
<ul class="menu align-center">
<li><a href="https://github.com/apache/netbeans-antora-tutorials/edit/main/modules/ROOT/pages/kb/docs/javaee/javaee-gettingstarted.adoc" title="See this page in github"><i class="fa fa-md fa-edit"></i> See this page in GitHub.</a></li>
</ul>
</section>
</article>
</div>
<div class='grid-container incubator-area' style='margin-top: 64px'>
<div class='grid-x grid-padding-x'>
<div class='large-auto cell text-center'>
<a href="https://www.apache.org/">
<img style="height: 60px" title="Apache Software Foundation" src="../../../../../../_/images/asf_logo_wide.svg" />
</a>
</div>
<div class='large-auto cell text-center'>
<a href="https://www.apache.org/events/current-event.html">
<img style="width:234px; height: 60px;" title="Apache Software Foundation current event" src="https://www.apache.org/events/current-event-234x60.png"/>
</a>
</div>
</div>
</div>
<footer>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="large-auto cell">
<h1><a href="../../../../../../front/main/about">About</a></h1>
<ul>
<li><a href="../../../../../../front/main/community/who">Who's Who</a></li>
<li><a href="https://www.apache.org/foundation/thanks.html">Thanks</a></li>
<li><a href="https://www.apache.org/foundation/sponsorship.html">Sponsorship</a></li>
<li><a href="https://www.apache.org/security/">Security</a></li>
</ul>
</div>
<div class="large-auto cell">
<h1><a href="../../../../../../front/main/community">Community</a></h1>
<ul>
<li><a href="../../../../../../front/main/community/mailing-lists">Mailing lists</a></li>
<li><a href="../../../../../../front/main/community/committer">Becoming a committer</a></li>
<li><a href="../../../../../../front/main/community/events">NetBeans Events</a></li>
<li><a href="https://www.apache.org/events/current-event.html">Apache Events</a></li>
</ul>
</div>
<div class="large-auto cell">
<h1><a href="../../../../../../front/main/participate">Participate</a></h1>
<ul>
<li><a href="../../../../../../front/main/participate/submit-pr">Submitting Pull Requests</a></li>
<li><a href="../../../../../../front/main/participate/report-issue">Reporting Issues</a></li>
<li><a href="../../../../../../front/main/participate/#documentation">Improving the documentation</a></li>
</ul>
</div>
<div class="large-auto cell">
<h1><a href="../../../../../../front/main/help">Get Help</a></h1>
<ul>
<li><a href="../../../../../../front/main/help/#documentation">Documentation</a></li>
<li><a href="../../../../../../wiki/main/wiki">Wiki</a></li>
<li><a href="../../../../../../front/main/help/#support">Community Support</a></li>
<li><a href="../../../../../../front/main/help/commercial-support">Commercial Support</a></li>
</ul>
</div>
<div class="large-auto cell">
<h1><a href="../../../../../../front/main/download">Download</a></h1>
<ul>
<li><a href="../../../../../../front/main/download">Releases</a></li>
<li><a href="https://plugins.netbeans.apache.org/">Plugins</a></li>
<li><a href="../../../../../../front/main/download/#_daily_builds_and_building_from_source">Building from source</a></li>
<li><a href="../../../../../../front/main/download/#_older_releases">Previous releases</a></li>
</ul>
</div>
</div>
</div>
</footer>
<div class='footer-disclaimer'>
<div class="footer-disclaimer-content">
<p>Copyright &copy; 2017-2025 <a href="https://www.apache.org">The Apache Software Foundation</a>.</p>
<p>Licensed under the Apache <a href="https://www.apache.org/licenses/">license</a>, version 2.0</p>
<div style='max-width: 40em; margin: 0 auto'>
<p>Apache, Apache NetBeans, NetBeans, the Apache feather logo and the Apache NetBeans logo are trademarks of <a href="https://www.apache.org">The Apache Software Foundation</a>.</p>
<p>Oracle and Java are registered trademarks of Oracle and/or its affiliates.</p>
<p>The Apache NetBeans website conforms to the <a href="https://privacy.apache.org/policies/privacy-policy-public.html">Apache Software Foundation Privacy Policy</a></p>
</div>
</div>
</div>
<script src="../../../../../../_/js/vendor/lunr.js"></script>
<script src="../../../../../../_/js/search-ui.js" id="search-ui-script" data-site-root-path="../../../../../.." data-snippet-length="100" data-stylesheet="../../../../../../_/css/search.css"></script>
<script async src="../../../../../../search-index.js"></script>
<script src="../../../../../../_/js/vendor/jquery.min.js"></script>
<script src="../../../../../../_/js/vendor/what-input.min.js"></script>
<script src="../../../../../../_/js/vendor/foundation.min.js"></script>
<script src="../../../../../../_/js/vendor/jquery.colorbox-min.js"></script>
<script src="../../../../../../_/js/netbeans.js"></script>
<script>
$(function(){ $(document).foundation(); });
</script>
<script src="../../../../../../_/js/vendor/highlight.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre code').forEach((el) => {
hljs.highlightElement(el);
});
});
</script>
</body>
</html>