blob: 6f5d3db0b854f644ba68be142db67ed81e18fa76 [file] [log] [blame]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSF Application that uses managed-bean and ejb</title>
<meta name="description" content="Apache TomEE">
<meta name="author" content="Apache TomEE">
<meta name="google-translate-customization" content="f36a520c08f4c9-0a04e86a9c075ce9-g265f3196f697cf8f-10">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate, max-age=0">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le styles -->
<link href="./../../resources/css/bootstrap.css" rel="stylesheet">
<link href="./../../resources/css/prettify.css" rel="stylesheet">
<!--link href="./../../resources/css/bootstrap-mods.css" rel="stylesheet"-->
<link href="./../../resources/css/main.css" rel="stylesheet">
<link href="./../../resources/font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript">
var t = encodeURIComponent(document.title.replace(/^\s+|\s+$/g,""));
var u = encodeURIComponent(""+document.URL);
function fbshare () {
window.open(
"http://www.facebook.com/sharer/sharer.php?u="+u,
'Share on Facebook',
'width=640,height=426');
};
function gpshare () {
window.open(
"https://plus.google.com/share?url="+u,
'Share on Google+',
'width=584,height=385');
};
function twshare () {
window.open(
"https://twitter.com/intent/tweet?url="+u+"&text="+t,
'Share on Twitter',
'width=800,height=526');
};
function pinshare () {
window.open("//www.pinterest.com/pin/create/button/?url="+u+"&media=http%3A%2F%2Ftomee.apache.org%2Fresources%2Fimages%2Ffeather-logo.png&description="+t,
'Share on Pinterest',
'width=800,height=526');
};
</script>
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="./../../favicon.ico">
<link rel="apple-touch-icon" href="./../../resources/images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="./../../resources/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="./../../resources/images/apple-touch-icon-114x114.png">
<script src="./../../resources/js/prettify.js" type="text/javascript"></script>
<script src="./../../resources/js/jquery-latest.js"></script>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<script src="./../../resources/js/common.js"></script>
<script src="./../../resources/js/prettyprint.js"></script>
<!--script src="//assets.pinterest.com/js/pinit.js" type="text/javascript" async></script//-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-2717626-1']);
_gaq.push(['_setDomainName', 'apache.org']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div class="topbar" data-dropdown="dropdown">
<div class="fill">
<div class="container">
<a class="brand" href="./../../index.html">Apache TomEE</a>
<ul class="nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Apache
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<!-- <li><a href="./../../misc/whoweare.html">Who we are?</a></li> -->
<!-- <li><a href="./../../misc/heritage.html">Heritage</a></li> -->
<li><a href="http://www.apache.org">Apache Home</a></li>
<!-- <li><a href="./../../misc/resources.html">Resources</a></li> -->
<li><a href="./../../misc/contact.html">Contact</a></li>
<li><a href="./../../misc/legal.html">Legal</a></li>
<li><a href="http://www.apache.org/foundation/sponsorship.html">Sponsorship</a></li>
<li><a href="http://www.apache.org/foundation/thanks.html">Thanks</a></li>
<li class="divider"/>
<li><a href="http://www.apache.org/security">Security</a></li>
</ul>
</li>
<li><a href="./../../index.html">Home</a></li>
<li><a href="./../../downloads.html">Downloads</a></li>
<li><a href="./../../documentation.html">Documentation</a></li>
<li><a href="./../../examples-trunk/index.html">Examples</a></li>
<li><a href="./../../support.html">Support</a></li>
<li><a href="./../../contribute.html">Contribute</a></li>
<li><a href="./../../security/index.html">Security</a></li>
</ul>
<!-- Google CSE Search Box Begins -->
<FORM class="pull-right" id="searchbox_010475492895890475512:_t4iqjrgx90" action="http://www.google.com/cse">
<INPUT type="hidden" name="cx" value="010475492895890475512:_t4iqjrgx90">
<INPUT type="hidden" name="cof" value="FORID:0">
<INPUT size="18" width="130" style="width:130px" name="q" type="text" placeholder="Search">
</FORM>
<!--<SCRIPT type="text/javascript" src="http://www.google.com/coop/cse/brand?form=searchbox_010475492895890475512:_t4iqjrgx90"></SCRIPT>-->
<!-- Google CSE Search Box Ends -->
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span8">
<small><a href="./../../index.html">Home</a>&nbsp;&raquo&nbsp;<a href="./../../examples/">Examples</a>&nbsp;&raquo&nbsp;<a href="./../../examples/jsf-managedBean-and-ejb/">Jsf ManagedBean And Ejb</a></small><br>
</div>
<div class="span8">
</div>
</div>
&nbsp;
<div class="page-header">
<h1>JSF Application that uses managed-bean and ejb
<div style="float: right; position: relative; bottom: -10px; ">
<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<a onclick="javascript:gpshare()" class="gp-share sprite" title="Share on Google+">share [gp]</a>
<a onclick="javascript:fbshare()" class="fb-share sprite" title="Share on Facebook">share [fb]</a>
<a onclick="javascript:twshare()" class="tw-share sprite" title="Share on Twitter">share [tw]</a>
<a onclick="javascript:pinshare()" class="pin-share sprite" title="Share on Pinterest">share [pin]</a>
<a data-toggle="modal" href="#edit" class="edit-page" title="Contribute to this Page">contribute</a>
</div>
</h1>
</div>
<p>This is a simple web-app showing how to use dependency injection in JSF managed beans using TomEE.</p>
<p>It contains a Local Stateless session bean <code>CalculatorImpl</code> which adds two numbers and returns the result.
The application also contains a JSF managed bean <code>CalculatorBean</code>, which uses the EJB to add two numbers
and display the results to the user. The EJB is injected in the managed bean using <code>@EJB</code> annotation.</p>
<h2>A little note on the setup:</h2>
<p>You could run this in the latest Apache TomEE <a href="https://repository.apache.org/content/repositories/snapshots/org/apache/openejb/apache-tomee/">snapshot</a></p>
<p>As for the libraries, myfaces-api and myfaces-impl are provided in tomee/lib and hence they should not be a part of the
war. In maven terms, they would be with scope 'provided'</p>
<p>Also note that we use servlet 2.5 declaration in web.xml</p>
<pre><code>&lt;web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5"&gt;
</code></pre>
<p>And we use 2.0 version of faces-config</p>
<p><faces-config xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
version="2.0"></p>
<p>The complete source code is provided below but let's break down to look at some smaller snippets and see how it works.</p>
<p>We'll first declare the <code>FacesServlet</code> in the <code>web.xml</code></p>
<pre><code> &lt;servlet&gt;
&lt;servlet-name&gt;Faces Servlet&lt;/servlet-name&gt;
&lt;servlet-class&gt;javax.faces.webapp.FacesServlet&lt;/servlet-class&gt;
&lt;load-on-startup&gt;1&lt;/load-on-startup&gt;
&lt;/servlet&gt;
</code></pre>
<p><code>FacesServlet</code> acts as the master controller.</p>
<p>We'll then create the <code>calculator.xhtml</code> file.</p>
<pre><code> &lt;h:outputText value='Enter first number'/&gt;
&lt;h:inputText value='#{calculatorBean.x}'/&gt;
&lt;h:outputText value='Enter second number'/&gt;
&lt;h:inputText value='#{calculatorBean.y}'/&gt;
&lt;h:commandButton action="#{calculatorBean.add}" value="Add"/&gt;
</code></pre>
<p>Notice how we've use the bean here.
By default it is the simple class name of the managed bean.</p>
<p>When a request comes in, the bean is instantiated and placed in the appropriate scope.
By default, the bean is placed in the request scope.</p>
<pre><code> &lt;h:inputText value='#{calculatorBean.x}'/&gt;
</code></pre>
<p>Here, getX() method of calculatorBean is invoked and the resulting value is displayed.
x being a Double, we rightly should see 0.0 displayed.</p>
<p>When you change the value and submit the form, these entered values are bound using the setters
in the bean and then the commandButton-action method is invoked.</p>
<p>In this case, <code>CalculatorBean#add()</code> is invoked.</p>
<p><code>Calculator#add()</code> delegates the work to the ejb, gets the result, stores it
and then instructs what view is to be rendered.</p>
<p>You're right. The return value "success" is checked up in faces-config navigation-rules
and the respective page is rendered.</p>
<p>In our case, <code>result.xhtml</code> page is rendered.</p>
<p>The request scoped <code>calculatorBean</code> is available here, and we use EL to display the values.</p>
<h2>Source</h2>
<h2>Calculator</h2>
<pre><code>package org.superbiz.jsf;
import javax.ejb.Remote;
@Remote
public interface Calculator {
public double add(double x, double y);
}
</code></pre>
<h2>CalculatorBean</h2>
<pre><code>package org.superbiz.jsf;
import javax.ejb.EJB;
import javax.faces.bean.ManagedBean;
@ManagedBean
public class CalculatorBean {
@EJB
Calculator calculator;
private double x;
private double y;
private double result;
public double getX() {
return x;
}
public void setX(double x) {
this.x = x;
}
public double getY() {
return y;
}
public void setY(double y) {
this.y = y;
}
public double getResult() {
return result;
}
public void setResult(double result) {
this.result = result;
}
public String add() {
result = calculator.add(x, y);
return "success";
}
}
</code></pre>
<h2>CalculatorImpl</h2>
<pre><code>package org.superbiz.jsf;
import javax.ejb.Stateless;
@Stateless
public class CalculatorImpl implements Calculator {
public double add(double x, double y) {
return x + y;
}
}
</code></pre>
<h1>web.xml</h1>
<pre><code>&lt;?xml version="1.0"?&gt;
&lt;web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5"&gt;
&lt;description&gt;MyProject web.xml&lt;/description&gt;
&lt;!-- Faces Servlet --&gt;
&lt;servlet&gt;
&lt;servlet-name&gt;Faces Servlet&lt;/servlet-name&gt;
&lt;servlet-class&gt;javax.faces.webapp.FacesServlet&lt;/servlet-class&gt;
&lt;load-on-startup&gt;1&lt;/load-on-startup&gt;
&lt;/servlet&gt;
&lt;!-- Faces Servlet Mapping --&gt;
&lt;servlet-mapping&gt;
&lt;servlet-name&gt;Faces Servlet&lt;/servlet-name&gt;
&lt;url-pattern&gt;*.jsf&lt;/url-pattern&gt;
&lt;/servlet-mapping&gt;
&lt;!-- Welcome files --&gt;
&lt;welcome-file-list&gt;
&lt;welcome-file&gt;index.jsp&lt;/welcome-file&gt;
&lt;welcome-file&gt;index.html&lt;/welcome-file&gt;
&lt;/welcome-file-list&gt;
&lt;/web-app&gt;
</code></pre>
<h2>Calculator.xhtml</h2>
<pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"&gt;
&lt;h:body bgcolor="white"&gt;
&lt;f:view&gt;
&lt;h:form&gt;
&lt;h:panelGrid columns="2"&gt;
&lt;h:outputText value='Enter first number'/&gt;
&lt;h:inputText value='#{calculatorBean.x}'/&gt;
&lt;h:outputText value='Enter second number'/&gt;
&lt;h:inputText value='#{calculatorBean.y}'/&gt;
&lt;h:commandButton action="#{calculatorBean.add}" value="Add"/&gt;
&lt;/h:panelGrid&gt;
&lt;/h:form&gt;
&lt;/f:view&gt;
&lt;/h:body&gt;
&lt;/html&gt;
</code></pre>
<h2>Result.xhtml</h2>
<pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"&gt;
&lt;h:body&gt;
&lt;f:view&gt;
&lt;h:form id="mainForm"&gt;
&lt;h2&gt;&lt;h:outputText value="Result of adding #{calculatorBean.x} and #{calculatorBean.y} is #{calculatorBean.result }"/&gt;&lt;/h2&gt;
&lt;h:commandLink action="back"&gt;
&lt;h:outputText value="Home"/&gt;
&lt;/h:commandLink&gt;
&lt;/h:form&gt;
&lt;/f:view&gt;
&lt;/h:body&gt;
&lt;/html&gt;
</code></pre>
<h1>faces-config.xml</h1>
<pre><code>&lt;?xml version="1.0"?&gt;
&lt;faces-config xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
version="2.0"&gt;
&lt;navigation-rule&gt;
&lt;from-view-id&gt;/calculator.xhtml&lt;/from-view-id&gt;
&lt;navigation-case&gt;
&lt;from-outcome&gt;success&lt;/from-outcome&gt;
&lt;to-view-id&gt;/result.xhtml&lt;/to-view-id&gt;
&lt;/navigation-case&gt;
&lt;/navigation-rule&gt;
&lt;navigation-rule&gt;
&lt;from-view-id&gt;/result.xhtml&lt;/from-view-id&gt;
&lt;navigation-case&gt;
&lt;from-outcome&gt;back&lt;/from-outcome&gt;
&lt;to-view-id&gt;/calculator.xhtml&lt;/to-view-id&gt;
&lt;/navigation-case&gt;
&lt;/navigation-rule&gt;
&lt;/faces-config&gt;
</code></pre>
<div class="page-header">&nbsp;</div>
<h4>APIs Used</h4>
<ul><li><a href="http://docs.oracle.com/javaee/6/api/javax/ejb/EJB.html">javax.ejb.EJB</a></li>
<li><a href="http://docs.oracle.com/javaee/6/api/javax/ejb/Remote.html">javax.ejb.Remote</a></li>
<li><a href="http://docs.oracle.com/javaee/6/api/javax/ejb/Stateless.html">javax.ejb.Stateless</a></li>
<li><a href="http://docs.oracle.com/javaee/6/api/javax/faces/bean/ManagedBean.html">javax.faces.bean.ManagedBean</a></li>
</ul>
<h3>Source</h3>
<ul>
<li>Apache <a href="http://svn.apache.org/repos/asf/tomee/tomee//examples/jsf-managedBean-and-ejb">jsf-managedBean-and-ejb</a></li>
<li>Github <a href="https://github.com/apache/tomee/tree//examples/jsf-managedBean-and-ejb">jsf-managedBean-and-ejb</a></li>
</ul>
<pre>
svn co http://svn.apache.org/repos/asf/tomee/tomee//examples/jsf-managedBean-and-ejb
cd jsf-managedBean-and-ejb
mvn clean install
</pre>
<div id="edit" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">x</a>
<h3>Thank you for contributing to the documentation!</h3>
</div>
<div class="modal-body">
<h4>Any help with the documentation is greatly appreciated.</h4>
<p>All edits are reviewed before going live, so feel free to do much more than fix typos or links. If you see a page that could benefit from an entire rewrite, we'd be thrilled to review it. Don't be surprised if we like it so much we ask you for help with other pages :)</p>
<small>NOTICE: unless indicated otherwise on the pages in question, all editable content available from apache.org is presumed to be licensed under the Apache License (AL) version 2.0 and hence all submissions to apache.org treated as formal Contributions under the license terms.</small>
<!--[if gt IE 6]>
<h4>Internet Explorer Users</h4>
<p>If you are not an Apache committer, click the Yes link and enter a <i>anonymous</i> for the username and leave the password empty</p>
<![endif]-->
</div>
<div class="modal-footer">
Do you have an Apache ID?
<a href="javascript:void(location.href='https://cms.apache.org/redirect?uri='+escape(location.href))" class="btn">Yes</a>
<a href="javascript:void(location.href='https://anonymous:@cms.apache.org/redirect?uri='+escape(location.href))" class="btn">No</a>
</div>
</div>
<script src="./../../resources/js/bootstrap-modal.js"></script>
<footer>
<p>Copyright &copy; 1999-2016 The Apache Software Foundation, Licensed under the Apache License, Version 2.0.
Apache TomEE, TomEE, Apache, the Apache feather logo, and the Apache TomEE project logo are trademarks of The Apache Software Foundation.
All other marks mentioned may be trademarks or registered trademarks of their respective owners.</p>
</footer>
</div> <!-- /container -->
<!-- Javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./../../resources/js/bootstrap-dropdown.js"></script>
</body>
</html>