This tutorial explains step by step how to create your first Rialto/JSF page, using Eclipse/WTP

Create a new Dynamic Web Project.

Download the latest stable or nightly build of Rialto/JSF. Copy all jars in the directory lib of the Rialto/JSF build in the WEB-INF/lib of your Eclipse project. This include the files :

• Rialto-Javascript-<version>.jar : Contains Rialto javascripts, images and CSS files.
• Rialto-JSF-<version>.jar : Contains Rialto Java Server Faces components, renderer and tags.
• asm-<version>.jar : Java bytecode parsing framework. Used to generate Javascript from class files.
• commons-beanutils-<version>.jar
• commons-logging-<version>.jar

Download Sun JSF reference implementation version 1.1.0.1 from http://java.sun.com/javaee/javaserverfaces/download.html Copy the following jars from the lib directory of the JSF archive to the WEB-INF/lib folder of your Eclipse project.

• commons-collection.jar
• commons-digester.jar
• jsf-api.jar : JSF API
• jsf-impl.jar : JSF implementation

Download the JSTL 1.0 from Copy the following jars from the lib directory of the JSTL archive to the WEB-INF/lib folder of your Eclipse project.

• jstl.jar : Java standard taglib library

Configure the JSF servlet in /WEB-INF/web.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
 
  <display-name>Rialto application</display-name>
 
  <!-- Select JSF State Saving Mode -->
  <context-param>
    <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
    <param-value>server</param-value>
  </context-param>
 
 <!-- JavaServer Faces Servlet Configuration -->
  <servlet>
    <servlet-name>faces</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>
 
  <!-- JavaServer Faces Servlet Mapping -->
  <servlet-mapping>
    <servlet-name>faces</servlet-name>   
    <url-pattern>*.faces</url-pattern>
  </servlet-mapping>
</web-app>

In the project source folder, create a package named “com.foo.rialto.example” In this package, create a new class named “LoginBean”, with the following content :

package com.foo.rialto.example;
 
/**
 * JSF Login bean
 */
public class LoginBean {
  /**
   * User login
   */
  private String login;
 
  /**
   * USer password
   */
  private String password;
 
  /**
   * JSF Login action
   */
  public String doLogin() {
    if ("user".equals(login) && "pass".equals(password)) {
        // Go to "ok" page if login/password is "user"/"pass"
        return "ok";
    } else {
        // Else go to "ko" page.
        return "ko";
    }
  }
 
  public void setLogin(String login) {
    this.login = login;
  }
  public String getLogin() {
    return login;
  }
  public void setPassword(String password) {
    this.password = password;
  }
  public String getPassword() {
    return password;
  }
}

In the package “com.foo.rialto.example”, create a file named “ApplicationResources.properties”. Add the following content :

logon.title = Authentication dialog
logon.info = Please type in your login and password
prompt.username = Login :
prompt.password = Password :
logon.submit = Logon
logon.cancel = Cancel

welcome.title = Welcome !
welcome.message = Message
welcome.greetings = Welcome in your first Rialto/JSF application !

forbidden.title = Welcome !
forbidden.message = Message
forbidden.info = You must logon with user/pass to access this application.

In the WebContent directory, create a file named “login.jsp”, and add the following content into it :

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="rialto" uri="http://rialto.application-servers.com/tags-jsf" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
 
<%-- create a rialto view --%>
<rialto:view id="ihmLogon">
 
    <%-- load i18n bundle --%>
    <f:loadBundle basename="com.foo.rialto.example.ApplicationResources" var="messages"/>
 
    <%-- display error message if any --%>
    <rialto:messages/>
 
    <%-- create a rialto window --%>
    <rialto:window  id="fenLogon" title="#{messages['logon.title']}" icon="images/imgFenSimple/picto-gr_recherchepatients.gif">
 
        <%-- create a rialto frame (panel) --%>
	<rialto:frame position="relative" id="CADRE3" top="100" left="300" width="395" height="165"  title="#{messages['logon.info']}" dynamic="false" open="true">
 
        <%-- create an HTML form to submit data --%>
		<rialto:form id="logonForm">
		    <rialto:label id="lib" top="45" left="10" value="#{messages['prompt.username']}" styleClass="libelle1"/>
		    <rialto:text id="login"  top="40" left="130" width="200" required="true" value="#{logon.login}"/>
		    <rialto:label id="lib2" top="75" left="10" value="#{messages['prompt.password']}" styleClass="libelle1"/>
		    <rialto:password id="password"  top="70" left="130" width="200" required="true" value="#{logon.password}"/>
 
	        <%-- submit button --%>		
		    <rialto:button title="#{messages['logon.submit']}" top="115" left="80" id="LOGON" action="#{logon.doLogin}"/>
 
            <%-- cancel button, bypassing required field --%>
            <rialto:button title="#{messages['logon.cancel']}" top="115" left="200" id="CANCEL" action="cancel" immediate="true"/>			
		</rialto:form>
    </rialto:frame>
  </rialto:window>
</rialto:view>

In the WebContent directory, create a file named “welcome.jsp”, and add the following content into it :

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="rialto" uri="http://rialto.application-servers.com/tags-jsf" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
 
<%-- create a rialto view --%>
<rialto:view id="ihmLogon">
 
    <%-- load i18n bundle --%>
    <f:loadBundle basename="com.foo.rialto.example.ApplicationResources" var="messages"/>
 
    <%-- display error message if any --%>
    <rialto:messages/>
 
    <%-- create a rialto window --%>
    <rialto:window  id="fenLogon" title="#{messages['welcome.title']}" icon="images/imgFenSimple/picto-gr_recherchepatients.gif">
 
        <%-- create a rialto frame (panel) --%>
	<rialto:frame position="relative" id="CADRE3" top="100" left="300" width="395" height="165"  title="#{messages['welcome.message']}" dynamic="false" open="true">
 		<rialto:label id="lib" top="45" left="10" value="#{messages['welcome.greetings']}" styleClass="libelle1"/>
 
    </rialto:frame>
  </rialto:window>
</rialto:view>

In the WebContent directory, create a file named “forbidden.jsp”, and add the following content into it :

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="rialto" uri="http://rialto.application-servers.com/tags-jsf" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
 
<%-- create a rialto view --%>
<rialto:view id="ihmLogon">
 
    <%-- load i18n bundle --%>
    <f:loadBundle basename="com.foo.rialto.example.ApplicationResources" var="messages"/>
 
    <%-- display error message if any --%>
    <rialto:messages/>
 
    <%-- create a rialto window --%>
    <rialto:window  id="fenLogon" title="#{messages['welcome.title']}" icon="images/imgFenSimple/picto-gr_recherchepatients.gif">
 
        <%-- create a rialto frame (panel) --%>
	<rialto:frame position="relative" id="CADRE3" top="100" left="300" width="395" height="165"  title="#{messages['welcome.message']}" dynamic="false" open="true">
 		<rialto:label id="lib" top="45" left="10" value="#{messages['welcome.greetings']}" styleClass="libelle1"/>
 
    </rialto:frame>
  </rialto:window>
</rialto:view>

In the WebContent/WEB-INF/ directory, create a file named “faces-config.xml”, and add the following content into it :

<?xml version="1.0"?>
 
<!DOCTYPE faces-config PUBLIC
  "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN"
  "http://java.sun.com/dtd/web-facesconfig_1_1.dtd">
 
<faces-config>
 
	<application>		
		<locale-config>
		    <default-locale>en</default-locale>
		</locale-config>
	</application>
 
  <!-- Login -->
  <managed-bean>
    <managed-bean-name>logon</managed-bean-name>
    <managed-bean-class>
      com.foo.rialto.example.LoginBean
    </managed-bean-class>
    <managed-bean-scope>request</managed-bean-scope>
  </managed-bean>
 
 
  <navigation-rule>
    <from-view-id>/login.jsp</from-view-id>
    <navigation-case>
      <from-outcome>ok</from-outcome>
      <to-view-id>/welcome.jsp</to-view-id>
    </navigation-case>
    <navigation-case>
      <from-outcome>ko</from-outcome>
      <to-view-id>/login.jsp</to-view-id>
    </navigation-case>    
    <navigation-case>
      <from-outcome>cancel</from-outcome>
      <to-view-id>/forbidden.jsp</to-view-id>
    </navigation-case>    
  </navigation-rule>
</faces-config>

Your application is now ready to test. Publish the application to a server and start the server. You should be able to acess the application at the following URL : http://localhost:8080/TutorialRialto/login.faces

Welcome to Rialto !