Ui:повторить добавление нового элемента, не работающего в первом элементе

В настоящее время я пытаюсь сделать простой список входных данных с добавлением/удалением простых лиц p:commandButton.

Я использую ПраймФейс 6.2 на Стеклянная рыба 4.1.1 с Мохарра 2.2.12.

ПримерBean.java

package /* myPackage */;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import javafx.util.Pair;
import javax.annotation.PostConstruct;
import javax.enterprise.context.SessionScoped;
import javax.inject.Named;

@Named(value = "exampleBean")
@SessionScoped
public class ExampleBean implements Serializable {

    private List<Pair<Integer, Integer>> list;

    @PostConstruct
    public void init() {
        list = new ArrayList<>();
        addNewItem();
    }

    public void addNewItem() {
        list.add(new Pair<>(1, 300));
    }

    public List<Pair<Integer, Integer>> getList() {
        return list;
    }

    public void setList(List<Pair<Integer, Integer>> list) {
        this.list = list;
    }
}

пример.xhtml

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
      xmlns:h = "http://java.sun.com/jsf/html" 
      xmlns:ui = "http://java.sun.com/jsf/facelets" 
      xmlns:p = "http://primefaces.org/ui" 
      xmlns:jsf = "http://xmlns.jcp.org/jsf">

    <h:head>
        <title>Example</title>
        <meta charset = "utf-8" />
    </h:head>

    <h:body>
        <h:form id = "example-form">
            <div jsf:id = "example-container">
                <ui:repeat value = "#{exampleBean.list}" var = "item" varStatus = "status">
                    <div>
                        <p:inputText value = "#{item.key}" />
                        <p:inputText value = "#{item.value}" />

                        <p:commandButton 
                            value = "Delete" 
                            actionListener = "#{exampleBean.list.remove(item)}" 
                            process = "@this" 
                            update = "example-form:example-container" 
                            rendered = "#{!status.first}" />

                        <p:commandButton 
                            value = "Add" 
                            actionListener = "#{exampleBean.addNewItem()}" 
                            process = "@this" 
                            update = "example-form:example-container" 
                            rendered = "#{status.first}" />
                    </div>

                </ui:repeat>
            </div>
        </h:form>
    </h:body>
</html>

С атрибутом rendered каждого из моих p:commandButton я хочу отображать кнопку добавления только для первого элемента и кнопку удаления для всех элементов, кроме первого (что делает его неудаляемым).

Моя проблема в том, что использование rendered = "#{status.first}" на кнопка добавления приводит к тому, что все это не работает.

<p:commandButton ... rendered = "#{status.last}" /> <!-- actionListener called -->

<p:commandButton ... rendered = "#{true}" /> <!-- actionListener called -->

<p:commandButton ... rendered = "#{status.first}" /> <!-- actionListener NOT called -->

С rendered = "#{status.first}" нажатие кнопки не вызывает actionListener, а вызывает update.

Я понятия не имею, что может измениться при отображении его в первом элементе, а не в других или в последнем.

То есть, если вы не используете атрибут «рендеринг», все кнопки будут работать? Даже если вы начнете, например, с. 10 записей в списке? Поскольку вы «нарушаете» № 1 и № 8 из stackoverflow.com/questions/2118656/…, и вы можете нарушить № 6 в зависимости от правильной или неправильной области сеанса.

Kukeltje 19.02.2019 20:03

@Kukeltje Я хотел сделать пример простым, и я забыл поставить тег <h:form> и <ui:composition, поскольку мое представление находится в шаблоне, поэтому тег <h:head> находится в шаблоне. Извините за это, я обновил его.

robinvrd 20.02.2019 09:19

Код должен быть минимальный воспроизводимый пример... Попробуйте без шаблона/композиции и разместите h:head в этом файле. Есть причины для использования создания минимальный воспроизводимый пример: помочь вам сузить проблему (или, возможно, даже решить ее) и предоставить код, чтобы у нас была четкая и явная основа для оказания помощи. См. также stackoverflow.com/tags/jsf/info

Kukeltje 20.02.2019 12:04

