Komponentenorientierte Webanwendungen mit wingS 2.0

Benjamin Schmid
19. Januar 2006

Komponentenorientierte
Webanwendungen mit wingS 2.0
Die Open Source Alternative zu JSF und Struts

Inhalt
Einleitung
Einleitung
Was ist wingS
Architektur
Applikationserstellung
JSF vs. wingS am Beispiel
Fazit

2

Komponentenorientierte Webanwendungen mit wingS 2.0
© eXXcellent solutions gmbh, Benjamin Schmid

Entwicklungshistorie populärer
Web-Technologien für Java
Seiten-Paradigma

Widgets

H-MVC
Sun JSF
Struts

Tapestry

MVC

JSP Taglibs
HTML/XML
JSP

XSP

Java Servlet API

3


Pure Java

Erwartungen an ein
modernes Web-Framework
Höhere Effizienz (Aufwand, Fehlerrate)
Vereinfachung des Entwicklungsprozesses (notwendige Skills)
Kapselung und Behandlung technischer Beschränkungen
der Web-Plattform
Gute Wiederverwendbarkeit durch
Komponentenorientierung und Polymorphie
Trennung von Logik, Darstellung und Inhalten durch MVC und
Event-Orientierung
Hoher Abstraktionsgrad für modellorientierte Konzepte
(MDA)
Eignung für Refactoring und Unit Tests
H-MVC Architektur
4


Inhalt
Einleitung
Was ist wingS
Architektur
Fazit

5


Was ist wingS?
„wingS is net generation Swing“:
Komponenten- und Eventbasiert
H-MVC – Architektur (schachtelbares MVC)
Projektziele:
Möglichst nahe am Swing Programmiermodell
Eigenheiten des Webs im Framework abdecken
Schlankheit und Effizienz
Einfacher, wiederverwendbarer Anwendungscode
Open Source unter LGPL Lizenz
Version 1.0 anno 2001
Version 2.0 im Dezember 2005
6


Features von wingS
Umfangreicher Satz an visuellen Komponenten
(Textfields, Buttons, Trees, Tables, Tabbed Panes, Menues)
Leistungsstarke Layout Manager
Verwendet Swing Modelle und Events
Styling durch komponentenweise generiertes CSS
Modulare Renderer (Pluggable Look & Feel)
Behandlung von Back Navigation im Browser
Neue Features in wingS 2
leichter anpassbares Default Look & Feel
Drag & Drop Support
Remote Scripting (AJAX)
Kontextmenüs, Tooltips und Tastatur-Shortcuts
7


Inhalt
Einleitung
Was ist wingS
Architektur
Fazit

8


Die Architektur von wingS

9


Die Architektur von wingS
Jede wingS Komponente hält ihren Zustand innerhalb ihres
Modells
Die wingS Session hält den Komponenten-Baum und damit
den gesamten Applikationszustand
HTTP Anfragen werden als Menge von Low-level Events
verstanden und vom Dispatcher an die betroffenen
Komponenten verteilt
Dort führen Sie zu Modelländerungen und lösen ggf.
Applikations-Events aus
Danach übernimmt der Externalizer die Beantwortung der
HTTP Anfrage und stellt dem Browser alle Ressourcen zur
Verfügung (HTML, CSS, Graphiken, Javascript)
Die HTML-Darstellung wird dabei über die zuständigen
Renderer durch Durchlaufen des Komponenten-Baums
generiert
10


Inhalt
Einleitung
Was ist wingS
Architektur
Fazit

11


Applikationserstellung mit wingS
Darstellung
Die visuelle Darstellung der Komponenten bestimmt sich
vorrangig über die Inhalte ihres Modells aber auch über
ihre gesetzten Styling Eigenschaften (Größe, Farbe, etc.)
Layout
Über Container-Komponenten lassen sich Komponenten zu
komplexeren Komponenten kombinieren
Verantwortlich für die Anordnung innerhalb eines Containers
sind dabei Layout-Manager
Logik
Event Listener erlauben die Anbindung der Geschäftslogik
an die einzelnen Komponenten und damit die Reaktion auf
Benutzerinteraktionen

