Links verwalten mit der Flash-Applikation

Visuallink – The Link Organizer
Kommentare

Meist hinterlassen die alltäglichen Streifzüge durch das World Wide Web ihre Spuren als Bookmarks im Browser. Was aber tun, wenn man von unterwegs auf seine Linkschätze zugreifen will, die URLs aber auf dem heimischen PC abgelegt sind? Dabei hilft die kostenlose Flash-Applikation Visuallink, welche sowohl Online- als auch Offline-Management der wertvollen Informationen bietet.

Was leistet Visuallink und wofür kann es eingesetzt werden? Das eigentliche Tool ist eine Online- oder Offline-Flash-Applikation, die es ermöglicht, auf einfache Art und Weise Links zu verwalten sowie diese zu kommentieren und zu bewerten. Der Vorteil liegt zum einen in der Benutzeroberfläche, welche auf nur einer Maske basiert, und die mittels Drag-and-Drop-Elementen ein Desktop-Feeling erzeugt. Zum anderen kann das Frontend-Template individuell, entsprechend dem Bedarf des Nutzers, mit Hilfe von Flash angepasst werden. Unter Frontend-Template ist in diesem Fall die Anzeige der Links zu verstehen. Im Hintergrund werden alle Daten in XML-Dokumenten festgehalten. Somit ist es relativ einfach, die Darstellung für das jeweilige Medium (PC, Mobil, Print) aufzubereiten. Die Features von Visuallink im Überblick:

  • Intuitive Flash-Benutzeroberfläche
  • Drag & Drop von Daten im Admin-Bereich
  • Keine Datenbanken, nur XML-Dokumente
  • XML-Export der Links
  • Flash-Frontend für die Anzeige der Links im Windows-Explorer-Stil

Visuallink kommt völlig ohne Datenbanken aus, somit gestaltet sich die Installation sehr leicht. Und wer traditionelles HTML in der Darstellung der Informationen gegenüber Flash bevorzugt, kann durch das XML-Format auch eigene Frontends für verschiedene Ausgabemedien entwickeln.

Grundlegende Informationen

Die Onlineversion von Visuallink setzt mindestens ein Flash-Plug-in, Version 7, voraus. Nutzt man die Windows-Applikation, kann man diese später einfach über das Startmenü aufrufen. Mit Hilfe der Desktop-Version kann man Links auch lokal einpflegen und später die XML-Datei der Online-Version aktualisieren. Praktisch ist, dass nur eine Datei upgedatet werden muss.

Aufbau von Visuallink

Nach dem Aufruf des Admin-Bereichs von Visuallink wird die erste und einzige Maske angezeigt. In diesem Bereich verwaltet man die Links. Im linken Admin-Bereich werden die aktuellen Links in einem modifizierten Tree dargestellt. Wählt man einen Eintrag, wird dieser rechts in den Eingabefeldern angezeigt. Nach dem Editieren der Daten blinkt der Button SPEICHERN und weist darauf hin, dass die Änderungen übernommen werden sollen. Grundsätzlich können zwei Arten von Einträgen angelegt werden: Ordner und Links. Die Handhabung des Trees gleicht dem des Windows Explorers und das Verschieben von Daten erfolgt einfach mittels Drag and Drop.

Anlegen von Ordnern und Links

Um eine neue Kategorie bzw. einen Ordner anzulegen, wählt man im oberen rechten Bereich den Button NEUER ORDNER. Nach der Eingabe des Namens wird dieser sofort im Tree (links) angezeigt. Bei den Links läuft die ganze Prozedur nicht anders ab. Jede URL kann mit einer Beschreibung sowie einer Bewertung hinterlegt werden. Die mit einer Checkbox zu setzende Flag Aktiv bestimmt darüber, ob dieser Eintrag im Frontend angezeigt werden soll. Per Drag and Drop kann die Reihenfolge der Links geändert werden, was wiederum erst durch SPEICHERN übernommen wird.

Abb. 2: Flash-Frontend: Anzeigen der Links
Löschen von Ordnern und Links

Zieht man mit der Maus einen selektierten Eintrag auf den Papierkorb, wird dieser Eintrag entfernt. Diese Aktion muss durch SPEICHERN bestätigt werden. Mit Hilfe des Buttons RESET wird die XML-Datei erneut geladen. Vorsicht: Wurde erst einmal gespeichert, wurden alle Änderungen übernommen!

Öffnen von Links

Zieht man mit der Maus einen selektierten Link auf die im unteren Bereich dargestellte Weltkugel, wird dieser Eintrag in einem neuen Browserfenster geöffnet. Dies kann aber auch über die Schaltfläche LINK ÖFFNEN geschehen.

Im Großen und Ganzen war das schon alles, was die Datenpflege im Backend von Visuallink angeht. Daher wird in den nächsten Absätzen das Frontend etwas genauer unter die Lupe genommen.

