How to align JSF h:outputText text to right?

Original Way

But it doesn't work

What we need to do is to add div tag to enclose outputText tag, and define text-align in div tag

It works now....

The value of attribute "itemLabel" associated with an element type "null" must not contain the '<' character.

Environment: JSF 2.0 on GlassFish V3

[Error Message]

The value of attribute "itemLabel" associated with an element type "null" must not contain the '<' character.

Source Code 

Root Cause
The problem results from the itemValue cannot accept < in xhtml page


Solution
Move selectItems value and label to managed bean


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
    //declare a List variable    
   public List compareList = new ArrayList();
 
    //declare a getter class
    public List getCompareList() {         
  compareList.clear();
  compareList.add(new SelectItem(">", ">"));
  compareList.add(new SelectItem("<", "<="));
  return compareList;     
 }

xhtml page should be updated to be like this:

Demo:

PrimeFaces 2.X + JSF 2.0 Quick Start

Prerequisite

This example will apply facelets template. Therefore, concerning faceletes template topics, please refer to :

• How to integrate JSF 2.0 with Facelets: http://albert-kuo.blogspot.com/2010/11/how-to-integrate-jsf-20-with-facelets.html
• JSF2 + Facelets + PrimeFaces 2.2 :http://albert-kuo.blogspot.com/2010/11/jsf2-facelets-primefaces-22.html

PrimeFaces 2.X + JSF 2.0 Quick Start

1. Create two classes: PersonBean.java and PersonControl.java

2. Create Person.java

Utilized annotation to declare managed bean and its scope instead of faces-config.xml

3. Create PersonControl.java

Utilized annotation to declare managed bean, ManagedProperty and its scope instead of faces-config.xml

4. Create index.xhtml

You will see this page only have one text filed for user to fill.

Two buttons in this page:

• Submit button: click submit button as user fill in name
• Clear button: click clear button to clear text field

5. Create hello.xhtml

Show welcome message in this page. And click home button to head for previous page.

6. Define navigation rule in faces-config.xml

7. Demo

User fill in name and click submit button

show welcome message in next page.

JSF2 + Facelets + PrimeFaces 2.2

1. Download PrimeFaces jar files from http://www.primefaces.org/downloads.html

2. Utilize JSF 2.0 and copy PrimeFaces-2.2.jar to WEB-INF/lib

3. you don't need to register servlet and servlet mapping in web.xml from JSF 2.0

4. You don't need to declare p:resources tag in head area

5. Create a simple page with 5 PrimeFaces command buttons in panel

6. Demo

Compare PrimeFaces 1.x with PrimeFaces 2.x

How to integrate JSF 2.0 with Facelets

1. Create Dynamic Web Project. Assign project name, target runtime, dynamic web module version, and configuration.

2. Click Next

3. Click Next

4. Select JSF 2.0 in user library, and click finish.

5. The Dynamic Web Project had been created. (NOTICE: you won't need jsf-facelets.jar anymore)

6. Edit web.xml. Added one context parameter.

7. You don't need to add view-handler in faces-config.xml

8. Create header template page

9. Create footer template page

10. Create template page. Including header, title, body, and footer area.

11. Create test.xhtml. Apply template.xhtml, and insert new contents into title area and body area.

12. Demo

Compare JSF 1.2 with JSF 2.0 concerning configurations:

PrimeFaces + Facelets Configuration

1. With regard to facelets configuration, please check: http://albert-myptc.blogspot.com/2010/08/1.html

2. Download primefaces-1.0.2.jar from http://www.primefaces.org/downloads.html

3. Edit web.xml. Add Resource Servlet and servlet mapping

4. Add p:resources tag to head tag in template.xhtml

Resource component needs to be present on a page that has PrimeFaces components, this component outputs the link and script tags that are necessary for PrimeFaces components to work. The ideal place to put resources component would be the html head element.

5. Create a test.xhtml, apply template.xhtml as its template page. And add p:editor in the body part.

6. Check the result

'PrimeFaces' is undefined

As I try to execute a simple PrimeFaces tag in my test.xhtml

it shows this JavaScript error

it results from I forget to add p:resources tag to head tag in my template.xhtml

Then it works correctly!

Facelets Quick Start

1. download facelets jar file from https://facelets.dev.java.net/

2. copy jsf-facelets.jar to WEB-INF/lib

3. download jakarta-taglibs-standard jar files from

http://jakarta.apache.org/site/downloads/downloads_taglibs-standard.cgi

4. copy jstl.jar and standard.jar to WEB-INF/lib

5. add facelets initialization parameter in web.xml

6. add FaceletViewHandler in face-config.xml

7. ceate header.xhtml in template folder

8. create footer.xhtml in tempate folder

9. create template.xhtml in template folder

10. create test.xhtml which apply template.xhtml

11. check the result