APEX 5.1 Early Adopter: Erste Schritte mit dem Interactive Grid

Eins der wichtigsten neuen Features in APEX 5.1 ist mit Sicherheit das neue Interactive Grid - in der APEX 5.1 Early Adopter Instanz können Sie es auch gleich selbst ausprobieren. In diesem Tipp stellen wir Ihnen das neue Feature vor und zeigen die ersten Schritte - von dort aus können Sie dann leicht selbst weiter experimentieren.

In diesem Tipp arbeiten wir mit den wohlbekannten Tabellen EMP und DEPT - diese sind im Early Adopter Workspace normalerweise aus dem Stand enthalten. Wenn nicht, spielen Sie sie einfach mit dem folgenden Skript im SQL Workshop ein.

CREATE TABLE DEPT (
    DEPTNO NUMBER(2),
    DNAME VARCHAR2(14),
    LOC VARCHAR2(13),
    CONSTRAINT PK_DEPTNO PRIMARY KEY (DEPTNO))
/

INSERT INTO DEPT VALUES (10, 'ACCOUNTING', 'NEW YORK')
/
INSERT INTO DEPT VALUES (20, 'RESEARCH',   'DALLAS')
/
INSERT INTO DEPT VALUES (30, 'SALES',      'CHICAGO')
/
INSERT INTO DEPT VALUES (40, 'OPERATIONS', 'BOSTON')
/

CREATE TABLE EMP (
    EMPNO NUMBER(4) NOT NULL,
    ENAME VARCHAR2(10),
    JOB VARCHAR2(9),
    MGR NUMBER(4),
    HIREDATE DATE,
    SAL NUMBER(7, 2),
    COMM NUMBER(7, 2),
    DEPTNO NUMBER(2),
    CONSTRAINT PK_EMPNO PRIMARY KEY (EMPNO),
    CONSTRAINT FK_EMP_DEPT FOREIGN KEY (DEPTNO) REFERENCES DEPT (DEPTNO))
/

INSERT INTO EMP VALUES
        (7369, 'SMITH',  'CLERK',     7902,
        TO_DATE('17-12-1980', 'DD-MM-YYYY'),  800, NULL, 20)
/
INSERT INTO EMP VALUES
        (7499, 'ALLEN',  'SALESMAN',  7698,
        TO_DATE('20-02-1981', 'DD-MM-YYYY'), 1600,  300, 30)
/
INSERT INTO EMP VALUES
        (7521, 'WARD',   'SALESMAN',  7698,
        TO_DATE('22-02-1981', 'DD-MM-YYYY'), 1250,  500, 30)
/
INSERT INTO EMP VALUES
        (7566, 'JONES',  'MANAGER',   7839,
        TO_DATE('2-04-1981', 'DD-MM-YYYY'),  2975, NULL, 20)
/
INSERT INTO EMP VALUES
        (7654, 'MARTIN', 'SALESMAN',  7698,
        TO_DATE('28-09-1981', 'DD-MM-YYYY'), 1250, 1400, 30)
/
INSERT INTO EMP VALUES
        (7698, 'BLAKE',  'MANAGER',   7839,
        TO_DATE('1-05-1981', 'DD-MM-YYYY'),  2850, NULL, 30)
/
INSERT INTO EMP VALUES
        (7782, 'CLARK',  'MANAGER',   7839,
        TO_DATE('9-06-1981', 'DD-MM-YYYY'),  2450, NULL, 10)
/
INSERT INTO EMP VALUES
        (7788, 'SCOTT',  'ANALYST',   7566,
        TO_DATE('09-12-1982', 'DD-MM-YYYY'), 3000, NULL, 20)
/
INSERT INTO EMP VALUES
        (7839, 'KING',   'PRESIDENT', NULL,
        TO_DATE('17-11-1981', 'DD-MM-YYYY'), 5000, NULL, 10)
/
INSERT INTO EMP VALUES
        (7844, 'TURNER', 'SALESMAN',  7698,
        TO_DATE('8-09-1981', 'DD-MM-YYYY'),  1500,    0, 30)
