JSF - Wie formatiere ich meine Globale Nachrichten, in <h:Nachrichten> in einer visuell ansprechenden Art und Weise?

Ich bin nicht allzu vertraut mit der Verwendung der <h:messages> element in JSF. Was ich versuche zu tun ist, verwenden Sie es, um eine Liste der globalen Nachrichten von unterschiedlichem Schweregrad, die generiert werden, durch eine Methode in meiner backing-bean. Damit die Nachrichten in der FacesContext ist nicht zu viel von einem problem, und mein code ist entlang dieser Linien:

FacesMessage message;
FacesContext context = 
    FacesContext.getCurrentInstance();
message = new FacesMessage(
    FacesMessage.SEVERITY_INFO,
    "test message summary 1",
    "test message detail 1");
context.addMessage(null, message);
message = new FacesMessage(
    FacesMessage.SEVERITY_WARN,
    "test message summary 2",
    "test message detail 2");
context.addMessage(null, message);
message = new FacesMessage(
    FacesMessage.SEVERITY_ERROR,
    "test message summary 3",
    "test message detail 3");
context.addMessage(null, message);
//add more messages...

Dass alles Prima funktioniert. Mein problem ist mit versuchen, um den Ausgang des <h:messages> tag gut Aussehen auf der Seite. Hier ist der relevante Teil meiner JSP Datei:

<h:panelGrid border="1" columns="1" id="messagesPanelGrid">
    <h:messages 
        id="messagesOutput"
        showSummary="true"
        showDetail="true" 
        layout="table"
        infoClass="info-message"
        warnClass="warn-message"
        errorClass="error-message"
        fatalClass="fatal-message" 
        globalOnly="true" />
</h:panelGrid>

Diese konsequent sieht aus wie Mist auf der Seite. Ich bin mit einem externen CSS-stylesheet zu definieren styling-Kurse. Ich habe versucht, mit layout="list" aber dann die Liste der Elemente erstrecken sich über die ganze Seite und machen jeden block styling schlecht Aussehen, so wechselte ich zu layout="table". Ich rahmte die <h:messages> innerhalb einer <h:panelGrid> so hätte ich einige block-level-element, das konnte ich anwenden von Stilen auf. Es immer noch nicht besonders schön Aussehen.

Was ich bekommen jetzt:

<table border="1" id="myForm:messagesOutput">
    <tr><td class="error-message"><span>no port name match Could not match reported port name XXXX to a known port for vessel VESSEL A</span></td></tr>
    <tr><td class="error-message"><span>no port name match Could not match reported port name YYYY to a known port for vessel VESSEL B</span></td></tr>
    <tr><td class="error-message"><span>no port name match Could not match reported port name YYYY to a known port for vessel VESSEL C</span></td></tr>
    <tr><td class="error-message"><span>no port name match Could not match reported port name ZZZZ to a known port for vessel VESSEL D</span></td></tr>
    <tr><td class="warn-message"><span>arrival date missing No arrival date provided for vessel VESSEL B</span></td></tr>
</table>

Was ich versuche zu bekommen:

<table border="1" id="myForm:messagesOutput" class="myMessagesTableClass">
    <thead><tr"><td>SUMMARY</td><td>DETAIL</td></tr></thead>
    <tr><td class="error-message-summary"><span>no port name match</span></td><td class="error-message-detail"><span>Could not match reported port name XXXX to a known port for vessel VESSEL A</span></td></tr>
    <tr><td class="error-message-summary"><span>no port name match</span></td><td class="error-message-detail"><span>Could not match reported port name YYYY to a known port for vessel VESSEL B</span></td></tr>
    <tr><td class="error-message-summary"><span>no port name match</span></td><td class="error-message-detail"><span>Could not match reported port name YYYY to a known port for vessel VESSEL C</span></td></tr>
    <tr><td class="error-message-summary"><span>no port name match</span></td><td class="error-message-detail"><span>Could not match reported port name ZZZZ to a known port for vessel VESSEL D</span></td></tr>
    <tr><td class="warn-message-summary"><span>arrival date missing</span></td><td class="warn-message-detail"><span>No arrival date provided for vessel VESSEL B</span></td></tr>
</table>

- Nachrichten sind noch in einer Tabelle, aber die "übersicht" und "detail" sind in separaten Spalten
Generierten Tabelle eine CSS-Klasse direkt zugeordnet
Die "Zusammenfassung" und "Details" werden Teile der Nachricht über separate style-Klassen
SCHÖN ZU HABEN: tabellenkopfzeile

SCREENSHOT:

JSF - Wie formatiere ich meine Globale Nachrichten, in <h:Nachrichten> in einer visuell ansprechenden Art und Weise?

Hat jemand da draußen die Arbeit mit <h:messages> - tags und haben einige Ideen, wie ich diese erreichen können?

Ich bin mir nicht sicher, wenn es darauf ankommt, für diese Frage, aber ich bin mit MyFaces 1.2. Ich kann nicht ein upgrade auf 2.x im moment.

