Wussten Sie schon, dass Sie Einträge in einer APEX-Kalenderregion mit Drag & Drop verschieben können - ganz wie in bekannten Anwendungen wie Microsoft Outlook oder Mozilla Thunderbird? Und dazu müssen Sie noch nicht einmal aufwändiges JavaScript programmieren - APEX bringt nahezu alles nötige out-of-the-box mit. Wir beginnen das Beispiel mit einer einfachen Tabelle - natürlich enthält diese mindestens eine Datumsspalte.

drop table tab_kalender
/

create table tab_kalender (
   id             number(10) primary key,
   datum          date not null,
   veranstaltung  varchar2(200) not null,
   ort            varchar2(200) not null
)
/


insert into tab_kalender values (1, DATE'2012-04-24', 'APEX Entwicklertag','München');
insert into tab_kalender values (2, DATE'2012-04-26', 'APEX Entwicklertag','Düsseldorf');
insert into tab_kalender values (3, DATE'2012-04-29', 'APEX Entwicklertag','Berlin');
insert into tab_kalender values (4, DATE'2012-04-18', 'DOAG SIG Spatial','Frankfurt');

commit
/

Drag & Drop mit dem "einfachen Kalender"

Zuerst erstellen wir den komplett assistentengestützten, "einfachen", Kalender. Erzeugen Sie dazu eine neue, leere Seite in einer APEX-Anwendung, starten Sie diese und klicken Sie dann in der Developer Toolbar unten auf Erstellen (Create). Im darauf folgenden Dialog nehmen Sie Region auf dieser Seite und dann Kalender (Abbildung 1).

Abbildung 1: Eine neue Kalenderregion erstellen

Wir beginnen mit dem einfachen Kalender (Abbildung 2).

Abbildung 2: Zuerst wird ein "einfacher Kalender" erstellt

Geben Sie Ihrer Region dann einen Namen, legen Sie fest, dass die Region per Partial Page Refresh aktualisiert werden soll und wählen Sie die Tabelle TAB_KALENDER aus der Liste aus. Bei den Kalenderattributen wählen Sie die Datums- und Anzeigespalte aus und stellen Sie Drag & Drop aktivieren auf Ja (Abbildung 3).

Abbildung 3: Datums- und Anzeigespalte einstellen, "Drag & Drop" aktivieren

Im darauf folgenden Dialog können Sie festlegen, ob die Kalendereinträge gleichzeitig Links sein sollen und, wenn ja, wohin diese verzweigen sollen - der Assistent bietet Ihnen praktischerweise direkt das Erstellen einer passenden Formularseite an. Der nächste Dialog beschäftigt sich nochmals mit dem vorher aktivierten Drag & Drop. Denn sobald der Nutzer einen Eintrag verschoben hat, muss ja der Inhalt der Datumsspalte geändert werden: Das geschieht mit einem AJAX OnDemand-Prozess, der nun konfiguriert wird (Abbildung 4).

Abbildung 4: Einrichten des OnDemand-Prozesses für Drag & Drop

Der "einfache" Kalender macht es wirklich einfach: Passend zur Tabelle bietet er an, den OnDemand-Prozess automatisch zu erstellen - und genau das wollen wir in diesem ersten Beispiel auch machen. Klicken Sie dann auf Weiter. Nachdem Sie im letzten Dialog alles nochmal betrachtet haben, klicken Sie schließlich auf Kalender erstellen, starten Sie die Seite dann und versuchen Sie, einen Eintrag mit der Maus zu verschieben. Es sollte alles funktionieren, wie in Abbildung 5 dargestellt.

Abbildung 5: Drag & Drop im Kalender funktioniert

Navigieren Sie danach nochmals zur Seitenbearbeitung - wir wollen uns insbesondere den automatisch erzeugten onDemand-Prozess nochmals ansehen (Abbildung 6).

Abbildung 6: automatisch erzeugter OnDemand-Prozess für Drag & Drop

Ein Klick auf Bearbeiten zeigt den sehr einfachen Code ...

Abbildung 7: PL/SQL Code des automatisch erzeugten OnDemand-Prozesses

Diesen Code können Sie nun natürlich auch anpassen - so können Sie einen Eintrag in eine weitere Tabelle machen (bspw. ein Journal führen) oder ggfs. auch andere Inhalte der Tabelle ändern - ganz so, wie Sie es brauchen. Man sieht, dass Drag & Drop in einem APEX-Kalender eine ganz einfache Sache ist. Als nächstes schauen wir uns an, wie das ganze aussieht, wenn die Daten auf mehrere Tabellen verteilt sind, oder der "einfache" Kalender aus anderen Gründen nicht passt.

Drag & Drop mit dem "SQL Kalender"

Der Einfachheit halber arbeiten wir mit der gleichen Tabelle weiter. Allerdings soll der Kalender nun ein wenig anders aussehen: Vorhin wurde nur die Bezeichnung der Veranstaltung im Kalender dargestellt - nun soll der Ort dazukommen. Da der einfache Kalender nur die Auswahl einer Tabellenspalte zur Anzeige erlaubt, müssen wir hier etwas tun. Es bieten sich zwei Lösungswege an:

• Erstellen einer View und anschließendes Arbeiten wiederum mit dem "einfachen Kalender"
• Nutzen des SQL Kalenders

In diesem Tipp nehmen wir die zweite Variante - für's "echte Leben" ist durchaus empfehlenswert, intensiv über die erste Variante (View) nachzudenken, denn diese Vorgehensweise ist gleichzeitig eine sehr elegante Kapselung: Die evtl. vorhandene Komplexität Ihres Datenmodells kann durch die View vor der APEX-Anwendung verborgen werden. Da Sie in APEX dann mit einer Standardkomponente arbeiten, ist die Anwendung wesenlich einfacher zu warten und zu pflegen.

Erstellen Sie also erneut eine (leere) Anwendungsseite, klicken Sie in der Developer Toolbar wiederum auf Erstellen, nehmen Sie wiederum eine Kalenderregion. Im darauf folgenden Dialog wählen Sie aber SQL-Kalender (Abbildung 8).

Abbildung 8: Nun nehmen wir den "SQL Kalender" ...

Im ersten Dialog legen Sie, wie vorhin, den Namen der Region und die Tatsache, dass die Aktualisierung per Partial Page Refresh erfolgen soll, fest. Danach geht es an die SQL-Abfrage (Abbildung 9). Die wesentliche Änderung zu vorhin ist hier nur die, dass sowohl Veranstaltungsbezeichnung als auch der Ort dargestellt werden sollen. Diese müssen also zu einer Ergebnisspalte zusammengefasst werden.

Abbildung 9: Hinterlegung der SQL-Abfrage

Im dann folgenden Dialog ordnen Sie wiederum die Ergebnisspalten der SQL-Abfrage den Kalenderspalten zu und aktivieren Drag & Drop.

Abbildung 10: Datums- und Anzeigespalte einstellen, "Drag & Drop" aktivieren

Danach geht es an die Link-Details - dort können Sie, wie vorhin, nach Gusto vorgehen - und schließlich wieder zum Drag & Drop Prozess (Abbildung 11).

Abbildung 11: Drag & Drop Prozess beim "SQL-Kalender" einstellen

Hier zeigt sich ein kleiner, aber wesentlicher Unterschied zum "einfachen" Kalender - denn APEX bietet nicht mehr an, den onDemand-Prozess automatisch zu erstellen. Das muss der Entwickler nun selbst tun. Da wir den Prozess noch nicht erstellt haben, können wir hier vorerst nichts weiter tun: Wählen Sie nichts aus und klicken Sie auf Weiter. Bestätigen Sie das Erstellen der Kalenderregion und schauen Sie sich Ihre Seite erstmal an.

Abbildung 12: Der SQL-Kalender ist erstellt - Drag & Drop funktioniert aber noch nicht

Drag & Drop funktioniert bei diesem Kalender noch nicht - es kann noch nicht funktionieren, da noch ein onDemand-Prozess eingestellt wurde. Den müssen Sie als Entwickler nun selbst erstellen. Die gute Nachricht dabei ist: Der onDemand-Prozess bleibt von der Struktur her so einfach, wie der mit dem einfachen Kalender automatisch generierte. Lediglich das SQL-UPDATE-Kommando muss der Entwickler an seine Tabellenstruktur anpassen.

declare
    l_date_value         varchar2(32767) := apex_application.g_x01;
    l_primary_key_value  varchar2(32767) := apex_application.g_x02;
begin
 update "TAB_KALENDER" 
   set "DATUM" = to_date(l_date_value,'RRRRMMDDHH24MISS') 
 where "ROWID"= l_primary_key_value;
end;

APEX sorgt dafür, dass der Prozess das "neue" Datum und den Wert des Primärschlüssels übergeben bekommt. Damit kann man als Entwickler ein SQL-UPDATE-Kommando schreiben und in den Prozess einbauen. In unserem Beispiel ist das besonders einfach, da der Code 1:1 übernommen werden kann. Wir müssen den onDemand-Prozess nun lediglich erstellen und dann im Kalender konfigurieren. Navigieren Sie also zur Seitenbearbeitung und dort klicken Sie, mittig bei den AJAX Callbacks, die rechte Maustaste und dann im Kontextmenü auf Erstellen (Abbildung 13).

Abbildung 13: Ein neuer onDemand-Prozess wird erstellt ...

Nehmen Sie als Prozesstyp PL/SQL und geben Sie dem Prozess im nächsten Dialog einen Namen. Den Prozesspunkt belassen Sie bei Bedarfsgesteuert.

Abbildung 14: Namen für den Prozess festlegen - der Prozesspunkt bleibt unverändert

Anschließend hinterlegen Sie den PL/SQL-Code. Für dieses Beispiel übernehmen wir den Code des "einfachen" Kalenders 1:1.

Abbildung 15: PL/SQL Code hinterlegen

Schließen Sie die Erstellung des Prozesses mit Klick auf Prozess erstellen ab - Sie landen wieder in der Seitenübersicht. Nun muss als letztes noch der gerade erstellte onDemand-Prozess beim Kalender eingetragen werden. Klicken Sie dazu auf dem Kalender-Objekt links die rechte Maustaste und wählen Sie im Kontextmenü Kalender bearbeiten aus.

Abbildung 16: Nun wird der Kalender bearbeitet ...

Auf der Bearbeitungsseite finden Sie ganz unten den Bereich Drag & Drop. Hier können Sie den eben erstellten onDemand-Prozess auswählen und den Kalender danach speichern.

Abbildung 17: Drag & Drop-Prozess auswählen und Kalender speichern ...

Und dann sind Sie fertig. Starten Sie den Kalender und versuchen Sie ein Drag & Drop. Es sollte nun auch beim SQL-Kalender funktionieren.

Abbildung 18: Drag & Drop funktioniert nun auch beim SQL-Kalender

Zurück zur Community-Seite