JSF | Love IT

Archiwum

Posts Tagged ‘JSF’

JSF + Facelets tutorial – ciąg dalszy [część 2]

9 listopada 2009 Paweł Ryznar 184 Komentarze

Miało być dwa wpisy odnośnie JSF i Facelets, ale założenia się zmieniły i będzie trzy 🙂
Dzisiaj w sumie nieco mniej o Facelets a trochę więcej o JSF + i18n (internationalization).
JSF ułatwia stworzenie wielojęzycznej aplikacji – wspomniałem o tym w poprzednim wpisie. Ale to za mało, przecież to użytkownik ma decydować o języku, a nie konfiguracja aplikacji. Dlatego trzeba dać mu wybór i zachować go na dłużej, np w sesji. Jednak sesja dość szybko wygasa i co wtedy? Użytkownik znowu wjedzie na stronę i musi ponownie wybrać język. Dobrym miejscem na przechowywanie tej informacji jest cookie.
Zaczynamy 🙂

Tworzymy kontroler który obsłuży nam wybór języka [czyli nowy JSF Managed Bean]

package eu.ryznar.controller;

import java.util.Locale;
import javax.faces.context.ExternalContext;
import javax.faces.context.FacesContext;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletResponse;

public class Language {

    public Language() {
    }

    public String changeLanguage() {
        FacesContext context = FacesContext.getCurrentInstance();
        ExternalContext externalContext= context.getExternalContext();

        Map requestParameterMap = (Map) context.getExternalContext().getRequestParameterMap();
        String language = requestParameterMap.get("language").toString();

        HttpServletResponse httpServletResponse = (HttpServletResponse) externalContext.getResponse();
        String cookieName = externalContext.getInitParameter("i18n.languageCookieName");

        Cookie cookie = new Cookie(cookieName, language);
        cookie.setMaxAge(365);

        httpServletResponse.addCookie(cookie);

        context.getViewRoot().setLocale(new Locale(language));

        return null;
    }
}

W kodzie jest użyty parametr i18n.languageCookieName definiujący nazwę ciastka w którym przechowamy wybór użytkownika
Parametr należy dodać w pliku web.xml

    <context-param>
        <param-name>i18n.languageCookieName</param-name>
        <param-value>culture</param-value>
    </context-param>

Teraz w szablonie, np w template.xml w pasku bocznym można dodać 2 przyciski do zmiany języka

  <h:commandLink action="#{language.changeLanguage}" value="#{msgs.langPL}">
     <f:param name="language" value="pl" />
  </h:commandLink>

  <h:commandLink action="#{language.changeLanguage}" value="#{msgs.langEN}">
     <f:param name="language" value="en" />
  </h:commandLink>

w pikach z tłumaczeniami trzeba nadać odpowiednie wartości dla langPL i langEN Jeśli to zrobimy można uruchomić aplikację, i wybrać język – w tym momencie powinno zostać utworzone ciasteczko.

Wybór języka już mamy, ale trzeba jeszcze zmienić język interfejsu. Ogólnie to miałem dylemat JSF + i18n – jak ugryźć? – gdzie umieścić kod odpowiedzialny za język interfejsu [Filter, View Handler czy Phase Listener]?
W PHP [w frameworku symfony] taki kod znajdował się w filtrze, tutaj w filtrze nie chciało działać 😛

Stanęło na Phase Listener – powiecie „Leo why?”. Żeby rozszerzając klasę FaceletViewHandler nie uzależniać się od Facelets.

Wyglądało by to tak:

import com.sun.facelets.FaceletViewHandler;
import eu.ryznar.utils.Cookies;
import eu.ryznar.utils.I18N;
import java.util.Locale;
import javax.faces.application.ViewHandler;
import javax.faces.context.FacesContext;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;

public class CustomViewHandler extends FaceletViewHandler {

    public CustomViewHandler(ViewHandler parent) {
        super(parent);
    }

    @Override
    public Locale calculateLocale(FacesContext context) {
        return I18N.getLocaleFromCookie(context);
    }
}

i faces-config.xml:

<view-handler>eu.ryznar.view.CustomViewHandler</view-handler>

Natomiast aby rozwiązać to wykorzystując PhaseListener tworzymy package eu.ryznar.listener i klasę LocalePhaseListener implementującą interfejs PhaseListener

package eu.ryznar.listener;

import eu.ryznar.utils.I18N;
import java.util.Locale;
import javax.faces.context.FacesContext;
import javax.faces.event.PhaseEvent;
import javax.faces.event.PhaseId;
import javax.faces.event.PhaseListener;

public class LocalePhaseListener implements PhaseListener {

