Блог

Главная - Вопросы по программированию - Создание нескольких диалоговых окон с примерами в Java

Создание нескольких диалоговых окон с примерами в Java

#primefaces

Вопрос:

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

Я попробовал диалоговую рамку с примерами

 PrimeFaces.current().dialog().showMessageDynamic(new FacesMessage(FacesMessage.SEVERITY_INFO, "Message-1", "message-1"), false);
PrimeFaces.current().dialog().showMessageDynamic(new FacesMessage(FacesMessage.SEVERITY_INFO, "Message-2", "message-2"), false);

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

Я попробовал jQueryUI, который правильно отображает несколько диалоговых окон, но трудно добавить в диалоговое окно стиль шрифтов.

 function showDialog(id, title, content) {
  var dialog = document.createElement("div");
  dialog.id = id;
  dialog.title = title;
  dialog.innerHTML = content;
  document.body.appendChild(dialog);
  $("#"   id).dialog({
    modal: true,
    buttons: {
      Ok: function() {
        $(this).dialog( "close" );
      }
    }
  });
}

$(function() {
  showDialog("dialog-1", "Message-1", "message-1");
  showDialog("dialog-2", "Message-2", "message-2");
});

Есть ли способ использовать диалоговое окно «Начальные шрифты» для отображения различных диалоговых окон или простой способ добавить стиль PF в диалоговое окно jQuery?

Ответ №1:

У меня есть решение моей проблемы.

 <?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   lang="en"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:p="http://primefaces.org/ui">

<h:head>
    <title>HTML message in dialog</title>
</h:head>

<h:body>
    <h:panelGrid>
        <a href="./index.html">back to index</a>
        <h:panelGroup>
            <h:form id="my-form">
                <p:commandButton value="show"
                                 immediate="true"
                                 action="#{showMultipleDialogsBean.show()}" />
            </h:form>
        </h:panelGroup>
    </h:panelGrid>
</h:body>
</html>
 
 
import java.io.Serializable;

import javax.faces.component.html.HtmlOutputText;
import javax.faces.context.FacesContext;
import javax.faces.event.AbortProcessingException;
import javax.faces.event.ActionEvent;
import javax.faces.event.ActionListener;
import javax.faces.view.ViewScoped;
import javax.inject.Named;

import org.primefaces.PrimeFaces;
import org.primefaces.component.commandbutton.CommandButton;
import org.primefaces.component.dialog.Dialog;
import org.primefaces.component.panelgrid.PanelGrid;

@Named
@ViewScoped
public class ShowMultipleDialogsBean implements Serializable {

    public void show() {
        for (int i = 1; i < 4;   i) {
            final HtmlOutputText text = new HtmlOutputText();
            text.setEscape(false);
            text.setValue("<p>Sample <strong>text</strong></p>");

            final PanelGrid grid = new PanelGrid();
            grid.getChildren().add(text);

            final CommandButton ok = new CommandButton();
            ok.addActionListener(new RemoveDialogListener());
            ok.setValue("OK");
            grid.getChildren().add(ok);

            final Dialog dialog = new Dialog();
            dialog.setHeader("Dialog-"   i);
            dialog.getChildren().add(grid);
            dialog.setVisible(true);

            FacesContext.getCurrentInstance()
                    .getViewRoot()
                    .findComponent("my-form")
                    .getChildren()
                    .add(dialog);
            PrimeFaces.current().ajax().update("my-form");
        }
    }

    public static class RemoveDialogListener implements ActionListener {
        @Override
        public void processAction(ActionEvent event) throws AbortProcessingException {
            // button -> panel grid -> dialog
            final Dialog dialog = (Dialog) ((CommandButton) event.getSource()).getParent().getParent();
            dialog.setVisible(false);
            FacesContext.getCurrentInstance()
                    .getViewRoot()
                    .findComponent("my-form")
                    .getChildren()
                    .remove(dialog);
            PrimeFaces.current().ajax().update("my-form");
        }
    }
}

При нажатии на кнопку компонент создаст три диалоговых окна. Я добавил кнопку «ОК», чтобы получить подтверждение от пользователя. При нажатии на созданное диалоговое окно будет удалено из документа.

Метки: