Silbentrennung in APEX Reports

von Tobias Arnhold, Tobias Arnhold - IT Consulting, Deutschland, mailto:tobias-arnhold@hotmail.de

Viele Entwickler in APEX kennen das Problem, professionelle, gut strukturierte Reports zu entwickeln, deren Spaltenbreiten nicht über die gewünschten Maximalwerte hinausragen.
Folgende Bedingungen erschweren die einfache Entwicklung von Reports:

  • Bildschirmauflösung ist eingeschränkt (1024x768)
  • Zu lange Texte in Reports (Spaltennamen, Spaltenwerte)
  • Nutzung verschiedener Browser (Firefox, Internet Explorer 6, 7 und 8,Safari,...)
  • Übersetzung in verschiedene Sprachen notwendig
  • Nutzung unterschiedlicher Layouts mit verschiedenen CSS Eigenschaften

Vor einer Weile habe ich einen Tipp geschrieben, der die Problematik ein wenig verbessern kann: Automatic linebreak if word breaks out of table element

Es gibt allerdings noch eine Lösung, die mit ein paar einfachen Anpassungen erstaunliche Wirkungen in ihren APEX Reports hervorrufen kann. Das Zauberwort heißt "Silbentrennung" (Hyphenation). Und diese lässt sich sogar mit einem fertigen JavaScript-Plugin im Browser auf dem Client durchführen. Dazu wird, nach jeder Aktualisierung der APEX-Seite, eine Funktion gestartet, welche die Berichtsspalte entsprechend anpasst. Die Anwendung heißt "Hyphenator", kann in allen gängigen Sprachen dynamisch verwendet werden, ist ein Javascript-Plugin und hier zu finden http://code.google.com/p/hyphenator/. Ein weiterer Entwickler hat ein passendes jQuery-Plugin geschrieben: http://bitbucket.org/webvariants/jquery-hyphenator/wiki/Home

In dieser Kombination ist die Verwendung in APEX 3.2 oder 4.0 denkbar einfach. Die Schritte der folgenden Anleitung sind in einer APEX-Beispielanwendung schon vorab durchgeführt - Sie können diese einfach herunterladen und importieren.

Anleitung:
1. Dateien downloaden
Laden Sie die aktuell stabile Version von hier "http://hyphenator.googlecode.com/files/Hyphenator 2.5.0.zip" herunter. Laden Sie zusätzlich das jQuery-Plugin von hier "http://bitbucket.org/webvariants/jquery-hyphenator/get/v1.1.0.zip" herunter.

2. Kopieren Sie das jQuery Plugin in Ihr APEX-Image-Verzeichnis (APEX /i/ Verzeichnis).
  /i/Hyphenator/Hyphenator.js (Umbenennen von hyphenator.min.js)
  /i/Hyphenator/jquery.hyphenator.min.js

3. Kopieren Sie den Ordner patterns aus dem Hyphenator Download auf ihren Webspace
  /i/Hyphenator/patterns/de.js

4. Definieren des Plugins in ihrem APEX HTML Header 

<!-- START: Hyphenator Plugin -->
<style type="text/css">
.hyph {
  /* WIDTH Parameter wird erst ueber Spalte definiert */
  display:block;
  /* DISPLAY:BLOCK ist immer zwingend erforderlich */
  overflow:hidden; float:left;
  /* Schneidet alles Sichtbare über der max. Groesse ab, dadurch entstehen keine Fehler beim verkleinern, IE6 Fehlverhalten */
  white-space:normal;
  /* Darf niemals: white-space:nowrap als Einstellung in einer Tabelle haben */
  word-wrap: break-word;z-index:999; 
  /* Fuer IE6 */
 }
</style>
<script type="text/javascript" src="/i/Hyphenator/Hyphenator.js"></script>
<script type="text/javascript" src="/i/Hyphenator/jquery.hyphenator.min.js"></script>
<!-- ENDE: Hyphenator Plugin -->

5. Ersetzen Sie in ihrem APEX Report Template die CSS Einstellung "white-space: nowrap" durch "white-space: normal". 

<!-- Column Heading Template -->
<th {...} style="white-space:normal;z-index:999;word-wrap: break-word;">#COLUMN_HEADER#</th>

<!-- Column Template 1 -->
<td {...} style="white-space:normal;z-index:999;word-wrap: break-word;">#COLUMN_VALUE#</td>

6. APEX-Report-Spalten anpassen 

<!-- Column Heading: -->
<span class="hyph" style="width:50px;text-decoration: underline;">Anwendungsname</span>

<!-- HTML Expression -->
<span class="hyph" style="width:50px;">#NAME#</span>
Info: Hier definieren Sie, die maximale Breite und die Option "Hyphenation" zu verwenden.

7. APEX Dynamic Action für Report anlegen
Erstellen Sie einen After Report Refresh Trigger mit Javascript Ausführung: $('.hyph').hyphenate();
Im Idealfall sollte sollte ein ähnlicher Report wie in meiner Beispielanwendung herauskommen: http://ta-it-consulting.de/hyphenation.html

Info 1: Die LANG Option im HTML Tag definiert die Übersetzungssprache <html lang="de">
Info 2: Das Plugin kann auch in APEX 3.2 verwendet werden, außerdem ist der IE6 ohne Probleme verwendbar.

Das Ergebnis ist eine universelle Lösung die all ihre Reportprobleme lösen könnte.

Der einzige Haken ist eine erhöhte CPU Auslastung auf der Clientebene. Also Vorsicht vor verschwenderischer Übersetzung.

Zurück zur Community-Seite