Beginner Tutorial

Backbase Enterprise Ajax 4.3.
1
JSF Edition
Beginner Tutorial
JSF Edition 4.3.1 2
Table of Contents
Chapter 1. Introduction 3
1.1 About the Beginner Tutorial .........................................................................................................................................3

1.2 Intended Audience.......................................................................................................................................................3
Chapter 2. Project Creation 4
2.1 Create a New Backbase JSF Edition Project .................................................................................................................4
Chapter 3. Startup Page 5
Chapter 4. Page Layout 7
Chapter 5. Using Subviews 9
Chapter 6. Messages and Localization 11
Chapter 7. Backbase Forms 13
7.1 Developing Your Form................................................................................................................................................13

7.2 Form Submission.......................................................................................................................................................13
7.3 Form Validation and Messages ..................................................................................................................................16
Chapter 8. Conclusion 19
Chapter 9. Contact Backbase 20
9.1 Community ................................................................................................................................................................20

9.2 Support .....................................................................................................................................................................20
9.3 Training .....................................................................................................................................................................20
9.4 Sales .........................................................................................................................................................................20
Copyright 2004 - 2008 Backbase BV, All Rights Reserved

JSF Edition 4.3.1 3
Introduction
About the Beginner Tutorial
The Backbase Enterprise Ajax 4.3.1 - JSF Edition Beginner Tutorial demonstrates how to build a JSF Edition web application
with the JSF Edition. At the end of this tutorial you will have an application as shown in the following image:
Figure 1 – Form Response
This tutorial will cover the following topics:
• Creating a new JSF Edition web application [p. 4]

• Required code for a JSF application startup page [p. 5]
• Basic application layout [p. 7]
• Using subviews [p. 9]
• Messages and localization [p. 11]
• Form submission, validation, and error messaging [p. 13]
Getting Answers
If you are working on a difficult problem that cannot be resolved using information in this document, try the following:
• Refer to the other documents listed in the Start Guide.

• Customers with a support license can contact Backbase Support. For more information, see Contact Backbase [p. 20].
• For hands-on examples that demonstrate best practice when developing Backbase applications, refer to the Backbase
Examples Pages at http://bdn.backbase.com .
• Search the Backbase Developer Network Forums at http://bdn.backbase.com/forum for information on your topic.
Your question may have already been answered. If your question has not been answered, Backbase Technical Support
checks the forums regularly.
Intended Audience
This Beginner Tutorial is intended for JSF application developers who have not yet built an application with the JSF Edition.
We assume that application developers have some experience with JSF and Java. Additionally, a basic understanding of the
structure of JSF projects and how to create class files will be useful.

JSF Edition 4.3.1 4
Project Creation
The software resources required to develop a Backbase JSF Edition web application are minimal: a text editor is sufficient to
create and edit the various classes and resource files. However, to assist the development process and ensure that all the
resources required to create a Backbase JSF Edition web application are available, a Backbase Eclipse plugin is available
that provides everything you need to create and maintain a Backbase JSF Edition web application.
For more information on the a Backbase Eclipse plugin, please refer to the Eclipse Plugins section in the
Application Development Guide.
In this tutorial, a new JSF Edition web application will be created using the Backbase Eclipse plugin.
As an alternative to using the Backbase Eclipse plugin to create your project, you can use the blank application
that is bundled with the JSF Edition. For more information, please refer to the Deployment Guide.
Create a New Backbase JSF Edition Project
To create a JSF Edition web application, from the menu choose Backbase>File>New Project>JSF Edition Project to start the
Backbase - New JSF Project wizard.
Alternatively, you can access the Backbase - New JSF Project wizard from one of several native Eclipse IDE
menus:
• Select File>New>Project to start the New Project wizard.

• Click on the New button on the Eclipse toolbar to start the New wizard.
• In the Eclipse Project Explorer, from the context menu choose New>Project to start the New Project wizard..
In the wizard, expand the Backbase folder and choose JSF Edition Project to start the Backbase - New JSF
Project wizard.
The Backbase - New JSF Project wizard guides you through the project creation process. For more information, refer to the
section entitled Creating Projects in the Application Development Guide.

