Your SlideShare is downloading. ×
JavaServer Faces - Ein schneller Schnelleinstieg
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

JavaServer Faces - Ein schneller Schnelleinstieg

668
views

Published on

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

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

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
668
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. JavaServer FacesWeb-Entwicklung mit Java Ein schneller Schnelleinstieg
  • 2. Über mich...Tim Brückner31 Jahre (geb. 1981)Softwareentwicklermit Schwerpunkt Javacupofsoftware.dejavamonster.de
  • 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. JavaServer FacesKurz JSF genanntFramework-Standard zur Entwicklung vonwebbasierten BenutzeroberflächenTeil der Java Enterprise Edition SpezifikationEs gibt verschiedene Implementierungen
  • 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. 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. Quelle:http://java.sun.com/javaee/5/docs/tutorial/doc/images/jsfIntro-lifecycle.gifJSF Lifecycle
  • 8. Pics or it didn‘t happen...
  • 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. Was man so braucht...Ein aktuelles Java Development KitNetBeans 7.x JavaEE-Bundle inkl. GlassfishEinen BrowserDas Beispiel-Projekt (liegt auf GitHub)
  • 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. 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. 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. 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. <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. <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. 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. The END?Navigation zwischen AJAX und PushAnwendungsseiten Events und derenValidierung und BehandlungKonvertierung Eigene KomponentenTemplates undComposite Components u.v.m...InternationalisierungJSF-Lifecycle
  • 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