CodeBlog.ch

Das CMS Concrete5 bietet eine umfangreiche Schnittstelle, um die Funktionalität fast beliebig zu erweitern. Trotzdem dieser mächtigen Schnittstelle, ist es aber verhältnismässig einfach eigene Funktionen einzubauen.

In diesem Beispiel wollen wir C5 erweitern, um FLV Dateien ohne grossen Aufwand in unsere Seite einbinden zu können:

Struktur

C5 ist bewusst so aufgebaut, dass der “Core” problemlos aktualisiert werden kann, ohne die eigenen Funktionen, Templates usw. zu verlieren.

Nach erfolgter Installation, findet man diese Struktur vor:

Der erwähnte “Core” befindet sich im Ordner “concrete”. Diesen wollen wir nicht näher betrachten. “Themes” wird vermutlich der wichtigste Ordner sein, dort kann man seine eigenen Themes ablegen. In diesem Artikel wollen wir aber einen eigenen Block erstellen, wir öffnen also den Ordner “blocks”.

Bei C5 definiert man bei den bearbeitbaren Bereichen keinen fixen Typ (HTML, Text, Bild usw.). Der Inhalt kann in einem bearbeitbaren Bereich durch einen beliebigen Inhalt (block) erweitert werden.

Da unsere Seite eine grosse Anzahl FLV Files abspielen muss, wollen wir nun also einen Block erstellen, mit dessen es uns möglich ist, FLV Files ohne grossen Aufwand abzuspielen.

Block

Innerhalb des Block Verzeichnisses erstellen wir nun unser eigenes Verzeichnis “flv_player”. Dort gibt es eine Reihe von Files die mehr oder weniger zwingend bentigt werden:

• db.xml – In den meisten Fällen benötigen wir diese Datei um Daten abzulegen. Die Struktur definiert die SQL Tabellen mit Hilfe von ADOdb’s XML Format – http://phplens.com/lens/adodb/docs-datadict.htm.
• view.php – Diese Datei ist dafür verantwortlich, den Code (HTML inkl. JavaScript) auszugeben.
• icon.png – Wenn vorhanden, wir diese Datei bei der Block-Auswahl angezeigt.
• add.php – Wird beim Hinzufügen des Blocks angezeigt
• edit.php – Wird aufgerufen, wenn wir einen bereits eingefügten Block bearbeiten wollen. Nicht zwingend erforderlich, wohl aber immer sinnvoll.
• controller.php – Enthält den kompletten Code.

Die wichtigste Datei ist controller.php. Wir beginnen gleich mit dem kompletten Inhalt diese Datei:

<?
require_once(DIR_FILES_BLOCK_TYPES_CORE . '/library_file/controller.php');
 
class FlvPlayerBlockController extends BlockController {
 
   protected $btDescription = "Creates a flv video player";
   protected $btName = "FLV Player";
   protected $btInterfaceWidth = 300;
   protected $btInterfaceHeight = 200;
   protected $btTable = 'btContentFlvFile';
 
   function getFileID() { return $this->fID; }
 
   function getFileObject() {
      return LibraryFileBlockController::getFile($this->fID);
   }
 
   function getWidth() { return $this->width; }
 
   function getHeight() { return $this->height; }
 
	function delete() {
		LibraryFileBlockController::delete($this->fID);
		parent::delete();
	}
 
