Web Erweiterung

Aus Salespoint

(Unterschied zwischen Versionen)
Wechseln zu: Navigation, Suche
(View)
(TagLibrary: s/libary/library/)
 
(Der Versionsvergleich bezieht 12 dazwischenliegende Versionen mit ein.)
Zeile 2: Zeile 2:
=Allgemeines=
=Allgemeines=
-
Basierend auf dem etablierten, quelloffenen Framework Spring (in der Version 3), dessen MVC-Umsetzung das Request/Response-Handling kapselt und die Entwicklung einer Webapplikation stark vereinfacht. Die komplette Salespoint Daten- und Nutzerverwaltung mit integrierte Persistenz kann auf gleiche, bisher beschriebene Weise genutzt werden. Wie Spring funktioniert kann einerseits in den Web-Tutorials sowie in der sehr anschaulichen und umfangreichen [http://static.springsource.org/spring/docs/3.0.x/spring-framework-reference/html/ Dokumentation von Spring] nachgelesen werden.
+
Basierend auf dem etablierten, quelloffenen Framework Spring (in der Version 3), dessen MVC-Umsetzung das Request/Response-Handling kapselt und die Entwicklung einer Webapplikation stark vereinfacht. Die komplette Salespoint Daten- und Nutzerverwaltung mit integrierter Persistenz kann auf gleiche, bisher beschriebene Weise genutzt werden. Wie Spring funktioniert kann einerseits in den Web-Tutorials sowie in der sehr anschaulichen und umfangreichen [http://static.springsource.org/spring/docs/3.0.x/spring-framework-reference/html/ Dokumentation von Spring] nachgelesen werden.
-
Im Folgenden wird auf die von Salespoint bereitgestellte TagLibary zur Visualisierung von Datenbeständen sowie einiger Kontrollstrukturen näher eingegangen.
+
Im Folgenden wird auf die von Salespoint bereitgestellte TagLibrary zur Visualisierung von Datenbeständen sowie einiger Kontrollstrukturen näher eingegangen.
-
=TagLibary=
+
=TagLibrary=
-
In eine JSP-Datei lässt sich die TagLibary mit folgendem Befehl einbinden:
+
In eine JSP-Datei lässt sich die TagLibrary mit folgendem Befehl einbinden:
<code xml>
<code xml>
-
<%@ taglib uri="http://salespointframework.org/web/taglib" prefix="sp" %>
+
<%@ taglib uri="http://www.salespoint-framework.org/web/taglib" prefix="sp" %>
</code>
</code>
==View==
==View==
Zeile 18: Zeile 18:
*;CssTable: rendert eine CSS-Tabelle mit HTML-Tags wie <nowiki><div style="display:table;">,<div style="display:table-row;">,<div style="display:table-cell;">,...</nowiki>
*;CssTable: rendert eine CSS-Tabelle mit HTML-Tags wie <nowiki><div style="display:table;">,<div style="display:table-row;">,<div style="display:table-cell;">,...</nowiki>
-
*;List: rendert eine CSS- mit HTML-Tags wie <nowiki><div style="display:table;">,<div style="display:table-row;">,<div style="display:table-cell;">,...</nowiki>
+
*;List: rendert eine 'floating'-List. Dabei werden die Zeilen des ATM als Objekte interpretiert und die Zellen in <nowiki><object></nowiki>-Tags als Absätze eingefügt. Um die floatenden Objekte ist eine Devision, welche mit ''style="display:inline-block;"'' den Umfluss nicht auf äußere Tags überträgt.
'''Attribute:'''
'''Attribute:'''
Zeile 34: Zeile 34:
|renderSettingsConfigurator
|renderSettingsConfigurator
|align="center"|
|align="center"|
-
|align="center"|
+
|align="center"| leer
|Settings zum darstellen des Views. Die Hierarchie der Einstellungen ist wie folgt (die jeweils nachfolgende Instanz überschreibt die Vorhergehende):<br/>
|Settings zum darstellen des Views. Die Hierarchie der Einstellungen ist wie folgt (die jeweils nachfolgende Instanz überschreibt die Vorhergehende):<br/>
View-Settings --> renderSettingsConfigurator --> Attribute der Tags
View-Settings --> renderSettingsConfigurator --> Attribute der Tags
Zeile 56: Zeile 56:
|align="center"|
|align="center"|
|align="center"| false
|align="center"| false
-
|true, wenn ein Sucheingabefeld zum Filtern eingeblendet werden soll. Achtung: SearchFieldInterceptor aktivieren! [http://www.example.com TODO LINK ZUM FAQ SETZEN]
+
|true, wenn ein Sucheingabefeld zum Filtern eingeblendet werden soll. Achtung: SearchFieldInterceptor aktivieren! [[FAQ#Wie aktiviere ich diese Interceptor?]]
|-
|-
|searchString
|searchString
Zeile 66: Zeile 66:
|align="center"|
|align="center"|
|align="center"| leer
|align="center"| leer
-
|Liste mit ExtraColumns für den Datenbestand [http://www.example.com TODO LINK ZUM FAQ SETZEN]
+
|Liste mit ExtraColumns für den Datenbestand
|-
|-
|positionOfExtraColumns
|positionOfExtraColumns
Zeile 76: Zeile 76:
|align="center"|
|align="center"|
|align="center"| false
|align="center"| false
-
|Wechselt das class-attribut einer Tabellenzeile zwischen 'table-row-even' and 'table-row-odd'.
+
|Wechselt das class-attribut einer Tabellenzeile zwischen 'table-row-even' and 'table-row-odd'. (Nur in 'Table' und 'CssTable' verfügbar.)
|-
|-
|caption
|caption
Zeile 87: Zeile 87:
|align="center"| leer
|align="center"| leer
|Eine 'summary' kann nur in Views mit NativeHtmlTable oder direkt im Table-Tag verwendet werden. In allen anderen Fällen wird sie nicht mitgerendert. (Das 'summary'-Attribut wird in einem <nowiki><table></nowiki>-Tag gesetzt und kann mit Blindentastaturen ausgelesen werden.)
|Eine 'summary' kann nur in Views mit NativeHtmlTable oder direkt im Table-Tag verwendet werden. In allen anderen Fällen wird sie nicht mitgerendert. (Das 'summary'-Attribut wird in einem <nowiki><table></nowiki>-Tag gesetzt und kann mit Blindentastaturen ausgelesen werden.)
 +
|-
 +
|viewDirection
 +
|align="center"|
 +
|align="center"| LEFT
 +
|(Funktioniert nur in Listen) Positioniert die Objekte einer Liste in umgekehrter Reihenfolge.
|}
|}
Zeile 95: Zeile 100:
==DoubleView==
==DoubleView==
-
Der DoubleViewTag ist die Oberflächenkomponente neben dem DoubleViewController und stellt die Möglichkeit bereit, den Benutzer Elemente von einem Katalog bzw. Bestand in einen anderen verschieben zu lassen. Wie dieses Zusammenwirken funktioniert, wird [[hier]] beschrieben.
+
Der DoubleViewTag ist die Oberflächenkomponente neben dem DoubleViewController und stellt die Möglichkeit bereit, den Benutzer Elemente von einem Katalog bzw. Bestand in einen anderen verschieben zu lassen. Wie dieses Zusammenwirken funktioniert, wird in [[Videoautomat_Web#Ausleih-_und_Bezahlvorgang]] beschrieben.
'''Achtung:''' Der DoubleViewTag kann nur in Zusammenwirken mit dem DoubleViewController sinnvoll eingesetzt werden!
'''Achtung:''' Der DoubleViewTag kann nur in Zusammenwirken mit dem DoubleViewController sinnvoll eingesetzt werden!
Zeile 154: Zeile 159:
Der LoginDialogTag rendert ein einfaches LoginFormular.
Der LoginDialogTag rendert ein einfaches LoginFormular.
-
'''Achtung:''' LoginInterceptor notwendig!
+
'''Achtung:''' LoginInterceptor notwendig! [[FAQ#Wie aktiviere ich diese Interceptor?]]
'''Beispiel:'''
'''Beispiel:'''

Aktuelle Version vom 23:52, 14. Okt. 2010

Seit der Version 2010 stellt Salespoint die Möglichkeit sowie Hilfsmittel bereit, in einem ServletContainer (vorrangig Apache Tomcat) ausgeführt zu werden.

Inhaltsverzeichnis

Allgemeines

Basierend auf dem etablierten, quelloffenen Framework Spring (in der Version 3), dessen MVC-Umsetzung das Request/Response-Handling kapselt und die Entwicklung einer Webapplikation stark vereinfacht. Die komplette Salespoint Daten- und Nutzerverwaltung mit integrierter Persistenz kann auf gleiche, bisher beschriebene Weise genutzt werden. Wie Spring funktioniert kann einerseits in den Web-Tutorials sowie in der sehr anschaulichen und umfangreichen Dokumentation von Spring nachgelesen werden.

Im Folgenden wird auf die von Salespoint bereitgestellte TagLibrary zur Visualisierung von Datenbeständen sowie einiger Kontrollstrukturen näher eingegangen.

TagLibrary

In eine JSP-Datei lässt sich die TagLibrary mit folgendem Befehl einbinden:

<%@ taglib uri="http://www.salespoint-framework.org/web/taglib" prefix="sp" %>

View

View-Tags dienen dem Rendern von Katalogen und Beständen. Diese werden in ein AbstractTabelModel (ATM), welches den Katalog bzw Bestand in tabellarischer beschreibt, überführt und dem ViewTag übergeben, welcher daraus eine entsprechende Repräsentation in HTML rendert. Es gibt 3 einfach zu benutzende konkrete ViewTags:

  • Table
    rendert eine native HTML-Tabelle mit HTML-Tags wie <table>,<tr>,<td>,...
  • CssTable
    rendert eine CSS-Tabelle mit HTML-Tags wie <div style="display:table;">,<div style="display:table-row;">,<div style="display:table-cell;">,...
  • List
    rendert eine 'floating'-List. Dabei werden die Zeilen des ATM als Objekte interpretiert und die Zellen in <object>-Tags als Absätze eingefügt. Um die floatenden Objekte ist eine Devision, welche mit style="display:inline-block;" den Umfluss nicht auf äußere Tags überträgt.

Attribute:

Name Notwendig Defaultwert Beschreibung
abstractTableModel X ATM des zu rendernden Datenbestandes
renderSettingsConfigurator leer Settings zum darstellen des Views. Die Hierarchie der Einstellungen ist wie folgt (die jeweils nachfolgende Instanz überschreibt die Vorhergehende):

View-Settings --> renderSettingsConfigurator --> Attribute der Tags

id leer entspricht dem HTML-id-Attribut
styleName leer entspricht dem HTML-class-Attribut zur Zuweisung von CSS-Klassen
style leer entspricht dem HTML-style-Attribut zur Inline-CSS-Definition
searchField false true, wenn ein Sucheingabefeld zum Filtern eingeblendet werden soll. Achtung: SearchFieldInterceptor aktivieren! FAQ#Wie aktiviere ich diese Interceptor?
searchString leer Zeichenkette, nach der der Bestand gefiltert werden soll. Funktioniert unabhängig von der Einblendung des Sucheingabefeldes.
extraCols leer Liste mit ExtraColumns für den Datenbestand
positionOfExtraColumns BACK Position der ExtraColumns
zebraStyle false Wechselt das class-attribut einer Tabellenzeile zwischen 'table-row-even' and 'table-row-odd'. (Nur in 'Table' und 'CssTable' verfügbar.)
caption leer Eine Überschrift für den View.
summary leer Eine 'summary' kann nur in Views mit NativeHtmlTable oder direkt im Table-Tag verwendet werden. In allen anderen Fällen wird sie nicht mitgerendert. (Das 'summary'-Attribut wird in einem <table>-Tag gesetzt und kann mit Blindentastaturen ausgelesen werden.)
viewDirection LEFT (Funktioniert nur in Listen) Positioniert die Objekte einer Liste in umgekehrter Reihenfolge.

Für fortgeschrittende Nutzung stehen 2 weitere ViewTags zur Verfügung:

  • View
    allg. ViewRenderer, dem zusätzlich eine IHtmlViewRepresentation übergeben wird. Sinnvoll, wenn man eine eigene Html-Repräsentation definieren will.
  • CompletedView
    rendert eine übergebene View-Klasse. Sinnvoll, wenn man eine eigene View definieren will.

DoubleView

Der DoubleViewTag ist die Oberflächenkomponente neben dem DoubleViewController und stellt die Möglichkeit bereit, den Benutzer Elemente von einem Katalog bzw. Bestand in einen anderen verschieben zu lassen. Wie dieses Zusammenwirken funktioniert, wird in Videoautomat_Web#Ausleih-_und_Bezahlvorgang beschrieben.

Achtung: Der DoubleViewTag kann nur in Zusammenwirken mit dem DoubleViewController sinnvoll eingesetzt werden!

Der DoubleViewTag beinhaltet 2 ViewTags und kann auf 2 verschiedene Weisen eingesetzt werden:

Beispiel:

  1. Views als Attribute
    <sp:DoubleView sourceView="${sourceATM}" destinationView="${destATM}" />
  2. Views als InnerTag
    <sp:DoubleView>
    <sp:Table abstractTableModel="${sourceATM}" />
    <sp:Table abstractTableModel="${destATM}" />
    </sp:DoubleView>

Die 2 Variante wird empfohlen, da sich damit die individuellen ViewTags komplett und wie die einzeln Verwendeten konfigurieren lassen. Achtung: Es müssen exakt 2 ViewTags angegeben werden - dies können auch unterschiedliche ViewTags sein.

Attribute:

Name Notwendig Defaultwert Beschreibung
sourceView null ATM des zu rendernden Quelldatenbestandes
destinationView null ATM des zu rendernden Zieldatenbestandes
showNumberField false true, wenn ein Eingabefeld für die Anzahl eingeblendet werden soll
showBackButton true false, wenn der Button zum zurück-Verschieben angezeigt werden soll
id leer entspricht dem HTML-id-Attribut
styleName leer entspricht dem HTML-class-Attribut zur Zuweisung von CSS-Klassen

LoginDialog

Der LoginDialogTag rendert ein einfaches LoginFormular.

Achtung: LoginInterceptor notwendig! FAQ#Wie aktiviere ich diese Interceptor?

Beispiel:

<sp:LoginDialog />

Attribute:

Name Notwendig Defaultwert Beschreibung
showUsers true false, wenn statt der SelectBox mit registrierten Nutzernamen ein leeres Eingabefeld angezeigt werden soll
id leer entspricht dem HTML-id-Attribut
styleName leer entspricht dem HTML-class-Attribut zur Zuweisung von CSS-Klassen

LoggedIn

Der LoggedInTag ist eine Kontrollstruktur mitdessen Hilfe man Teile einer JSP-Seite anhand des Loginstatus aus- bzw. einblenden kann.

Beispiel:
<sp:LoggedIn status="false">
<sp:LoginDialog />
</sp:LoggedIn>

Im Beispiel wird das LoginFormular nur dann angezeigt, wenn der diese Seite aufrufende Benutzer nicht eingeloggt ist.

Attribute:

Name Notwendig Defaultwert Beschreibung
status X true: alle inneren Tags werden gerendert, wenn der Nutzer eingeloggt ist.

false: alle inneren Tags werden gerendert, wenn der Nutzer ausgeloggt ist.

HasCapability

Der HasCapabilityTag ist eine weitere Kontrollstruktur, die alle innere Tags nur dann anzeigt, wenn der aktuelle Nutzer eine Capability mit dem übergebenen Namen besitzt.

Beispiel:

<sp:HasCapability capabilityName="admin">
<a href="/administrationSite">adminSite</a>
</sp:HasCapability>

Attribute:

Name Notwendig Defaultwert Beschreibung
capabilityName X Rendert alle inneren Tags nur, wenn der aktuelle Nutzer eine Capability mit diesem NAmen besitzt.

Image

Der ImageTag rendert ein übergebenes BufferdImage Base64-kodiert (gemäß RFC 2397) direkt in die HTML-Seite hinein.

Beispiel:

<sp:Image image="${user.image}" alt="avatar of ${user.name}" />

Achtung: Alle gescheiten Browser (FireFox, Opera, Safari, Chrome) bis auf den IE unterstützen diese Technik. Der IE8 kann es zumindest für kleine Bilder (bis 32kb Base64-Codelänge).

Attribute:

Name Notwendig Defaultwert Beschreibung
image X das zu rendernde Bild vom Typ BufferedImage
alt X entspricht dem HTML-alt-Attribut, textuelle Beschreibung des Bildes
height leer entspricht dem HTML-height-Attribut, Angabe mit '%' oder ohne Einheit(px)
width leer entspricht dem HTML-width-Attribut, Angabe mit '%' oder ohne Einheit(px)

Message

Der MessageTag rendert die übergebene Liste von Strings.

Beispiel:

<sp:Message messages="${spErros}" styleName="errorMessages" />
<sp:Message messages="${spFlash}" styleName="flashMessages" />

Attribute:

Name Notwendig Defaultwert Beschreibung
messages X Liste von Strings mit anzuzeigenden Nachrichten
id leer entspricht dem HTML-id-Attribut
styleName leer entspricht dem HTML-class-Attribut zur Zuweisung von CSS-Klassen
Persönliche Werkzeuge