Beginner Tutorial

Informations

• Publié par: Onsa
• Nombre de lectures: 36
• Langue: English

Extrait

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 -

Introduction

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.

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

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.

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]

hgiRR stresedevackbase BV, All th2 00 4 -0280B  .1.3 4on igyrop 3 C JitidE FS

R sereev liRhgstd

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 .

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 .

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.

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.

E idJFS opyr .14 C  4.3tion 8002 - 4002 thgiAl, BVe askbac B

BVe Al, Ril tsghseR evre

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.CLIENTBOOTDIR") _ _ _ %>/bindings/config.xhtml btl.chameleon.xml" parse="xml"></xi:include> <xi:include href="<%=application.getInitParameter("com.backbase.bjsf.CLIENTBOOTDIR") _ _ %>/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 >

Startup Page

d

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

opyr .15 C 200ight0280 4 -bksaB ca idE FSJ3.4 noit

rved

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 .

th seResA llR gisebaV, B8 00ckBa40022 - iryp thg 16 Co 4.3.ion EditSJ F

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 : outputText value ="Row 2" /> </ bjsf : panel > < bjsf : panel style ="border: 1px solid black;"> < bjsf : outputText value ="Row 3" /> </ 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.

served

Page Layout

gith seR,VA llR righCopy04 -t 20 8aB2 00esB kcab JSoitidE F71.3.4 n

 RllhtigRes rvseaB 8abkcB esA ,Vde

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 : panel style ="border: 1px solid black;"> < bjsf : outputText value ="Row 2, Col 1" /> </ bjsf : panel > < bjsf : panel style ="background-color: #eeeeee; border: 1px solid black;"> < bjsf : outputText value ="Row 2, Col 2" /> </ bjsf : panel > < bjsf : panel style ="border: 1px solid black;"> < bjsf : outputText value ="Row 2, Col 3" /> </ 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.

EdF JS t 20righ 20004 -  n.4tioi oCyp .381

hgst liRreevR sed

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 style ="border: 1px solid black;"> < bjsf : outputText value ="Row 2, Col 1" /> </ bjsf : panel > < bjsf : panel style ="background-color: #eeeeee; border: 1px solid black;" url ="views/form.jsp" /> < bjsf : panel style ="border: 1px solid black;"> < bjsf : outputText value ="Row 2, Col 3" /> </ 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 <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <%@ taglib uri="http://www.backbase.com/2007/jsf" prefix="bjsf" %> < 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 Edi1. C 9 pory itno4 3. - 4 0820htig00 2VB elA ,caB sabk

002 - 40abkcaB 8 AV, Bsehtig RllCopyt 20righ

10

ed

Figure 4 –

JSF Edition 4.3.1

panelSet Component With commandButton Component in Subview

Res rvse

giR  stheseRdevr

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 .

Messages and Localization

_ 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:

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 . _

JitidE FS.1.3 4on ripyCo 11 0240hg t00 8- 2 baseBack All BV,