JSF Edition 4.3.1 5
Startup Page
In a JSF Edition application, you will typically have a single web page that loads XML fragments dynamically. The client
sends a list of changed attributes and properties (the client delta) to the server, which then updates its component tree,
performs server-side business logic, and generates a response (the server delta) that is returned to the client. The response
is rendered inside the existing page. In other words, the processing of a request involves a request for data (which can also
be 'presentation' data) that results in an update of only the changed parts of the application.
A JSF Edition application will therefore contain one or more startup pages (generally a .jsp) and subviews that can be
loaded statically or dynamically. A startup page generally contains nothing more than some required application code, a
basic layout, and include directives to load default content. The Eclipse IDE JSF Edition 4.3.1 plugin generates the required
application code for you:
Example 1 – Backbase JSF Application Required Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://www.backbase.com/2007/jsf" prefix="bjsf" %>
<html>
<body>
<f:view>
<bjsf:application>
<f:verbatim>
<xi:include
href="<%=application.getInitParameter("com.backbase.bjsf.CLIENT_BOOT_DIR")
%>/bindings/config.xhtml_btl.chameleon.xml" parse="xml"></xi:include>
<xi:include
%>/bindings/www.backbase.com.2007.jsf.client/server.xml"
parse="xml"></xi:include> <bjsfc:server url="index.jsf" identify="id"
loadingMessage="__loadingMsg"></bjsfc:server> <b:loadingMessage
id="__loadingMsg">Loading...</b:loadingMessage>
</f:verbatim>
<%-- your code goes here --%>
</bjsf:application>
</f:view>
</body>
</html>
The XHTML comment that is the first line of the application forces Microsoft Internet Explorer to go into
quirks mode, which is essential to force the CSS border box model. Some client controls require this mode, so it
is essential that you leave this comment. For more information, please see the section on the box model in the
Application Development Guide.
Tag Libraries
At the beginning of the file, you must declare the JSP tag directives that declare the tag libraries used in the page:
• Core JSF tag library containing the custom tags for validation and event handling
• Backbase JSF Server Runtime tag library for Backbase JSF components
The elements prefixed with f and bjsf represent the JSF Core and Backbase JSF Server Runtime components. Although
we recommend that you keep the f and bjsf prefixes, you can define your own prefixes.
The JSF f:view Tag
In JSF, the combination of components that make up a specific user interface screen is called a view. The JSF f:view
element is a non-visual element that acts as a container for all other components in the view. When you create a Backbase

JSF Edition 4.3.1 6
JSF application, you must define a JSF f:view element as the first action element. This element must enclose all other JSF
action elements, otherwise they are not included in the view.
The Backbase bjsf:application Tag
In a JSF Edition web application, the Backbase JSF Server Runtime and the Client Runtime are responsible for managing
communications between the web server and the client browser. The Client Runtime is installed as a web application in your
servlet container, and is downloaded transparently to the client on an initial request.
For the Backbase JSF Server Runtime application to locate the Client Runtime and render the generated output, use the
bjsf:application element. On the client, the bjsf:application element is rendered as one xmp element that
marks the space parsed and rendered by the Client Runtime in the browser. The default location of the Client Runtime is
taken from the web.xml configuration file.
The listing shows the simple case of a bjsf:application component wrapping the entire content of the
page. The result is that the bjsf:application component defines a single model space, meaning that all
the rendered markup is parsed by the Client Runtime. This is just one of many different application architectures
supported by the Backbase JSF Edition, and the possibility exists to mix various combinations of Backbase JSF,
plain JSF, BTL, XEL, and XHTML in a single page. This is achieved by mixing model and view spaces in a single
page. For more information, refer to the section entitled Application Architectures in the Application
Development Guide.
The f:verbatim component that is instantiated immediately after the bjsf:application component loads the client
resources. These resources can be customized to match requirements. For more information, refer to the topic entitled
Customization of Client Resources in the Application Development Guide.

JSF Edition 4.3.1 7
Page Layout
It is now time to create a basic layout structure. In most applications, your layout can be broken down into navigation and
one or more content sections. When a link, for example, is clicked, then only the changed or new information is loaded into a
specific section of the layout.
With the JSF Edition, you can use the panelSet component in combination with panel components to partition your layout.
The panelSet creates a rectangular structure that can be separated into rows and columns. To be able to create a complex
layout, each row or column can be further subdivided. To create a simple layout, copy the following code fragment inside the
bjsf:application element (after the f:verbatim element) in your JSP:
Example 2 – panelSet simple layout
<bjsf:panelSet rows="15% * 15%" fullScreen="true">