/
INSERT INTO EMP VALUES
        (7876, 'ADAMS',  'CLERK',     7788,
        TO_DATE('12-01-1983', 'DD-MM-YYYY'), 1100, NULL, 20)
/
INSERT INTO EMP VALUES
        (7900, 'JAMES',  'CLERK',     7698,
        TO_DATE('3-12-1981', 'DD-MM-YYYY'),   950, NULL, 30)
/
INSERT INTO EMP VALUES
        (7902, 'FORD',   'ANALYST',   7566,
        TO_DATE('3-12-1981', 'DD-MM-YYYY'),  3000, NULL, 20)
/
INSERT INTO EMP VALUES
        (7934, 'MILLER', 'CLERK',     7782,
        TO_DATE('23-1-1982', 'DD-MM-YYYY'), 1300, NULL, 10)
/

COMMIT
/

Das erste Interactive Grid

Erzeugen Sie sich also einen Workspace auf der APEX 5.1 Early Adopter Instanz, loggen Sie sich ein und erzeugen Sie eine einfache, leere Anwendung. Ein neues Interactive Grid können Sie dann entweder mit dem Create Page Assistenten oder direkt im Page Designer erzeugen. Wir nehmen letztere Variante - suchen Sie in der Component Palette unten das Icon für Interactive Grid und ziehen Sie es an die gewünschte Stelle Ihrer Anwendungsseite (Abbildungen 1 und 2).

Abbildung 1: Das Icon für das Interactive Grid befindet sich in der Component Palette

Abbildung 2: Ziehen Sie das Interactive Grid an die gewünschte Seitenposition

Wie immer im Page Designer wird die Komponente als fehlerhaft markiert, wenn noch Angaben fehlen oder falsch sind. Das Interactive Grid braucht eine Datenquelle - eine SQL Query, die Sie im Property Editor auf der rechten Seite eingeben können. Wir machen es uns einfach und nehmen die wohlbekannte Tabelle DEPT. Tragen Sie also select * from dept als SQL Query unter Source ein und geben Sie der Region einen Namen. Speichern Sie dann ab und starten Sie Ihre Seite.

Abbildung 3: Das erste Interactive Grid in Aktion

Auf den ersten Blick sieht das neue Interactive Grid so aus wie bislang der Interaktive Report - und das ist auch so gewollt. Standardmäßig ist die Read Only Ansicht für das Interactive Grid aktiv; die Daten sind also nicht änderbar. Das Menü Actions bietet mehr oder weniger die gleichen Aktionen an wie sein Pendant im interaktiven Bericht - allerdings sind im Early Adopter 1 noch nicht alle Funktionen implementiert, so dass Sie die Fehlermeldung Not Implemented for EA1 etwas öfter sehen. Die Menüpunkte Filter, Data - Aggregate, Data - Flashback oder Report Settings können Sie verwenden. Auch der Zeilenfilter überhalb des Datenrasters funktioniert problemlos.

Wie beim interaktiven Bericht können Sie auch im Interactive Grid die Spalten-Header anklicken, um die Spalte zu sortieren, einen Control-Break für Aggregate zu erstellen oder um ein "Freeze Panes" durchzuführen. Letzteres ist vor allem für sehr breite Interactive Grid mit vielen Spalten interessant: Die eingefrorenen Spalten bleiben sichtbar, auch wenn nach rechts gescrollt wird.

Nun soll das Interactive Grid aber editierbar gemacht werden: Navigieren Sie zurück zum Page Designer und dort zur Region mit dem Interactive Grid. Öffnen Sie den Bereich Attributes und stellen Sie im Property Editor auf der rechten Seite im Abschnitt Edit den Schalter Enabled auf Yes. Daraufhin werden weitere Attribute sichtbar, mit denen Sie festlegen können, welche Operationen erlaubt sein sollen, die im Falle konkurrierender Änderungen verfahren werden soll und einiges mehr. Für den Moment soll das einfache Einschalten genügen - speichern Sie also ab und starten Sie die Seite neu.

