Events und Aktionen¶

This tutorial is currently only available in German.

Formulare mit Events und Aktionen ausstatten¶

Hier zeigen wir Ihnen wie wir unsere Formulare mit Hilfe von Events und Javascript mit erweiterten Funktionen ausstatten, etwa um Eingaben zu überprüfen oder Berechnungen auszuführen.

In Abschnitt Ereignisgesteuerte DB-Anfragen-Ausführung zur Aktualisierung von Controls haben wir am Beispiel von Controls, die mit Datenbankabfragen verbunden sind, bereits kennen gelernt, wie man eine (erneute) Ausführung der Abfrage veranlassen kann. Man hinterlegt beim auslösenden Control unter Event Handlers den gewünschten Eventtyp und trägt bei dessen ActionType und Script ein, welche Aktion auf welchen Objekten ausgeführt werden soll.

Im Formular für Stammdaten abfragen sollte z.B. die Auswahl eines Kunden in der Combobox kunde_combobox eine Aktualisierung der von dem gewählten Wert abhängigen Controls auslösen. Wir haben deshalb das onchange-Ereignis gewählt. Die „abhängigen“ Controls waren in diesem Fall kdname_textbox, kdstadt_textbox, kdbonitaet_textbox und auftrnr_combobox.

„Aktualisierung“ bedeutet bei allen diesen Controls, dass die mit ihnen assoziierte Datenbankabfrage erneut ausgeführt werden soll. Da (wie bereits in Abschnitt Ereignisgesteuerte DB-Anfragen-Ausführung zur Aktualisierung von Controls erwähnt), Datenbankabfragen (eigentlich) beim Laden (Load-Ereignis) des Formulars ausgeführt werden, wird ein Reload-Event für diese Controls erzeugt.

Der Eventhandler für Control kunde_combobox sieht dann wie folgt aus:

Verknüpfung von JavaScript-Funktionen mit Events und Controls¶

Mittels in JavaScript-Routinen eingebettete WebForm-API-Funktionen kann man den Wert von Controls ermitteln oder setzen, kann diese ein- oder ausblenden, aktivieren und deaktivieren, auf read only setzen und vieles mehr. Der Anstoß zum Ausführen solcher Routinen erfolgt stets durch ein „Ereignis“ (Event). D.h. wir definieren ein entsprechendes Ereignis und hinterlegen dort, welche unserer JavaScript-Funktionen gerufen werden soll.

Wir illustrieren die Vorgehensweise anhand eines Beispiels. Wir ergänzen hierzu das Formular Auftrag anzeigen um die Funktionalität des Controls gpreis_textbox, die zur Ausführungszeit den Gesamtwert der Auftragspositionen anzeigt.

Zur Berechnung der Summe in der Spalte Preis definieren wir im JavaScript-Fenster unseres Formulars eine Funktion berechnePreis(). Diese soll immer dann aufgerufen werden, wenn sich ein Eintrag in der Spalte Preis ändert, um den Wert des Controls gpreis_textbox neu zu berechnen. (Die inhaltlichen Details dieser Funktion sind im Moment nicht von Belang; auf diese gehen wir später im Kapitel Zeilenweise Verarbeitung von Subtabellen ein.)


function init()
{ 
  berechnePreis();
 //hier eventuell noch weitere Funktionen
}

function berechnePreis()
{
  var gesamtPreis = 0;
  for (var i = 1; i <= af_getSubtableViewRowCount("subtable"); i++)
  {
     gesamtPreis = parseFloat(af_getValue("subtable:Preis:" + i)) + parseFloat(gesamtPreis);
  }
  af_setValue("gpreis_textbox",af_formatNumber(gesamtPreis, "#0.00"));
}

Um die fortlaufende Neuberechnung auszulösen, definieren wir in der Subtabelle im Control Preis ein onchange-Ereignis, welches bei jeder Wertänderung (z.B. wegen einer neuen Zeile) einen Aufruf der Funktion berechnePreis() Funktion ausführt. Folgende Abbildung illustriert den Ablauf:

Man markiert die subtable ①
Wählt in deren Properties ②
Mittels Columns das Control Preis ③
Und in dessen Properties dessen Eventhandlers aus. ④
Dort fügt man ein onchange Ereignis ein ⑤
Wählt ActionType Script ⑥ und
Hinterlegt im Script-Feld ⑦ den Funktionsaufruf (mit Klammer und Semikolon!)

Formular-Ereignis: onload¶

Im Formular Auftrag anzeigen wird in der dargestellten TextBox mit dem internen Namen gpreis_textbox die Spaltensumme von Preis angezeigt. Für die Berechnung des Wertes existiert schon eine JavaScript-Funktion berechnePreis(), die als onchange Ereignis ausgeführt wird (siehe voriger Abschnitt). Diese Funktion soll einerseits bei einer Wertänderung in der Spalte Preis andererseits aber auch beim Laden des Formulars aufgerufen werden.

