Erscheinungsmonat	APEX-Version	Datenbankversion	Cloud oder on Premise
Oktober 2016	5.1	ab 11.2.0.4	on Premise und Cloud

Mit APEX 5.0 wurde nicht nur das Universal Theme eingeführt, sondern auch die Theme Styles. Ein Theme Style ist, vereinfacht gesagt, ein Satz von CSS-Dateien, die mit den HTML-Templates des Themes kombiniert werden. Während die Templates im Theme die Seitenstruktur bestimmen, bestimmt der Theme Style Eigenschaften wie die Farbgebung, Schriftarten oder Ränder. Theme und Theme Style ergeben gemeinsam das Look & Feel. Zu einem Theme kann es mehrere Theme Styles geben.

Abbildung 1: Theme Styles in Application Express 5.0

Mit APEX 5.0 ist es möglich, den Theme Style zu einer Anwendung zu wechseln - allerdings gilt dieser Wechsel stets für alle Nutzer - pro Anwendung kann nur ein Theme Style gleichzeitig aktiv sein. Die von Oracle bereitgestellten Packaged Applications zeigen, wie man eine entsprechende Administrationsseite in seine Anwendung einbauen kann. Der Anwendungsadministrator kann dann das Aussehen durch Wechsel des Theme Style ändern, ohne dass ein Entwickler aktiv werden muss.

Abbildung 2: Administrationsseite zur Auswahl eines Theme Style in einer Packaged Application

In der Early Adopter Version von APEX 5.1, die seit einiger Zeit auf apexea.oracle.com zum Testen bereitsteht, können Sie die für APEX 5.1 geplanten neuen Features testen. Auch bei den Theme Styles hat sich einiges getan. So lässt sich der Theme Style nun auf Ebene der Session - und nicht mehr nur auf Ebene der Anwendung setzen. Unterschiedliche Endanwender können die Anwendung so mit unterschiedlichen Theme Styles sehen. Sogar der gleiche Endanwender kann - je nach Situation - einen anderen Theme Style präsentiert bekommen. Fangen wir am besten gleich an.

Loggen Sie sich an Ihrem Workspace auf der Application Express Early Adopter Instanz an (wenn Sie noch keinen Workspace haben, lassen Sie gleich einen erstellen). Erzeuegen Sie mindestens zwei Nutzerkonten in Ihrem Workspace (USER1 und USER2). Erzeugen Sie dann eine neue Desktop-Anwendung ohne besondere Inhalte und starten Sie diese als USER1.

Abbildung 3: Testanwendung auf dem Application Express 5.1 Early Adopter

Nun soll der Endanwender in die Lage versetzt werden, "seinen" Theme Style selbstständig zu ändern; diese Einstellung wird gespeichert und nach jedem Login wiederhergestellt. Sie gilt allerdings nur für diesen einen Nutzer - alle anderen sehen weiterhin den Default.

Der einfachste Weg dorthin ist nur ein paar Mausklicks entfernt - navigieren Sie zunächst zu den Gemeinsamen Komponenten (Shared Components), dort zum Bereich User Interface Attriutes. Klicken Sie dann auf den Bleistift links neben dem Eintrag für das User Interface Desktop. Damit kommen Sie zu dessen Eigenschaften (Abbildung 4).

Abbildung 4: Eigenschaften des User Interface " Desktop"

Stellen Sie nun den Schalter Enable End Users to choose Theme Style auf Yes und speichern Sie die Änderungen ab. Damit haben Sie Endanwender - grundsätzlich - in die Lage versetzt, Theme Styles selbst zu wählen. Bevor Sie das nun ausprobieren, navigieren Sie nochmals zu den Gemeinsamen Komponenten, dort zu den Themes und klicken Sie den Eintrag für das Universal Theme (42). Dann scrollen Sie herunter zum Abschnitt Styles (Abbildung 5).

Abbildung 5: Vorhandene Theme Styles im Universal Theme

Achten Sie auf die Spalte Is Public - nur Theme Styles, deren Haken dort gesetzt ist, stehen dem Endanwender zur Auswahl bereit. Ist bei keinem der Theme Styles (oder nur bei einem) ein Haken gesetzt, bekommt der Endanwender auch kein Menü aus Auswahl angeboten (denn es gibt ja nichts zu wählen). Wenn Sie einen Haken setzen oder entfernen möchten, klicken Sie den jeweiligen Theme Style an.

