Ü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".
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.
Beispiel:
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.
|