    public void afterPhase(PhaseEvent event) {
        FacesContext context = event.getFacesContext();
        Locale currentLocale = I18N.getLocaleFromCookie(context);
        context.getViewRoot().setLocale(currentLocale);
        return;
    }

    public void beforePhase(PhaseEvent event) {
        return;
    }

    public PhaseId getPhaseId() {
        return PhaseId.RENDER_RESPONSE;
    }
}

a w pliku faces-config.xml

    <lifecycle>
        <phase-listener>eu.ryznar.listener.LocalePhaseListener</phase-listener>
    </lifecycle>

Jeszcze tylko klasy do internacjonalizacji i obsługi cookie:

package eu.ryznar.utils;

import java.text.MessageFormat;
import java.util.Locale;
import java.util.MissingResourceException;
import java.util.ResourceBundle;
import javax.faces.application.FacesMessage;
import javax.faces.context.ExternalContext;
import javax.faces.context.FacesContext;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;

public class I18N {
    private static final String LANGUAGE_COOKIE = "i18n.languageCookieName";

    public static Locale getLocale(String culture) {
        if (culture != null && culture.length() == 2) {
            return new Locale(culture);
        }

        return Locale.getDefault();
    }

    public static Locale getLocaleFromCookie(FacesContext context) {
        ExternalContext externalContext = context.getExternalContext();

        Cookie cookie[] = ((HttpServletRequest) externalContext.getRequest()).getCookies();
        String cookieName = externalContext.getInitParameter(LANGUAGE_COOKIE);
        String cultureCookie = Cookies.getCookie(cookie, cookieName);

        return getLocale(cultureCookie);
    }
}

eu.ryznar.utils
Cookies.java

package eu.ryznar.utils;

import javax.servlet.http.Cookie;

public class Cookies {
    public static String getCookie(Cookie[] cookies, String cookieName) {
        String value = null;
        if (cookies != null) {
            int cookieCounter = cookies.length;

            for (int i = 0; i < cookieCounter; i++) {
                if (cookies[i].getName().equalsIgnoreCase(cookieName)) {
                    value = cookies[i].getValue();
                }
            }
        }

        return value;
    }
}

Po odświeżeniu strony [jeśli poprzednio wybraliśmy język angielski], widzimy ze cały interfejs jest w języku angielskim.

Ok, ale jeszcze coś nie tak. Jeśli wybierzemy inny język to nie ma zmiany, trzeba odświeżyć stronę. Rozwiązanie jest bardzo proste. W klasie Language, w funkcji setLanguageCookie(), przed return wpisujemy poniższą linijkę

context.getViewRoot().setLocale(new Locale(language));

Od teraz, każdy wybór języka skutkuje natychmiastową zmianą.

Czyli JSF i 18n mamy załatwione. Można oczywiście pomyśleć o tym żeby tłumaczenia przechowywać w bazie danych a nie w plikach, żeby bez potrzeby nie wykonywać akcji re-deploy, ale o tym może innym razem.

Kolejny krok w uzupełnianiu aplikacji: edycja i usuwanie
w kontrolerze UserController dodajemy kod

    public String deleteUser() {
        String r = "user_deleted";
        FacesContext context = FacesContext.getCurrentInstance();
        Map requestParameterMap = (Map) context.getExternalContext().getRequestParameterMap();

        try {
            Integer userId = Integer.parseInt(requestParameterMap.get("userId").toString());
            User u = userDao.getUser(userId);
            String userName = u.getUsername();
            userDao.deleteUser(u);
            addSuccessMessage("User " + userName + " successfully deleted.");
        } catch (NumberFormatException ne) {
            addErrorMessage(ne.getLocalizedMessage());
            r = "failed";
        } catch (Exception e) {
            addErrorMessage(e.getLocalizedMessage());
            r = "failed";
        }

        return r;
    }

    public String editUser() {
        FacesContext context = FacesContext.getCurrentInstance();
        Map requestParameterMap = (Map) context.getExternalContext().getRequestParameterMap();
        Integer userId = Integer.parseInt(requestParameterMap.get("userId").toString());
        this.user = userDao.getUser(userId);
        return "edit_user";
    }

    private void addErrorMessage(String msg) {
        FacesMessage facesMsg = new FacesMessage(FacesMessage.SEVERITY_ERROR, msg, msg);
        FacesContext fc = FacesContext.getCurrentInstance();
        fc.addMessage(null, facesMsg);
    }

    private void addSuccessMessage(String msg) {
        FacesMessage facesMsg = new FacesMessage(FacesMessage.SEVERITY_INFO, msg, msg);
        FacesContext fc = FacesContext.getCurrentInstance();
        fc.addMessage("successInfo", facesMsg);
    }