@Kukeltje Извините за это, я воспроизвел свою ошибку с нуля и обновил код файлов. Я также добавил свою версию и реализацию JSF.

robinvrd 20.02.2019 12:29

Хорошо, я попробую сегодня позже, чтобы увидеть, смогу ли я объяснить вещи. Спасибо, что сделали это настоящим минимальный воспроизводимый пример. Очень полезно

Kukeltje 20.02.2019 12:42

@Kukeltje Ты нашел время попробовать?

robinvrd 21.02.2019 09:09

Извините, нет, из-за болезни я не прикасался к своему ноутбуку. на выходных попробую

Kukeltje 22.02.2019 10:00
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
3
7
1 093
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я думаю, что это связано с флагом <ui:repeat> и генерацией уникальных идентификаторов для командных кнопок. Вид, наверное, путается. Сгенерированный ID меняется при добавлении дополнительных кнопок. Кроме того, введение атрибута rendered также меняет способ обработки компонента.

Поэтому, чтобы решить эту проблему, я думаю, вам нужно повторно обработать компонент ui:repeat и кнопки команд, чтобы получить действительные URL-адреса действий. Решение простое - удалить process = "@this".

Я изменил ваш пример с помощью рабочего решения (в примере используется Lombok);

@Data @Named @ViewScoped
public class ExampleBean implements Serializable {

    private List<IntegerPair> list;

    @PostConstruct
    private void init() {
        list = new ArrayList<>();
        addNewItem();
    }

    public void addNewItem() {
        list.add(new IntegerPair(1, 300));
    }

    @Data
    @AllArgsConstructor
    public class IntegerPair {
        private int key, value;
    }
}
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" xmlns:h = "http://java.sun.com/jsf/html" 
      xmlns:ui = "http://java.sun.com/jsf/facelets"  xmlns:p = "http://primefaces.org/ui" 
      xmlns:jsf = "http://xmlns.jcp.org/jsf">

    <h:head>
        <title>Example</title>
        <meta charset = "utf-8" />
    </h:head>

    <h:body>
        Test!
        <h:form id = "example-form">
            <div jsf:id = "example-container">
                <ui:repeat value = "#{exampleBean.list}" var = "item" varStatus = "status">
                    <div>
                        <p:inputText value = "#{item.key}" />
                        <p:inputText value = "#{item.value}" />

                        <p:commandButton 
                            value = "Delete" 
                            actionListener = "#{exampleBean.list.remove(item)}" 
                            update = "example-form:example-container" 
                            rendered = "#{!status.first}" />

                        <p:commandButton 
                            value = "Add" 
                            actionListener = "#{exampleBean.addNewItem}" 
                            update = "example-form:example-container" 
                            rendered = "#{status.first}" />
                    </div>

                </ui:repeat>
            </div>
        </h:form>
    </h:body>
</html>

Обратите внимание на класс IntegerPair? Мне пришлось ввести это, потому что класс Pair<>, определенный в JavaFX, не имеет свойства ключа с возможностью записи — свойства с возможностью записи требуются JSF, когда он обрабатывает значение вспомогательного компонента входных компонентов.

Честно говоря, поскольку проблема, с которой вы столкнулись, связана с компонентом/тегом <ui:repeat>, выполнение process = "example-form:example-container" на ваших командных кнопках также должно работать нормально — просто убедитесь, что <ui:repeat> включен в этап обработки.

Спасибо Адам! 2 ответа подряд, ты меня спас! Кстати, я не знал Ломбока, хорошо ли он известен/используется в разработке JEE? Это выглядит очень просто и намного понятнее, чтобы создавать классы с ним.

robinvrd 27.02.2019 12:15

Рад помочь @robinvrd! Да, Lombok популярен не только в JEE-разработке, но и во многих Java-проектах в целом, поскольку он сокращает шаблонный код, добавляет отличные функциональные возможности и очень хорошо очищает классы. Лично я всегда использую его в новых Java-проектах.

Adam Waldenberg 27.02.2019 17:54

Другие вопросы по теме