<bjsf:panel style="border: 1px solid black;">
<bjsf:outputText value="Row 1" />
</bjsf:panel>
<bjsf:panel style="background-color: #eeeeee; border: 1px solid black;">
</bjsf:panel>
</bjsf:panel>
</bjsf:panelSet>
In this tutorial, we add styling directly to elements. In a production environment, we would add CSS class
information using the class attribute.
Figure 2 – panelSet Component with Three rows
Unless it is the root element inside the application component, the panelSet takes up 100% of the height and width of its
parent element. If the panelSet is the root element (as in this examples) a fullScreen attribute set to true is required
for the page to display correctly.
Any panelSet component can be divided into rows or columns by using either the rows or columns attribute. The size of
the row/column can be determined by setting pixel, percentage, or other value types. You can also use an asterisk (*) on one
row or column to specify that that particular row/column should take up any remaining space.
Once you have specified in your panelSet component that there will be three rows, you can use the panel component to
create the row. Children of each panel component represent the content in that row. We have only added outputText
components as the contents of the panel. This component simply adds text to your layout. The panel supports the XHTML
style attribute, so you can style each panel differently.
Let's say that you want to subdivide the middle row into three columns. Although you can use the rows and columns
attributes on the panelSet at the same time, it is not recommended. The best approach to create a more sophisticated
layout is to use panel components for the first and third rows and another panelSet for the row that we want to subdivide.

JSF Edition 4.3.1 8
To accomplish this, copy and paste the following code fragment into the index.jsp file, replacing the second panel
component with three panel components nested inside a panelSet component:
Example 3 – panelSet complicated layout
...
<bjsf:panelSet columns="20% 60% 20%">
<bjsf:outputText value="Row 2, Col 1" />
</bjsf:panel>
<bjsf:panel style="background-color: #eeeeee; border: 1px solid black;">
</bjsf:panel>
</bjsf:panel>
</bjsf:panelSet>
...
Figure 3 – Nested panelSet Components
In this way, you subdivide a specific row or column with a panelSet component that is a child of the original panelSet. You
can continue to nest panelSet components until you have a very complicated but still easily manageable layout.

JSF Edition 4.3.1 9
Using Subviews
Now that you have a basic layout, you can start to populate each panel with f:subview elements that contain your
content. Standard JSF offers you a number of mechanisms to load files statically. You can use any of these mechanisms in a
JSF Edition application. In addition to static loading, the JSF Edition offers the ability to load content dynamically at
application runtime. Dynamic loading can be achieved by using the url attribute supported by many components, including
the panel. The value of this attribute points to a content JSP file to be loaded into the panel. To set this in motion, let's
remove our outputText component from the second column and add the url attribute:
Example 4 – panelSet complicated layout with url
...
<bjsf:panelSet columns="20% 60% 20%" fullScreen="true">
</bjsf:panel>
<bjsf:panel style="background-color: #eeeeee; border: 1px solid black;"
url="views/form.jsp" />
</bjsf:panel>
</bjsf:panelSet>
...
Next we will create the subview:
• In the WebContent folder of your JSF project, create a folder named views.
• In the views folder, create a new JSP file called form.jsp.
If you use the Eclipse IDE, you can choose Backbase>New>File>JSP to start the New JavaServer Pages wizard,
and then select New JSP File (Backbase Sub View) from the JSP template list.
The newly created file consists of a standard JSP code snippet that contains necessary tag library definitions and the JSF
f:subview element, which indicates that this file will be loaded as a subview.
For dynamically loaded subviews, the JSF Edition bjsf:view component must be the first child of the JSF
f:subview element, and all code must be nested within the JSF Edition bjsf:view component. You do not
need the JSF Edition bjsf:view component for statically included files.
Now we have our subview set up, but need to add some content. To see that the subview has been loaded dynamically, edit
the newly created file to match the following listing:
Example 5 – Subview With Form

<f:subview id="author">
<bjsf:view>
<bjsf:commandButton id="formSubmit" value="Submit Form" />
</bjsf:view>
</f:subview>
Refresh your browser. Your application should look like this:

JSF Edition 4.3.1 10
Figure 4 – panelSet Component With commandButton Component in Subview

Messages and Localization

