Lesson TWO

Wir packens an!

Ausgansposition für diese Lesson ist das in "Lesson One" erstellte Skin. Und das sollte so aussehen:

Grün aber igendwie langweilig, oda? Ausserdem ist es noch ausgesprochen "Dumm", unser Skin. Es besitzt ja noch nicht mal einen Button zum abschalten von cPos. Das wollen wir nun nachholen und unseren ersten Button einbauen.

2. Dem Button das Laufen beibringen.

Button0Function=poweroff
Button0Up=out.jpg
Button0Over=out.jpg
Button0X=2
Button0Y=2

Ist alles erfolgreich verlaufen, sollte Deine myskin.ini so aussehen:

3. Wir testen unser Werk!

Klicke im myskin.ini - Editor Fenster auf "Datei & Speichern." Nun starte cPos. Wähle gegebenenfalls dein "myskin" aus dem [[6.0 Der "Appearance" Reiter:|"Appeareance Reiter"] ] in den cPos Optionen aus. Nun solltest Du folgendes Bild erhalten:

Dir ist bestimmt schon das rote Rechteck links oben aufgefallen. Das ist dein erster, selbst erstellter Button! Herzlichen Glückwunsch.

4. Was ist nun passiert?

Button0Function=poweroff
Button0Up=out.jpg
Button0Over=out.jpg
Button0X=2
Button0Y=2

cPos bemerkt den Aufruf der Funktion "Button" und weiss: "Ah! Mein Herr und Meister möchte einen Button in das Skin einfügen!".Doch lass uns den Syntax, um ihn besser verstehen zu können, zerlegen:

'''Button0''' bedeutet:
Der Button mit der Nummerierung "Null" wird aufgerufen. cPos zählt von null bis X. Deshalb muss die Nummerierung von Buttons, Labeln usw. immer mit der Nr. "Null" beginnen. Wie in diesem Fall "Button0" muss der Aufruf IMMER vor jeder weiterführenden Funktionsbeschreibung erscheinen, damit cPos weiss, für welchen Button die nachfolgende Option gelten soll.

'''Function=poweroff''' bedeutet:
Der Button bekommt eine "Function" zugewiesen. Mit "=" wird ihm gesagt welche. In diesem Fall die "poweroff" Function. Funktionen sind grösstenteils vordefiniert und müssen nur noch aufgerufen werden.

'''Up=out.jpg''' bedeutet:
Hiermit wird cPos gesagt, welche Grafikdatei es für den Button verwenden soll. In diesem Fall das "out.jpg"

'''Over=out.jpg''' bedeutet:
cPos ist es möglich, einen "Hover" oder auch "Mouse Over" Effekt zu erzeugen. Dieser Effekt ist besonders schön im MCE Skin von Glow zu sehen. Beim überfahren mit der Maus, wird z. B. die Option "Einstellungen" grün hervorgehoben. Diese Möglichkeit der optischen Aufwertung wird auch oft auf Webseiten genutzt, und vermittelt dem User eine Optische Rückmeldung, ob sich der Mauscursor über dem von Ihm gewünschten Menüpunkt befindet. Hier wird wieder das "out.jpg" genutzt. Würdest Du hier eine andere Grafikdatei angeben, würde diese angezeigt werden, sobald Du mit dem Mauszeiger über ihn fährst. Das werden wir gleich testen.

'''X=2'''
Dies definiert den Abstand der Bilddatei zum Rand Deines Skins auf der X - Achse. X ist Horizontal also von Links nach Rechts. In diesem Fall heisst das konkret: Die Grafikdatei befindet sich zwei Pixel von Links auf der Horizontalen X Achse. Zwischen Skin und Deiner Bilddatei sind somit 2 Pixel von links Platz!

'''Y=2'''
Dies definiert den Abstand der Bilddatei zum Rand Deines Skins auf der Y - Achse. Y ist Vertikal, also von Oben nach Unten. In diesem Fall heisst das konkret: Die Grafikdatei befindet sich zwei Pixel von Oben auf der vertikalen Y Achse. Zwischen Skin und Deiner Bilddatei sind somit 2 Pixel von oben Platz!

5. Wir spielen mit den Einstellungen!

Nun wollen wir uns ein bischen mit den Möglichkeiten, der Optionen eines Buttons beschäftigen. Aus diesem Grund ändern wir den Code unserer myskin.ini folgendermassen ab:

Bitte speichere die Änderungen und starte cPos erneut. Dein Skin hat immer noch das rote Rechteck links oben. Aber fahre nun mit Deiner Maus darüber. Die Farbe des roten Buttons sollte gelb werden, sobald Du mit der Maus darüber bist.

Nun wollen wir uns der X bzw. Y Achse zuwenden. Bitte ändere Deine uniskin.ini folgendermassen ab:

Der Erfolg sollte folgender sein:

Du hast also mit der Änderung "100" Den Button um 100 Pixel nach rechts und nach unten verschoben. Auf diese Art und Weise kannst Du jeden Winkel Deines Skins erreichen. Der Hover Effekt funktioniert noch immer!

6. Das Nachwort

Du weisst nun, wie man einen Button in ein cPos Skin einfügt und ihm eine Funktion zuweisst. Ausserdem hast Du gelernt, wie Du die Attribute bzw. Optionen eines Buttons manipulieren kannst. Ich kann Dir nur empfehlen, mit diesen Möglichkeiten zu experimentieren. Tausche z. B. die von mir erstellte Grafikdatei durch eine Eigene aus. Du könntest die Datei per X bzw. Y Attribut ein bischen auf deinem Skin "herumschieben". Ausserdem könntest Du versuchen, freigestellte *.gif Dateien zu nutzen. In Google findest du viel "Futter" zu freigestellten *.gif Dateien.