Mausbewegungen wie Drag’n’Drop sind eine einfache und weit verbreitete Art, einen „Zur Liste hinzufügen“-Befehl auszuführen oder die Funktionalität neu zu ordnen. In APEX kann dies problemlos mit jQueryUI implementiert werden, wie wir bereits bei der „APEX Connect“ in Düsseldorf letzte Woche erklärt haben. Allerdings haben wir nur die Frontend-Implementierung erklärt und nicht erklärt, wie man diese Änderungen mit der Datenbank verbindet, um die Benutzeraktionen zu behalten. Dies werden wir also in diesem Post tun. Und keine Sorge: Wenn du nicht an unserem Vortrag bei „APEX Connect“ teilnehmen konntest, wir werden zunächst alle Voraussetzungen erklären (Wenn du nur das Beispiel sehen willst, schau dir unseren Arbeitsplatz an).
Die Tabelle erstellen
Wie erwähnt, baut unser Post auf unserem Vortrag auf der Konferenz auf. In unserem Beispiel gab es einen E-Mail-Posteingang. Aus diesem Grund müssen wir zunächst eine Tabelle EMAILS mit diesem SQL erstellen:
CREATE TABLE "EMAILS" ( "NR" NUMBER(38,0) NOT NULL ENABLE, "FROM_USER" VARCHAR2(50), "TO_USER" VARCHAR2(50), "SUBJECT" VARCHAR2(200), "TIME_SENT" TIMESTAMP (6), "TIME_RECEIVED" TIMESTAMP (6), "CONTENT" VARCHAR2(1000), CONSTRAINT "EMAILS_PK" PRIMARY KEY ("NR") USING INDEX ENABLE )
Erstellen Sie eine Seite und betten Sie jQuery-Dateien ein
Wir möchten hier das dropfähige Feature von jQuery UI verwenden. Daher musst du es von https://jqueryui.com/download/ herunterladen und es auf deinen Server hochladen. Danach kannst du eine neue Seite erstellen und die hochgeladene Datei einbetten.
Jetzt können wir eine neue Report-Region erstellen, die unsere E-Mails anzeigt. Verwende daher dieses SQL:
select
"NR" id,
"SUBJECT" subject,
"FROM_USER" from_user,
"CONTENT" content
from EMAILS
Die Vorlagen erstellen
Wir möchten es den Nutzern ermöglichen, Mails aus ihrem Posteingang zu löschen, indem sie diese in ihren Papierkorb verschieben. Verwende daher das dropfähige Feature von jQueryUI. Wie wir in den Beispielen sehen können (https://jqueryui.com/droppable/) /), ist für das Feature die Verwendung der HTML-Tags <ul> und <li> erforderlich. Aus diesem Grund müssen wir eine benutzerdefinierte Vorlage für unseren Bericht erstellen.
Zuerst erstellen wir eine Vorlage auf Grundlage der Report-Region-Klasse, diese nennen wir sortableListRegion :
Danach müssen wir auch den Inhalt für den #BODY# erstellen – also erstellen wir die benutzerdefinierte Vorlage emailListItem :
Jetzt müssen wir die Vorlage emailList Region noch auf unseren erstellten Report anwenden.
Außerdem fügen wir noch ein wenig CSS auf unsere Seite des Posteingangs hinzu.
li.emailListItem { padding: 0.3em 1em; background-color: #eee; margin-left: -1em; } span.from_user { display: inline-block; min-width: 120px; }
Erstelle den dropfähigen Effekt
Jetzt sehen wir unseren Posteingang, können jedoch nicht mit ihm interagieren – noch nicht. Füge zuerst einen statischen Inhaltsbereich hinzu, der als Papierkorb dient. Vergiss nicht, ihm eine ID zu geben, um später darauf zu verweisen. Im Beispiel heißt er P20_TRASH.
Jetzt fügen wir JavaScript hinzu:
$("#P20_TRASH").droppable({ drop: function() { $( ".ui-sortable-helper").toggle("highlight"); } });
Folgendes macht dieser Code: Zuerst erstellen wir ein jQuery Objekt mit der ID, die wir unserem Papierkorb gegeben haben. Dann wenden wir das dropfähige Widget sowie ein Optionsobjekt auf das Element an. Dieses Objekt enthält nur ein Attribut, das dem Drop-Event eine Callback-Funktion zuweist. Dieses Callback sorgt für die Sichtbarkeit des Helper-Elements, indem es durch eine Markierung gesondert hervorgehoben wird.
Persistenz hinzufügen
Jetzt müssen wir Persistenz hinzufügen, damit beim nächsten Öffnen des Posteingangs durch den Nutzer, die entfernten E-Mails nach wie vorweg sind. Daher erstellen wir zunächst ein verstecktes Seitenelement P20_REMOVE_MAIL_ID, welches als Pufferspeicher fungiert.
Anschließend ändern wir das gerade geschriebene JavaScript, indem wir das Optionsobjekt entfernen:
$( "#P20_TRASH" ).droppable();
Statt eine statische Callback-Funktion zuzuweisen, werden wir das Drop-Event mithilfe einer Dynamic Action aufrufen. Wir könnten all das auch in reinem JavaScript tun, mit einer Dynamic Action ist es allerdings wesentlich bequemer.
Dynamic Action settings
Die erwähnte Dynamic Action wird auf das Drop-Event reagieren und auf Aktionen, einen JavaScript-Code und einen PL / SQL-Code hin ausgeführt werden. Der JavaScript-Code ist folgender:
$(".ui-sortable-helper").toggle("highlight"); $("#P20_REMOVE_MAIL_ID").val(this.browserEvent.srcElement.id);
Vielleicht hast du erkannt, dass wir die erste Anweisung bereits benutzt haben, um das gelöschte Element zu verbergen. Die zweite Anweisung ordnet die ID des gedroppten Elements dem soeben erstellten Anwendungsobjekt zu. Es erhält die Element-ID durch das Drop-Ereignis, das aus this und aus der Eigenschaft browserEvent besteht, die auf das Quell-Element und seine ID verweist.
Nur ein Teil des Puzzles ist übriggeblieben. Der PL/SQL-Block. Dieser verwendet den gerade zugewiesenen Wert des Applikationselements innerhalb seiner DELETE-Anweisung. Vergewisse dich, dass du dem Feld „Page Items to submit“ die richtige ID hinzufügst, sonst weiß die Datenbank nicht, dass dem JavaScript ein neuer Wert für dieses Feld zugewiesen wurde, und führt somit den DELETE-Befehl nicht aus.
Fertig. Du kannst das Endergebnis in unserem Arbeitsplatz anschauen. Wir hoffen, dass dieser Post dir dabei behilflich sein kann moderne UI-Designs zu implementieren. Du kannst verschiedene Aktionen wie eine sortierbare Liste im gleichen Stil erstellen, auch wenn du dafür mehr als eine Information benötigst. Verwende einfach mehrere Anwendungselemente und Los geht‘s.