Es ist eine Frage des CSS. Ihre eigentliche problem ist wahrscheinlich einfach schlechte CSS-Fähigkeiten. Ohne zu wissen, wie Sie würde es Aussehen, ist es schwer, eine Antwort zu geben. Poste bitte ein Bild/screenshot, wie es sollte (nicht) Aussehen.
Stimmt, ich bin kein CSS-Experte. Ich werde versuchen, Sie zu verspotten, etwas HTML-Code zu veranschaulichen mein problem und hängen Sie an die Frage. Ich nicht überall, um die Gastgeber einen screenshot.
Sie können Bilder hochladen hier. Klicken Sie auf die Bild-Schaltfläche in der editor-Symbolleiste auf wählen Sie das lokale Bild-Datei.
Getan. Ich habe nie bemerkt, der screenshot upload-button vor.

InformationsquelleAutor Jim Tough | 2010-09-14

7

Nachdem alle, die Sie wollen, ändern Sie die HTML-Ausgabe. Das kann wirklich nicht sein fertig mit CSS. CSS ist mehr zu geben, die vorhandenen HTML-Elemente ein layout, nicht, Sie zu ändern. Abgesehen von hantieren in JavaScript (das ist nicht leicht, in diesem speziellen Fall), die Sie haben möchten, JSF ändern der HTML-Ausgabe. Grundsätzlich gibt es zwei Wege:
1. Liefern Ihre eigene MessagesRenderer so dass es macht Nachrichten, wie Sie wollen. Erweitern Sie die Basis-renderer-Klasse, wie Sie in MyFaces (sorry, da ich nicht verwenden, MyFaces, kann ich nicht sagen von oben auf den Kopf, welche Klasse es ist für MyFaces, müssen Sie konsultieren Sie die API-docs), und registrieren Sie es in faces-config wie folgt:
```
<render-kit>
    <renderer>
        <component-family>javax.faces.Messages</component-family>
        <renderer-type>javax.faces.Messages</renderer-type>
        <renderer-class>com.example.CustomMessagesRenderer</renderer-class>
    </renderer>
</render-kit>
```
  Hier com.example.CustomMessagesRenderer ist also die custom renderer, den Sie implementiert haben. Sie möchten, überschreiben Sie die encodeEnd() - Methode der standard-renderer haben es die HTML-Ausgabe der gewünschten Weise. Das ist zu viel code zu posten hier nur als ein Beispiel, aber gerade auf der Suche im Quellcode der Standard-Nachrichten-renderer geben sollte genügend Hinweise.
2. Sammeln der Nachrichten in einem List<FacesMessage> mit Hilfe von FacesContext#getMessages() und nur zeigen Sie mit Hilfe von c:forEach oder t:dataList - und plain-vanilla-HTML. E. g.
```
public List<FacesMessage> getMessages() {
    List<FacesMessage> messages = new ArrayList<FacesMessage>();
    Iterator<FacesMessage> iter = FacesContext.getCurrentInstance().getMessages();
    while (iter.hasNext()) {
        messages.add(iter.next());
    }
    return messages;
}
```
  mit
```
<table border="1" id="myForm:messagesOutput" class="myMessagesTableClass">
  <thead><tr><td>SUMMARY</td><td>DETAIL</td></tr></thead>
  <tbody>
    <c:forEach items="#{bean.messages}" var="message">
      <c:set var="type" value="#{message.severity == 'SEVERITY_ERROR' ? 'error' : 'warn'}" />
      <tr>
        <td class="#{type}-message-summary"><span>#{message.summary}</span></td>
        <td class="#{type}-message-detail"><span>#{message.detail}</span></td>
      </tr>
    </c:forEach>
  </tbody>
</table>
```
  In JSF2, würden Sie verwendet haben,#{facesContext.messageList}, sondern direkt #{bean.messages}.
Danke. Ich werde einige Zeit brauchen, zu Experimentieren mit dieser.
Du bist herzlich willkommen. Grundsätzlich können Sie die copypaste die ganze Methode aus dem original-Quellcode und änderungen vornehmen, wo nötig. Viel Glück 🙂
Wow. Hervorragende Antwort!
Danke. Bitte beachten Sie, dass diese Antwort zielt auf JSF 1.x. Für JSF-2.x es gibt sauberere Arten.
Tolle Antwort. Aber, um ehrlich zu sein, die Implementierung von JSF zur Anzeige von Zusammenfassungen und details ist Recht unflexibel. Warum würden Sie unterscheiden zwischen den beiden, wenn Sie standardmäßig gedruckt in der gleichen Zeile des Textes? Macht keinen Sinn. Die Nachricht, Komponente haben sollte, etwas zu gelten unterschiedliche Stile zumindest.

InformationsquelleAutor BalusC
2

Als BalusC kommentiert, ist dies eine Sache von CSS. Allerdings habe ich einen praktischen Rat:
- öffnen Sie die Seite
- finden Sie unter "view source"
- kopieren Sie die resultierende Datei und versuchen Sie die Anwendung Ihre css-Fähigkeiten, um den generierten HTML-Code.
- alternativ verwenden Sie FireBug und fügen Sie Stile hinzu, dynamisch und schauen, wie es aussieht.
nun, das ist eine seltsame downvote

InformationsquelleAutor Bozho

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.