w templejtce list.xhtml dodajemy 2 kolumny

                        <h:column>
                            <f:facet name="header">
                                <h:outputText  value="#{msgs.actionEdit}"/>
                            </f:facet>
                            <h:commandLink action="#{user.editUser}">
                                <h:outputText value="#{msgs.actionEdit}"/>
                                <f:param name="userId" value="#{dataTableItem.userId}" />
                            </h:commandLink>
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                <h:outputText  value="#{msgs.actionDelete}"/>
                            </f:facet>
                            <h:commandLink action="#{user.deleteUser}">
                                <h:outputText value="#{msgs.actionDelete}"/>
                                <f:param name="userId" value="#{dataTableItem.userId}" />
                            </h:commandLink>
                        </h:column>

tworzymy plik edituser.xhtml

  <ui:define name="header">
     #{msgs.userEdit}
  </ui:define>

  <ui:define name="content">
    <h:form>
      <h:messages/>
        <custom:inputTextLabeled label="#{msgs.userName}" value="#{user.user.username}" required="true" labelStyle="addUserInput" />
        <br />
        <custom:inputTextLabeled label="#{msgs.userFirstName}" value="#{user.user.firstName}" labelStyle="addUserInput" />
        <br />
        <custom:inputTextLabeled label="#{msgs.userLastName}" value="#{user.user.lastName}" labelStyle="addUserInput" />
        <br />
        <custom:inputTextLabeled label="#{msgs.userEmail}" value="#{user.user.email}" required="true" labelStyle="addUserInput" />
        <br /><br />
        <h:commandButton
            action="#{user.saveUser}"
            value="#{msgs.btnUpdate}" styleClass="saveButton" />
        </h:form>

    </ui:define>
  </ui:composition>

w faces-config.xml

    <navigation-rule>
        <from-view-id>/list.xhtml</from-view-id>
        <navigation-case>
            <from-action>#{user.editUser}</from-action>
            <from-outcome>edit_user</from-outcome>
            <to-view-id>/edituser.xhtml</to-view-id>
        </navigation-case>
    </navigation-rule>
    <navigation-rule>
        <from-view-id>/edituser.xhtml</from-view-id>
        <navigation-case>
            <from-action>#{user.saveUser}</from-action>
            <from-outcome>success</from-outcome>
            <to-view-id>/list.xhtml</to-view-id>
        </navigation-case>
        <navigation-case>
            <from-action>#{user.saveUser}</from-action>
            <from-outcome>fail</from-outcome>
            <to-view-id>/list.xhtml</to-view-id>
        </navigation-case>
    </navigation-rule>

i do plików z tłumaczeniami dodajemy

actionEdit=Edit
actionDelete=Delete
userEdit=Edit user
btnUpdate=Update

oraz

actionEdit=Edytuj
actionDelete=Usuń
userEdit=Edytuj użytkownika
btnUpdate=Aktualizuj

w list.xhtml dodajemy linię

<h:messages errorClass="msgFail" infoClass="msgSuccess"></h:messages>

tu będą wyświetlane komunikaty zależnie od wykonanej akcji [żeby użytkownik wiedział co się stało].
msgFail i msgSuccess to nazwy klas z pliku CSS [plik dostępny w archiwum dołaczonym do wpisu]

Po usunięciu użytkownika powinniśmy zobaczyć coś takiego:

Jednak coś tu nie gra 😉 intefejs mamy polski, a komunikat jest w języku angielskim. Trzeba jeszcze dodać tłumaczenie treści pochodzących z kontrolera.

na początek prznieśmy metody addErrorMessage(String msg) i addSuccessMessage(String msg) z kontrolera do klasy I18N.
Metody są podobne więc można uprościć sprawę i zapisać je w takiej postaci

    public static void addErrorMessage(String msg, String clientId) {
        addMessage(msg, FacesMessage.SEVERITY_ERROR, clientId);
    }

    public static void addSuccessMessage(String msg, String clientId) {
        addMessage(msg, FacesMessage.SEVERITY_INFO, clientId);
    }

    private static void addMessage(String messsage, FacesMessage.Severity messageType, String clientId) {
        FacesContext fc = FacesContext.getCurrentInstance();
        FacesMessage facesMsg = new FacesMessage(messageType, message, message);
        fc.addMessage(clientId, facesMsg);
    }

a w klasie User kod

addSuccessMessage("User " + userName + " successfully deleted.");

zamieniamy na

I18N.addSuccessMessage("User " + userName + " successfully deleted.", null);

Dzięki temu mamy możliwość wielokrotnego używania komunikatów w innych kontrolerach. Możemy przetsesować aplikację. Jeśli działa przechodzimy dalej.