Before proceeding further with our application, we should think about creating a container for our text strings. By keeping all
strings in a shared location, we can more easily maintain our application. To accomplish this we will create a resource
bundle, which has the added advantage of support for localization.
We can create a resource bundle and hook it up to the application in four simple steps:
1. Create a package and add a resource file.

2. Add message names and values to the file.
3. Use the JSF Edition loadBundle tag to include the properties file.
4. Bind a component to a specific message.
Before creating the resource bundle, add a package named sample to your project.
If you use the Eclipse IDE:
In the Project Explorer, select the src Java Resource, choose New->Package from the context menu, and use
the wizard to create a package named sample.
Next, create a resource bundle named language_en.properties in the newly created sample package.
If you use the Eclipse IDE:
Select the newly created package, choose New->Other from the context menu, and use the wizard to create a
file named language_en.properties.
It is essential that you use the language_en.properties naming convention because we will later rely on the
basename (the information before the dot) to access the file.
In this file you create a series of name/value pairs that are separated by the equals (=) sign. Add the message labels in the
following code fragment to the file:
Example 6 – message bundle sample
outputLabel = Enter author name:

buttonLabel = Submit Author Name Form
validationRequired = Any value other than null or spaces
Now we have to load this resource into our application. In your index.jsp page, add a line that implements the
loadBundle component:

Example 7 – message bundle included
<bjsf:application>
<f:verbatim>
<xi:include
%>/bindings/config.xhtml_btl.chameleon.xml" parse="xml"></xi:include> <xi:include
%>/bindings/www.backbase.com.2007.jsf.client/server.xml" parse="xml"></xi:include>
<bjsfc:server url="index.jsf" identify="id"
loadingMessage="__loadingMsg"></bjsfc:server> <b:loadingMessage
id="__loadingMsg">Loading...</b:loadingMessage>
</f:verbatim>
<bjsf:loadBundle basename="sample.language" var="msg" />
...
</bjsf:application>
The basename identifies a specific resource bundle, and its value is the fully-qualified name of the file. Thus, the sample
part of the value refers to the name of our newly created package, while language identifies the resource bundle with the
corresponding name.
In our example, there is only the one language_en.properties resource bundle, so language is
sufficient to identify this file uniquely. In a more complete localization scenario, multiple files will exist that
correspond to different locales (language_nl.properties, language_jp.properties, etc) and you
would have to append the locale code to language to identify the required resource bundle uniquely. For
example, script can be added to retrieve the locale from the request and assign the result to a variable for use in
the JSP:
Example 8 – Retrieving the Locale from the Request
<% String locale_lang = request.getLocale().getLanguage().toString(); %>
The value of the var attribute, indicates the name you will use when binding a value to one of the messages. To complete
the connection between a field and a message, remove the hard coded value in the value attribute of our
commandButton and replace it with a reference to our message:
Example 9 – commandButton With Message
<bjsf:view>
<bjsf:commandButton id="formSubmit" value="#{msg.buttonLabel}" />
</bjsf:view>
</f:subview>
By doing this, we not only keep all our labels, validation messages, and strings in a single location, but we also prepare for a
situation when we need to display the same labels and messages in another language.
Save the changes, and refresh your browser to see the button label updated with the resource bundle value.
An Examples Page is available at http://bdn.backbase.com/java/jsf/examples with more comprehensive

instructions on how to localize your JSF Edition web application.

Backbase Forms
Developing Your Form
Now we can create the form itself by adding to the subview a form component, an outputLabel component (in conjunction
with a second message from our resource bundle), and an inputText component:
Example 10 – Subview With auhorName Form
<bjsf:view>
<bjsf:form id="authorForm">
<bjsf:outputLabel for="name" value="#{msg.outputLabel}" />
<bjsf:inputText id="name" />
</bjsf:form>
<bjsf:commandButton id="formSubmit" value="#{msg.buttonLabel}" style="padding-top:
20px; padding-bottom: 20px;" />
</bjsf:view>
</f:subview>
Reload your application once again, and you can see that you have now loaded the form into your application.
Figure 5 – panelSet Component With Form
Form Submission
Simply adding a form to your application does very little if it cannot be submitted. You might have noticed that the form
component only has an id attribute and some styling. This is because form submission is managed by the
commandButton component, not the form component. This way, the commandButton can determine which form(s) to
submit. On the commandButton, the value of the submitForms attribute determines which form to be submitted to the
server. The value of the submitForms attribute must be a comma separated list of id values of the form components:
Example 11 – commandButton With submitForms Attribute
<bjsf:view>
...
<bjsf:commandButton id="formSubmit" submitForms="authorForm"
actionListener="#{sampleBean.showAuthorPicture}" value="#{msg.buttonLabel}"
style="padding-top: 20px; padding-bottom: 20px;" />
</bjsf:view>
</f:subview>

