VPF::JSF cust. component передать данные в Backing Bean

devalentino

Дата 21.5.2012, 19:44 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 8
Регистрация: 25.11.2008

Репутация: нет
Всего: нет

Добрый день.

Я написал свою библиотеку компонентов JSF для моего проекта, и теперь мне нужно написать "компонент ввода". В HTML это выглядит как несколько input type="hidden". Проблема в том, что я не знаю, как связать value input-а со свойством backing bean-а (тоесть чтобы соответствующее свойство приняло значенте инпута).

Буду рад любой полезной информации. Заранее спасибо.

korob2001

Дата 22.5.2012, 02:34 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Комодератор
Сообщений: 2871
Регистрация: 29.12.2002

Репутация: нет
Всего: 61

Добрый вечер!

Если честно не совсем понятно. Какую версию JSF вы использовали при написании своих компонентов?
Вот небольшой пример компонента входа в систему с использованием составной композиции JSF2.0 + Facelets. В нём хоть и нет скрытых полей, но зато есть обычные инпуты, которые легко можно заменить скрытыми.

1. Создаю компонент /resources/myui/login.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:h="http://java.sun.com/jsf/html"
      xmlns:cc="http://java.sun.com/jsf/composite"
      xmlns:f="http://java.sun.com/jsf/core">

    <!-- INTERFACE -->
    <cc:interface>
        <cc:attribute name="title"/>
        <cc:attribute name="usernameLabel"/>
        <cc:attribute name="usernameValue"/>
        <cc:attribute name="passwordLabel"/>
        <cc:attribute name="passwordValue"/>
        <cc:attribute name="buttonLabel"/>
        <cc:attribute name="action" method-signature="java.lang.String doLogin()"/>
    </cc:interface>

    <!-- IMPLEMENTATION -->
    <cc:implementation>
        <h:form>
            <h:panelGrid columns="2">
                <f:facet name="header">
                    <h:outputText id="lblTitle" value="#{cc.attrs.title}" style="font-size: 1.1em"/>
                </f:facet>
                <h:outputLabel id="lblUsername" value="#{cc.attrs.usernameLabel}"/>
                <h:inputText id="txtUsername" value="#{cc.attrs.usernameValue}"/>
                <h:outputLabel id="lblPassword" value="#{cc.attrs.passwordLabel}"/>
                <h:inputSecret id="txtPassword" value="#{cc.attrs.passwordValue}"/>
            </h:panelGrid>
            <h:commandButton id="btnLogin" value="#{cc.attrs.buttonLabel}" action="#{cc.attrs.action}"/>
        </h:form>
    </cc:implementation>
</html>

В разделе  указываю, какие параметры будет принимать компонент, в моём случае мне необходимо будет, что бы пользователь указал заголовок формы, необходимые метки, а так же значения полей ввода. В разделе  думаю всё понятно, создаю форму входа в систему, где связываю каждый компонент с соответствующим параметром из раздела . Кстати параметры можно указать с атрибутом required="true", если нужно обязать пользователя заполнить его.

Так как пример демонстрационный, не стал создавать отдельную страницу login, использую ту, которая была создана по умолчанию /index.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:h="http://java.sun.com/jsf/html"
      xmlns:my="http://java.sun.com/jsf/composite/myui">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <my:login title="#{msg['my.form.login.title']}"
                  usernameLabel="#{msg['my.form.login.usernameLabel']}:"
                  usernameValue="#{loginBean.username}"
                  passwordLabel="#{msg['my.form.login.passwordLabel']}:"
                  passwordValue="#{loginBean.password}"
                  buttonLabel="#{msg['my.form.login.buttonLabel']}"
                  action="#{loginBean.doLogin}"/>
    </h:body>
</html>

Здесь думаю тоже всё понятно, единственное на что нужно обратить внимание, на определение пространства имён xmlns:my="http://java.sun.com/jsf/composite/myui", т.е. буду использовать мои компоненты. Далее я через него обращаюсь к тому компоненту, который создавал выше, а так же указываю все необходимые параметры.