Abbildung 6: Ändern der Eigenschaft "Is Public" eines Theme Style

Nachdem Sie die Einstellungen vorgenommen haben, starten Sie Ihre Anwendung erneut. Sie sollten nun unten links einen Link Customize erkennen (Abbildung 7).

Abbildung 7: Der Link "Customize" erscheint standardmäßig unten links

Im sich dann öffnenden Dialog kann einer der als Public markierten Theme Styles ausgewählt und mit Klick auf Apply Changes aktiviert werden (Abbildungen 8 und 9).

Abbildung 8: Einer der als "Public" markierten Theme Styles kann nun ausgewählt werden

Abbildung 9: Der Theme Style wurde für den Endanwender geändert und als "User Preference" gespeichert

Mit nur wenigen Einstellungen kann Ihre Application Express Anwendung nun jedem Endnutzer die Gelegenheit geben, sein Look & Feel selbst zu bestimmen. Allerdings ist der Link Customize nicht unbedingt leicht zu erkennen - vielleicht wäre es angenehmer, wenn es als Menüeintrag auf der linken Seite erscheinen würde. Nun, das ist kein Problem: Navigieren Sie zu den Gemeinsamen Komponenten und dort zu den Listen und dort zur Liste Desktop Navigation Menu. Erzeugen Sie einen neuen Listeneintrag mit Label Customize. Das Ziel ist eine URL - nehmen Sie den Substitution String #CUSTOMIZE_URL# (Abbildung 10). Es ist empfehlenswert, den Eintrag conditional zu machen; er soll nur angezeigt werden, wenn #CUSTOMIZE_URL# NOT NULL ist.

Abbildung 10: Erzeugen Sie einen Listeneintrag "Customize" mit Ziel "#CUSTOMIZE_URL#"

Starten Sie Ihre Anwendung dann neu - nun ist der Eintrag Customize auf der linken Seite gut sichtbar.

Abbildung 11: Der Dialog "Customize" ist nun gut sichtbar im Navigationsmenü

Theme Styles können auch programmatisch - mit PL/SQL gesetzt werden. Dazu dient das mit APEX 5.1 neue PL/SQL Paket APEX_THEME. So wäre es denkbar, dass die Endanwender ihren Style gar nicht selbst wählen sollen; vielmehr sollen verschiedene Nutzer verschiedene Styles präsentiert bekommen. Wie man das einrichtet, wird nun beschrieben.

APEX_THEME bietet PL/SQL Prozeduren zum Setzen der Theme Styles auf Anwendungs-, Benutzer- oder Session-Ebene an. Die Anwendungsebene war schon in APEX 5.0 verfügbar; allerdings war die Prozedur dort noch im Paket APEX_UTIL enthalten. Auf User-Ebene setzen Sie den Style mit SET_USER_STYLE. Setzen Sie als nächstes den Theme Style für USER2 mit PL/SQL auf Vita - Slate. Zuerst braucht es dafür die ID des Theme Style - mit einer SQL-Abfrage finden Sie diese heraus.

select s.name, s.theme_style_id
  from apex_application_theme_styles s, apex_application_themes t    
 where s.application_id = t.application_id
   and s.theme_number   = t.theme_number
   and s.application_id = { Applikations-ID } 
              

Abbildung 12: Theme Styles mit einer SQL-Abfrage ermitteln

Der gewünschte Theme Style trägt (hier) also die ID 432659914451277083. Diese ID ist in jeder Anwendung anders. Diese setzen Sie nun im Aufruf von APEX_THEME ein.

begin
  apex_theme.set_user_style(
    p_application_id => 2453,
    p_user           => 'USER2',
    p_theme_number   => 42,                   -- Universal Theme
    p_id             => 432659914451277083 ); -- ID von "Vita - Slate"
end;
              

Abbildung 13: Theme Style "Vita - Slate" für USER2 setzen

Wenn sich USER2 nun einloggt, wird der graue Theme Style Vita - Slate präsentiert.

Abbildung 14: USER2 sieht nun "Vita - Slate"

