< faces-config.xml Editor | Appendices > |
This is a tutorial in which we create a simple JSF application to demonstrate FacesIDE's functionality. This is a "login" application, which asks an user for an ID and password, verifies the information, and forwards the user to a success or error page.
The application will use a few JSP pages with JSF elements, and a session-scoped managed bean to coordinate their interactions. Along the way we'll use the following FacesIDE functionality:
As a prerequisite for the tutorial, make sure FacesIDE and required plugins have been installed; see Installing & Uninstalling. We don't assume that a J2EE server-specific plugin, such as the Sysdeo Tomcat plugin has been installed.
Here we create an Eclipse project, and set up folders for a web application. The folder structure created is simply one that works for this author; your mileage may vary.
jsf-login
; click Finishjsf-login
project, and from the menubar select File/New/Folder; name the folder webroot
webroot
folder, and from its context menu select File/New/Folder; name the folder pages
.
This folder will contain all "functional" pages.
jsf-login
project
/jsf-login/webroot
; make sure all checkboxes are checked; click Next.
/webroot
; make sure HTML validation and DTD/XSD validation are enabled.
src
directly under the project folder (jsf-login
); click Yes through messages
that appear.
jsf-login/webroot/WEB-INF/classes
; click OK to dismiss the properties dialog.
jsf-login | +-- src | +-- webroot | +-- WEB-INF | | | +-- classes (not shown in Java perspective) | | | +-- lib | +-- pages
Here we create a class called LoginManager
which will be used as
a backing bean for the login process. We then configure it to be a managed bean.
src
folder; from its context menu select
New/Class. The New Java Class wizard appears.
login
; in the Name field enter
LoginManager
. Click Finish. The Java code editor opens.
LoginManager
class:
// LoginManager.java package login; public class LoginManager { private String _uid = ""; private String _pwd = ""; public String getUserID() { return _uid; } public void setUserID(String uid) { _uid = uid; } public String getPassword() { return _pwd; } public void setPassword(String pwd) { _pwd = pwd; } public String loginAction() { String action = null; if ( _uid.equalsIgnoreCase("foo") && _pwd.equalsIgnoreCase("bar") ) action = "loginPass"; else action = "loginFail"; return action; } }
LoginManager
as a session-scoped managed bean.
jsf-login/webroot/WEB-INF/faces-config.xml
;
from its context menu select Open With/faces-config.xml Editor. The faces-config.xml
editor opens.
mgr
; for class enter login.LoginManager
;
for scope select session
.
Here we create the JSP pages that make up the application's user interface. We will have 4 pages:
a start page (index.jsp
), and 3 content pages (login.jsp
, success.jsp
and error.jsp
).
Content pages are placed in webroot/pages
; index.jsp
is placed directly in
webroot
, and its sole function is to forward users to the login page.
All pages except login.jsp
are simple pages with static content, so we create them first,
using the Workbench's standard file-creation facilities. Then we create login.jsp
using a
FacesIDE wizard.
index.jsp
:
webroot
; from its context menu select New/File;
the New File wizard appears.
index.jsp
; make sure that the parent folder is set to
/jsf-login/webroot
; click Finish; the JSP Editor opens.
<!-- webroot/index.jsp --> <html> <body> <jsp:forward page="faces/pages/login.jsp" /> </body> </html>
success.jsp
: create this file similarly to index.jsp
, but in
webroot/pages
. Enter the following code:
<!-- webroot/pages/success.jsp --> <html> <head> <title>jsf-login</title> </head> <body> <h2>Success!</h2> </body> </html>
error.jsp
: create this file similarly to index.jsp
, but in
webroot/pages
. Enter the following code:
<!-- webroot/pages/error.jsp --> <html> <head> <title>jsf-login</title> </head> <body> <h2>Error!</h2> The user-id and or password were invalid. Please try again. </body> </html>
login.jsp
:
webroot/pages
; from its context menu select New/Other...;
the New wizard appears.
login.jsp
; make sure that Container is set to
/jsf-login/webroot/pages
, and that Use MyFaces Tomahawk components and
Use MyFaces SandBox components are unchecked, and choose default for Template;
click Finish; the FacesIDE JSP Editor opens, with the following template code.
We will now edit this page to contain our input widgets, etc.<%@ page contentType="text/html; charset=Cp1252" %> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Cp1252"/> <title></title> </head> <body> <f:view> <h:form> </h:form> </f:view> </body> </html>
<title></title>
elements; enter jsf-login
<h:form>
elements; place your cursor in one of these
lines, expand the JSF HTML panel in the palette, and click on the icon for <h:inputText>
;
this inserts the corresponding JSF element at the cursor location.
Note: the JSP editor is aware of referenced tag libraries, and uses them for code completion as well.
Thus if you were to type <h:
and hit CTRL + Spacebar, you would get a popup window of
JSF HTML elements.
value=""
at the cursor. We will now bind this to the userID
property of LoginManager
; FacesIDE can provide code completion here as well.
value=""
, enter #{mgr.
,
and hit CTRL + Spacebar; a code-completion window pops up, with bean properties available
in mgr
. This is shown below:
LoginManager
as a managed bean called mgr
.)
userID
from the code-completion window; complete the expression with the
closing {
<h:inputText>
element; set its value binding expression
to value="#{mgr.password}"
<h:commandButton>
element; set its value
to Login
,
and its action
to the value binding expression #{mgr.loginAction}
The final code, with the barest presentational formatting, is shown below:
<%@ page contentType="text/html; charset=Cp1252" %> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Cp1252"/> <title>jsf-title</title> </head> <body> <f:view> <h:form> UserID: <h:inputText value="#{mgr.userID}"/> <br/>Password: <h:inputText value="#{mgr.password}"/> <br/><h:commandButton value="Login" action="#{mgr.loginAction}"/> </h:form> </f:view> </body> </html>
Here we create navigation rules among pages, using a FacesIDE editor.
faces-config.xml
; it should open in the faces-config.xml Editor.
Note that the icon has a small triangle overlay--this indicates that something is wrong, specifically
that FacesIDE could not locate a page at path /page1.jsp
path
to /index.jsp
.
You can also change it on the diagram directly (select the page and click once more);
notice that the warning triangle disappears.
/pages/login.jsp
, /pages/success.jsp
and /pages/error.jsp
. Arrange them as shown below:
login.jsp
and then on the icon for success.jsp
. This inserts a forward-action between the two pages, and
is represented by an arrow. "Decharge" the mouse pointer by clicking on the pointer icon in the palette,
then click on the newly-added forward-action icon to select it. Its properties appear in the Properties
view. This is shown below:
from-outcome
to loginPass
. Recall that this is the success-value returned by LoginManager
's
loginAction
method. You can also change values by direct-editing (select once and re-click) in the diagram
login.jsp
to error.jsp
, and set its
from-outcome
to loginFail
We're done with setting up navigation rules. We'll set some properties in web.xml
, and we'll
then be ready to deploy the application.
Here we edit web.xml
for the specifics of our application. As it turns out, since we have such
a trivial application, all we need do in web.xml
is indicate the Faces Servlet mapping.
web.xml
; scroll to the bottom and look for the comment
<!-- Faces Servlet Mapping -->
The application is now complete, and you should be able to deploy it to your server of choice. Once deployed
browse to index.jsp
, and you should be automatically forwarded to login.jsp
. Use
UserID/Password of foo/bar, and you should be sent to the success page; any other id/password should
send you to the error page.
Deployment to some servers is described below:
http://localhost:8080/manager/html
/jsf-login
; for WAR or Directory URL enter the path to webroot
, as
file:///...
; leave XML Configuration File URL blank; click Deploy
/jsf-login
in the list of
running applications. Click on its link to launch the application.
< faces-config.xml Editor | Appendices > |
FacesIDE User Guide (https://amateraside.dev.java.net/) | |