Please note that form submission components, including commandButton, do not need the submitForms
attribute to be defined if the component resides inside the form. In that case, the component submits only the
form in which it is located.
By setting the value of the submitForms attribute to authorForm, we instruct the commandButton to submit this
particular form when the user clicks the commandButton.
If a form is nested inside another naming container, such as a f:subview, the value of the submitForms
attribute should be the id of the form concatenated (using colons) with the id of each of its ancestor naming
containers. Thus, for this example, the fully qualified value is author:authorForm. However, if the id of the
form is unique in the scope of the parent view, it can be uniquely identified using its unqualified id.
For more information, please refer to the description of naming containers in the section entitled Startup Page
in the Application Development Guide.
The actionListener listens for a click event on the commandButton. The value of the actionListener determines what
method the server calls when submitting the form. In our tutorial, the server executes a method called showAuthorPicture()
that is a member of a backing bean identified by sampleBean.
The sampleBean identifier for the Sample backing bean is defined by adding the following code fragment to
the faces-config.xml configuration file in the WEB-INF folder:
Example 12 – faces-include entry for the Sample class
<managed-bean>
<managed-bean-name>sampleBean</managed-bean-name>
<managed-bean-class>sample.Sample</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
To create the backing bean that contains the showAuthorPicture() method, copy and paste the following code to a new class
named Sample.java in the sample package.

Example 13 – Backing Bean Code With Utility Method
package sample;
import javax.faces.event.ActionEvent;
import com.backbase.bjsf.component.UIBackbaseGraphicImage;
public class Sample {
private UIBackbaseGraphicImage image;
private String actualInput = "";

private String outputText = "";
public UIBackbaseGraphicImage getImage() {

return image;
}
public void setImage(UIBackbaseGraphicImage image) {

this.image = image;
}
public void setActualInput (String actualInput) {

this.actualInput = actualInput;
}
public String getActualInput() {

return actualInput;
}
public void setOutputText (String outputText) {

this.outputText = outputText;
}
public String getOutputText() {

return outputText;
}
public void showAuthorPicture(ActionEvent event){

if (actualInput.equals("murakami")) {
image.setUrl("images/murakami.jpg");
outputText = "";
}
else if (actualInput.equals("irving")) {
image.setUrl("images/irving.jpg");
outputText = "";
}
else {
image.setUrl("images/question.jpg");
outputText = "We don't know this author.";
}
}
}
To run this example you will need to create a folder named images in the WebContent folder, and add
images with names that correspond to those in the Sample.java listing.
In the Sample class, we have set up a variable, actualInput, that we will use to store the value of our inputText
component. To accomplish this, we must bind the variable to the inputText component with the component's value
attribute:

Example 14 – inputText Value Binding
<bjsf:view>
<bjsf:inputText id="name" value="#{sampleBean.actualInput}" />
</bjsf:form>
...
</bjsf:view>
</f:subview>
As a result of this binding, the value of the inputText component is stored in the actualInput server variable upon form
submission.
In the backing bean, after variable declarations and getters and setters, we declare the showAuthorPicture method, which is
the method executed by our event listener. In the showAuthorPicture method, an extended control statement checks the
value of the acutalInput variable. Based on this value, we set two items. First, the outputText will be populated if the
server does not recognize the value of the input field. We also set the url attribute of a graphicImage component - this
will allow us to display a picture of the correct author.
However, as with our outputLabel component, we have not yet created a mechanism to get our response values back
into our application. To display our response, we will bind our server variables to the outputText and graphicImage
application components:
Example 15 – graphicImage Binding
<bjsf:view>
...
<bjsf:panelGroup>
<bjsf:outputText id="outputText" value="#{sampleBean.outputText}" />
<bjsf:graphicImage binding="#{sampleBean.image}" />
</bjsf:panelGroup>
</bjsf:view>
</f:subview>
In the listing, the bjsf:panelGroup provides a more efficient alternative to the bjsf:panelSet and
bjsf:panel to group related components in a cell in the grid.
In the showAuthorPicture() method, the outputText variable and the url attribute on the graphicImage component
are updated. This makes the value visible in your application:
Figure 6 – Form With Successful Response
Form Validation and Messages
Most forms will include input fields requiring some input ot be entered. Sometimes the user should only enter a number, or a
date in a certain format, or a certain set of values. In the JSF Edition, form validation can be handled both client-side and
server-side. The JSF Edition supports Tomahawk validation, so you can easily create server-side validators.