Ale chwila? Jak przetłumaczyć string którego fragment jest zmienny?
Bardzo prosto, w plikach z tłumaczeniamy dodajemy linie:

userDeleted=User {0} has been deleted
userDeleted=Usunięto użytkownika {0}

W nawiasach klamrowych mamy parametry które podczas tłumaczenia zostaną zamienione na odpowiednie wartości.
Teraz trochę kodu – w klasie I18N dodajemy jeszcze trzy funkcje [pasowałoby jeszcze dopisać obsługę wyjątków].

    private static String getMessageFromResourceBundle(String key, Locale locale, Object[] params) {
        ResourceBundle bundle = getBundle(locale);
        String message = "";
        if (bundle == null) {
            return null;
        }
        try {
            message = formatMessage(bundle.getString(key), params, locale);
        } catch (Exception e) {
        }
        return message;
    }

    private static final String BUNDLE_NAME = "eu.ryznar.bundle.messages";

    private static ResourceBundle getBundle(Locale locale) {
        ResourceBundle bundle = null;
        try {
            bundle = ResourceBundle.getBundle(BUNDLE_NAME, locale);
        } catch (MissingResourceException e) {
            // plik nie odnaleziony
        }

        return bundle;
    }

    private static String formatMessage(String message, Object[] params, Locale locale) {
        if (params != null) {
            MessageFormat mf = new MessageFormat(message, locale);
            return mf.format(params, new StringBuffer(), null).toString();
        }

        return message;
    }

i w tej samej klasie modyfikujemy wcześniej dodane funkcje [rozsdzerzamy funkcje o możliwość przetworzenia stringów ze parametrami]:

    public static void addErrorMessage(String msg, String clientId, Object[] params) {
        addMessage(msg, FacesMessage.SEVERITY_ERROR, clientId, params);
    }

    public static void addSuccessMessage(String msg, String clientId, Object[] params) {
        addMessage(msg, FacesMessage.SEVERITY_INFO, clientId, params);
    }

    private static void addMessage(String msg, FacesMessage.Severity messageType, String clientId, Object[] params) {
        FacesContext fc = FacesContext.getCurrentInstance();
        String message = I18N.getMessageFromResourceBundle(msg, fc.getViewRoot().getLocale(), params);
        FacesMessage facesMsg = new FacesMessage(messageType, message, message);
        fc.addMessage(clientId, facesMsg);
    }

To wszystko. Archiwum z projektem jest dostępne tutaj.
Do przedstawionego kodu mam jeszcze jedną uwagę. Nie podoba mi się. Czy nie można jakoś norlanie pobrać wartości ciasteczka? Albo funkcja haszująca hasło [w poprzednim artykule]. Czy tego nie da się załątwić jedną lub dwoma linijkami kodu?
I jak zwykle będę wdzięczny za wskazanie wszelkich uchybień jakich dopuściłem się w kodzie bądź w treści.

Reklamy

Kategorie:Facelets, JavaEE 5, JSF Tagi: Facelets, FaceletViewHandler, i18n, JSF, PhaseListener, ViewHandler

Facelets tutorial – wprowadzenie – część 1

7 listopada 2009 Paweł Ryznar 126 Komentarzy

Tym razem wpis nie będzie o problemach ale o czymś działającym 😉 Poprzednio odniosłem się do przykładowej aplikacji wykorzystującej JSF i JPA, teraz pokażę na przykładzie podobnej aplikacji, jak wykorzystać silnik szablonów dla JSF – Facelets. Tutorial będzie się składał z dwóch części, żeby nie było zbyt długo 😉 w pierwszej wprowadzenie a w drugiej dokończenie aplikacji która nic konkretnego nie robi 😉

Aby w miarę łagodnie zapoznać się z tym co oferują Facelets polecam pozycję wydawnictwa Apress: Facelets Essentials: Guide to JavaServer Faces View Definition Framework – nie ma tego dużo, około 90 stron.

Do wykonania przykładowej aplikacji potrzebujemy
– IDE – ja używam NetBeans 6.7
– baza danych – może być MySQL
– plugin dla Netbeans nbfaceletssupport

Jeśli mamy zainstalowaną bazę to tworzymy potrzebną tabelę