Abbildung 4: Interactive Grid editierbar machen

Wenn Sie nun mit der Maus in eine der Zellen des Rasters klicken, können Sie die Inhalte verändern - mit der Tab-Taste können Sie vor- und zurücknavigieren. Die Escape-Taste verlässt das Eingabefeld, mit den Cursortasten können Sie aber immer noch im Datenraster navigieren.

Abbildung 5: Editieren im Interactive Grid

Änderungen werden mit dem Interactive Grid nicht direkt in die Datenbank geschrieben; vielmehr merkt sich der Browser den Stand des Interactive Grid. Erst der Klick auf eine Schaltfläche (Save) wird dazu führen, dass die Änderungen in die Tabellen geschrieben werden. Daher wird eine Zeile nach Änderungen farblich markiert. Wenn Sie auf das "Hamburger-Menü" in einer Tabellenzeile links klicken, können Sie Operationen wie Kopieren, Löschen, oder Refresh für die ganze Zeile durchführen (Abbildung 6).

Abbildung 6: Zeilen-Operationen mit dem Interactive Grid

Mit der Checkbox ganz links können Sie mehrere Zeilen des Interactive Grid markieren; danach wird das Menü hinter dem Button Change interessant. Hier können Sie alle markierten Zeilen auf einmal löschen, kopieren, aktualisieren oder etwaige Änderungen verwerfen. Wie schon beschrieben, speichert ein Klick auf Save die Änderungen ab.

Mehrere Interactive Grids: Master Detail

Ein wesentliches Design-Ziel des Interactive Grid ist es, verschiedenste Varianten einer Master-Detail Ansicht zu unterstützen. Das probieren wir jetzt aus: Navigieren Sie zurück zum Page Designer und dort zu Ihrem Interactive Grid. Öffnen Sie links im Strukturbaum die Spalten des Grids und navigieren Sie zur Spalte DEPTNO. Im Property Editor rechts stellen Sie das Attribut Primary Key auf Yes.

Abbildung 7: Die Spalte DEPTNO wird im Interactive Grid als Primary Key markiert

Danach ziehen Sie ein zweites Interactive Grid auf die Anwendungsseite - platzieren Sie es am besten unterhalb des ersten. Als SQL-Query hinterlegen Sie select * from emp. Bevor Sie aber nun speichern und die Seite starten, stellen Sie das Regionsattribut Master Region im Bereich Master Detail noch auf das erste Interactive Grid (DEPT). Damit haben Sie festgelegt, dass eine Master-Detail-Beziehung zwischen den Interactive Grids bestehen soll.

Abbildung 8: Das neue Interactive Grid wird mit dem ersten verknüpft

Wie bei einem Fremdschlüssel in der Datenbank müssen Sie nun aber noch festlegen, welche Spalten der beiden Interactive Grids miteinander verknüpft werden sollen. Dazu navigieren Sie im neuen Interactive Grid (EMP) zur Spalte DEPTNO, dort im Property Editor zum Bereich Master Detail. Die Auswahlliste enthält die Spalten des ersten Interactive Grids ("Master"). Wählen Sie dort die Spalte DEPTNO aus - denn diese korrespondiert mit der Spalte DEPTNO im zweiten Interactive Grid ("Detail"). Speichern Sie die Änderungen ab.

Abbildung 9: Festlegen der korrespondierenden Interactive Grid Spalten

Nun können Sie die Seite starten. Wenn Sie eine Zeile im ersten Interactive Grid klicken, so lädt das zweite Grid die Zeilen entsprechend nach. Auf diese einfache Art und Weise haben Sie ein Master-Detail-Formular realisiert.

Abbildung 10: Master Detail mit dem Interactive Grid - in Aktion

