Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaServer Faces - Ein schneller Schnelleinstieg

908 views

Published on

Mein 20-Minuten-Beitrag zum vierten Marburger WebMontag. Thema: WebEntwicklung im Java-Umfeld mit JavaServer Faces.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

JavaServer Faces - Ein schneller Schnelleinstieg

  1. 1. JavaServer FacesWeb-Entwicklung mit Java Ein schneller Schnelleinstieg
  2. 2. Über mich...Tim Brückner31 Jahre (geb. 1981)Softwareentwicklermit Schwerpunkt Javacupofsoftware.dejavamonster.de
  3. 3. Ziel der SessionDu weißt ungefähr was JSF bedeutetDu hast eine grobe Ahnung, was man damitmachen kannDu hast ein paar Anhaltspunkte für eigeneRecherchenDu hast neue Wörter für‘s Buzzword-Bingokennengelernt
  4. 4. JavaServer FacesKurz JSF genanntFramework-Standard zur Entwicklung vonwebbasierten BenutzeroberflächenTeil der Java Enterprise Edition SpezifikationEs gibt verschiedene Implementierungen
  5. 5. WissenswertesAnwendungslogik wird in Java geschriebenDie Benutzeroberfläche wird als XHTMLdeklariertElemente der Benutzeroberfläche nennt manin JSF: „Komponenten“Es gibt Bibliotheken, die JSF um zusätzlicheKomponenten erweitern
  6. 6. Noch mehr WissenswertesJSF-Anwendungen laufen auf einemApplication-ServerJSF dient in erster Linie zum Entwickeln vonAnwendungen die im Browser laufenNahezu jede Java-Entwicklungsumgebungunterstützt JSF (Eclipse, Netbeans, IntelliJ)
  7. 7. Quelle:http://java.sun.com/javaee/5/docs/tutorial/doc/images/jsfIntro-lifecycle.gifJSF Lifecycle
  8. 8. Pics or it didn‘t happen...
  9. 9. WebMontag FeedbackEs können mehrere Sessions angelegt werdenZu jeder Session können Anwender einFeedback inkl. Bewertung abgebenEs wird für jeden Beitrag eineGesamtbewertung errechnetDas Feedback zu jedem Beitrag kannbetrachtet werden
  10. 10. Was man so braucht...Ein aktuelles Java Development KitNetBeans 7.x JavaEE-Bundle inkl. GlassfishEinen BrowserDas Beispiel-Projekt (liegt auf GitHub)
  11. 11. 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
  12. 12. 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" />
  13. 13. Expression Language Dient zum Verdrahten der Oberfläche mit dem Java-Backend Funktioniert für Werte und MethodenBeispiel:<p:commandButton action=“#{bean.methode}“ value=“click“ /><p:inputText value=“#{bean.wert}“ />
  14. 14. Die Oberflä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>
  15. 15. <h:form id="sessionForm"> <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> ...
  16. 16. <h:form id="sessionForm"> ... <div id="actions" style="margin-top: 10px;"> <p:commandButton value="Session hinzufügen" onclick="newSessionDialog.show();" style="float:right;"/> </div> <!-- Dialoge zum Anlegen von Sessions und Feedback --> <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
  17. 17. Die Server-Seite@SessionScoped@Namedpublic 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
  18. 18. The END?Navigation zwischen AJAX und PushAnwendungsseiten Events und derenValidierung und BehandlungKonvertierung Eigene KomponentenTemplates undComposite Components u.v.m...InternationalisierungJSF-Lifecycle
  19. 19. Wie wo was...?Java JDK:http://www.oracle.com/technetwork/java/javase/downloads/index.htmlNetBeans und Glassfish (Entwicklungsumgebung und Server):http://netbeans.orgPrimeFaces (die Komponenten-Bibliothek):http://www.primefaces.orgBeispielprojekt auf GitHub:https://github.com/timbrueckner/webmonday_feedbackOffizielle JSF-Seite von Oracle:http://www.oracle.com/technetwork/java/javaee/javaserverfaces-139869.html

×