Здесь я использовал локализацию для вывода меток, для чего создал пакет my.test.messages и внего положил три файла:
msg.properties

Код


# To change this template, choose Tools | Templates
# and open the template in the editor.

my.form.login.title=Log in
my.form.login.usernameLabel=User name
my.form.login.passwordLabel=Password
my.form.login.buttonLabel=Login

my.profile.hello=Hello, {0}!
my.profile.yourpassword=Your password is: {0}

msg_ru.properties

Код


# To change this template, choose Tools | Templates
# and open the template in the editor.

my.form.login.title=Вход в систему
my.form.login.usernameLabel=Имя пользователя
my.form.login.passwordLabel=Пароль
my.form.login.buttonLabel=Вход

my.profile.hello=Привет, {0}!
my.profile.yourpassword=Ваш пароль: {0}

msg_nl.properties

Код


# To change this template, choose Tools | Templates
# and open the template in the editor.

my.form.login.title=Inloggen
my.form.login.usernameLabel=Gebruikersnaam
my.form.login.passwordLabel=Wachtwoord
my.form.login.buttonLabel=Aanmelden

my.profile.hello=Hallo, {0}!
my.profile.yourpassword=Uw wachtwoord is: {0}

Добавлил к проекту /WEB-INF/faces-config.xml и в него прописал, добавленные выше, ресурсы:

Код


<?xml version='1.0' encoding='UTF-8'?>

<!-- =========== FULL CONFIGURATION FILE ================================== -->

<faces-config version="2.0"
    xmlns="http://java.sun.com/xml/ns/javaee" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd">

    <application>
        <locale-config>
            <default-locale>en</default-locale>
            <supported-locale>ru</supported-locale>
            <supported-locale>nl</supported-locale>
        </locale-config>
        <resource-bundle>
            <base-name>my.test.messages.msg</base-name>
            <var>msg</var>
        </resource-bundle>
    </application>
</faces-config>

Добавил управляемый бин LoginBean в пакет my.test.beans

Код


/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package my.test.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

/**
 *
 * @author Denys
 */
@ManagedBean
@RequestScoped
public class LoginBean {
    private static final String defUsername = "Vasya";
    private static final String defPassword = "pupkin";
    private String username;
    private String password;
    /**
     * Creates a new instance of LoginBean
     */
    public LoginBean() {
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }
    
    public String doLogin() {
        // Здесь сравниваю со статическими данными, только для теста
        if (defUsername.equals(username) && defPassword.equals(password)) {
            return "/profile.xhtml";
        } else {
            return null;
        }
    }
}

Для простоты я задал в нём статические поля с именем пользователя и пароля, но это легко можно поправить. Если посмотреть на метод doLogin(), то можно увидеть, что он будет отправлять пользователя на страницу /profile.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:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <h1>
            <h:outputFormat value="#{msg['my.profile.hello']}">
                <f:param value="#{loginBean.username}"/>
            </h:outputFormat>
        </h1>
        <h:outputFormat style="font-size: 14px" value="#{msg['my.profile.yourpassword']}">
            <f:param value="#{loginBean.password}"/>
        </h:outputFormat>
    </h:body>
</html>

Здесь просто отображается приветствие и текущий пароль пользователя, с которым он вошёл в систему.

Это сообщение отредактировал(а) korob2001 - 22.5.2012, 02:38

--------------------

"Время проходит", - привыкли говорить вы по неверному пониманию.
"Время стоит - проходите вы".

devalentino

Дата 22.5.2012, 11:03 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 8
Регистрация: 25.11.2008

Репутация: нет
Всего: нет

Похоже я не совсем ясно выразился.

Использую JSF 2.0. У меня есть компонент:

Код


package net.monopolyclub.components.component;

import javax.faces.component.FacesComponent;
import javax.faces.component.UIComponentBase;
import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;

import net.monopolyclub.components.component.utils.CssManager;
import net.monopolyclub.components.component.utils.DefaultCssManager;

