Logo Oracle Deutschland   Application Express Community
Responsive Themes: Was ist das ...?

Erscheinungsmonat APEX-Version Datenbankversion
November 2012 ab 4.2 ab 10.2

Mit APEX 4.2 wurden neben vielen anderen neuen Funktionen, neue "Responsive" Themes eingeführt, mit denen man seine neuen (oder alten) Anwendungen ausstatten kann.

Neue Themes in APEX 4.2

Abbildung 1: Neue Themes in APEX 4.2

Doch was ist eigentlich ein Responsive Theme ...?

Einführung: Responsive Web Design

Unter Responsive Web Design (RWD) versteht man den Ansatz, eine Web-Anwendung so zu gestalten, dass der Anwender - unabhängig vom Gerät - eine stets optimale Nutzung der Anzeigefläche erlebt: Theoretisch von einem normalen Desktop-PC über ein Tablet bis hin zu einem Smartphone.

Speziell für Smartphones wurde jedoch (ebenfalls mit APEX 4.2) die Unterstützung von jQuery Mobile eingeführt - dort ist die Anzeigefläche so klein, dass es nicht nur auf eine andere Darstellung der Anwendung ankommt - es müssen tatsächlich auch andere (weniger) Inhalte dargestellt werden. Smartphone-Applikationen sind daher tatsächlich vor allem für Smartphones vorgesehen; auf einem Desktop-PC wirken sie eher befremdlich (Abbildungen 2a und 2b).

Eine jQuery Mobile-Anwendung ist für ein Smartphone optimiert

Abbildung 2a: Eine jQuery Mobile-Anwendung ist für ein Smartphone optimiert

Auf einem PC oder Tablet könnte die Anzeigefläche besser genutzt werden

Abbildung 2b: Auf einem PC oder Tablet könnte die Anzeigefläche besser genutzt werden

Nun sind aber Anwendungen denkbar, für die es keine spezielle Smartphone-Implementierung mit jQuery Mobile braucht - dennoch sollte diese dort anders aussehen als auf dem PC und dort wieder anders als auch dem Tablet. Und hier kommt Responsive Webdesign ins Spiel.

Technische Grundlagen

Im APEX Theme 25 (Blue / Responsive) ist das "Responsive Web Design" bereits fertig umgesetzt - und Sie können es recht einfach verwenden. Dennoch sei im Folgenden kurz auf die technischen Grundlagen eingegangen: Die technische Basis sind Media Queries in CSS3. Diese können Sie mit einer einfachen, statischen HTML-Seite schon testen. Erzeugen Sie sich eine HTML-Datei mit folgendem Inhalt. 

<html>
 <head>
  <title>Responsive Test</title>
  <style>
  .box {background-color: red; height: 100px;}

  @media only screen and (min-width: 0px) and (max-width: 200px) {
    .box {display:none}
  }
  @media only screen and (min-width: 200px) and (max-width: 480px) {
    .box {width: 50px; background-color: blue; font-site: 10pt; font-family: Times New Roman; color: white}
  }
  @media only screen and (min-width: 480px) and (max-width: 2000px) {
    .box {width: 400px; background-color: red; font-size: 20pt; font-family: Arial}
  }
  </style>
 </head>
 <body>
  Responsive Design Test
  <div class="box">Text in der Box</div>
 </body>
</html>

Das besondere an dieser Datei sind die CSS-Anweisungen - sie enthalten die Media Queries, die mit @media beginnen. Je nachdem, wie groß die Anzeigefläche ist, werden CSS-Anweisungen unterschiedlich gesetzt. Die HTML-Seite stellt eine rote Fläche dar, die 100 Pixel hoch ist. Die Breite richtet sich nach der Breite der Anzeigefläche:

  • Ist diese geringer als 200 Pixel, wird die Box nicht dargestellt
  • Ist diese zwischen 200 und 480 Pixel, so ist die Box 50 Pixel breit und blau
  • Ist diese größer als 480 Pixel, so wird die Box 400 Pixel breit und rot

Aktuelle Firefox- und Chrome Browser sowie der Internet Explorer 9 verstehen diese Angaben; ältere Internet Explorer dagegen nicht. Erstellt man also CSS-Dateien für ein eigenes Anwendungstemplate, so braucht es nach wie vor die Browserweichen für die älteren Versionen des Internet-Explorers. Öffnen Sie die HTML-Testdatei also mit dem Firefox und wählen Sie dann im Menü die Option Web Developer und dort Responsive Design View aus (Abbildung 3).

Responsive Design View im Firefox aktivieren

Abbildung 3: Responsive Design View im Firefox aktivieren

