Web Erweiterung
Aus Salespoint
Lk (Diskussion | Beiträge) (→View) |
(→TagLibrary: s/libary/library/) |
||
(Der Versionsvergleich bezieht 16 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 | + | 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 | + | 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 | + | In eine JSP-Datei lässt sich die TagLibrary mit folgendem Befehl einbinden: |
<code xml> | <code xml> | ||
- | <%@ taglib uri="http:// | + | <%@ 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 | + | *;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 31: | Zeile 31: | ||
|align="center"| | |align="center"| | ||
|ATM des zu rendernden Datenbestandes | |ATM des zu rendernden Datenbestandes | ||
+ | |- | ||
+ | |renderSettingsConfigurator | ||
+ | |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/> | ||
+ | View-Settings --> renderSettingsConfigurator --> Attribute der Tags | ||
|- | |- | ||
|id | |id | ||
Zeile 50: | Zeile 56: | ||
|align="center"| | |align="center"| | ||
|align="center"| false | |align="center"| false | ||
- | |true, wenn ein Sucheingabefeld zum Filtern eingeblendet werden soll. Achtung: SearchFieldInterceptor aktivieren! [ | + | |true, wenn ein Sucheingabefeld zum Filtern eingeblendet werden soll. Achtung: SearchFieldInterceptor aktivieren! [[FAQ#Wie aktiviere ich diese Interceptor?]] |
|- | |- | ||
|searchString | |searchString | ||
Zeile 60: | Zeile 66: | ||
|align="center"| | |align="center"| | ||
|align="center"| leer | |align="center"| leer | ||
- | |Liste mit ExtraColumns für den Datenbestand | + | |Liste mit ExtraColumns für den Datenbestand |
|- | |- | ||
|positionOfExtraColumns | |positionOfExtraColumns | ||
Zeile 66: | Zeile 72: | ||
|align="center"| BACK | |align="center"| BACK | ||
|Position der ExtraColumns | |Position der ExtraColumns | ||
+ | |- | ||
+ | |zebraStyle | ||
+ | |align="center"| | ||
+ | |align="center"| false | ||
+ | |Wechselt das class-attribut einer Tabellenzeile zwischen 'table-row-even' and 'table-row-odd'. (Nur in 'Table' und 'CssTable' verfügbar.) | ||
|- | |- | ||
|caption | |caption | ||
|align="center"| | |align="center"| | ||
|align="center"| leer | |align="center"| leer | ||
- | | | + | |Eine Überschrift für den View. |
+ | |- | ||
+ | |summary | ||
+ | |align="center"| | ||
+ | |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.) | ||
+ | |- | ||
+ | |viewDirection | ||
+ | |align="center"| | ||
+ | |align="center"| LEFT | ||
+ | |(Funktioniert nur in Listen) Positioniert die Objekte einer Liste in umgekehrter Reihenfolge. | ||
|} | |} | ||
Zeile 79: | 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 [[ | + | 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 138: | 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:
- Views als Attribute
<sp:DoubleView sourceView="${sourceATM}" destinationView="${destATM}" />
- 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 |