Das Einrichten des LeagueEditor JavaScript ist so einfach wie möglich gehalten. Als Grundlage dient eine CSV artige Datei, die als Trennzeichen einen senkrechten Strich | nutzt. Eine solche Datei kann beispielsweise mit dem kostenlosen Tabellenkalkulationsprogramm Calc erzeugt werden aber auch mit einem ganz normalen Texteditor, was ich empfehlen würde. Bitte versuche die Ligadateien nicht mit einem WYSIWYG HTML-Editor zu erstellen oder zu bearbeiten!
Wie Deine Datei heißt, ist nebensächlich und auch die Endung sollte keine Rolle (mehr) spielen. Ich persönlich behalte die Standardextension für eine Textdatei bei, so daß eine Datenbankdatei automatisch mit meinem Editor verknüpft ist.
Der Aufbau einer Ligadatei besteht aus zwei Teilen; einem HEAD- und einem BODY-Bereich. Im Kopf werden alle allgemeinen Eigenschaften der Mannschaften definiert.
Der allgemeine Aufau sieht wie folgt aus:
<Teamname>|<Teamabkürzung>|<Straf- oder Bonuspunkte>|<Vereinshomepage>|
Wobei bis auf die URI des jeweiligen Vereins alle Felder ausgefüllt werden müssen. Generell gilt, das unbenutzte Zellen leer gelassen werden müssen (auch kein Leerzeichen):
Mannschaft 1|Team 1|0|http://example.org|
Mannschaft 2|Team 2|3||
Mannschaft 3|Team 3|0|http://example.net|
wie hier bei Mannschaft 2 verdeutlicht, die darüberhinaus 3 zusätzliche Punkte gutgeschrieben bekommt - Strafpunkte sind mit einem Minuszeichen zu versehen. Das Ende des HEADER wird durch eine
Leerzeile definiert.
Im BODY-Bereich sind die Paarungen der gesamten Liga einzutragen. Der LeagueEditor JavaScript prüft diese Daten nicht auf Plausibilität, um das Script möglichst klein zu halten.
Die Datenzeile hat folgendes allgemeines Schema:
<Datum>|<Zeit>|<Heimteam>|<Auswärtsteam>|<Tore (H)>|<Tore (A)>|<Spielbericht-URI>
Lediglich die letzte Zelle für einen Hyperlink zum (jeweiligen) Spielbericht kann leer gelassen werden; die anderen Felder sind Pflichtfelder!
Um die Ladezeiten zu verkürzen, akzeptiert der LEJS bei den Mannschaftsnamen sowohl den vollständigen Vereinsnamen als auch den Kurznamen, der im HEADER definiert wurde:
23.05.2001|15:00|Team 1|Team 2|-|-||
23.05.2001|13:30|Team 3|Team 4|2|3|http://example.org|
sind somit gleichwertig wie:
23.05.2001|15:00|Mannschaft 1|Mannschaft 2|-|-||
23.05.2001|13:30|Mannschaft 3|Mannschaft 4|2|3|http://example.org|
Das Datum ist in der Form: DD.MM.YYYY anzugeben, damit dieses vom Script im Kalender Berücksichtigung findet! Eine Datumsangabe wie beispielsweise: 23.5.80 ist demnach falsch. Ein noch nicht ausgetragenes Spiel ist in den Ergebnisfeldern mit einem Strich (Minuszeichen) zu versehen. Jeder Spieltag
muss geblockt werden d.h., er muss vom folgendem durch eine Leerzeile getrennt sein.
23.05.2005|14:30|Mannschaft 1|Mannschaft 2|3|0||
24.05.2005|15:00|Mannschaft 3|Mannschaft 4|1|4|http://example.com|
24.05.2005|15:00|Mannschaft 5|Mannschaft 6|2|2||
30.05.2005|12:30|Mannschaft 2|Mannschaft 3|-|-||
30.05.2005|15:00|Mannschaft 4|Mannschaft 5|-|-||
31.05.2005|14:00|Mannschaft 6|Mannschaft 1|-|-||
08.06.2005|15:00|Mannschaft 2|Mannschaft 5|-|-||
08.06.2005|15:00|Mannschaft 6|Mannschaft 1|-|-||
08.06.2005|15:00|Mannschaft 4|Mannschaft 3|-|-||
Bitte beachtet, daß die selben Namen in den Spieltagen verwendet werden, wie oben im HEADER festgelegt - das Script arbeitet Case-sensitiv und unterscheidet zwischen Groß- und Kleinschreibung!
Der Aufbau der Spieltagpaarungen ist im Übrigen identisch mit dem alten Format des LEJS. Sollten alte Daten vorhanden sein, so muss lediglich der HEAD-Bereich ergänzt werden.
Entscheidungen vom Sportgericht sind mit einem X:0 bzw. 0:X zu werten und wie folgt einzutragen:
23.05.2005|14:30|Mannschaft 1|Mannschaft 2|X|0||
24.05.2005|15:00|Mannschaft 3|Mannschaft 4|1|4|http://example.com|
hierbei wird dem zugesprochenen Gewinnerteam - im oberen Beispiel: Mannschaft 1 - drei Punkte gutgeschrieben ohne das Torverhältnis zu verändern.
Sollten einige Teams Umlaute im Namen haben, so hat es sich als sinnvoll erwiesen, diese zu ersetzen.
Das Einbinden des LEJS in eine HTML oder XHTML Datei erfolgt über eine ID
in einem HTML-Tag z.B. in einem Paragraph (<p>) oder dem Blockelement <div> an der Stelle, wo der Manager später angezeigt werden soll.
Wichtig ist, daß der Bereich die ID LeagueEditor bekommt:
<p id="LeagueEditor">LeagueEditor JavaScript - derletztekick.com </p>
Im Kopf der HTML-Datei müssen darüber hinaus die Style Sheets Datei und die beiden Scripte verankert werden:
<head>
<!-- Deine Kopfdaten //-->
<link rel="stylesheet" media="screen" href="./lejs_style.css" type="text/css">
<script src="./lejs_lang_de.js" type="text/javascript"></script>
<script src="./lejs_dom_dg.js" type="text/javascript"></script>
<!-- Deine Kopfdaten //-->
</head>
Dabei besteht die Möglichkeit, das Sprachpaket als externens Script wie oben gezeigt einzubinden oder den Code direkt in das (x)HTML-Dokument zu schreiben - siehe Quellcode des statischen Beispiels 3.
Bitte beachte die Unterschiede zwischen HTML und XHTML beim Einbinden der Dateien und der Definition des Darstellungsbereiches.
Mit Hilfe der Sprachdatei, die zugleich auch ein paar wenige Grundeinstellungen beherbergt, wird der LeagueEditor angepasst. Öffne die Sprachdatei mit einem normalen Texteditor.
Im oberen Bereich befinden sich ein paar Variablen, die verändert werden können, im unteren Bereich sind alle Bilder (Icons) und der jeweilige Sprachsatz definiert. Sollten Dir ein paar Vorgaben nicht zusagen, dann ändere es bitte hier entsprechend ab.
Die Variablen im einzelnen bedeuten:
var seperator = "|";
var UseDirectComparison = false;
var UseHTTP_GET = true;
var FileName = null;
var FileExtension = ".txt";
var GraphikDotOne = "#8B0202";
var GraphikLineOne = "#B90404";
var GraphikDotTwo = "#018301";
var GraphikLineTwo = "#02A602";
var ResultPoints = new Array(3, 1, 0);
Mit seperator wird das Trennzeichen festgelegt, welches in der Ligadatei verwendet wurde. UseDirectComparison ist eine Boolesche Variable und kann nur den Wert true (=wahr) und false (=falsch) annehmen. Ist diese Variabel der Wert true zugeweisen,
so wird die Tabelle auf Grundlage des Direkten-Vergleichs bei Punktgleichstand berechnet, ansonsten nicht.
Die nächsten beiden Variablen UseHTTP_GET und FileName sind direkt von einander abhängig. Mit Hilfe von UseHTTP_GET kann festgelegt werden, ob die Liga mittels GET-Variable an den URI-String angehangen werden soll (=true) oder
ob eine Datei fest definiert wird und eine Übergabe nicht notwendig macht (=false). Wird die Liga mit dem URI übergeben, so nimmt FileName den Wert null an andernfalls wird dort die Ligadatei festgelegt - vergleiche statisches Beispiel 3.
var seperator = "|";
var UseDirectComparison = false;
var UseHTTP_GET = false;
var FileName ="lejs_db_d_jugend_0506";
var FileExtension = ".txt";
...
Sollte Eure Ligadatei eine andere Endung haben als *.txt, so muss dies unter FileExtension berücksichtigt werden.
Mit den nächsten vier Variablen wird die Farbe der Fieberkurve festgelegt GraphikDotOne bzw. GraphikDotTwo sind dabei die Farbwerte
der (dickere) Punkt in der Graphik und GraphikLineOne bzw. GraphikLineTwo die dazwischen interploierte Verbindungslinie.
Das Array ResultPoints legt die Höhe der Punktvergabe für einen Sieg, ein Unentschieden und einer Niederlage fest.
Das Layout des LeagueEditor JS wird vollständig von einer Cascading Style Sheets Datei (lejs_style.css) getragen. Ohne diese Datei besitzt der Manager keine layoutbeeinflussenden Parameter (Farben, Schriftgröße, usw.).
Ich setze mal voraus, daß ein bestimmtes Wissen zur Cascading Style Sheets vorhanden ist, so daß ich mich hier recht kurz fassen werde - ansonsten verweise ich auf SELFHTML oder CSS4YOU.
Die Einzelnen Selektoren:
Moderne Browser sind in der Lage, Graphiken mit Hilfe von JavaScript innerhalb eines Canvas zu erzeugen.
Dies hat den Vorteil, dass die Fieberkurve nicht über viel 1 Pixel große DIVs erzeugt werden muß, was zum einen speicherintensiv und zum anderne auch länger dauern sollte. Leider existert derzeit noch keine Methode Strings
zu erzeugen, so daß der Umweg über eine interne PNG Graphik genommen wird, die den Zeichensatz liefert.
Derezeit werden folgende Zeichen unterstützt:
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZöäüÖÄÜß0123456789 -_&.+/
Gerade für ausländische Ligen bzw. Mannschaftsnamen ist dieser Zeichensatz sicher unzureichend. Hier sollte jedoch der User sich selbst eine Graphik erzeugen und, wie im SELFHTML: Feature-Artikel beschrieben, einbinden.
Im Script ist dazu die Variable: characterset entsprechend anzupassen.