Das onchange Ereignis steht für die Neuberechnung nach Wertänderung und wird im Eventhandler der Spalte Preis definiert.

Wir definieren zusätzlich ein onload Ereignis auf Formularebene für die Neuberechnung nach Laden und rufen dort die Funktion init() vom vorigen Abschnitt, welche die Funktion berechnePreis() aufruft.

Nächste Abbildung illustriert den Ablauf, um diesen Event auf Formularebene zu definieren und ihm die init()-Funktion zuzuordnen.:

Man klickt außerhalb eines Controls in das Formular ① worauf in der Properties-Ansicht Worksheet angezeigt wird.
Dort klickt man auf Edit Actions ② und öffnet Script Event Actions
Im Script Event Actions -Fenster fügt man ein Event Action ③ hinzu,
Indem man zuerst den Typ onload-Event ④
Und ActionType Script ⑤ wählt.
Unter Value hinterlegt man den init() ⑥-Aufruf

Ein- und Ausblenden von Controls¶

Im Formular Stammdaten abfragen sollen die Controls kdname_text, kdstadt_textbox, kdbonitaet_textbox und auftrnr_combobox nur dann eingeblendet werden, wenn in der DropDown-Liste kunde_combobox ein Kunde ausgewählt wurde. D.h. initial sowie bei „Abwahl“ des angezeigten Kunden, sollen diese Controls wieder ausgeblendet werden.

Um diese Controls (inkl. deren Labels) nicht einzeln mittels af_setHidden(controlName, hidden) ein- und ausblenden zu müssen, packen wir sie in eine Groupbox, deren Border wir auf false setzen, so dass sie keine Umrandung aufweist (siehe nächste Abbildung).Wir tragen bei allen Controls, die wir in die Groupbox einpacken möchten, den Namen der Groupbox kundedetails_groupbox bei Properties -> groupbox ein. Mittels af_setGroupBoxHidden(groupBoxID, hidden) können wir die Groupbox nebst Inhalt ein- und ausblenden.
Die Controls kdname_textbox, kdstadt_textbox und kdbonitaet_textbox mit zugehörigen Labels befinden sich nun in dieser Groupbox.

Für das initiale Ausblenden bietet es sich an, im JavaScript-Fenster eine entsprechende Funktion zu hinterlegen, in die wir alles hineinpacken, was beim Laden des Formulars ausgeführt werden soll. Im Beispiel haben wir unsere Groupbox kundedetails_groupbox genannt, somit könnte unsere init()-Funktion etwa wie folgt aussehen.


function init() 
{ 
  af_setGroupBoxHidden("kundedetails_groupbox", true);  
}

Den Aufruf von init() platzieren wir im Eventhandler des Formulars (Properties -> Edit Actions) indem wir dort ein onload-Ereignis definieren.

Für das Ein- und Ausblenden definieren wir uns die analoge einAusblenden Funktion, in der wir den Parameter Hidden auf false bzw. true setzen, wenn kunde_combobox einen Wert bzw. keinen Wert aufweist . Die einAusblenden-Funktion rufen wir im Eventhandler des Controls kunde_combobox auf, indem wir hierfür dort ein onchange-Ereignis definieren.


function einAusblenden() 
{ 
  af_setGroupBoxHidden("kundedetails_groupbox", !af_hasValue("kunde_combobox"));  
}

Zeilenweise Verarbeitung von Subtabellen¶

Mittels <subtable_name>:<spaltenname>:<zeilennummer> kann man auf jede Zelle einer Subtabelle zugreifen und deren Wert auslesen oder setzen. Wir möchten nun die Funktion berechnePreis() des Prozessschritts Auftrag anzeigen aufgreifen und zeigen, wie wir auf die Zellen einer Subtabelle zugreifen. In diesem Beispiel wird die Summe der Spalte Preis der Subtabelle subtable im Control gpreis_textbox ausgegeben. In der Funktion berechnePreis() wird auf die einzelnen Zellen mit subtable:preis: zugegriffen. Man beachte hier bei, dass der Zeilenindex 1-basiert ist, d.h. die Zählung beginnt nicht bei 0 sondern bei 1.


function berechnePreis() 
 { 
 var gesamtPreis = 0; 
 for (var i = 1; i <= af_getSubtableViewRowCount("subtable"); i++) 
 { 
 gesamtPreis = parseFloat(af_getValue("subtable:preis:" + i)) + gesamtPreis; 
 } 
 af_setValue("gpreis_textbox", af_formatNumber(gesamtPreis, "#0.00")); 
 }