Heute kommen wir zu den wohl schwierigstem Control in unserem CMS: Den SkinSelector. Dieser wählt in den Einstellungen den Skin, also das Layout der Seite, aus. Gespeichert wird dieser in der settings-Tabelle als id.

Ich habe mir das so überlegt, dass wir für jeden Skin einen Screenshot in der Größe 150×95 und im Format JPG erstellen. Dieser liegt im Verzeichnis des Skins unter dem Namen screenshot.jpg

Das Control ist so aufgebaut, dass in einer versteckten Textbox die id des ausgewählten Skins steckt. Der aktuell ausgewählte Skin wird als Bild angezeigt und mit Pfeilen nach links und rechts kann man den Skin wechseln. Dabei wird der Inhalt der Combobox verändert. Eingesetzt wird JavaScript.

Soviel zur Theorie. Heute werden wir erst mal die versteckte Textbox nicht versteckt anzeigen^^. Dort soll man die id des Skins eingeben und das Bild des Skins soll angezeigt werden.

Als erstes brauchen wir die neue Methode getInstalledSkins() der Klasse system/classes/skincontroller.php. Diese soll als Array alle installierten Skins zurückgeben:

<?php
  functiongetInstalledSkins(){
    global $dbpraefix;
    $mysqlRes = mysql_query("SELECT * FROM ".$dbpraefix."skins");
    while($row = mysql_fetch_assoc($mysqlRes)){
      $res[] = $row;
    }
    return $res;
  }
?>

Weiter geht’s mit dem Control /system/classes/skinselector.php. Dort werden alle Skins als Array in JavaScript aufgelistet. Die Textbox bekommt ein onChange event, welches das Bild ändert:

<?PHP
  classskinselector extends Control{

    public function display(){
      ?>
          <script language="JavaScript">
              varskins = new Array();
              <?PHP
                $i = 0;
                foreach(SkinController::getInstalledSkins() as $skin){
                  echo "skins[".$i."] = new Object();";
                  echo "skins[".$i."][\"id\"] = \"".$skin['id']."\";";
                  echo "skins[".$i."][\"name\"] = \"".$skin['name']."\";";
                  $i++;
                }
              ?>
          </script>
      <?PHP
        echo "<input OnChange=\"document.getElementById('skinpreview').src='/system/skins/' + skins[value-1]['name'] + '/screenshot.jpg';\"name=\"".htmlentities($this->name)."\"value=\"".htmlentities($this->value)."\" />";
        echo "<img id=\"skinpreview\"style=\"border:1px solid #aaa\"src=\"/system/skins/".SkinController::getCurrentSkinName()."/screenshot.jpg\" />";
    }

  }
?>

Zum Testen des ganzen habe ich mir den Skin von Daniel installiert. Wer ihn auch haben möchte, kann ihn sich hier herunterladen.

Morgen oder Übermorgen geht’s dann mit den Pfeilen nach links und rechts weiter und dann haben wir die Einstellungen fürs erste geschafft. Auf Codeplex stehen aber noch einige offene Punkte, wo wir noch entscheiden müssen, was zur Alpha abgearbeitet werden soll und was wir auf später verschieben können.