Chemische Strukturen in APEX darstellen

Application Express Community

Von André Haß, quattro research GmbH, Planegg-Martinsried

Erscheinungsmonat	APEX-Version	Datenbankversion
Juni 2011	ab 3.x	ab 9.2

Dieser Tipp zeigt, in einem etwas außergewöhnliches Anwendungsgebiet, was mit Application Express alles möglich ist. Wie Abbildung 1 zeigt, können sogar chemische Strukturen grafisch in einem APEX-Bericht dargestellt werden. Allerdings basiert das nicht auf APEX allein, es kommen zusätzliche JavaScript-Bibliotheken zum Einsatz.

Abbildung 1: Chemische Strukturen - in einem interaktiven Bericht grafisch dargestellt

Als Datenbasis dient das SD File Format (V2000) der Firma MDL (jetzt Symyx). Dazu gibt es hier nähere Informationen.

Um das Beispiel aus Abbildung 1 nachvollziehen zu können, brauchen Sie also zunächst eine Datenbanktabelle, in der die Molekül-Informationen abgelegt werden. Das könnte im einfachsten Fall in etwa so aussehen - in der Spalte CHEM wird die Molekülstruktur in Textform abgelegt. Wenn diese Informationen in anderen Tabellen abgelegt wird, müsste man das Format mit Hilfe einer PL/SQL-Funktion generieren.

CREATE TABLE  "COMPOUND" (
 "ID"      NUMBER, 
 "NAME"    VARCHAR2(128), 
 "CHEM"    VARCHAR2(4000), 
 CONSTRAINT PK_COMPOUND PRIMARY KEY (ID)
)
/

Danach werden Daten mit SQL Insert-Kommandos eingefügt. Damit Sie das Skript auch in SQL*Plus laufen lassen können, sind die SQL-INSERT-Anweisungen mit begin und end in einen PL/SQL-Block gekapselt. Die hier verwendeten Moleküldaten sind den Demodaten der weiter unten vorgestellten JavaScript-Bibliothek JSDraw entnommen.

