Ü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 synchronisiert 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:
HTML 

<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:
ABAP 
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:

HTML 

<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:

ABAP 

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:
HTML 

<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:
HTML 
<span class="output" name="building"> </span>
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

ABAP 

 data:
    mycustomer  type ref to customer.

definiert. In der Klasse "customer" wiederum ein Attribut

ABAP 

data:
    addr  type ref to address.

Und in der Klasse "address" schließlich

ABAP 

data:
    building type ad_bldng.

Durch

HTML 

<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

HTML 
<div class="output" name="imgbuilding"></div>

Durch Änderung der Klasse "output" in "outputhtml" erfolgt eine Interpretation des Wertes als HTML:

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:

HTML 
<input class="input" name="building" size="20" maxlength="20" />

CSS/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:
HTML 

<input type="date"  class="input" name="..." /> 


 Format in ABAP:  YYYYMMDD
HTML 
<input type="month"  class="input" name="..." /> 
Format in ABAP:  YYYY-MM
HTML 
<code><input type="time"  class="input" name="..." />  

 Format in ABAP:  HH:MM
HTML 
<input type="search"  class="input" name="..." />  



 Beliebiger String, es wird zusätzlich ein "x" zum Löschen des Inhalts angezeigt.
HTML 
<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