Wie schon das erste ist auch das zweite Interactive Grid standardmäßig Read Only - in dessen Attributen können Sie es editierbar machen. Daraufhin wird sich der Browser die Änderungen in beiden Interactive Grids "merken" und mit Klick auf die Schaltfläche Save wird dann die ganze Seite in die Datenbank gespeichert.

Nun gehen wir noch einen Schritt weiter - nehmen Sie ein drittes Interactive Grid hinzu: Parent - Child - Grandchild:

• Markieren Sie die Spalte EMPNO des zweiten Interactive Grids in deren Spaltenattributen als Primary Key.
• Fügen Sie ein drittes Interactive Grid hinzu: Nehmen Sie wiederum select * from emp als SQL Query.
• Stellen Sie das zweite Interactive Grid als Master Region ein (Regionsattribute - Master Detail).
• Legen Sie für die Spalte MGR des dritten Interactive Grids die Spalte EMPNO des zweiten als Master Column fest.

Abbildung 11: Parent - Child - Grandchild mit dem Interactive Grid

Wenn Sie die Seite starten, haben Sie drei, miteinander verknüpfte Interactive Grids (Abbildung 11). Sobald im ersten Grid eine Zeile geklickt wird, lädt das zweite alle Zeilen, die zur geklickten DEPTNO passen. Wird dort eine Zeile geklickt, lädt das dritte Grid alle Zeilen, die zum geklickten MGR passen - mit wenigen Mausklicks haben Sie diese Beziehung auf der APEX-Seite abgebildet. Nun können Sie frei entscheiden, welche Interactive Grids Sie editierbar machen möchten und welche nicht.

Interactive Grid Spalten bearbeiten: Eingabetypen und mehr ...

Das erste, was man im Interactive Grid mit Sicherheit ändern möchte, sind die einfachen Texteingabefelder im Datenraster. Im Gegensatz zu den älteren tabellarischen Formularen unterstützt das interactive Grid alle APEX-Elementtypen - selbst Textbereiche oder der Rich Text Editor werden hier möglich sein.

Das Ändern eines Eingabetyps für eine Spalte im Interactive Grid ist denkbar einfach: Navigieren Sie zur jeweiligen Spalte und ändern Sie im Property Editor rechts das Attribut Type entsprechend um (Abbildung 7).

Abbildung 12: Eingabetypen für Interactive Grid-Spalten ändern

Wenn Sie die Seite neu laden, sehen Sie das Ergebnis:

Abbildung 13: Das Ergebnis: Eingabetypen für Interactive Grid-Spalten ändern

Oft ist es so, dass nur manche Spalten des Interactive Grid editierbar sein sollen; andere sind nur zur Information da. Stellen Sie für diese den Item Type auf Display Only und aktivieren Sie im Bereich Source das Attribut Query Only. So wird die Spalte nicht mehr als Eingabefeld gerendert und außerdem nicht mehr in SQL INSERT oder UPDATE-Anweisungen aufgenommen.

Abbildung 14: Nicht änderbare Spalte in einem Interactive Grid

Abbildung 15: Das Ergebnis: Nicht änderbare Spalte in einem Interactive Grid

Als erster Einstieg in das Interactive Grid soll dies für heute genügen. Dieser Tipp hat bei weitem noch nicht alles vorgestellt; probieren Sie ein wenig herum, denn es gibt viel zu entdecken. Wer noch mehr über die Hintergründe erfahren möchte, dem sei das Blog Posting "Interactive Grid - under the hood" von John Snyders empfohlen - hier erfahren Sie sehr viele Details über die Funktionsweise des Interactive Grid.

Außerdem bietet die Packaged Application Sample Interactive Grids eine Menge fertiger Beispiele und Anregungen zur Nutzung des Interactive Grid. Spielen Sie diese Packaged Application am besten gleich in Ihren Early Adopter Workspace ein.

Abbildung 16: Sample Application: Interactive Grids

Mehr zum Thema im nächsten Community-Tipp - bis dahin wünschen wir viel Spaß beim Experimentieren.

Zurück zur Community-Seite