Schreiben von XML mit Hilfe von Flash und PHP XML wurde Ende der 90er Jahre als das neue Datenaustauschformat der Zukunft angepriesen. Die Wurzeln dieser Sprache liegen in SGML (Standard Generalized Markup Language) welche 1986 als internationaler Standard für die Beschreibung von Daten festgelegt wurde. Ziel war es, mit XML ein generalisiertes Datenaustauschformat bzw. eine universelle Schnittstelle zu allen gängigen Software-Systemen zu schaffen. Flash ist seit Version 5 in der Lage, Daten im XML-Format einzulesen und zu verarbeiten. Gerade bei Projekten, welche in mehreren Sprachen realisiert werden, und die Informationen extern einlesen müssen, bietet das XML-Format eine optimale Alternative zu Datenbanken wie mySQL. Um nicht mit Kanonen auf Spatzen zu schießen, kann mit Hilfe weniger Zeilen serverseitigen Codes in PHP, ASP etc. ein aus Flash übergebener String in eine XML-Datei geschrieben werden.

Tipp: Die gewünschten Daten in Flash in einem Array ablegen und bei Bedarf mit Hilfe einer Schleife einen XML-String bilden (siehe Listing 1). Dieser kann dann wiederum mit Hilfe des Load Vars-Objekts beispielsweise an PHP übergeben werden (siehe Listing 2). PHP kann nun mit wenigen Zeilen die gewünschte XML-Datei erzeugen (siehe Listing 3). Zudem ist es ratsam, eine Statusmeldung an Flash zurückzugeben, ob der Schreib-vorgang erfolgreich abgeschlossen wurde. Während serverseitig die Datei erzeugt wird, sollten alle Eingabefelder und Buttons im Frontend, sprich in Flash, gesperrt werden. Um valides XML zu erzeugen, also um Sonderzeichen in Entities umzuwandeln und umgekehrt, kann man einen Prototyp einsetzen, welcher eine Zeichenkette durchsucht und die gewünschten Elemente ersetzt (siehe Listing 4). Vorteil dieser Methode zur Erzeugung von XML ist die AS1-Unterstützung.

Listing 1: Erzeugen eines XML-Strings für Visuallink
--------------------------------------------------------------------
	Erzeugen eines XML-Strings für Visuallink
	xml_str = "n";
	xml_str += "n";
	for (var i = 0; in";
		for (var y in links_array[i]) {
			if (y == "url" || y == "description" || y == "rate") {
				xml_str += ""+links_array[i][y]+""+y+">n";
			}
		}
		xml_str += "n";
	}
	xml_str += "";
Listing 2: Übergabe des XML-Strings an PHP 
-----------------------------------------------------------------------
function saveData(pxml_string) {
	sendData_lv = new LoadVars();
	loadData_lv = new LoadVars();
	var xml_str = pxml_string;
	sendData_lv.xml_str = xml_str;
	sendData_lv.xml_file = "../xml/visuallink.xml";
	sendData_lv.sendAndLoad("php/save_xml.php", loadData_lv, "POST");
	loadData_lv.onLoad = function() {
		if (loadData_lv.status == "ok") {
			saveAnimation(false);
		}
	};
}
Listing 3: PHP-Skript zum Erzeugen eines XML-Dokuments
-------------------------------------------------------------------
Listing 4: Prototyp zum En-/Decoden von Strings für XML (AS1-kompatibel)
----------------------------------------------------------------------------------
_global.specialCharsDecode = function(pString) {
	var thisString = pString;
	thisString = thisString.replace("&", "&");
	thisString = thisString.replace("", ">");
	thisString = thisString.replace(""", """);
	thisString = thisString.replace("ü", "ü");
	thisString = thisString.replace("Ü", "Ü");
	thisString = thisString.replace("ö", "ö");
	thisString = thisString.replace("Ö", "Ö");
	thisString = thisString.replace("Ä", "Ä");
	thisString = thisString.replace("ä", "ä");
	thisString = thisString.replace("€ ", "€");
	return thisString;
};
_global.specialCharsEncode = function(pString)  {
	var thisString = pString;
	thisString = thisString.replace("&", "&");
	thisString = thisString.replace("<", "");
	thisString = thisString.replace(""", """);
	thisString = thisString.replace("ü", "ü");
	thisString = thisString.replace("Ü", "Ü");
	thisString = thisString.replace("ö", "ö");
	thisString = thisString.replace("Ö", "Ö");
	thisString = thisString.replace("Ä", "Ä");
	thisString = thisString.replace("ä", "ä");
	thisString = thisString.replace("€", "€");
	return thisString;
};
String.prototype.replace = function(s, j) {
	return this.split(s).join(j);
};
ASSetPropFlags(String.prototype, "replace", 1, true);

// Verwendung
test_str = "&&uUml;"
test_str = specialCharsEncode(test_str);

test1_str = ";"
test1_str = specialCharsDecode(test1_str);
Das Flash-Frontend von Visuallink

