JavaServer Faces - Ein schneller Schnelleinstieg

JavaServer Faces
Web-Entwicklung mit Java
Ein schneller Schnelleinstieg

Über mich...

Tim Brückner

31 Jahre (geb. 1981)

Softwareentwickler
mit Schwerpunkt Java

cupofsoftware.de

javamonster.de

Ziel der Session

Du weißt ungefähr was JSF bedeutet

Du hast eine grobe Ahnung, was man damit
machen kann

Du hast ein paar Anhaltspunkte für eigene
Recherchen

Du hast neue Wörter für‘s Buzzword-Bingo
kennengelernt

JavaServer Faces

Kurz JSF genannt

Framework-Standard zur Entwicklung von
webbasierten Benutzeroberﬂächen

Teil der Java Enterprise Edition Speziﬁkation

Es gibt verschiedene Implementierungen

Wissenswertes

Anwendungslogik wird in Java geschrieben

Die Benutzeroberﬂäche wird als XHTML
deklariert

Elemente der Benutzeroberﬂäche nennt man
in JSF: „Komponenten“

Es gibt Bibliotheken, die JSF um zusätzliche
Komponenten erweitern

Noch mehr
Wissenswertes
JSF-Anwendungen laufen auf einem
Application-Server

JSF dient in erster Linie zum Entwickeln von
Anwendungen die im Browser laufen

Nahezu jede Java-Entwicklungsumgebung
unterstützt JSF (Eclipse, Netbeans, IntelliJ)

Quelle:http://java.sun.com/javaee/5/docs/tutorial/doc/images/jsfIntro-lifecycle.gif

JSF Lifecycle

WebMontag Feedback

Es können mehrere Sessions angelegt werden

Zu jeder Session können Anwender ein
Feedback inkl. Bewertung abgeben

Es wird für jeden Beitrag eine
Gesamtbewertung errechnet

Das Feedback zu jedem Beitrag kann
betrachtet werden

Was man so braucht...

Ein aktuelles Java Development Kit

NetBeans 7.x JavaEE-Bundle inkl. Glassﬁsh

Einen Browser

Das Beispiel-Projekt (liegt auf GitHub)

Aufbau der Anwendung
Die Klassen WebMontagSession und
SessionFeedback bilden das Datenmodell

Die Klasse ApplicationState verwaltet alle
bereits angelegten WebMontagSession-
Instanzen

Die Klasse ApplicationController
implementiert das Anlegen und Löschen von
Sessions, sowie das Hinzufügen von Feedback

Komponenten

<p:dataTable id="sessionTable" value="#{applicationState.sessions}" var="aSession" emptyMessage="Noch keine Sessions vorhanden...">

<p:editor value="#{newSession.description}" controls="bold italic underline" />

<p:rating value="#{newFeedback.rating}" stars="5" cancel="false" />

Expression Language

Dient zum Verdrahten der Oberﬂäche mit
dem Java-Backend

Funktioniert für Werte und Methoden

Beispiel:
<p:commandButton action=“#{bean.methode}“ value=“click“ />
<p:inputText value=“#{bean.wert}“ />

Die Oberﬂäche
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">

<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<title>WebMontag Feedback</title>
</f:facet>
<h:outputStylesheet library="css" name="style.css" />
</h:head>

<h:body>

<div id="applicationFrame">
Beschreibt/Generiert den Rahmen der Seite
<h1>WebMontag Feedback</h1>

<h:form id="sessionForm">
* h:head = Head der Seite
* h:body = Body der Seite
...
* h:outputStylesheet = Link auf CSS
</h:form> * h:form = Formular zum Übertragen von Eingaben
</div>

</h:body>

</f:view>
</html>


<p:dataTable id="sessionTable" value="#{applicationState.sessions}" var="aSession" emptyMessage="Noch keine Sessions
vorhanden...">

<p:column style="width:2%">
<p:rowToggler />
</p:column>
Beschreibt die Tabelle der Anwendung
<p:column headerText="Thema">
<h:outputText value="#{aSession.title}" />
</p:column>
* p:column = Eine Spalte
* p:rowExpansion = Aufklappfunktion der Zeile
<p:column headerText="Beschreibung">
<h:outputText value="#{aSession.description}" escape="false" /> * p:rating = Bewertungs-Komponente
</p:column> * p:commandLink = Link auf eine Methode
<p:column headerText="Redner"> * h:ouputLink = Textausgabe eines Wertes
<h:outputText value="#{aSession.speaker}" />
</p:column>