import java.io.IOException;
import net.monopolyclub.components.component.utils.CssClassNotFoundException;

@FacesComponent(value = "Tab")
public class Tab extends UIComponentBase
{
    private String id;
    private String icon;
    private String firstLine;
    private String secondLine;

    private Boolean receivePropsFromTags;

    private CssManager cssManager;
    private FacesContext context;

    public Tab ()
    {
        this.receivePropsFromTags = true;
        this.cssManager = new DefaultCssManager();
    }

    public String getIcon ()
    {
        return this.icon;
    }

    public void setIcon (String icon)
    {
        this.icon = icon;
    }

    public String getFirstLine ()
    {
        return this.firstLine;
    }

    public void setFirstLine (String firstLine)
    {
        this.firstLine = firstLine;
    }

    public String getSecondLine ()
    {
        return this.secondLine;
    }

    public void setSecondLine (String secondLine)
    {
        this.secondLine = secondLine;
    }

    public Boolean getReceivePropsFromTags ()
    {
        return this.receivePropsFromTags;
    }

    public void setReceivePropsFromTags (Boolean receivePropsFromTags)
    {
        this.receivePropsFromTags = receivePropsFromTags;
    }
    
    public Boolean isReceivePropsFromTags ()
    {
        return this.receivePropsFromTags;
    }

    @Override
    public String getFamily ()
    {
        return null;
    }

    private void encodeIconImg () throws IOException
    {
        ResponseWriter writer = context.getResponseWriter();
        writer.startElement("img", this);
        writer.writeAttribute("class", cssManager.getClass("chatTabIcon"), null);
        writer.writeAttribute("src", icon, null);
        writer.endElement("img");
    }

    private void encodeFirstLineParagraph () throws IOException
    {
        ResponseWriter writer = context.getResponseWriter();
        writer.startElement("p", this);
        writer.writeAttribute("class", cssManager.getClass("chatTabFirstLine"), null);
        writer.writeText(firstLine, null);
        writer.endElement("p");
    }
    
    private void encodeSecondLineParagraph () throws IOException
    {
        ResponseWriter writer = context.getResponseWriter();
        writer.startElement("p", this);
        writer.writeAttribute("class", cssManager.getClass("chatTabSecondLine"), null);
        writer.writeText(secondLine, null);
        writer.endElement("p");
    }

    private void encodeTab () throws IOException
    {
        ResponseWriter writer = context.getResponseWriter();
        writer.startElement("div", this);
        writer.writeAttribute("class",  cssManager.getClass("chatTab"), null);

        encodeIconImg();
        encodeFirstLineParagraph();
        encodeSecondLineParagraph();

        writer.endElement("div");
    }

    @Override
    public void encodeAll (FacesContext context) throws IOException
    {
        this.context = context;

        if (receivePropsFromTags)
        {
            receiveDataFromHtmlAttributes();
        }

        encodeTab();
    }

    private void receiveDataFromHtmlAttributes ()
    {
        this.id = (String) this.getAttributes().get("id");
        this.firstLine = (String) this.getAttributes().get("firstLine");
        this.icon = (String) this.getAttributes().get("icon");
        this.secondLine = (String) this.getAttributes().get("secondLine");
    }
}

он выводит вот такой HTML код:

Код


<div class="chat-tab">
    <img src="./resources/images/default.png" class="chat-tab-icon"/>
    <p class="chat-tab-name">opera</p>
    <p class="chat-tab-money">1000000</p>
</div>

Мне нужно добавить hidden поле, которое будет хранить id и ссылку, которая сделает submit формы, и дернет метод бина. Чтобы компонент связывал value hidden-а с myBacking.userId и формировал ссылку, которая нужный метод дернет:

Код


<m:tab firstLine="opera" icon="./resources/images/default.png" secondLine="1000000" userId="#{myBacking.userId}" action="#{myBacking.action()}" />

Это сообщение отредактировал(а) devalentino - 22.5.2012, 11:25

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Java EE (J2EE) и Spring \| Следующая тема »