Das mitgelieferte Flash-Frontend gleicht im Aufbau dem Admin-Bereich. Links werden die URLs in den jeweiligen Ordnern angezeigt. Wählt man einen Eintrag aus, werden rechts die jeweiligen Informationen dargestellt. Das Herzstück ist eine Standard-Tree-Komponente von Flash. Zu Beginn des Quellcodes wird eine function initUI() aufgerufen, welche die Komponente grafisch formatiert. Danach wird die XML-Datei für die Inhalte geladen (zum Schreiben von XML mit Hilfe von Flash und PHP siehe Kasten: Schreiben von XML). Sehr angenehm ist, dass mit

TreeInstanzname.dataProvider = XMLInstanzname;

die Komponente mit Daten gefüllt werden kann. Über den change listener des Trees kann man das Selektieren eines Eintrags abfangen und die jeweiligen Werte anzeigen.

var listenerObject:Object = new Object();
listenerObject.change = function(eventObject:Object) {
if (dndTree.selectedNode.attributes["description"] != undefined) {
	insert_link_mc.link_txt.text = dndTree.selectedNode.attributes["label"];
	// usw..
}
};
// anlegen des listeners für die Tree Komponente 
dndTree.addEventListener("change", listenerObject);

Für die Anpassung der Tree-Komponente empfiehlt es sich, einfach mal die Hilfe von Flash zu öffnen und unter dem Referenzbereich, tief in den unendlichen Weiten der Flash-Welt, eigene Eindrücke zu sammeln.

Um zu gewährleisten, dass immer die aktuelle XML-Datei geladen wird, nutzt Visuallink den URL-CacheManager (siehe Listing 5). Eine Extension der MX Community und wirklich geniale AS2-Klasse. Detaillierte Infos und Download.

Listing 5: Verwendung des URL-CacheManagers der MX Community
---------------------------------------------------------------
// xml instance
dataTreeDP = new XML();
dataTreeDP.ignoreWhite = true;

// cachemanager in action
var xmlURL:String = CacheManager.uncacheURL("xml/visuallink.xml");

// load data into Tree
function loadData() {
	dataTreeDP.load(xmlURL);
	dataTreeDP.onLoad = function() {
		dndTree.dataProvider = dataTreeDP;
	};
}
Anpassungen

Um Änderungen vorzunehmen, sollte man als Erstes die Dateistruktur der Applikation betrachten. Im Ordner admin befinden sich alle Dateien, die für die Verwaltung notwendig sind. Um die Applikation zu starten, muss dort die Datei index.html aufgerufen werden. Diese wiederum beinhaltet die v_1_00_visuallink.swf bzw. das JavaScript, welches die Datei einbindet. Der Flashfilm kommuniziert mit der Datei save_xml.php im PHP-Unterordner. Die Namen sprechen hier für sich. Über die Datei visuallink_config.xml im XML-Ordner lassen sich bequem die Beschriftungen für die Applikation verändern. Ebenso kann die Tree-Komponente angepasst werden. Die visuallink.xmlenthält alle URLs mit ihren Eigenschaften bzw. weiteren Werten. Diese Datei ist praktisch die Datenquelle für Visuallink.

Insgesamt können alle Dateien bis auf die v_1_00_visuallink.swf geändert und angepasst werden. Da einige Elemente dieser Datei kommerziell erworben wurden, ist diese noch nicht Open Source. Ein Punkt, der sich mit der nächsten Version von Visuallink hoffentlich ändern wird.

Installation von Visuallink

Um die hier vorgestellte Applikation testen und weiterentwickeln zu können, benötigt man eine lokale Entwicklungsumgebung mit PHP und Apache. Zu empfehlen ist ein Komplettpaket von den Apache Friends, welches alle Bedürfnisse abdeckt. Dann muss Visuallink nur noch in ein vorbereitetes Verzeichnis auf dem Webserver kopiert werden.

Verwendung der Windows-Applikation

Wer seine Links lieber offline auf dem neuesten Stand hält, kann später problemlos online bzw. mit Hilfe eines FTP-Programms die visuallink.xml durch die lokale Datei ersetzen. Zur Installation bitte die v_1_00_visuallink_win32_setup.exe aufrufen.

Tipps

Zum Schützen des admin-Ordners vor ungewolltem Zugriff empfiehlt es sich, eine htaccess-Datei zu verwenden. Diese kann entweder von Hand erstellt werden (Anleitung) oder einfach mithilfe des htaccess-Generators. Dieser Generator erzeugt automatisch die htaccess-Datei mit Hilfe eines PHP-Skripts. Durch diesen Schutz kann niemand auf die Daten zugreifen.

Aufbau von Visuallink

Wer seine Links zentral im Web verwalten und unabhängig von den gängigen Browsern sein will, ist mit Visuallink gut bedient. Für die nächsten Versionen sind ein automatisches Export- sowie Import-Tool für die gängigsten Browser angedacht. In diesem Sinne wünsche ich wie immer viel Spaß beim Ausprobieren und freue mich über reichlich Feedback.

Christian Hubmann ist Spezialist für die Entwicklung CMS-basierter Flash-Anwendungen, crossmedialer Eingabe- und Publikationssysteme sowie von E-Learning-Applikationen. www.chhubmann.de
Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -