"Drag & Drop" in einem APEX-Kalender nutzen: So geht's!
Erscheinungsmonat |
APEX-Version |
Datenbankversion |
April 2012 |
ab 4.1 |
ab 10.2 |
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.
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.
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
|