<p:column headerText="Feedback">
<p:rating value="#{aSession.averageRating}" readonly="true" />
</p:column>

<p:column headerText="Aktionen">
<p:commandLink value="Session entfernen"
action="#{applicationController.deleteSession(aSession)}" update="@form" />
-
<p:commandLink value="Feedback abgeben"
action="#{applicationController.prepareNewFeedback(aSession)}" update="@form" oncomplete="addFeedbackDialog.show();" /
>
</p:column>

<p:rowExpansion>

<p:dataList value="#{aSession.feedbacks}" var="aFeedback" type="none" styleClass="borderless feedbackList">
<p:panelGrid columns="3" styleClass="borderless" columnClasses="rating,author,feedback">
<p:rating value="#{aFeedback.rating}" readonly="true" />
<h:outputText value="#{aFeedback.author}" />
<h:outputText value="#{aFeedback.feedback}" escape="true" />
</p:panelGrid>
</p:dataList>

</p:rowExpansion>

</p:dataTable>

...

...

<div id="actions" style="margin-top: 10px;">
<p:commandButton value="Session hinzufügen" onclick="newSessionDialog.show();" style="float:right;"/>
</div>


<p:dialog id="newSessionDialog" widgetVar="newSessionDialog" header="Neue Session hinzufügen" modal="true" dynamic="true">

<p:panelGrid columns="2" styleClass="borderless">
<h:outputText value="Titel" />
<p:inputText value="#{newSession.title}" />

<h:outputText value="Beschreibung" />
<p:editor value="#{newSession.description}" controls="bold italic underline" />

<h:outputText value="Redner" />
<p:inputText value="#{newSession.speaker}" />
</p:panelGrid>

<f:facet name="footer">
<p:commandButton value="hinzufügen" action="#{applicationController.addSession}" update="@form" process="@form" />
<p:commandButton value="abbrechen" ajax="false" />
</f:facet>
</p:dialog>
Dialoge wurden unterhalb der Tabelle deklariert.
...

</h:form> p:dialog = Dialogfenster zum Anlegen von Sessions
p:panelGrid = Generiert ein Tabellen-Layout
p:editor = Rich-Text-Editor-Komponente
p:commandButton = Schalter auf eine Methode
f:facet = Facette einer Komponenten - z.B. Footer

Die Server-Seite
@SessionScoped
@Named
public class ApplicationController implements Serializable {

@Inject
ApplicationState applicationState;

private WebMondaySession sessionToCreate = new WebMondaySession();
private WebMondaySession sessionToCreateFeedbackFor = null;
private SessionFeedback feedbackToCreate = new SessionFeedback();

public void addSession() {
this.applicationState.getSessions().add(this.sessionToCreate);
this.sessionToCreate = new WebMondaySession();
}

public void deleteSession(WebMondaySession session) {

final List<WebMondaySession> sessions = this.applicationState.getSessions();

if (sessions.contains(session)) {
sessions.remove(session);
} Ver waltet die WebMontagSessions
}

public void prepareNewFeedback(WebMondaySession session) {
this.sessionToCreateFeedbackFor = session;
* Anlegen und Löschen von Sessions
} * Hinzufügen von neuem Feedback
...
Scopes -> Lebensdauer von Daten
}

ApplicationScope = Dauer der Anwendung
SessionScope = Dauer der Session
RequestScope = Dauer des Requests

The END?
Navigation zwischen AJAX und Push
Anwendungsseiten
Events und deren
Validierung und Behandlung
Konvertierung
Eigene Komponenten
Templates und
Composite Components u.v.m...

Internationalisierung

JSF-Lifecycle

Wie wo was...?
Java JDK:
http://www.oracle.com/technetwork/java/javase/downloads/index.html

NetBeans und Glassﬁsh (Entwicklungsumgebung und Server):
http://netbeans.org

PrimeFaces (die Komponenten-Bibliothek):
http://www.primefaces.org

Beispielprojekt auf GitHub:
https://github.com/timbrueckner/webmonday_feedback

Ofﬁzielle JSF-Seite von Oracle:
http://www.oracle.com/technetwork/java/javaee/
javaserverfaces-139869.html

JavaServer Faces - Ein schneller Schnelleinstieg

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie JavaServer Faces - Ein schneller Schnelleinstieg

Ähnlich wie JavaServer Faces - Ein schneller Schnelleinstieg (20)

JavaServer Faces - Ein schneller Schnelleinstieg