12


Darstellung von Komponenten
Inhalte
Verändern der Modellinhalte einer Komponente
label.setText(„Text“)
radioButton.getModel().setSelected(true);

Dynamische Styles
Setzen der visuellen Komponenteneigenschaften
c.setForeground(Color.RED);
c.setBorder(new SEmptyBorder(5,5,5,5);
c.setFont(new SFont(„Arial“));

Explizite Zuweisung von CSS-Eigenschaften und -Klassen
c.setAttribute(CSSProperty.FONT-STYLE,“bold“);
c.setClass(„fehlermeldung“)

Statische Eigenschaften
Einbinden globaler CSS Deklarationen
Schreiben eigener Renderer
13


Layout-Manager in wingS
Dynamische Layout-Manager
Regelbasierte Anordnung der Komponenten eines Containers
(Tabellenweise, Zeilenweise, etc.). Analog zu den Swing LayoutManagern
Beispiele:
SBorderLayout, SFrameSetLayout, SGridLayout, GridBagLayout, …
Statischer Manager (STemplateLayout)
Platzierung von
Komponenten innerhalb
eines HTML-Fragments
Eignet sich gut zur
Realisierung des
statischen
Rahmenlayouts
14

<h1><object name=„hello“></object></h1>
<table>
<tr><td>...</td></tr>
<tr><td><object name=„button“></object>
</td></tr>
</table>


Anbindung der Präsentationslogik
Analog zu Swing:
Anbindung der Logik an die wingS Komponenten via Events
Typische Events:
„Button gedrückt“, „Tabellenzeile gewählt“, „Text eingegeben“
Werte und Zustände von Eingabe-Komponenten werden in
ihren Modellen gehalten und können dort abgefragt werden

15


Inhalt
Einleitung
Was ist wingS
Architektur
Fazit

16


Exkurs JSF: Ein einfaches Ratespiel (1)
Eindrücke aus den JavaServer Faces (JSF):
Das Guess-A-Number Beispiel von Sun

Quelle: Sun

17


Einbinden der Logik via JSF-Tags in die JSP Seite
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<body bgcolor="white">
<f:view>
<h:form id="helloForm" >
<h2>Hi. My name is Duke. I'm thinking of a number from
<h:outputText value="#{UserNumberBean.minimum}"/> to
<h:outputText value="#{UserNumberBean.maximum}"/>.
Can you guess it?</h2>
<h:graphicImage id="waveImg" url="/wave.med.gif" />
<h:inputText id="userNo" value="#{UserNumberBean.userNumber}"
validator="#{UserNumberBean.validate}"/>
<h:commandButton id="submit" action="success" value="Submit"/>
<p><h:message style="color: red; serif; font-style: oblique;
text-decoration: overline„ id="errors1" for="userNo"/>
</h:form>
</f:view>
Quelle: Sun

18


Ablaufsteuerung in JSF via faces-config.xml
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE faces-config PUBLIC
"-//Sun Microsystems, Inc.//DTD JSF Config 1.1//EN"
"http://java.sun.com/dtd/web-facesconfig_1_1.dtd">
<faces-config>
<application>
<locale-config>
<default-locale>en</default-locale>
<supported-locale>de</supported-locale>
<supported-locale>fr</supported-locale>
<supported-locale>es</supported-locale>
</locale-config>
</application>

<managed-bean>
<description>
The "backing file" bean that backs up [...]
</description>
<managed-bean-name>UserNumberBean</managed-bean-name>
<managed-bean-class>guessNumber.UserNumberBean</managedbean-class>
<managed-bean-scope>session</managed-bean-scope>
<managed-property>
<property-name>minimum</property-name>
<property-class>int</property-class>
<value>0</value>
</managed-property>
<managed-property>
<property-name>maximum</property-name>
<property-class>int</property-class>
<value>10</value>
</managed-property>
</managed-bean>
</faces-config>

<navigation-rule>
<description>
The decision rule used by the NavigationHandler
</description>
<from-view-id>/greeting.jsp</from-view-id>
<navigation-case>
<description>
Indicates to the NavigationHandler [...]
</description>
<from-outcome>success</from-outcome>
<to-view-id>/response.jsp</to-view-id>
</navigation-case>
</navigation-rule>

19

<navigation-rule>
<description>
The decision rules used by [...]
</description>
<from-view-id>/response.jsp</from-view-id>
<navigation-case>
<description>
Indicates to the NavigationHandler [...]
</description>
<from-outcome>success</from-outcome>
<to-view-id>/greeting.jsp</to-view-id>
</navigation-case>
</navigation-rule>


Prüflogik in JSF als Validator
public void validate(FacesContext context,
if (minimumSet &&
UIComponent component,
(converted < minimum)) {
Object value) throws
if (maximumset) {
throw new
ValidatorException {
validatorexception(messagefactory.getmessage
if ((context == null) || (component == null)) {
throw new NullPointerException();
(context, component,
}
validator.not_in_range_message_id,
new object[]{
if (value != null) {
new double(minimum),
try {
new double(maximum)
int converted = intValue(value);
}));
if (maximumSet &&
} else {
(converted > maximum)) {
throw new validatorexception(
if (minimumSet) {
messagefactory.getmessage
throw new ValidatorException(
MessageFactory.getMessage
longrangevalidator.minimum_message_id,
new object[]{
Validator.NOT_IN_RANGE_MESSAGE_ID,
new integer(minimum)
new Object[]{
}));
new Integer(minimum),
}
new Integer(maximum)
}
}));
} catch (numberformatexception e) {
} else {
throw new validatorexception(
throw new ValidatorException(
messagefactory.getmessage
MessageFactory.getMessage
LongRangeValidator.MAXIMUM_MESSAGE_ID,
longrangevalidator.type_message_id));
}
new Object[]{
}
new Integer(maximum)
}
}));
Quelle: Sun
}
} Komponentenorientierte Webanwendungen mit wingS 2.0

