Diese Erweiterung kann an einer Entität vom Typ CLOB eingestellt werden. Damit dann die Bilddatenbank als eingebettete Anwendung zur Auswahl des Bildes gestartet werden kann, sind noch weitere Parameter nötig, die unter 'Konfiguration zur Spezialisierung' angegeben werden müssen. Dort wird ein Zeichenfolge erwartet, welche folgendes Format haben muss (JSON):

{
  "baseUrl": "hier die URL zur Bilddatenbank",
  "baseUrlImagePreview": "hier die URL zum direkten Abruf Bild",
  "dialogWidth": 500,
  "dialogHeight": 400,
  "dialogId": 1,
  "previewImageWidth": 200
}

baseUrl: Basisaddresse des Dialoges zur Auswahl des Bildes

baseUrlImagePreview: Basisadresse zum direkten Abruf des Bildes. Diesen kann über den Parameter previewImageWidth noch in der Breite definiert werden

dialogWidth/dialogHeight (optional): Über die Parameter 'dialogWidth' und dialogHeight' kann die Startausdehnung des Dialoges angegeben werden, in welchem über ein IFrame die Anwendung (per Parameter baseUrl) aufgerufen wird. Werden diese Parameter weggelassen, werden jeweils Standardwerte verwendet.

dialogId (optional): Id eines in der Bilddatenbank vordefinierten Auswahldialoges, welcher beim Start aus cardo geöffnet werden soll

previewImageWidth (optional, Standard:200): Breite des angeforderten Bildes in Pixel

Die Bilddatenbank selber muss entsprechend angepasst werden, um aufgerufen in einem IFrame mit der aufrufenden Webseite zu kommunizieren. Dazu verwenden wir die freie Javascript-Bibliothek easyXDM, welche die Besonderheiten verschiedener Browser und Versionen kapselt. Diese muss in der Bilddatenbank eingebunden werden. Nachfolgend ein Beispiel einer Testseite, welche über easyXDM mit der aufrufenden Seiten (IkxEditor) kommuniziert und in diesem Beispiel mit extjs2 nutzt:

<script type="text/javascript" src="/easyXDM.debug.js"></script>

<script type="text/javascript">

  Ext.onReady(function() {

  //die URL der aufrufenden Seite muss bekannt sein,
  //hier wird der Referrer ausgewertet
  if( !document.referrer )
    return alert('Der Referrer kann nicht ausgelesen werden, die URL der aufrufenden Seite muss explizit gesetzt werden!');

  //Socket für den Nachrichtenaustausch anlegen
  var socket = new easyXDM.Socket({
    remote: document.referrer,
    onMessage: function(message, origin){
      //hier müsste der Wert ausgewertet und die Bilddatenbank
      //entsprechend initilisiert werden
      alert(message);
    }
  });

  //hier wird beispielhaft per Ext eine einfache Seite mit
  //nur einem Button aufgebaut
  new Ext.Viewport({
    layout: 'fit',
    items: [{
      title:'Bilddatenbank',
      tbar: [
        {
          text:"Bild1",
          cls:"x-btn-text",
          listeners:{click:function(){
            //Message an den Aufrufer, hier nur beispielhaft
            socket.postMessage(Ext.encode({ id: 1, key:'513' }));
          }}
        }
      ]
    }]
  });
});
</script>   
 

Der Datenaustausch erfolgt über JSON welches folgendermaßen definiert ist und zukünftig erweitert werden kann:

{
  id: zahl,
  key: string,
  dialogId: zahl
}

id - Id des Bildes in der Bilddatenbank
key - ein Hashwert, welcher in der BildDb gebildet wird und zum Abruf des Bildes per URL zwingend notwendig ist

dialogId - die in der Konfiguration zur Erweiterung angegebene DialogId wird durchgereicht