APEX-AT-WORK by Tobias Arnhold

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


<!-- 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

APEX examples

Debugging hint for your APEX pl/sql processes

Von Tobias Arnhold → 8.12.2010

Often I use to much pl/sql code inside my APEX processes. As we all know it is just better using complex code inside packages. In case you got trouble with your APEX code and you can't find a fast way debugging it. Just use some javascript popup boxes:


-- Test Box
htp.prn('<script>alert("TEST");</script>');

-- Box with item values showing an IF validation:
htp.prn('<script>alert("'||:P1_TEST1 || ' = ' || :P1_TEST2 || '");</script>');

Summer is coming to an end and it becomes time to blog some more. Right now I'm developing a new small APEX application which describes a way how you can easily use hyphenation inside your application. In that combination I also found a trick how you can prevent the misbehavior of IE6 with fixed column width inside your Reports.

Tobias

Browsing "Older Posts"

APEX 4.0 New Feature Training in Deutschland

Silbentrennung (Hyphenation) in APEX (GER)

Debugging hint for your APEX pl/sql processes