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





















[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-position&quo




















Post a Comment









Read more






























Strategy Design Pattern




























For example, I have a program with an Animal abstract class and two sub-classes Dog and Bird. I want to add new behavior for the class Animal, this is "fly".  Now, I face two approaches to solve this issue:   1. Adding an abstract method "fly" into the class Animal. Then, I force the sub-classes should be implemented this method, something like:   public abstract class Animal{  //bla bla  public abstract void fly(); }  public class Bird extends Animal{  //bla bla  public void fly(){  System.out.println("Fly high");  } }  public class Dog extends Animal{  //bla bla  public void fly(){   System.out.println("Cant fly");  } }    2. Creating an interface with method "fly" inside. The same issue to an abstract class, I force the classes these implement this interface should have a method "fly" inside:   public interface Flyable{  public void fly(); } public class Bird implements Flyable{ //bla bla  public void fly(){   System.out.pr




















Post a Comment









Read more






























Styling Sort Icons Using Font Awesome for Primefaces' Data Table




























So far, Primefaces has used image sprites for displaying the sort icons. This leads to a problem if we want to make a different style for these icons; for example, I would make the icon "arrow up" more blurry at the first time the table loading because I want to highlight the icon "arrow down". I found a way that I can replace these icons with Font Awesome icons.      We will use "CSS Pseudo-classes" to achieve it. The hardest thing here is that we should handle displaying icons in different cases. There is a case both "arrow up" and "arrow down" showing and other case is only one of these icons is shown.   .ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s {     background-image: none;     margin-left: 5px;     font-size: 1.1666em;     position: relative; }  .ui-sortable-column-icon.ui-icon.ui-icon-carat-2-n-s:not(.ui-icon-triangle-1-s)::before {     content: "\f106";     font-family: "FontAwesome";     position: 




















Post a Comment









Read more




























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