Übersicht
S10 Anwendungen bestehen aus
HTML-Dateien plus ABAP Klassen. Die Verbindung zwischen beiden
Ebenen stellt das S10 Framework durch eine Datenbindung
her, durch die der Wert eines HTML-Elements mit dem
gleichnamigen Attribut des aktiven ABAP Objekts synchonisiert
wird.
Das heißt, nach einer Benutzeraktion werden die neuen
Werte aus HTML in das aktive ABAP Objekt übernommen und dort
verarbeitet. Nach der Verarbeitung auf ABAP-Ebene werden die aktuellen Werte der ABAP
Attribute zurück in die HTML Elemente übertragen (bidirektionale
Bindung).
Beispiel
In einer
Anwendung zum Ändern von Kundenadressen gibt es ein Eingabefeld
für das Gebäude:
In
HTML ist das Eingabefeld durch ein <input> Tag definiert, das
die CSS-Klasse "input" sowie einen Namen "name=" besitzt:
<input
class="input"
name="building"
size="20"
maxlength="20"
/>
In der ABAP-Klasse
gibt es ein gleichnamiges Klassenattribut; entweder in
SE24 bei einer öffentlichen Klasse:
oder
bei einer lokalen Klasse im ABAP Source Code:
public section.
data:
building type ad_bldng.
Zur Anzeige der Adresse liest das ABAP
Objekt die Kundenadresse und setzt einen Wert, z.B. "B26", in
das Attribut "building". Dieser Wert wird vor Anzeige der
HTML-Datei durch das S10 Framework in das gleichnamige
Eingabefeld "building" übertragen. Der Benutzer kann dort einen
anderen Wert eingeben, z.B. "B28", und mit dem nächsten
Dialogschritt, ausgelöst etwa durch einen Klick auf die
Drucktaste "Sichern", wird der neue Wert "B28" in das Attribut
"building" eingetragen und dann die Methode "Sichern"
ausgeführt.
Implementierung
Innerhalb des <head>-tag
Ihrer HTML-Datei sind folgende Angaben nötig:
<head>
<link
rel='stylesheet'
type='text/css'
href='../../../style/s10.style.css'>
<link
rel='stylesheet'
type='text/css'
href='../../../style/custom.style.css'>
<script
src='../../synactiveS10/synactiveS10.java.js'></script>
</head>
Dabei ist "custom.style.css" eine leere Datei, in der Sie die Standard-CSS-Stile aus "s10.style.css" für Ihr Projekt bei Bedarf überschreiben können (Fonts, Farben,...).
In der ABAP Klasse ist es nötig, die Oberklasse /s10/any
anzugeben. Bei öffentlichen Klassen (Transaktion SE24)
geschieht das in den Klasseneigenschaften:
und bei lokalen Klassen in SE38 durch die "inheriting from" Angabe:
class customer definition inheriting from /s10/any.
Damit ist gewährleistet, dass die automatische Datenbindung in beide Richtungen funktioniert. Sie benötigen keine zusätzlichen Aufrufe in HTM/JavaScript oder ABAP, sondern der gemeinsame Name ("name=" in HTML und Attributname in ABAP) verbindet die HTML- mit den ABAP-Elementen.
Nur Ausgabe von Attributen
Wenn Sie CSS-Klasse 'output' statt 'input'
angeben, wird der Datentransport
nur in der Richtung ABAP -> HTML durchführt:
<input
class="output"
name="building"
size="20"
maxlength="20"
/>
Statt
<input> verwendet man hier einfacher die Tags <span> oder <div>,
die keine Ausgabelänge benötigen:
<span
class="output"
name="building">
</span>
Die Darstellung ist fast identisch:
Formatkonvertierung
In beiden Richtungen
werden die im SAP-System definierten Datenkonvertierungen
durchgeführt. Beispielsweise werden bei numerischen
Kundennummern führende Nullen nicht angezeigt, aber bei der
Eingabe automatisch im ABAP-Attribut ergänzt.
Konvertierungsexits, zum Beispiel zur Materialnummer, werden in
beiden Richtungen durchgeführt. Die Anzeige von Dezimalwerten
erfolgt so, wie sie im SAP Benutzerstammsatz definiert ist.
Bei Mengen- und Währungsangaben hängt die korrekte Anzahl der anzuzeigenden Dezimalstellen von der Einheit (wie Stück, Kilogramm, ...) bzw. der Währung (EUR, USD, JPY) ab. Wenn Sie in der ABAP Klasse zu dem Attribut einen Bezug zu dem Attribut ablegen, das die Mengeneinheit oder die Währung enthält, erfolgt die Aufbereitung automatisch entsprechend den im SAP System dafür abgelegten Dezimalstellen. Details dazu finden Sie in der Dokumentation von s10getuservalue().
Validierung der Eingabewerte und
eigene Ausgabemethoden.
Damit keine ungültigen
Daten in die Anwendung gelangen, können Sie in Ihrer Klasse
Validierungsmethoden angeben, die automatisch nach dem
Datentransport ablaufen. Validierungsmethoden haben den Namen
"validate_..."; alle EInzelheiten finden Sie in dem separaten
Kapitel "Validierung
der Eingabedaten".
Analog gibt es Methoden, die automatisch ablaufen, ehe ein Attribut in die HTML-Ebene übertragen wird. Die entsprechenden Methoden heißen "build_..."; die Beschreibung finden Sie im Kapitel "Build-Methoden".
Beispiel:
Unterobjekte
Die
Attribute von Unterobjekten des aktiven ABAP Objekts können Sie
ebenfalls direkt ansprechen; verwenden Sie einen Punkt zur
Abtrennung der Attributnamen, also name="obj.attname" wobei
"obj" eine ABAP Objektreferenz auf eine andere /s10/any Klasse
ist und "attrname" der Name eines Attributs dieser Klasse. Diese
Notation ist auch mehrstufig anwendbar.
Im aktuellen ABAP Objekt ist ein Attribut
data:
mycustomer type ref to customer.
definiert. In der Klasse "customer" wiederum ein Attribut
data:
addr type ref to address.
Und in der Klasse "address" schließlich
data:
building type ad_bldng.
Durch
<span
class="output"
name="mycustomer.name1"> </span>
<span
class="output"
name="mycustomer.addr.building">
</span>
können Sie nun direkt das Attribut "name1" von "mycustomer" sowie das Attribut "building" des Objekts "addr" von "mycustomer" ansprechen.
Dabei ist die Zuordnung wieder bidirektional, d.h. bei Eingaben werden die Attribute der entsprechenden Unterobjekte mit Werten versorgt und bei der Ausgabe die ABAP-Werte aus den Unterobjekten nach HTML übertragen.
Ausgabe eines Wertes mit HTML Formatierung
Falls der
anzuzeigende Wert irgendwelche HTML-Formatierungen enthält,
werden diese nur als Text angezeigt, z.B
<div class="output" name="imgbuilding"></div>
Durch Änderung der Klasse "output" in "outputhtml" erfolgt eine Interpretation des Wertes als HTML:
<div class="outputhtml" name="imgbuilding"></div>
Damit kann man in speziellen Fällen auf ABAP-Ebene Strings mit HTML-Formatierung erzeugen und ebenso wie normale Werte übertragen. Durch class="outputhtml" erfolgt dann die Interpretation als HTML-String.
Ausgabe eines Wertes mit speziellen CSS-Klassen
In ABAP
Können Sie durch die Methode
s10addcss()
einem Klassenattribut dynamisch eine CSS-Klasse zuordnen, die
dann bei der Anzeige wirksam wird. Die CSS-Klasse entweder lokal
in der HTML-Seite definieren oder in dem Stylesheet
"custom.style.css". Details sind bei s10addcss()
dokumentiert.
Beispiel:
<input class="input" name="building" size="20" maxlength="20" />
Stylesheet:
.missinginfo
{
background-color:
gold
!important;
}
ABAP
* indicate: missing information
s10addcss( attrname = 'building' cssclassname = 'missinginfo' ).
Anzeige:
Spezielle Elemente:
Dropdown-Listen und Langtexte
Hierzu gibt es jeweils
separate Kapitel in der S10 Dokumentation. Der grundlegende
Mechanismus, d.h. die bidirektionale Bindung über den Namen,
bleibt der gleiche.
Andere HTML-Eingabetypen
HTML5 unterstützt in <input> einige nützliche
spezielle Eingabetypen. Der Default ist type="text". Sie können
alle HTML5 Eingabetypen im S10 Framework verwenden.
Hier
sind einige Beispiele mit der jeweiligen Visualisierung in
Chrome:
<input
type="date"
class="input"
name="..."
/>
Format in ABAP: YYYYMMDD
<input
type="month"
class="input"
name="..."
/>
Format in ABAP: YYYY-MM
<input
type="time"
class="input"
name="..."
/>
Format in ABAP: HH:MM
<input
type="search"
class="input"
name="..."
/>
Beliebiger String, es wird zusätzlich ein "x" zum Löschen des
Inhalts angezeigt.
<input
type="range"
class="input"
name="..."
min"..."
max="..."
step="..."
/>
Format in ABAP: Zahl
Nützliche weitere
HTML5-Attribute in <input>
Folgende Optionen sind
ab und zu nützlich:
- autocomplete
- list
- max
- min
- pattern
- placeholder
- step
- style="text-transform: uppercase"
- style="text-transform: lowercase"
Details dazu finden sich in der
HTML5-Dokumentation.
Komponente: S10 Framework