Wem der von APEX mitgelieferte "Customize" Dialog nicht gefällt, der kann sich mit dem PL/SQL Paket APEX_THEME und der Prozedur SET_USER_STYLE also problemlos eine eigene erstellen. Mit SET_USER_STYLE können übrigens auch solche Styles gesetzt werden, deren Is Public Attribut auf No steht.

Es bleibt der letzte Fall: Unter Umständen soll es gar nicht vom konkreten User abhängen, welcher Style gezeigt wird, sondern von einer Gruppenzugehörigkeit oder einem anderen Kriterium - ein typisches Beispiel ist eine mandantenfähige Anwendung: Sobald ein Nutzer einem Mandanten zugeordnet ist, soll dessen Look & Feel angezeigt werden. Auch das kann mit APEX_THEME realisiert werden; wir brauchen aber noch ein wenig Vorarbeit. Zuerst erzeugen wir Tabellen, welche die Mandanten, die Zuordung der User zu Mandanten und die Zuordnung von Theme Styles zu Mandanten speichert - für dieses Beispiel soll ein sehr einfacher Tabellenaufbau genügen.

create table TENANTS (
    tenant_name       varchar2(100) not null,
    theme_style       varchar2(100) not null,
    constraint pk_tenants primary key ( tenant_name )
);

insert into TENANTS values ( 'Customer', 'Vita - Red' );
insert into TENANTS values ( 'Partner',  'Vista' ); 

create table TENANTS_USERS (
    tenant_name       varchar2(100) not null,
    user_name         varchar2(100) not null,
    constraint pk_tenant_users    primary key ( tenant_name, user_name ),
    constraint fk_tenant_users_01 foreign key ( tenant_name ) references tenants ( tenant_name )
);

insert into TENANTS_USERS values ( 'Customer', 'USER1' );
insert into TENANTS_USERS values ( 'Partner',  'USER2' );
              

Als nächstes navigieren Sie zu den Gemeinsamen Komponenten, dort zum Bereich User Interface und dann zu den Eigenschaften des User Interface Desktop. Schalten Sie Enable End Users to choose Theme Style wieder ab - denn von nun an wird der Style automatisch zugewiesen. Entfernen Sie auch den Listeneintrag aus der Liste Desktop Navigation Menu.

Danach geht es nochmals zu den Gemeinsamen Komponenten, nun aber zu den Application Processes. Erzeugen Sie einen neuen Application Process, der After Authentication ausgelöst wird.

Abbildung 15: Erzeugen Sie einen neuen Anwendungsprozess "On New Instance"

Als PL/SQL Code hinterlegen Sie den folgenden Block.

declare
    l_style_name varchar2(200) := null;
begin
    begin
        select theme_style 
          into l_style_name
          from tenants t, tenants_users u
         where t.tenant_name = u.tenant_name
           and u.user_name   = :APP_USER;
    exception
        when NO_DATA_FOUND then null;
    end;
    if l_style_name is not null then
        apex_theme.set_session_style(
            p_theme_number => 42,
            p_name         => l_style_name
        );
    end if;
end;
              

Abbildung 16: Theme Style wird mit PL/SQL als Application Process "On New Instance" gesetzt

Nun wird, nachdem ein Anwender sich eingeloggt hat, anhand der Tabelle TENANTS_USERS festgestellt, zu welchem Mandanten er gehört. Der Theme Style dieses Mandanten wird dann mit APEX_THEME.SET_SESSION_STYLE gesetzt. Wird der User nicht in der Tabelle gefunden, so geschieht nichts und der Default-Style der Anwendung kommt zum Einsatz. Ändert sich die Zuordnung eines Users zu einem Mandanten, so wird der neue Theme Style beim nächsten Login in die Anwendung (in der nächsten Session) wirksam.

Probieren Sie die neuen Möglichkeiten mit Theme Styles auf der Early Adopter Instanz aus - mit nur wenigen Mausklicks bzw. wenig PL/SQL Code lässt sich nun auch das Look & Feel einer APEX-Anwendung personalisieren. Mandantenfähige Anwendungen können nun auch unterschiedliche Styles für einzelne Mandanten realisieren - ohne größeren Coding-Aufwand und nur mit den Mitteln von Application Express.

Zurück zur Community-Seite