   function getFlvMetaData($flvFileName)
   {
      $fp = fopen($flvFileName,'r');
      fseek($fp,27);
      $onMetaData = fread($fp,10);
 
      //if ($onMetaData != 'onMetaData') exit('No meta data available in this file! Fix it using this tool: http://www.buraks.com/flvmdi/');
 
      fseek($fp,16,SEEK_CUR);
      $ret['duration'] = array_shift(unpack('d',strrev(fread($fp,8))));
 
      fseek($fp,8,SEEK_CUR);
      $ret['width'] = array_shift(unpack('d',strrev(fread($fp,8))));
 
      fseek($fp,9,SEEK_CUR);
      $ret['height'] = array_shift(unpack('d',strrev(fread($fp,8))));
 
      return $ret;
   }
   function save($data) {
      $flvFile = LibraryFileBlockController::getFile($data['fID']);
      $flvFileName = DIR_FILES_UPLOADED .'/'. $flvFile->getFilename();
 
      $flvMetaData = $this->getFlvMetaData($flvFileName);
 
      $data['width']  = $data['width'] ? $data['width'] : $flvMetaData['width'];
      $data['height']  = $data['height'] ? $data['height'] : $flvMetaData['height'];
 
      parent::save($data);
   }
}
?>

Am Anfang sehen wir eine Reihe von Eigenschaften welche von C5 ausgelesen werden. Sie sind erforderlich, damit der Block korrekt angezeigt werden kann.

Die Methoden delete und save überschreiben wir in unserem Fall, da wir die Breite und Höhe des Videos dynamisch ermitteln wollen, wenn der Benutzer nichts eingeben haben. Dazu verwende ich einen unschönen Code in getFlvMetaData. (Gibt es da eine bessere, elegantere Lösung?)

Da wir die Asset-Library von C5 verwenden, gibt es einige Funktionen wie zum Beispiel getFile, die nicht zum Umfang von PHP selber gehören. Sie sollten aber selbsterklärend sein, und wenn nicht – fragen, dann erkläre ich es ausführlicher.

In der Datei add.php steht wie schon erwähnt, der Code der aufgerufen wird, wenn eine neue Instanz des Blocks hinzugefügt wird:

<?
$includeAssetLibrary = true;
$al = Loader::helper('concrete/asset_library');
?>
<h2>FLV File</h2>
<?=$al->file('ccm-b-flv-file', 'fID', 'Choose FLV File');?>
 
<br/><br/>
<strong>Width</strong><br/>
<input type="text" style="width: 200px" name="width" />
 
<br/><br/>
<strong>Height</strong><br/>
<input type="text" style="width: 200px" name="height" />

Wir inkludieren die Asset Library um den Auswahldialog für die Datei zu verwenden. Der Rest ist Standard-HTML.

Die Datei edit.php sieht fast identisch aus, ich überspringe diese mal.

In view.php wird nun der Flash-Player aufgerufen welcher unsere FLV Datei abspielt.

<?
$file = $controller->getFileObject();
 
$bh = Loader::helper('concrete/urls');
$bt = $b->getBlockTypeObject();
?>
 
<script type="text/javascript" src="<?=$bh->getBlockTypeAssetsURL($bt)?>/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.flvfile = "<?=REL_DIR_FILES_UPLOADED?>/<?=$file->getFilename()?>";
 
var params = {};
params.menu = false;
params.wmode="transparent";
 
var attributes = {};
 
swfobject.embedSWF("<?=$bh->getBlockTypeAssetsURL($bt)?>/videoPlayer.swf", "flv_player_<?=$bID?>", "<?=$width?>", "<?=$height?>", "9.0.0","expressInstall.swf", flashvars, params, attributes);
 
</script>
 
<div class="ccm-flv-player" id="flv_player_<?=$bID?>"></div>

Die ersten Zeilen sind erforderlich, um die Adresse mittels C5-konformen Befehl zu bekommen. Anschliessend das JavaScript swfobject einbinden. Dieses wird benötigt, um den Flash Player einzubinden (swfobject.embedSWF).
Das DIV am Ende dient nur dazu, die Stelle zu definieren, wo swfobject den Player einfügt.

Fertig!

Nun ist der Block fertig und wir gehen ins Dashboard von C5, “Add Functionality” und wählen unseren Block aus – Install und los geht’s!

Block einfügen:

Und so sieht dann das Ergebnis aus:

Der FLV Player kommt übrigens von Chris Brimelow.

Der komplette Block: FLV Block herunterladen