Sie erhalten eine Ansicht, mit der Sie die Größe des Browserfensters ändern können; der Browser reagiert so, als ob die tatsächliche Bildschirmgröße sich ändern würde. Solange Sie das Browserfenster recht breit halten, bleibt die Box groß (Abbildung 4a).

Bei einem großen Display ist die Box 400 Pixel breit

Abbildung 4a: Bei einem großen Display ist die Box 400 Pixel breit

Machen Sie "das Display" nun kleiner - schieben Sie die "beiden Striche" rechts nach links ...

Bei einem kleineren Display ist die Box nur noch 50 Pixel breit und blau

Abbildung 4b: Bei einem kleineren Display ist die Box nur noch 50 Pixel breit

Wenn Sie "das Display" noch kleiner machen ...

Bei einem noch kleineren Display verschwindet die Box

Abbildung 4c: Bei einem noch kleineren Display verschwindet die Box

Diese Technik ist also ein echter Fortschritt gegenüber den "Prozentangaben", mit denen man sich bislang an die Verhältnisse der Anzeigefläche anzupassen versuchte. Da alle möglichen CSS-Anweisungen an die Media Queries geknüpft werden können, kann man (wie im Beispiel) Farben ändern, Elemente unterhalb einer gewissen Display-Größe gar nicht darstellen, Schriftarten umstellen und vieles mehr. PC-Nutzer mit großem Bildschirm bekommen also eine andere Sicht auf die Anwendungsseite als Nutzer eines Tablets.

Responsive APEX-Template 25

Das Schöne an APEX ist nun, dass diese Technik in den neuen Responsive Themes bereits fix und fertig eingearbeitet ist. Die Themes 25 und 26 arbeiten genau mit dieser Technologie. Thema 25 hält noch etwas für den Entwickler bereit: Auf Basis der Media Queries enthält das Template CSS-Hilfslassen, die zum selektiven Darstellen oder Verbergen von Komponenten genutzt werden können (Abbildung 5).

CSS-Hilfsklassen im APEX Theme 25

Abbildung 5: CSS-Hilfsklassen im APEX Theme 25

Die Definition solcher Hilfsklassen im CSS-Code könnte wie folgt aussehen 

@media only screen and (max-width: 767px) {
 .visible-phone   {display:inherit !important}
 .hidden-phone    {display:none    !important}

 .hidden-desktop  {display:inherit !important}
 .visible-desktop {display:none    !important}
}

Ist die Anzeigebreite also kleiner als 767 Pixel (ein Smartphone im Querformat), dann ...

  • werden alle Elemente mit der CSS-Klasse hidden-phone und visible-desktop ausgeblendet
  • die Elemente mit der Klasse visible-phone und hidden-desktop werden nicht beeinflusst - sie werden also durch ggfs. andere CSS-Direktiven oder durch die Defaults ein- oder ausgeblendet

In einer Anwendung, die das Theme 25 verwendet, können Sie diese Hilfsklassen sehr einfach nutzen. Angenommen, Sie möchten eine bestimmte Region ausblenden, wenn Ihre Seite mit einem Smartphone (oder einem kleinen Display) aufgerufen wird. Navigieren Sie dazu zur Regionsdefinition und dort zum Eintrag für die CSS-Klassen. Tragen Sie hidden-phone ein und speichern Sie ab.

Region oder Komponente für kleine Displays ausblenden

Abbildung 6: Region oder Komponente für kleine Displays ausblenden

Natürlich können Sie nun auch eigene Hilfsklassen, basierend auf Media Queries, definieren. Da Sie alle CSS-Eigenschaften nun vom Anzeigemedium abhängig machen können, kann das Look & Feel komplett an die Anzeigeverhältnisse angepasst werden.

Hidden Feature in Theme 25: Button Icons

Das Theme 25 enthält noch ein weiteres, leicht nutzbares Goodie. Es ist mit einem Grundgerüst an Schaltflächen-Icons ausgestattet, die Sie sehr einfach verwenden können. Shakeeb Rahman vom APEX Entwicklerteam beschreibt die Anwendung in einem Blog Posting. Allein durch Auswahl des richtigen Schaltflächentemplates (Icon Button) und dem Setzen von CSS-Klassen wie leftarrow iconLeft oder rightarrow iconRight können Sie Ihren Schaltflächen Symbole hinzufügen und das Look & Feel Ihrer Anwendung nochmals entscheidend verbessern.

CSS-Klassen und Schaltflächentemplate auswählen
Das Ergebnis: Schaltflächen mit Icons

Abbildung 7: Schaltflächensymbole in Theme 25: Ganz einfach

Und neben den Pfeilen nach rechts und links wird eine Reihe weiterer Symbole angeboten. Im Shakeeb Rahmans Blog-Posting finden Sie die komplette Liste.

Onlinequellen

Zurück zur Community-Seite