Skip to main content

The HelloWorld example of JSF 2.2 with Myfaces

I just did by myself create a very simple app "HelloWorld" of JSF 2.2 with a concrete implementation Myfaces that we can use it later on for our further JSF trying out. I attached the source code link at the end part. Just follow these steps below:

1. Create a Maven project in Eclipse (Kepler) with a simple Java web application archetype "maven-archetype-webapp". Maven should be the best choice for managing the dependencies, so far. JSF is a web framework that is the reason why I chose the mentioned archetype for my example.

2. Import dependencies for JSF implementation - Myfaces (v2.2.10) into file pom.xml. The following code that is easy to find from http://mvnrepository.com/ with key words "myfaces".

<dependency>
 <groupId>org.apache.myfaces.core</groupId>
 <artifactId>myfaces-api</artifactId>
 <version>2.2.10</version>
 </dependency>
<dependency>
 <groupId>org.apache.myfaces.core</groupId>
 <artifactId>myfaces-impl</artifactId>
 <version>2.2.10</version>
</dependency>

3. As any other web frameworks, we need to configure for JSF stuffs in file web.xml, follow this http://myfaces.apache.org/wiki/core/user-guide/getting-started/configuring-myfaces.html

<?xml version="1.0" encoding="UTF-8"?>
<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">
 
 <!-- JSF mapping -->
 <servlet>
  <servlet-name>Faces Servlet</servlet-name>
  <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
  <load-on-startup>1</load-on-startup>
 </servlet>
 <servlet-mapping>
  <servlet-name>Faces Servlet</servlet-name>
  <url-pattern>*.xhtml</url-pattern>
 </servlet-mapping>
  
  <!-- welcome page -->
  <welcome-file-list>
    <welcome-file>index.xhtml</welcome-file>
  </welcome-file-list>
</web-app>

4. Create a Managed Bean by Java classes and  use JSF tags in index.xhtml for testing

Java code:

package vn.nvanhuong.jsf_myfaces;

import javax.faces.bean.ManagedBean;

@ManagedBean(name = "helloBean")
public class HelloManagedBean {
 
 public HelloManagedBean() {
  this.greeting = "Hello JSF - Myfaces";
 }

 private String greeting;

 public String getGreeting() {
  return greeting;
 }

 public void setGreeting(String greeting) {
  this.greeting = greeting;
 }
}

XHTML code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html">
 <h:head>
  <title>JSF - Myfaces Example</title>
 </h:head>
 <h:body>
  <h:outputText value="#{helloBean.greeting}"/>
 </h:body>
</html>

5. Run the application on server Tomcat (v7.0)

http://localhost:8080/jsf_myfaces/



Source code: https://github.com/vnnvanhuong/jsf_myfaces



References:

[1]. http://myfaces.apache.org/wiki/core/user-guide/getting-started/configuring-myfaces.html

[2]. http://mvnrepository.com/

[3]. http://docs.oracle.com/javaee/6/tutorial/doc/bnaxj.html













Labels:
































Comments











Post a Comment



















Popular posts from this blog



















BIRT - Fix the size of an image




























I use a dynamic image as a logo my report in pdf. At the beginning, I use table to align the logo in left or right. I meet a problem with some images with a large width or height. My customer requires that the logo should be displayed in original size.   These following steps solves my problem:  1. Use Grid instead of Table  2. Set Grid "Height" is 100%  and "Width" is blank  3. Set "Fit to container" for images are "true".   Download the the template here .




















Post a Comment









Read more






























[Snippet] CSS - Child element overlap parent




























I searched from somewhere and found that a lot of people says a basic concept for implementing this feature looks like below:  HTML code:  <div id="parent">  <div id="child">   </div> </div>  And, CSS:  #parent{   position: relative;   overflow:hidden; }  #child{   position: absolute;   top: -1;   right: -1px; }   However, I had a lot of grand-parents in my case and the above code didn't work. Therefore, I needed an alternative. I presumed that my app uses Boostrap and AngularJs, maybe some CSS from them affects mine. I didn't know exactly the problem, but I believed when all CSS is loaded into my browser, I could completely handle it.      www.tom-collinson.com    I tried to create an example to investigated this problem by Fiddle . Accidentally, I just changed: position: parent;  to position: static;  for one of parents -> the problem is solved.  Look at my code:   <div class="modal-body dn-placeholder-parent-positi...




















Post a Comment









Read more




























Generating PDF/A From HTML in Meteor




























 My live-chat app was a folk of project Rocket.Chat which was built with Meteor.  The app had a feature that administrative users were able to export the conversations into PDF files. And, they wanted to archive these files for a long time.   I happened to know that PDF/A documents were good for this purpose. It was really frustrated to find a solution with free libraries. Actually, it took me more than two weeks to find a possible approach.   TL, DR;  Using Puppeteer to generate a normal PDF and using PDFBox to load and converting the generated PDF into PDF/A compliance.   What is PDF/A?  Here is a definition from Wikipedia:    PDF/A  is an  ISO -standardized version of the  Portable Document Format  (PDF) specialized for use in the  archiving  and long-term  preservation  of  electronic documents . PDF/A differs from PDF by prohibiting features unsuitable for long-term archiving, such as  font  linking (as opposed to  font em...




















Post a Comment









Read more




























[Snippet] Generate a new unique "name" string from an existing list




























Suppose that we have a list of employees. Everytime, we want to add new employee into this list, the name of the employee will be generated with the following rules:  - the name of the new one is set to " [originalname] 1 " - in case the name already exist, " [originalname] 2 " is used, and so on.   Here is my code snippet by Javascript:  var employees =[     {id: 1, name: 'name'},     {id: 2, name: 'name 1'},     {id: 3, name: 'name 2'},     {id: 5, name: 'name 4'} ];  var commonUtils = {    isExistName: function(_name, _collection, _prop) {        for(var i = 0; i< _collection.length; i++){        if(_collection[i][_prop].localeCompare(_name)==0){          return true;       }      }        return false;   },      generateNewName: function(_name, _collection, _prop){     var i = 1;     var searching = true;     while (searching) {       var newName = _name+ " " + i;       if (!this.isExistName(newName, _collection, _pro...




















Post a Comment









Read more






























Retrospective with Sailboat




























 Have you ever got bored with the Retrospective meeting? I have, sometime. Most of the times, this meeting just goes traditionally by answering three questions: "What good things have we done? What bad things have we done? And, what actions should we improve?" Ever and ever again! My team found a way to make it a little bit more exciting. The idea is that each member - not only our Scrum Master - will become a host. If a meeting is hosted by a memeber, the next meeting will be hold by another one.         Yeah, I used "Sailboat" pattern in my turn. So, I just want to share with you guys how it was.     I started the meeting by telling a short story that I hoped everyone in my team could recall the meaning behind of Retrospective meetings:     There is a group of people trying pick up trash in a park. At the first look, the park seem not to have a lot of trash because they are spread out all over the place. However, these people continuously found trash when they sta...




















Post a Comment









Read more