20


Vergleich wingS vs. JSF

21


Das einfache Ratespiel mit wingS

22


Inhalt
Einleitung
Was ist wingS
Architektur
Fazit

23


Gegenüberstellung JSF/wingS: JSF
J2EE Standard
Hohe Öffentlichkeitswirkung
Konzeptionell immer noch JSP/Struts

JavaServer
Faces

Effizienz nur über Tools möglich
Fehlerträchtige Pflege von drei Quellen notwendig
Dialogseiten (HTML/JSP/Taglibs)
Dialogbeans (Java)
Ablaufsteuerung (XML)
JSP/HTML Basis impliziert:
Mangelnder Abstraktionsgrad
Effizienz Dynamische/MDA Konzepte schwierig
Schlechte Wiederverwendbarkeit / Polymorphie
Vermischung Darstellung/Logik
Schwieriges Refactoring und Debugging
24


Gegenüberstellung JSF/wingS: wingS
„Echtes“ OO-/ Komponentenbasiertes
Design von Webapplikationen durch H-MVC
Hohe Effizienz durch hohen Abstraktionsgrad
Reduzierter und übersichtlicher Code
Ermöglicht MDA orientierte Konzepte (vgl. pleXX)
Viele Web-Aspekte für Entwickler komplett transparent
Klare Trennung von Darstellung und Logik
Java-Basiertheit bedeutet
Einfach: Java-Skills genügen, Swing Know-how hilft
weniger Fehler möglich (Compiler/Syntax)
kein Technologie-Mix und einfache Wartung
Polymorphie und Refactoring kein Problem
Ermöglicht HotSpot Deployment und Debugging

25


Weiterführende Informationen

Ausstellungsbereich Stand 11.3
Benjamin Schmid (B.Schmid@exxcellent.de)
www.j-wings.org
www.exxcellent.de/wings

26


Komponentenorientierte Webanwendungen mit wingS 2.0

Weitere ähnliche Inhalte

Andere mochten auch

Komponentenorientierte Webanwendungen mit wingS 2.0