Additionally, we provide a few mechanisms to inform the user that input must conform to a certain format. What would be
useful is to add error messages to instruct the user. We can accomplish this in a few different ways. First, we can use an
outputRequired and a toolTip component to instruct the user before they even enter the field:
Example 16 – Input Field With outputRequired and toolTip Components
<bjsf:view>
<bjsf:inputText id="name" value="#{sampleBean.actualInput}"
clientValidators="required" required="true" />
<bjsf:outputRequired for="name">
<bjsf:toolTip>
<bjsf:outputText value="#{msg.validationRequired}" />
</bjsf:toolTip>
</bjsf:outputRequired>
</bjsf:form>
...
</bjsf:view>
</f:subview>
The outputRequired component places an asterisk (*) next to a given component to indicate that it is mandatory. The
asterisk is matched with the component by having the same value in the outputRequired for attribute and the id
attribute of the input component. The toolTip component adds additional information when the user places the mouse
over the parent component of the toolTip, which, in this case, is the outputRequired component.
While this is useful information, and reflects good user interaction design, it has no relation to validation or the error
messages you might want to display in response to failed validation. To create proper error messages, you can use the
message component:
Example 17 – Full Subview Listing Including Use of Message Component

<bjsf:view>
<bjsf:inputText id="name" value="#{sampleBean.actualInput}"
clientValidators="required" required="true" />
<bjsf:outputRequired for="name">
<bjsf:toolTip>
<bjsf:outputText value="#{msg.validationRequired}" />
</bjsf:toolTip>
</bjsf:outputRequired>
<bjsf:message for="name" errorStyle="color:red" />
</bjsf:form>
<bjsf:commandButton id="formSubmit" actionListener="#{sampleBean.showAuthorPicture}"
submitForms="authorForm" value="#{msg.buttonLabel}" style="padding-top: 20px;
padding-bottom: 20px;" />
<bjsf:panelGroup>
<bjsf:outputText id="outputText" value="#{sampleBean.outputText}" />
<bjsf:graphicImage binding="#{sampleBean.image}" />
</bjsf:panelGroup>
</bjsf:view>
</f:subview>
With the message component, the value of the for attribute must match the id of the component to be validated. We
have also used the errorStyle attribute to give the message a bit of extra styling. Reload the form. If you do not enter a
value, the contents of the message component will be displayed:

Figure 7 – Form Response Validated
The message that is displayed, "name": Value is required in this example, is defined by the following key/value
pairs in the MyFaces Message.properties file:
Example 18 – Validation Message Definitions
javax.faces.component.UIInput.REQUIRED = Validation Error

javax.faces.component.UIInput.REQUIRED_detail = "{0}": Value is required.
To customize this message, you override the MyFaces key/value pairs using a custom message bundle. For
more details, please refer to the topic entitled Validation Messages in the Application Development Guide.

Conclusion
That concludes our Beginner Tutorial. We've shown you how a JSF Edition application works, how to create a layout, add
static and dynamic files, as well as the basics of form submission, validation, and error message displaying. For more
information, please consult our Document Suite and Resource List in the Start Guide.

