Silbentrennung (Hyphenation) in APEX (GER)
Von Tobias Arnhold →
8.20.2010
Viele Entwickler in APEX kennen das Problem professionelle gut strukturierte Reports zu entwickeln, deren Spaltenbreiten nicht über die gewünschten maximalen Breiten 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 beschrieben der die Problematik ein wenig verbessern kann: Automatic linebreak if word breaks out of table element
Nun habe ich eine wirklich gut Lösung gefunden die mit ein paar einfachen Anpassungen erstaunliche Wirkungen in ihren APEX Reports hervorrufen kann. Das Zauberwort heißt Silbentrennung (Engl.: Hyphenation). Die Lösung besteht darin den dargestellten Text durch ein Javascript Plugin entsprechend der maximalen Feldbreite zu begrenzen.
Dazu wird nach jeder Aktualisierung eine Funktion gestartet, die die Felder entsprechend anpasst.
Die Anwendung heißt Hyphenator, kann in allen gängigen Sprachen dynamisch verwendet werden, ist ein Javascript Plugin und ist 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.
Anleitung:
1. Datei downloaden
Downloaden Sie die aktuell stabile Version von hier http://hyphenator.googlecode.com/files/Hyphenator%202.5.0.zip und hier http://bitbucket.org/webvariants/jquery-hyphenator/get/v1.1.0.zip
2. Kopieren Sie das Jquery Plugin auf ihren Webspace (APEX /i/ Verzeichnis)
/i/Hyphenator/Hyphenator.js (Umbennen von hyphenator.min.js)
/i/Hyphenator/jquery.hyphenator.min.js">
3. Kopieren Sie den Ordner patterns aus dem Hyphenator Download in ihr Verz.
/i/Hyphenator/patterns/de.js
4. Definieren des Plugins in ihrem APEX HTML Header
5. Deaktivieren Sie in ihrem APEX Report Template folgenden CSS Einstellung
white-space:nowrap mit white-space:normal;
6. Report Spalten Anpassen
Info: Hier definieren Sie die maximale Breite und die Option Hyphenation zu verwenden.
7. APEX Dynamic Action für Report anlegen
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.
Mal was anderes: Inzwischen ist auch der AAW-DBMON ONLINE: http://ta-it-consulting.de/dbmon.html
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 beschrieben der die Problematik ein wenig verbessern kann: Automatic linebreak if word breaks out of table element
Nun habe ich eine wirklich gut Lösung gefunden die mit ein paar einfachen Anpassungen erstaunliche Wirkungen in ihren APEX Reports hervorrufen kann. Das Zauberwort heißt Silbentrennung (Engl.: Hyphenation). Die Lösung besteht darin den dargestellten Text durch ein Javascript Plugin entsprechend der maximalen Feldbreite zu begrenzen.
Dazu wird nach jeder Aktualisierung eine Funktion gestartet, die die Felder entsprechend anpasst.
Die Anwendung heißt Hyphenator, kann in allen gängigen Sprachen dynamisch verwendet werden, ist ein Javascript Plugin und ist 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.
Anleitung:
1. Datei downloaden
Downloaden Sie die aktuell stabile Version von hier http://hyphenator.googlecode.com/files/Hyphenator%202.5.0.zip und hier http://bitbucket.org/webvariants/jquery-hyphenator/get/v1.1.0.zip
2. Kopieren Sie das Jquery Plugin auf ihren Webspace (APEX /i/ Verzeichnis)
/i/Hyphenator/Hyphenator.js (Umbennen von hyphenator.min.js)
/i/Hyphenator/jquery.hyphenator.min.js">
3. Kopieren Sie den Ordner patterns aus dem Hyphenator Download in ihr Verz.
/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. Deaktivieren Sie in ihrem APEX Report Template folgenden CSS Einstellung
white-space:nowrap mit 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. 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
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.
Mal was anderes: Inzwischen ist auch der AAW-DBMON ONLINE: http://ta-it-consulting.de/dbmon.html
