In Sammlung (en) In der gespeicherten
  1. Ingenieurwissenschaft
  2. Informatik
  3. Java (Programmiersprache)

vierseitig

Werbung 
Entwicklung eigener Komponenten
Komponente (1/4) - Schnittstelle glossar.xhtml
<?xml
<?xml version='1.0' encoding='UTFencoding='UTF-8' ?>
<!DOCTYPE html PUBLIC ""-//W3C//DTD XHTML 1.0
Transitional//EN"
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:composite="http://java.sun.com/jsf/composite">
xmlns:composite="http://java.sun.com/jsf/composite">
• Möglichkeit Komponenten basierend auf anderen
Komponenten in XHTML zu realisieren
• konfigurierbar über Interface (hier nur Mini-Beispiel)
• vor eigener Entwicklung nachdenken:
– Realisierung mit Templates oder/und include genauso
gut?
– gibt es gewünschte Komponente schon? (z. B.
nachschauen unter http://jsfcentral.com/)
– Reichen nicht Validatoren, Konvertierer und evtl.
PhaseListener aus?
• Hinweis: Netbeans 8 zeigt ggfls. Fehler, wo keine sind
Komponentenbasierte SoftwareEntwicklung
Prof. Dr.
Stephan Kleuker
<!-<!-- INTERFACE -->
-->
<composite:interface>
composite:interface>
<composite:attribute name="schlagwort"
name="schlagwort" required="true"/>
required="true"/>
<composite:attribute name="detail"
name="detail" required="true"/>
required="true"/>
</composite:interface
</composite:interface>
composite:interface>
356
Komponente (2/4) - Implementierung
Prof. Dr.
Stephan Kleuker
Prof. Dr.
Stephan Kleuker
357
Komponente (3/4) - Beispielnutzung index.xhtml
<?xml
<?xml version='1.0' encoding='UTFencoding='UTF-8' ?>
<!DOCTYPE html PUBLIC ""-//W3C//DTD XHTML 1.0
Transitional//EN"
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:bsp="http://java.sun.com/jsf/composite/beispiel">
xmlns:bsp="http://java.sun.com/jsf/composite/beispiel">
<h:head>
h:head> <title>Glossar</title
<title>Glossar</title>
title>Glossar</title> </h:head
</h:head>
h:head>
<h:body>
h:body>
<bsp:glossar schlagwort="Adam"
schlagwort="Adam"
detail="der,
detail="der, wo nich allein sein konnte"/>
<bsp:glossar schlagwort="Eva"
schlagwort="Eva"
detail="die,
detail="die, wo den Apfel nich lassen konnte">
Wo ist Missing Link?
</bsp:glossar
</bsp:glossar>
bsp:glossar>
</h:body
</h:body>
h:body>
</html
</html>
html>
<!-<!-- IMPLEMENTATION -->
-->
<composite:implementation>
composite:implementation>
<h:panelGrid columns="2" rules="cols"
rules="cols" frame="box">
frame="box">
<h:outputLabel value="#{cc.attrs.schlagwort}"/>
value="#{cc.attrs.schlagwort}"/>
<h:panelGroup>
h:panelGroup>
<p>
<h:outputText value="#{cc.attrs.detail}"/>
value="#{cc.attrs.detail}"/>
</p>
<composite:insertChildren/>
composite:insertChildren/>
</h:panelGroup
</h:panelGroup>
h:panelGroup>
</h:panelGrid
</h:panelGrid>
h:panelGrid>
</composite:implementation
</composite:implementation>
composite:implementation>
</html
</html>
html>
Komponentenbasierte SoftwareEntwicklung
Komponentenbasierte SoftwareEntwicklung
358
Komponentenbasierte SoftwareEntwicklung
Prof. Dr.
Stephan Kleuker
359
Komponente (4/4) - Ausgabe, Projektstruktur
Ausblick: Komponentenmöglichkeiten
• Im Interface wesentlich mehr als nur einfache Parameter
(Attribute) definierbar
• Attribute können Verknüpfungen zu Action-Methoden bzw.
Event-Listenern enthalten
methodmethod-signature="java.lang.string f()"
• Übergabe weiterer Funktionalität (Methoden) an
Komponente möglich für Event-Listener, Konvertierer und
Validatoren
<composite:actionSource>
composite:actionSource>
<composite:valueHolder>
composite:valueHolder>
<composite:editableValueHolder>
composite:editableValueHolder>
Ordner muss so heißen
• Funktionalität kann dann bei inneren Komponenten der
Composite-Komponente genutzt werden
Komponentenbasierte SoftwareEntwicklung
Prof. Dr.
Stephan Kleuker
360
Nutzung von Ajax
Komponentenbasierte SoftwareEntwicklung
Prof. Dr.
Stephan Kleuker
361
Ajax-Beispiel (1/3) - Bean
• Ajax = Asynchronous JavaScript and XML(HTTPRequest)
– klassische Webapplikation:
• Nutzer macht Eingaben
• Nutzer beendet Eingabe (Knopf, Link, <Return>-Taste)
• Informationen an Server, der wertet aus
• neu berechnete Seite wird Nutzer zur Verfügung
gestellt
• interaktive Applikation (Jesse James Garret, 2004)
– Nutzer macht Eingaben
– Eingaben führen auch während der Eingabe zu Reaktionen
– Informationen werden zwischenzeitlich auf Server
ausgewertet
– berechnete Teilergebnisse werden in aktuelle Seite
eingeblendet
@ManagedBean(name="user")
ManagedBean(name="user")
@SessionScoped
public class Nutzer {
Komponentenbasierte SoftwareEntwicklung
Komponentenbasierte SoftwareEntwicklung
Prof. Dr.
Stephan Kleuker
362
private String name = "";
public String getName()
getName() {
return name;
name;
}
public void setName(String name)
name) {
this.name = name;
name;
}
}
Prof. Dr.
Stephan Kleuker
363
Ajax-Beispiel (2/3) - index.xhtml mit f:ajax
Ajax-Beispiel (3/3) - Ausgabe
<h:form>
h:form>
<h:outputText value="Your name:
name: " />
<h:inputText id="in"
id="in" value="#{user.name}"
value="#{user.name}" >
<f:ajax render="greeting"
render="greeting" event="keyup"/>
event="keyup"/>
<f:validateLength minimum="1" maximum="10" />
</h:inputText
</h:inputText>
h:inputText>
<h:message for="in"/>
for="in"/>
<br/>
br/>
<h:panelGroup id="greeting"
id="greeting" >
<h:outputText value="Hello,
value="Hello, "
rendered="#{not empty user.name}"
user.name}" />
<h:outputText value="x " rendered="#{empty user.name}"
user.name}" />
<h:outputText value="#{user.name}"
value="#{user.name}" />
<h:outputText value="!"
value="!" rendered="#{not empty user.name}"/>
user.name}"/>
</h:panelGroup
</h:panelGroup>
h:panelGroup>
</h:form
</h:form>
h:form>
Komponentenbasierte SoftwareEntwicklung
Prof. Dr.
Stephan Kleuker
364
Granulare Nutzung von f:ajax
• render: IDs der Komponenten, die neu gerendert werden
sollen (auch @this = dieses Element, @form = umgebende
Form, @all = alle Elemente, @none = kein Element)
• execute: IDs der Komponmenten, die vollständig JSFLebenszyklus durchlaufen sollen (auch ... s. o.)
Prof. Dr.
Stephan Kleuker
• Nutzer tippt, dann unmittelbare Aktion
• (so) keine direkte Validierung
• Nutzer drückt Return-Taste
Komponentenbasierte SoftwareEntwicklung
Prof. Dr.
Stephan Kleuker
365
Interaktionsspielerei (1/3) - index.xhtml
• f:ajax kann um Komponenten gelegt werden
• f:ajax kann in Komponenten ergänzt werden (z. B.
h:commandButton)
• f:ajax kann in und um Komponenten genutzt werden, dann
ist Effekt die Summe aller spezifizierten Effekte
• Mehrere f:ajax-Einträge für eine Komponente ergänzen
sich generell
Komponentenbasierte SoftwareEntwicklung
• Start
366
<h:form>
h:form>
<h:outputLabel id="be"
id="be" value="#{control.beruehrt}">
value="#{control.beruehrt}">
<f:ajax event="mouseover"
event="mouseover" render="be pg"
pg"
listener="#{control.drueber}"/>
listener="#{control.drueber}"/>
<f:ajax event="mouseout"
event="mouseout" render="be pg"
pg"
listener="#{control.weg}"/>
listener="#{control.weg}"/>
</h:outputLabel
</h:outputLabel>
h:outputLabel>
<h:panelGrid id="pg"
id="pg" columns="2">
<h:outputText value="drueber:"/>
value="drueber:"/>
<h:outputText value="#{control.dzahl}"/>
value="#{control.dzahl}"/>
<h:outputText value="weg:"/>
value="weg:"/>
<h:outputText value="#{control.wzahl}"/>
value="#{control.wzahl}"/>
</h:panelGrid
</h:panelGrid>
h:panelGrid>
</h:form
</h:form>
h:form>
Komponentenbasierte SoftwareEntwicklung
Prof. Dr.
Stephan Kleuker
367
Interaktionsspielerei (2/3) - Verwaltungsklasse
Interaktionsspielerei (3/3) - Ausgabe
@ManagedBean
@SessionScoped
public class Control {
private String beruehrt = "beruehr
"beruehr mich";
private int dzahl;
dzahl;
private int wzahl;
wzahl;
getBeruehrt()
public String getBeruehrt
() {return
{return beruehrt;}
beruehrt;}
public int getDzahl()
getDzahl() {return
{return dzahl;}
dzahl;}
public int getWzahl()
getWzahl() {return
{return wzahl;}
wzahl;}
drueber()
public void drueber
() {
beruehrt = "beruehr
"beruehr mich nicht";
dzahl++;
dzahl++;
}
public void weg() {
beruehrt = "beruehr
"beruehr mich";
wzahl++;
wzahl++;
}
}
Komponentenbasierte SoftwareEntwicklung
Prof. Dr.
Stephan Kleuker
368
Komponentenbasierte SoftwareEntwicklung
X X
body
X X
X X X X X X
X X X X X X
commandLink
X X
X X X X X X
X X X X X
X X
X X X X X
X X X
valueChange
unload
select
mouseup
mouseover
X X X X X X X X X
commandButton
dataTable
X
inputText
X X X X X X X X
X X X X X X
X
inputTextArea
X X X X X X X X
X X X X X X
X
outputLabel
X
X X X X X X
X X
panelGrid
X X X
X X X X X
X X X X X
selectManyMenu
X X X X X X X X
X X X X X X
X
selectOneRadio
X X X X X X X X
X X X X X X
X
Komponentenbasierte SoftwareEntwicklung
Prof. Dr.
Stephan Kleuker
369
JSF-Erweiterungen
mouseout
mousemove
mousedown
load
keyup
keypress
keydown
focus
dblclick
click
change
blur
action
<h: Komponenten> und Events (Ausschnitt)
Prof. Dr.
Stephan Kleuker
370
• graphische Möglichkeiten in JSF recht schlicht (wesentlich
besser als gezeigt !), Erweiterungsbibliotheken sinnvoll
• wesentliche Bibliotheken:
– RichFaces: http://www.jboss.org/richfaces
– Primefaces: http://www.primefaces.org/
– IceFaces: http://www.icefaces.org/main/home/
– Apache MyFaces: http://myfaces.apache.org/
– Apache MyFaces Trinidad (ehemals Oracle ADF-Faces):
http://myfaces.apache.org/trinidad/index.html
• kritisch: Bibliotheken nur teilweise kompatibel
• kritisch: in Details teilweise deutliche
Darstellungsunterschiede in verschiedenen Browsern
• noch nicht gesamte Funktionalität auf JSF 2.0 umgestellt
Komponentenbasierte SoftwareEntwicklung
Prof. Dr.
Stephan Kleuker
371
RichFaces Ideen (bis Version 3.3 nur bis JSF 1.2)
Mini-Beispiel: Kalender - kleiner Ausschnitt (1/3)
•
•
erweiterte graphische Komponenten
eigene Integration von Ajax (ohne es nutzen zu müssen, es
aber zu können)
•
RichFaces integriert Frameworks und Bibliotheken
– Prototype [http://prototypejs.org]
– jQuery [http://jquery.com]
– Script.aculo.us [http://script.aculo.us]
benötigte Bibliotheken mit Versionsnummern beachten:
commons-beanutils-1.7.0.jar, commons-collections-3.2.jar,
commonsdigester-1.8.jar, commons-logging-1.0.4.jar,
jhighlight-1.0.jar
einleitender Artikel: http://www.ibm.com/
developerworks/java/library/j-richfaces/index.html
•
•
Komponentenbasierte SoftwareEntwicklung
Prof. Dr.
Stephan Kleuker
372
Mini-Beispiel: Kalender - kleiner Ausschnitt (2/3)
<body>
<f:view>
f:view>
<a4j:form>
<rich:calendar id="cal" value="#{modul.start
value="#{modul.start}"
modul.start}"
popup="false“
popup="false“ datePattern="
datePattern="dd.MM.yyyy
="dd.MM.yyyy">
dd.MM.yyyy">
<a4j:support event="onchanged
event="onchanged"
onchanged" reRender="o"/>
reRender="o"/>
</rich:calendar
</rich:calendar>
rich:calendar>
<br>
br>
<h:commandButton action="#{modul.show
action="#{modul.show}"
modul.show}"
value="Ü
value="Übernehmen"/>
bernehmen"/> <br
<br>
br>
<h:outputLabel value="ausgew
value="ausgewä
ausgewählt:
hlt: "/>
<h:outputText id="o" value="#{modul.start
value="#{modul.start}"
modul.start}" />
</a4j:form>
</f:view
</f:view>
f:view>
</body>
Komponentenbasierte SoftwareEntwicklung
Prof. Dr.
Stephan Kleuker
373
Mini-Beispiel: Kalender - kleiner Ausschnitt (3/3)
public class Modul implements Serializable {...
private Date start=new Date();...
public Date getStart()
getStart() { return start; }
public void setStart(Date start) { this.start = start; }
public String show(){
show(){
System.out.println("Datum:
System.out.println("Datum: "
+new SimpleDateFormat("dd.MM.yyyy").format(start));
SimpleDateFormat("dd.MM.yyyy").format(start));
return "X";
}
<managed<managed-bean>
<managed<managed-beanbean-name>modul
name>modul</managed
modul</managed</managed-beanbean-name>
<managed<managed-beanbean-class>entities.Modul
class>entities.Modul</managed
bean-class>
entities.Modul</managed</managed-bean<managed<managed-beanbean-scope>session</managedscope>session</managed-beanbean-scope>
</managed</managed-bean>
Komponentenbasierte SoftwareEntwicklung
Prof. Dr.
Stephan Kleuker
374
Komponentenbasierte SoftwareEntwicklung
Prof. Dr.
Stephan Kleuker
375
Nutzung von PrimeFaces 2
Beispiel: Editorspielerei (1/4) - Managed Bean
@ManagedBean
@SessionScoped
public class Text {
• unterstützt JSF 2, recht junges Projekt ab November 2008
• Installationsergänzung in web.xml:
<servletservlet-mapping>
mapping>
<servletservlet-name>Faces Servlet</servletServlet</servlet-name>
name>
<urlurl-pattern>/faces/*</urlpattern>/faces/*</url-pattern>
pattern>
</servlet
</servletservlet-mapping>
mapping>
<servlet>
servlet>
<servletservlet-name>Resource Servlet</servletServlet</servlet-name>
name>
<servletservlet-class>
class>
org.primefaces.resource.ResourceServlet
</servlet
</servletservlet-class>
class>
</servlet
</servlet>
servlet>
<servletservlet-mapping>
mapping>
<servletservlet-name>Resource Servlet</servletServlet</servlet-name>
name>
<urlurl-pattern>/primefaces_resource/*</urlpattern>/primefaces_resource/*</url-pattern>
pattern>
</servlet
</servletmapping>
servlet-mapping>
Komponentenbasierte SoftwareEntwicklung
Prof. Dr.
Stephan Kleuker
private String inhalt;
inhalt;
public String getInhalt()
getInhalt() {
return inhalt;
inhalt;
}
public void setInhalt(String inhalt)
inhalt) {
this.inhalt = inhalt;
inhalt;
}
}
376
Beispiel: Editorspielerei (2/4) - index.xhtml
Prof. Dr.
Stephan Kleuker
Prof. Dr.
Stephan Kleuker
377
Beispiel: Editorspielerei (3/4) - h: (Seite lädt neu)
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.prime.com.tr/ui">
xmlns:p="http://primefaces.prime.com.tr/ui">
<h:head>
h:head>
<title>Editor</title>
title>Editor</title>
</h:head
</h:head>
h:head>
<h:body>
h:body>
<h:form >
<p:editor id="ed"
id="ed" width="600px" height="120px"
value="#{text.inhalt}"
value="#{text.inhalt}" widgetVar="editor"/>
widgetVar="editor"/>
<p:commandButton update="o1,o2" async="true"
async="true"
value="p Uebernehmen"
Uebernehmen" onclick="editor.saveHTML()"/><br/>
onclick="editor.saveHTML()"/><br/>
<h:commandButton value="h Uebernehmen"/><br/>
Uebernehmen"/><br/>
<h:outputText id="o1" escape="true"
escape="true"
value="Inhalt:
value="Inhalt: #{text.inhalt}"/><br
#{text.inhalt}"/><br/>
text.inhalt}"/><br/>
<h:outputText id="o2" escape="false"
escape="false"
value="Inhalt:
value="Inhalt: #{text.inhalt
#{text.inhalt}"/>
text.inhalt}"/>
</h:form
</h:form>
h:form>
</h:body
</h:body>
h:body>
</html
</html>
html>
Komponentenbasierte SoftwareEntwicklung
Komponentenbasierte SoftwareEntwicklung
378
Komponentenbasierte SoftwareEntwicklung
Prof. Dr.
Stephan Kleuker
379
Beispiel: Editorspielerei (4/4) - p: (Aktualisierung)
Anmerkungen zum Beispiel
• Normalerweise unterstützt p:commandButton Ajax direkt (nur
bei p:editor Problem, deshalb Workaround mit widgetVar)
• statt f:ajax müsste p:ajax (mit anderen Attributen genutzt
werden)
• Warum andere Ergebnisse angezeigt werden, ist mir unklar
• <h:head>
h:head> immer benötigt
• Generell: Genaue Analyse der oft sehr vielen Attribute einer
Komponente notwendig
• Mischung von h: und p: oft (nicht immer) möglich
• Man muss mit Eigenarten der Komponenten leben (bei
Großprojekten und Auswahlentscheidungen schwierig)
Komponentenbasierte SoftwareEntwicklung
Prof. Dr.
Stephan Kleuker
380
Polling (1/2)
Prof. Dr.
Stephan Kleuker
381
Polling (2/2)
<?xml
<?xml version='1.0' encoding='UTFencoding='UTF-8' ?>
<!DOCTYPE html PUBLIC ""-//W3C//DTD XHTML 1.0 Transitional//EN"
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.prime.com.tr/ui">
xmlns:p="http://primefaces.prime.com.tr/ui">
<h:head>
h:head>
<title>Poller</title>
title>Poller</title>
</h:head
</h:head>
h:head>
<h:body>
h:body>
<h:form>
h:form>
<h:outputText id="o1" value="#{zeit.datum}"/><br/>
value="#{zeit.datum}"/><br/>
<h:outputText id="o2" value="#{zeit.anzahl}"/>
value="#{zeit.anzahl}"/>
<p:poll interval="3" update="o1,o2"/>
</h:form
</h:form>
h:form>
</h:body
</h:body>
h:body>
</html
</html>
html>
Komponentenbasierte SoftwareEntwicklung
Komponentenbasierte SoftwareEntwicklung
Prof. Dr.
Stephan Kleuker
382
@ManagedBean
@SessionScoped
public class Zeit {
private int anzahl;
anzahl;
public String getDatum()
getDatum() {
anzahl++;
anzahl++;
return new Date().toString();
Date().toString();
}
public int getAnzahl()
getAnzahl() {
return anzahl;
anzahl;
}
}
Komponentenbasierte SoftwareEntwicklung
Prof. Dr.
Stephan Kleuker
383
Design-Tests
JSF - es geht noch weiter
• JSF Expression Language
– einfacher Zugriff auf Maps, die Umgebungsdaten, wie
param, requests, cookies und initParam haben
– Nutzung von flash-Variable als Zwischenspeicher
• Erweiterung der Expression Language
• Möglichkeit GET zu nutzen (und damit Bookmarks)
– <h:button> und <h:link>
• JSF 2.0 hat klare Regeln wie Ressourcen verwaltet werden
(Bilder, Templates, ...)
• integrierte, nutzbare JavaScript-API
• Viele weitere JavaScript-Möglichkeiten (u. a. h:outputScript)
• weitere Möglichkeiten des Event-Handlings, z. B. eigene
Klasse reagiert auf Event (z. B. Phasenwechsel)
• Ergänzung/Erweiterung des Exception Handlings
• Lokalisierung, Mehrsprachlichkeit
• Browser stellen identische Inhalte leicht verändert da
• technisch überflüssig, aber wichtig für den Zeitgeist:
modische Design-Anpassungen
• Für IT-Profi: Sisyphus-Arbeit; Test mit unterschiedlichen
Browsern
• Direkte Hilfsmittel:
– Lunascape: ein Browser, bei dem man zwischen drei
Maschinen umschalten kann IE (Trident)＋Firefox
(Gecko)＋Chrome, Safari (Webkit)
– Windows: USB-portable Browser ohne
Installationsnotwendigkeit (verändern keine
Einstellungen): Firefox, Chrome, Opera
• Capture & Replay mit Selenium zum inhaltlichen Test
Komponentenbasierte SoftwareEntwicklung
Prof. Dr.
Stephan Kleuker
384
Komponentenbasierte SoftwareEntwicklung
Prof. Dr.
Stephan Kleuker
385
Zugehörige Unterlagen
JSF und CSS
JSF und CSS
einseitig
einseitig
5.12 JSF-Erweiterungen RichFaces Ideen Mini
5.12 JSF-Erweiterungen RichFaces Ideen Mini
Die Dridger&Schwenke GmbH entwickelt und realisiert als Service
Die Dridger&Schwenke GmbH entwickelt und realisiert als Service
Erinnerung: Eine Komponentenarchitektur
Erinnerung: Eine Komponentenarchitektur
5. JavaServer Faces (JSF)
5. JavaServer Faces (JSF)
delphi softwareentwickler - Timo Göbel TIGO
delphi softwareentwickler - Timo Göbel TIGO
Was ist JSF?
Was ist JSF?
Folien ab 31.10.16
Folien ab 31.10.16
Komponentenbasierte Softwareentwicklung
Komponentenbasierte Softwareentwicklung
Facelets - Mojarra JavaServer Faces
Facelets - Mojarra JavaServer Faces
4. Servlets – Ein kleiner Einstieg Kurze Java
4. Servlets – Ein kleiner Einstieg Kurze Java
Herunterladen
Werbung