CREATE TABLE IF NOT EXISTS `users` (
  `user_id` int(11) NOT NULL auto_increment,
  `username` varchar(255) NOT NULL,
  `first_name` varchar(255) NOT NULL,
  `last_name` varchar(255) NOT NULL,
  `password` char(64) NOT NULL,
  `email` varchar(255) default NULL,
  `active` tinyint(1) NOT NULL default '1',
  `date_created` timestamp NOT NULL default CURRENT_TIMESTAMP,
  PRIMARY KEY  (`user_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=3;

INSERT INTO `users` (`user_id`, `username`, `first_name`, `last_name`, `password`, `email`, `active`, `date_created`) VALUES
(1, 'pablo', 'pawel', 'ryznar', 'a7e8363bba55ff817479fe761befa5169e9bec4b', NULL, 1, '2009-10-29 00:00:00'),
(2, 'adamo', 'adam', 'nowak', 'c0ce63151c40b9ed8d93b8a4029633dc07211a84', NULL, 1, '2009-10-29 00:00:00');

Jeśli mamy wszystko to zaczynamy 🙂
Tworzymy aplikację JavaEE -> Enterprise Application

otrzymujemy taką strukturę [trochę bałagan mam na liście 😉 aplikacja którą teraz robię to UserStore]

Kolejny krok to podpięcie frameworków JSF i Facelets [w menu kontekstowym części webowej wybieramy Properties i zakładkę Frameworks]:
konfigurujemy je tak jak na screenach

W części enterpise dodajemy packages: eu.ryznar.facade i eu.ryznar.domain a w części webowej eu.ryznar.controller

Teraz z pomocą Netbeans’a wygenerujemy klasy encji

Zmieniamy nazwę klasy na User

Stworzymy jeszcze ziarna do operowania na wygenerowanej klasie encji

Zmieniamy nazwę interfejsu na UserDao

I mniej więcej mamy gotowy szkielet 🙂

Teraz czas na co nieco kodu 😛
w klasie User [eu.ryzna.domain] zmieniamy ciało metody toString():

    public String toString() {
        return this.firstName + " " + this.lastName;
    }

w pliku UserDaoBean.java wpisujemy poniższy kod

@Stateless
public class UserDaoBean implements UserDao {
  @PersistenceContext
  private EntityManager em;

  public User getUser(int UserId) {
    User u = new User();
    u = em.find(User.class, UserId);
    return u;
  }

  public List<User> getAllUsers() {
    Query q = em.createQuery("SELECT u FROM User u");
    List<User> users = q.getResultList();
    return users;
  }

  public void createUser(User u) {
    String hashedPw = hashPassword(u.getPassword());
    u.setPassword(hashedPw);
    em.persist(u);
  }

  public void updateUser(User u) {
    String hashedPw = hashPassword(u.getPassword());
    u.setPassword(hashedPw);
    em.merge(u);
  }

  public void deleteUser(User u) {
       User mgdUser = em.merge(u);
       em.remove(mgdUser);
  }

  private String hashPassword(String password) {
    StringBuilder sb = new StringBuilder();
    try {
      MessageDigest messageDigest = MessageDigest.getInstance("SHA");
      byte[] bs;
      bs = messageDigest.digest(password.getBytes());
      for (int i = 0; i < bs.length; i++) {
        String hexVal = Integer.toHexString(0xFF & bs[i]);
        if (hexVal.length() == 1) {
          sb.append("0");
        }
        sb.append(hexVal);
      }
    } catch (NoSuchAlgorithmException ex) {
      Logger.getLogger(UserDaoBean.class.getName()).log(Level.SEVERE, null, ex);
    }
    return sb.toString();
  }
}

oczywiście mamy masę błędów, ponieważ brakuje bibliotek. Możemy je szybko zaimportować wciskając klawisze Ctrl + Shift + I

brakuje nam jeszcze deklaracji metod w interfejsie NetBeans sugeruje nam to żółtymi lampkami

wybieramy „Expose method in local business interface …” i odpowiedni kod pojawia się w pliku UserDao.java

z katalogu WebPages usuwamy pliki z rozszerzeniem jsp, nie będzie nam potrzebny.

W części webowej potrzebujemy plik kontrolera

i kod dla kontrolera

package eu.ryznar.controller;

import eu.ryznar.domain.User;
import eu.ryznar.facade.UserDao;
import javax.ejb.EJB;
import javax.faces.model.DataModel;
import javax.faces.model.ListDataModel;

public class UserController {

    @EJB
    UserDao userDao;
    private User user;
    private DataModel model;

    public String createUser() {
        this.user = new User();
        return "create_new_user";
    }

    public String saveUser() {
        String r = "success";
        try {
            userDao.createUser(user);
        } catch (Exception e) {
            e.printStackTrace();
            r = "failed";
        }
        return r;
    }

    public DataModel getUsers() {
        model = new ListDataModel(userDao.getAllUsers());
        return model;
    }

    public User getUser() {
        return user;
    }

    public void setUser(User user) {
        this.user = user;
    }
}

Netbeans automatycznie dodaje odpowiedni wpis o ziarnie zarządzanym do pliku faces-config.xml

Zanim przystąpimy do tworzenia widoku warto pomyśleć o internacjonalizacji naszej aplikacji. Dlatego w częsci webowej tworzymy nowy package o nazwie eu.ryznar.bundle i w nim dwa pliku messages_pl.properties i messages_en.properties

takie pliki można w bardzo prosty sposób edytować, klikamy na jednym z nich prawym przyciskiem i wybieramy „Otwórz” – dostajemy fajną tabelę w której szybko dodamy bądź edyujemy nowe wartośći

potrzebne tłumaczenia są w archiwum do którego link jest na końcu wpisu
Trzeba jeszcze dodać odpowiednią konfigurację, aby aplikacja automatycznie wczytywałą tłumaczenia [można to robić ręcznie w szablonach używając f:loadBundle]

    <application>
        <locale-config>
            <default-locale>pl</default-locale>
            <supported-locale>en</supported-locale>
        </locale-config>
        <resource-bundle>
            <base-name>eu.ryznar.bundle.messages</base-name>
            <var>msgs</var>
        </resource-bundle>
    </application>

Czyli mamy już obsługę danych, mamy kontroler czas na widok. Na początku stworzymy ogólny szablon z którego będą korzystały wszystkie podstrony.
Nie będę tu wgłębiał się w tłumaczenie elementów Facelets [odsyłam do wskazanej na początku pozycji bądź innych tutoriali, kilka można znaleźć w moich „delicjach”]

Tworzymy ogólny szablon –

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="./css/default.css" rel="stylesheet" type="text/css" />
        <title>Facelets -Szablon</title>
    </head>
    <body>
        <div id="outerWrapper">
            <div id="header">
                <ui:insert name="header"/>
            </div>
            <div id="contentWrapper">
                <div id="leftColumn">
                    <ui:insert name="leftColumn">
                        <h:form>
                            <p><h:commandLink action="#{user.createUser}" value="#{msgs.userCreate}"/></p>
                        </h:form>
                    </ui:insert>
                </div>
                <div id="content">
                    <ui:insert name="content"/>
                </div>
                <br />
            </div>
            <br class="clear" />
            <div id="footer">
                <ui:insert name="footer">
                   #{msgs.pageCopyright}
                </ui:insert>
            </div>
        </div>
    </body>
</html>

Kolejny krok to rzeczywisty szablon – plik list.xhtml i wpisujemy kod

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="./css/default.css" rel="stylesheet" type="text/css" />
        <title>Facelets - Szablon</title>
    </head>
    <body>
        <ui:composition template="/template.xhtml">
            <ui:define name="header">
                #{msgs.userList}
            </ui:define>

            <ui:define name="content">
                <h:form>
                    <h:dataTable value="#{user.users}"
                                 var="dataTableItem" border="0" cellpadding="0" cellspacing="0" styleClass="tableList">
                        <h:column>
                            <f:facet name="header">
                                <h:outputText  value="#{msgs.userName}"/>
                            </f:facet>
                            <h:outputText value="#{dataTableItem.username}" />
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                <h:outputText  value="#{msgs.userFirstName} i #{msgs.userLastName}"/>
                            </f:facet>
                            <h:outputText value="#{dataTableItem}" />
                        </h:column>
                        <h:column>
                            <f:facet name="header">
                                <h:outputText  value="#{msgs.userEmail}"/>
                            </f:facet>
                            <h:outputText value="#{dataTableItem.email}" />
                        </h:column>
                    </h:dataTable>
                </h:form>

            </ui:define>
        </ui:composition>
    </body>
</html>

kod CSS również zamieściłem w dołaczonym archiwum. Mając pierwszy szablon możemy testowo uruchomić aplikację.
Pod adresem http://localhost:8080/UserStore-war/list.jsf powinniśmy zobaczyć coś takiego:

Teraz tworzymy kolejne szablony adduser.xhtml i failed.xhtml
Netbeans może nam pomóc [wygeneruje podstawową strukturę dokumentu na podstawie pliku bazowego template.xhtml]

W pliku failed.xhtml wpisujemy kod

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    
    <body>
        <ui:composition template="./template.xhtml">
            
            <ui:define name="header">
                #{msgs.error}
            </ui:define>

            <ui:define name="content">
                #{msgs.userAddError}
            </ui:define>

        </ui:composition>
        
    </body>
</html>

Natomiast z adduser.xhtml jeszcze poczekamy 😉 żeby wykorzystać jeszcze jeden element silnika Facelets, mianowicie komponenty, które możemy wielokrotnie wykorzystywać. Dlaczego akurat w adduser.xhtml? bo często pola na dane są poprzedzone etykietą, więcj dlaczego nie uprościć sprawy i zamiast dwóch tagów [h:outputLabel i h:inputText] nie użyć jednego? Jest pomysł więc do dzieła 😉

W katalogu WEB-INF tworzymy katalog facelets a w nim plik mycustom.taglib.xml i katalog components. W katalogu components tworzymy 2 pliki InputTextLabeled.xhtml i SecretTextLabeled.xhtml
W utworzynych plikach komponentów odpowiednio wpisujemy kod

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html">
    <ui:component>
        <h:outputLabel value="#{label}: " styleClass="#{labelStyle}">
            <h:inputText value="#{value}" required="#{required}" label="#{label}"/>
        </h:outputLabel>
    </ui:component>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html">
    <ui:component>
        <h:outputLabel value="#{label}: " styleClass="#{labelStyle}">
            <h:inputSecret value="#{value}" required="#{required}" label="#{label}"/>
        </h:outputLabel>
    </ui:component>
</html>

Teraz konfiguracja komponentów:
w pliku mycustom.taglib.xml

<!DOCTYPE facelet-taglib PUBLIC "-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN" "http://java.sun.com/dtd/ facelet-taglib_1_0.dtd">
<facelet-taglib>
    <namespace>http://ryznar.eu/facelets</namespace>
    <tag>
        <tag-name>inputTextLabeled</tag-name>
        <source>components/InputTextLabeled.xhtml</source>
    </tag>
    <tag>
        <tag-name>secretTextLabeled</tag-name>
        <source>components/SecretTextLabeled.xhtml</source>
    </tag>
</facelet-taglib>

w web.xml wskazainie na powyższy plik

<context-param>
        <param-name>facelets.LIBRARIES</param-name>
        <param-value>/WEB-INF/facelets/mycustom.taglib.xml</param-value>
    </context-param>

Teraz czas na szablon adduser.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:custom="http://ryznar.eu/facelets">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="./css/default.css" rel="stylesheet" type="text/css" />
        <title>Facelets - Szablon</title>
    </head>
    <body>

        <ui:composition template="./template.xhtml">

            <ui:define name="header">
                #{msgs.userCreate}
            </ui:define>

            <ui:define name="content">

                <h:form>
                    <h:messages/>
                        <custom:inputTextLabeled label="#{msgs.userName}" value="#{user.user.username}" required="true" labelStyle="addUserInput" />
                        <br />
                        <custom:inputTextLabeled label="#{msgs.userFirstName}" value="#{user.user.firstName}" labelStyle="addUserInput" />
                        <br />
                        <custom:inputTextLabeled label="#{msgs.userLastName}" value="#{user.user.lastName}" labelStyle="addUserInput" />
                        <br />
                        <custom:inputTextLabeled label="#{msgs.userEmail}" value="#{user.user.email}" required="true" labelStyle="addUserInput" />
                        <br />
                        <custom:secretTextLabeled label="#{msgs.userPwd}" value="#{user.user.password}" required="true" labelStyle="addUserInput" />
                        <br /><br />
                        <h:commandButton
                            action="#{user.saveUser}"
                            value="#{msgs.btnSave}" styleClass="saveButton" />
                </h:form>

            </ui:define>

        </ui:composition>

    </body>
</html>

import własnych komponentów wykonujemy poprzez

linię xmlns:custom="http://ryznar.eu/facelets"

i ostatnia rzecz, nawigacja między stronami, w pliku faces-config.xml dodajemy reguły:

    <navigation-rule>
        <from-view-id>/list.xhtml</from-view-id>
        <navigation-case>
            <from-outcome>create_new_user</from-outcome>
            <to-view-id>/adduser.xhtml</to-view-id>
        </navigation-case>
    </navigation-rule>
    <navigation-rule>
        <from-view-id>/adduser.xhtml</from-view-id>
        <navigation-case>
            <from-outcome>failed</from-outcome>
            <to-view-id>/failed.xhtml</to-view-id>
        </navigation-case>
        <navigation-case>
            <from-outcome>success</from-outcome>
            <to-view-id>/list.xhtml</to-view-id>
        </navigation-case>
    </navigation-rule>

Uruchamiamy aplikację ponownie, lub wywołujemy deploy. Lista użytkowników nie uległa zmianie, więc czas zobaczyć jak działa dodawanie.
Klikamy „Dodaj użytkownika”, powinniśmy zobaczyć taki formularz

Wypełniamy pola, klikamy zapisz i dostajemy taki błąd:

javax.el.PropertyNotFoundException: /WEB-INF/facelets/components/InputTextLabeled.xhtml @7,84 value="#{value}": /adduser.xhtml @25,149 value="#{user.user.username}": Target Unreachable, 'user' returned null

Skąd się to wzięło? Ano zagapiłem się przy tworzeniu ziarna encji zakres ustawiłem na request zamiast session. Czyli przy wysłaniu formularza nie ma żadnego ziarna i stąd błąd. Zmieniamy więc zakres w pliku faces-config.xml i teraz działa, po zapisaniu przechodzimy automatycznie na listę użytkowników.

W tej części to wszystko. Archiwum jest dostępne tutaj. Jeśli ktoś przebrnął przez ten wpis 😉 i dopatrzył się jakiegoś błędu to proszę o informację 🙂 W następnej części dodam jeszcze edycję i walidację.

Kategorie:Facelets, JavaEE 5, JSF Tagi: Facelets, i18n, JSF

JSF i EJB 3 – prosta aplikacja CRUD

30 października 2009 Paweł Ryznar 7 Komentarzy

Tutorial do którego dzisiaj się odniosę to prosta aplikacja webowa wykonana w środowisku Netbeans z wykorzystaniem JSF, EJB 3 oraz bazy danych (autor wykorzystuje PostgreSQL, ja miałem pod ręką MySQL – ale w tym przypadku baza nie robi różnicy).

Tutorial składa się z trzech części: pierwsza druga i trzecia

U mnie problemy zaczęły się w trzeciej części, w drugim kroku „Add fields to the User Entity Bean”
Po dodaniu nowych pól do bazy i klasy aplikacja przestała działać – pojawił sie wyjątek, już nie pamiętam dokładnie co tam pisało 😛 ale jakiś problem z PU i odnalezieniem klasy UserDAOBean.
Jak sobie z tym poradziłem? W części webowej aplikacji, z gałęzi „Libraries” usunąłem JumpStartEjbJsf-ejb.jar i dodałem go jeszcze raz. Czy można inaczej, nie wiem. Jeśli ktoś ma pomysł proszę o podpowiedź.

Ale to nie koniec. Kolejny problem to kroki 3-7. Po dodaniu do gałęzi „Libraries” podanych bibliotek Apache Commons Lang, Apache Commons Validator oraz Jakarta Oro, i próbie dodania użytkownika z błędnym mejlem dostałem taki wyjątek


codjava.lang.NoClassDefFoundError: org/apache/commons/validator/EmailValidator

to samo z lang/StringUtils. Oczywiście wujek Google prawie zawsze pomaga, no i tutaj podpowiada żeby te pliki *jar wrzucić do katalogu /WEB-INF/lib – pomogło.

Jednak walidacja mejla nadal sypie wyjątkami, tym razem


javax.servlet.ServletException: Uncompilable source code.

Problem leży w klasie EmailValidator, nie ma takiej metody jak


htmlInputText.getLabel()

Oczywiście znowu google, przeglądanie API i taki przebłysk, skąd w gałęzi „Libraries” mam MyFaces? Okazuje się że podczas dodawania JSF do projektu z menu „Properties”, w zakładce „Libraries” opcja „Registered Libraries” domyślnie wybrane jest „Facelets 1.1.14 MyFaces”. W związku z tym usunąłem te pliki jar, i z menu kontekstowego „Add Library…” wybrałem JSF 1.2.

Co się okazuje, tu metoda getLabel() jest, i poprzedni problem również znika, tzn można usunąć katalog /lib z WEB-INF i wszystko ładnie działa.

Źródeł nie zamieszczam, w przytoczonym tutorialu źródła są pełne, więc przerabiajac go nic nam nie umknie 🙂
Mam nadzieję że nie ma jakiś strasznych herezji w tym artykule 😉 jeśli są proszę o zwrócenie mi uwagi.

Pozdrawiam

Kategorie:EJB, JavaEE 5, JSF Tagi: CRUD, EJB 3, JSF, Managed Bean, MySQL, NetBeans

	latest tire rebates… o Symfony2: No Metadata Classes…
	What are Antioxidant… o JMS tutorial – krótkie…
	jobs o java seo friendly url (sl…
	affordable web hosti… o Symfony2: No Metadata Classes…
	wordpress facebook o Facelets tutorial – wpro…

Love IT

Archiwum

JSF + Facelets tutorial – ciąg dalszy [część 2]

Facelets tutorial – wprowadzenie – część 1

JSF i EJB 3 – prosta aplikacja CRUD

O mnie

Blogroll

Najnowsze komentarze

Kategorie

Archiwum

Tagi

ostatnie del.icio.us