begin
  insert into compound values (1, 'Test 1', 'ChemJSDraw11070913082D 
   
   19 21  0  0  0  0  0  0  0  0  1 V2000 
      4.8940    7.4100    0.0000 C   0  0 
      6.2450    8.1900    0.0000 C   0  0 
      7.5960    7.4100    0.0000 C   0  0 
      8.9470    8.1900    0.0000 C   0  0 
     10.2980    7.4100    0.0000 O   0  0 
     11.6490    8.1900    0.0000 C   0  0 
     11.6490    9.7500    0.0000 C   0  0 
     13.0000   10.5300    0.0000 C   0  0 
     14.3510    9.7500    0.0000 N   0  0 
     14.3510    8.1900    0.0000 C   0  0 
     13.0000    7.4100    0.0000 C   0  0 
     13.0000    5.8500    0.0000 C   0  0 
     14.3510    5.0700    0.0000 C   0  0 
     15.7020    5.8500    0.0000 C   0  0 
     15.7020    7.4100    0.0000 C   0  0 
     17.0530    5.0700    0.0000 C   0  0 
     18.4040    5.8500    0.0000 C   0  0 
     18.4040    7.4100    0.0000 C   0  0 
     17.0530    8.1900    0.0000 N   0  0 
    1  2  1  0 
    2  3  1  0 
    3  4  1  0 
    4  5  1  0 
    5  6  1  0 
    6  7  2  0 
    7  8  1  0 
    8  9  2  0 
    9 10  1  0 
   10 11  2  0 
   11  6  1  0 
   11 12  1  0 
   12 13  2  0 
   13 14  1  0 
   14 15  2  0 
   15 10  1  0 
   16 14  1  0 
   16 17  2  0 
   17 18  1  0 
   18 19  2  0 
   19 15  1  0 
  M  END');
   
  insert into compound values (2, 'Test 2', 'ChemJSDraw11080914082D 
   
   15 16  0  0  0  0  0  0  0  0  1 V2000 
     16.3274   -6.6820    0.0000 O   0  0 
     17.6785   -9.0220    0.0000 C   0  0 
     16.3274   -8.2420    0.0000 C   0  0 
     14.9764   -9.0220    0.0000 N   0  0 
     13.6255   -8.2420    0.0000 C   0  0 
     19.0295   -8.2420    0.0000 C   0  0 
     19.0295   -6.6820    0.0000 C   0  0 
     20.3805   -5.9020    0.0000 C   0  0 
     20.3805   -9.0220    0.0000 C   0  0 
     21.7315   -8.2420    0.0000 C   0  0 
     21.7315   -6.6820    0.0000 C   0  0 
     23.0825   -9.0220    0.0000 C   0  0 
     24.4335   -8.2420    0.0000 C   0  0 
     24.4335   -6.6820    0.0000 C   0  0 
     23.0825   -5.9020    0.0000 C   0  0 
    3  1  2  0 
    3  2  1  0 
    4  3  1  0 
    5  4  1  0 
    2  6  1  0 
    6  7  1  0 
    7  8  2  0 
    6  9  2  0 
    9 10  1  0 
   10 11  2  0 
   11  8  1  0 
   12 10  1  0 
   12 13  2  0 
   13 14  1  0 
   14 15  2  0 
   15 11  1  0 
  M  END');
  
  insert into compound values (3, 'Test 3', ' -ISIS-  07260710442D 
   
   13 14  0  0  0  0  0  0  0  0999 V2000 
      1.3069   -2.4750    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0 
      1.3057   -3.0648    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0 
      1.8164   -3.3569    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0 
      2.3245   -3.0644    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0 
      2.3216   -2.4713    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0 
      1.8146   -2.1830    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0 
      2.8287   -2.1747    0.0000 N   0  0  3  0  0  0  0  0  0  0  0  0 
      3.3653   -2.4066    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0 
      3.7559   -1.9678    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0 
      3.4592   -1.4606    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0 
      2.8853   -1.5862    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0 
      4.3405   -2.0258    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0 
      4.5826   -2.5612    0.0000 Cl  0  0  0  0  0  0  0  0  0  0  0  0 
    1  2  2  0  0  0  0 
    5  7  1  0  0  0  0 
    7  8  1  0  0  0  0 
    3  4  2  0  0  0  0 
    4  5  1  0  0  0  0 
    2  3  1  0  0  0  0 
    8  9  2  0  0  0  0 
    9 10  1  0  0  0  0 
   10 11  2  0  0  0  0 
   11  7  1  0  0  0  0 
    5  6  2  0  0  0  0 
    9 12  1  0  0  0  0 
    6  1  1  0  0  0  0 
   12 13  1  0  0  0  0 
  M  END ');
end;
/

commit
/

Nun geht es an die APEX-Applikation. Erstellen Sie zunächst eine Anwendungsseite mit einem Bericht - Sie können einen "klassischen" oder interaktiven Bericht verwenden. Verwenden Sie folgendes Berichts-SQL.

select 
  '<div class="JSDraw" style="width: 175px; height: 125px; border:1px solid gray;" 
        viewonly 
        molfile="' || CHEM || '"></div>' as CHEM,
  '<pre style="width: 400px; 
               height: 200px; 
               overflow-y: scroll; 
               font-family: Courier New, monospace; 
               border: 1px solid black;">' || CHEM || '</pre>' CHEM_TEXT,
  ID,
  NAME
from COMPOUND

Die grafische Darstellung des Moleküls wird in der Spalte CHEM erfolgen. Deshalb ist es wichtig, dass diese in den Berichtsattributen auf Standardberichtsspalte steht - es darf keine automatische Maskierung der HTML-Sonderzeichen stattfinden (Abbildung 2).

Abbildung 2: Spalte "CHEM" als "Standardberichtsspalte" einstellen

Das eigentliche Rendern der grafischen Molekülstruktur wird von der JavaScript-Bibliothek JSDraw übernommen. Auf den Webseiten von scilligence.com steht diese zum Download bereit. Damit der Tipp ausprobiert werden kann, wurden diese auf den Webservern der quattro research GmbH bereitgestellt. Navigieren Sie nun also zu den Seitenattributen der APEX-Seite, dort zum Seiten-Header und fügen Sie folgenden Code, der für das Laden der JavaScript-Bibliotheken verantwortlich ist, ein.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3.2/dojo/dojo.xd.js"></script>
<script type="text/javascript" src="http://www.quattro-research.de/fileadmin/user_upload/chem/Chemene.JSDraw.js"></script>

Wenn Sie die Seite nun starten, passiert noch nichts. In der Berichtsspalte CHEM sehen Sie lediglich einen leeren Rahmen. Das liegt daran, dass die JavaScript-Bibliothek zwar geladen, aber noch nicht aktiviert wurde. Navigieren Sie also nochmals zu den Seitenattributen und dort zum HTML Body Attribut. Tragen Sie dort onLoad="JSDraw.init();" ein. Zusätzlich stellen Sie den Cursor-Fokus bei den Anzeigeattributen auf Cursor nicht als Fokus um. Speichern Sie alles ab und starten Sie die Seite neu. Sie sollten nun bei sich die in Abbildung 1 dargestellte Anwendungsseite sehen.

André Haß ist Softwareentwickler bei der quattro research GmbH in Planegg-Martinsried bei München. Bei Fragen zum Thema erreichen Sie ihn unter andre{dot}hass{at}quattro{dash}research{dot}com.

Zurück zur Community-Seite