Web Erweiterung
Aus Salespoint
(→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 'floating'-List. Dabei werden die Zeilen | + | *;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:''' |
Version vom 12:19, 7. Apr. 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 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 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.
TagLibary
In eine JSP-Datei lässt sich die TagLibary mit folgendem Befehl einbinden:
<%@ taglib uri="http://salespointframework.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! TODO LINK ZUM FAQ SETZEN | |
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 TODO LINK ZUM FAQ SETZEN | |
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.) |
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 hier 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!
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 |