Zu Demonstrationszwecken habe ich in der letzten Woche die Bildbearbeitung von Intermedia Fotoficient in ein extJS Beispiel integriert. Das Beispiel der extJS Version 3.3.1 war die Web Desktop Demo, die dem Standardpacket des Downloads beiliegt. Die Herausforderung war, die Bildbearbeitung auch über den Intermedia Bootloader – welcher die Bildergalerien von Intermedia Fotoficient dynamisch in andere Seiten einbettet – in ein extJS Fenster einzubinden.

Teil 1: Die Hovergallery
Ob es überhaupt möglich ist, die beiden JavaScriptFrameworks jQuery und extJS zu verheiraten, habe ich mit der Hovergallery ausprobiert. Ohne einen erfolgreiche Einbindung einer Bildergalerie, hätte ich den Umbau des Frameworks der Bildbearbeitung nicht vorgenommen.

Datei: desktop.html
Um nicht den Aufbau eines der Windows inspirierten Fenster unter extJS zu stören und keine gravierenden Änderungen in deren Handler machen zu müssen, habe ich mich für den Proof-Of-Concept dazu entschieden, die Galerie einfach in die desktop.html einzubinden. Dies geschieht genauso, wie man es auch auf den Beispielseiten von Intermedia kennt. Allerdings habe ich dem umschließenden DIV noch eine ID und einen style mitgegeben, damit die Galerie nicht sofort zu sehen ist:

<div id="im_hg" style="width:100%;display:none;">
  <script type="text/javascript"
   src="http://localhost:8080/examples/boot/streetwear%2F/hovergallery"></script>
</div>

Datei: sample.js
Oben in der Beispieldatei von extJS definiert man einfach eine Variable, in welcher man die Galerie beim ersten Aufruf zwischenspeichert:

var obj_im_hg;

Wichtig ist jetzt der Handler des Fensters, in welches man die Galerie einhängen will. Dazu habe ich das GridWindow verwendet und diversen Code aus dem ursprünglichen Beispiel entfernt (vor allem das Grid aus dem items Objekt). Als nächstes habe ich den Titel geändert und dem HTML ein DIV hinzugefügt, in das ich die HoverGallery einsetzte. Folgender Handler blieb übrig:

createWindow : function(){
  var desktop = this.app.getDesktop();
  var win = desktop.getWindow('grid-win');
  if(!win){
    win = desktop.createWindow({
      id: 'grid-win',
      title:'Intermedia HoverGallery',
      width:740,
      height:480,
      iconCls: 'icon-grid',
      shim:false,
      animCollapse:false,
      constrainHeader:true,
      layout: 'fit',
      html : '<div id="hg_con"></div>',
      items: new Ext.Container({
        autoEl: 'div',
        render : function(){
          if(!obj_im_hg)
          {
            obj_im_hg = document.getElementById('im_hg')
          }
          document.getElementById('hg_con').appendChild(obj_im_hg);
          obj_im_hg.style.display = 'block';
        }
      })
    });
  }
  win.show();
}

Innerhalb der Items Auflistung habe ich einen einfachen extJS Container erstellt und in das Render-Event eine Funktion gehängt. In genau dieser prüfe ich die ursprüngliche Variable. Ist sie nicht gesetzt, setze ich sie auf das Galerie-DIV. Als nächstes muss man nurnoch die Galerie in das unter html definierte DIV hängen und die Galerie sichtbar machen.
Durch die neue Version des Intermedia Bootloaders bekommt die HoverGallery auch mit, wenn das Fenster in der Größe verändert wird. Dadurch passt sich die Galerie in den Ausmaßen jedesmal neu an.

Teil 2: Die Bildbearbeitung
Neben den etwas aufwändigeren Umbau des Frameworks, den ich hier leider nicht im Detail durchgehen kann, sind die Anpassungen nach diesem Proof-Of-Concept im extJS minimal anders. Der einzig nennenswerte Unterschied besteht in der Styleangabe, in welcher zusätzlich noch die Höhe des Containers und die Hintergrundfarbe angegeben wird:

Datei: desktop.html

<div id="imgpro_con" style="width:100%;height:100%;background:#fff none;
   display:none;">
  <script type="text/javascript"
   src="http://localhost:8080/imgpro3/boot/YKlH_MoHbIJA_FhQmevVJfOHbIrG_ERtYSxum2o2/imgpro/0"
  ></script>
</div>

Datei: sample.js
Jetzt fügt man der Deklaration am Anfang der Datei noch eine weitere Variable hinzu:

var obj_im_hg, obj_imgpro_con;

Das AccordionWindow, welches als Demonstration für die Bildbearbeitung herhalten musste, hat jetzt folgenden Handler:

createWindow : function(){
  var desktop = this.app.getDesktop();
  var win = desktop.getWindow('acc-win');
  if(!win){
    win = desktop.createWindow({
      id: 'acc-win',
      title:'Intermedia Bildbearbeitung',
      width:900,
      height:600,
      iconCls: 'icon-grid',
      shim:false,
      animCollapse:false,
      constrainHeader:true,
      layout: 'fit',
      html : '<div id="im_con"></div>',
      items: new Ext.Container({
        autoEl: 'div',
        render : function(){
        if(!obj_imgpro_con)
        {
          obj_imgpro_con = document.getElementById('imgpro_con');
        }
        document.getElementById('im_con').appendChild(obj_imgpro_con);
        obj_imgpro_con.style.display = 'block';
        }
      })
    });
  }
  win.show();
}

Hier bestehen nur Unterschiede in der Betitelung, der Fenstermaße und der ID des DIV-Containers.

Fazit
Die jQuery-Beispiele lassen sich – vor allem unter Verwendung von “jQuery.noConflict();” relativ leicht in andere JavaScript-Frameworks integrieren. Ich würde mich sehr freuen, wenn jemand die Intermedia Galerien auch noch in andere Frameworks einbauen würde. Die nötigen Beispiellinks findet man auf der Webseite von Intermedia Fotoficient.