Für Formulare bietet Application Express eine Vielzahl verschiedenster Eingabefelder an. Mit Auswahllisten oder dem Mini-Kalender zur Datumsauswahl sind nur zwei Beispiele genannt.

Besonders wenn ein Formular möglichst schnell bearbeitet werden soll, wünscht man sich jedoch ein Eingabefeld, welches sehr flexibel reagiert und ohne Maus bedient werden kann. Wünschenswert wäre ein Feld, welches reagiert wie eine Zelle in einer Tabellenkalkulation: Die Eingabe wird automatisch interpretiert und ggfs. vervollständigt.

In diesem Tipp erfahren Sie, wie Sie ein solches Feld in Ihren Anwendungen bereitstellen können. Es wird folgende Fähigkeiten haben:

• Zahleneingaben:
  Die Eingabe wird automatisch mit der gewünschten Anzahl Nachkommastellen formatiert. Aus der Eingabe 1 wird so 1.00.
• Datumseingaben:
  Ein eingegebenes Datum wird erkannt und im gewünschten Format dargestellt. Aus der Eingabe 20/9 wird so 20.09.2006 oder 2006/09/20.
• Berechnungen:
  Wie in einer Tabellenkalkulation können auch einfache Berechnungen durchgeführt werden - Allerdings wird hier die Berechnung sofort durchgeführt und nicht gespeichert. Aus der Eingabe =1+90+(8/2) wird so 95.00.

Ausgangspunkt ist eine beliebige Application Express-Anwendung mit einigen bereits vorhandenen Textfeldern. Auch das Application Express-Datumsauswahlfeld können Sie verwenden. Binden Sie zunächst die JavaScript-Bibliothek library.js in Ihre Application Express-Anwendung ein. Am besten tun Sie dies im jeweiligen Seitentemplate. Navigieren Sie in der Seitenbearbeitung einer Anwendungsseite zum Bereich Templates (rechts). Klicken Sie dort auf das Seitentemplate, welches Ihre Anwendung verwendet (Abbildung 1).

Abb.1: Navigation zum verwendeten Seitentemplate

Binden Sie im Bereich Header die JavaScript-Bibliothek ein. Fügen Sie hinzu:

<script type="text/javascript" src="#WORKSPACE_IMAGES#library.js"></script>

Abb.2: Einbinden der JavaScript-Bibliothek im Seitentemplate

Damit die JavaScript-Bibliothek von Ihrer Anwendung genutzt werden kann, müssen Sie diese nun noch hochladen. Laden Sie die Datei library.js auf Ihre lokale Festplatte, navigeren Sie dann zu den Gemeinsamen Komponenten, dort zu den Statischen Dateien und klicken Sie auf die Schaltfläche Erstellen.

Abb.3: Hochladen der JavaScript-Bibliothek

Nun ist alles vorbereitet - Sie können Ihre Textfelder jetzt automatisch formatieren lassen. Navigieren Sie dazu zu der Seite, auf der sich die Textfelder befinden, navigieren Sie zu den Seitenattributen und dort zum Seitenfooter. Hier fügen Sie nun etwas JavaScript-Code hinzu, welcher das automatische Formatieren des Elementes aktiviert.

<script type="text/javascript">
<!--
  register_autoformat('P4_BETRAG');
  setParameter('P4_BETRAG','decimalDigits', 2);
  setParameter('P4_BETRAG','colorNegativeDecimal', 'red');
  setParameter('P4_BETRAG','colorPositiveDecimal', 'black');

  register_autoformat('P4_DATUM');
  setParameter('P4_DATUM','dateFormat', 'dd.mm.yyyy');
//-->
</script>

Mit diesem Code wird festgelegt, dass Dezimalzahlen im Textfeld P4_BETRAG mit zwei Nachkommastellen formatiert werden. Positive Zahlen werden schwarz, negative rot dargestellt. Datumseingaben im Feld P4_DATUM werden automatisch im Format DD.MM.YYYY formatiert.

Probieren Sie es aus! Wie in einer Tabellenkalkulation formatieren sich die Eingabefelder nun selbst. Testen Sie auch die Berechnungen, indem Sie die Eingabe mit einem Gleichheitszeichen (=) beginnen. Dabei können Sie übrigens auch JavaScript-Funktionen wie Math.cos(), Math.pow() oder andere verwenden.

• =1+1
• =Math.cos(90)
• =Math.pow(2,3)
• ...

Abb.4: Das Ergebnis

Zurück zur Community-Seite