Contact Backbase
Community
The Backbase Developer Network http://bdn.backbase.com brings many developers resources such as the latest
releases, errata, updates, news and our free forum to your fingertips. Architects and evaluators will also benefit from the
insights and articles posted by Backbase and by the community.
Support
Free community-based support is available through our Backbase Developer Network discussion forums. Commercial
support is available through a Backbase yearly subscription, which includes product support and software licenses. This
support is useful for individuals and businesses requiring superior technical support, regular maintenance releases,
notification and alerts on product issues, knowledge base access, email or phone support, hot fixes, and an account
manager.
Learn more: http://www.backbase.com/support
Training
Backbase training courses are designed for a whole range of developers, from AJAX beginners to enterprise developers.
Courses are available online, on site, and in classroom settings. Our online classes are live with real-time instructors.
Training attendees are encouraged to communicate in real time with the instructor. All of our instructors are AJAX experts
with extensive teaching experience.
Learn more: http://www.backbase.com/training
Sales
For sales-related questions and inquiries, contact your local or regional office. For up-to-date information on our global sales
offices check: http://www.backbase.com/contact
You can also submit questions to our general email address at: contact@backbase.com .
North America Europe EMEA
635 Mariners Island Blvd, Ste 200 Stephensonstraat 19

San Mateo, CA 94404 1097 BA Amsterdam
USA The Netherlands
P: +1 866 800 8996 P: +31 (0) 20 465 8888

F: +1 650 638 0335 F: +31 (0) 20 750 7301
E: sales-us@backbase.com E: sales-eu@backbase.com

Beginner Tutorial

Transféré par

Informations du document

Description originale:

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Beginner Tutorial

Transféré par

Droits d'auteur :

Formats disponibles

Backbase Enterprise Ajax 4.3.

1.1 About the Beginner Tutorial .........................................................................................................................................3

Chapter 2. Project Creation 4

2.1 Create a New Backbase JSF Edition Project .................................................................................................................4

Chapter 3. Startup Page 5

Chapter 4. Page Layout 7

Chapter 5. Using Subviews 9

Chapter 6. Messages and Localization 11

Chapter 7. Backbase Forms 13

7.1 Developing Your Form................................................................................................................................................13

Chapter 9. Contact Backbase 20

9.1 Community ................................................................................................................................................................20

Copyright 2004 - 2008 Backbase BV, All Rights Reserved

This tutorial will cover the following topics:

• Creating a new JSF Edition web application [p. 4]

• Refer to the other documents listed in the Start Guide.

Copyright 2004 - 2008 Backbase BV, All Rights Reserved

Create a New Backbase JSF Edition Project

• Select File>New>Project to start the New Project wizard.

Copyright 2004 - 2008 Backbase BV, All Rights Reserved

The JSF f:view Tag

Copyright 2004 - 2008 Backbase BV, All Rights Reserved

The Backbase bjsf:application Tag

Copyright 2004 - 2008 Backbase BV, All Rights Reserved

Example 2 – panelSet simple layout

<bjsf:panelSet rows="15% * 15%" fullScreen="true">

Figure 2 – panelSet Component with Three rows

Copyright 2004 - 2008 Backbase BV, All Rights Reserved

Figure 3 – Nested panelSet Components

Copyright 2004 - 2008 Backbase BV, All Rights Reserved

Next we will create the subview:

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

Refresh your browser. Your application should look like this:

Copyright 2004 - 2008 Backbase BV, All Rights Reserved

Figure 4 – panelSet Component With commandButton Component in Subview

Copyright 2004 - 2008 Backbase BV, All Rights Reserved

Messages and Localization

1. Create a package and add a resource file.

If you use the Eclipse IDE:

If you use the Eclipse IDE:

outputLabel = Enter author name:

Copyright 2004 - 2008 Backbase BV, All Rights Reserved

Example 7 – message bundle included

<% String locale_lang = request.getLocale().getLanguage().toString(); %>

Example 9 – commandButton With Message

An Examples Page is available at http://bdn.backbase.com/java/jsf/examples with more comprehensive

Copyright 2004 - 2008 Backbase BV, All Rights Reserved

Copyright 2004 - 2008 Backbase BV, All Rights Reserved

Copyright 2004 - 2008 Backbase BV, All Rights Reserved

Example 13 – Backing Bean Code With Utility Method

public class Sample {

private UIBackbaseGraphicImage image;

private String actualInput = "";

public UIBackbaseGraphicImage getImage() {

public void setImage(UIBackbaseGraphicImage image) {

public void setActualInput (String actualInput) {

public String getActualInput() {

public void setOutputText (String outputText) {

public String getOutputText() {

public void showAuthorPicture(ActionEvent event){

Copyright 2004 - 2008 Backbase BV, All Rights Reserved

Example 14 – inputText Value Binding

Form Validation and Messages