Filemanager basierend auf MooTools

Unter der Website von Christoph Pojer findet ihr einen beeindruckenden Filemanager. Er ist noch in der Erprobungsphase, aber bietet schon eine angenehme Oberfläche und eine gute Usability und natürlich volle Funktionalität.

Der Filemanager zum Verwalten von Bildern bzw. Dateien auf einem PHP-Webserver basiert auf MooTools. Eine kleine Liste der Features:

• Betrachten der Ordner und Dateien auf einem Server
• Umbenennen, Löschen, Kopieren und Verschieben von Dateien
• Detailansicht von Bildern
• Fileupload mit dem bekannten Fancyupload in der neuen Version
• Automatisches verkleinern von großen Bildern
• …

Eine Demo findet ihr unter: Filemanager

Der Aufruf ist denkbar einfach:

1
2
3
4
5
6
7

 var manager = new FileManager({
    url: 'manager.php',
    assetBasePath: '../Assets',
    language: 'en',
    uploadAuthData: {session: 'MySessionId'}
  });
   $('beispiel').addEvent('click', manager.show.bind(manager));

Weiter gibt es auch die Möglichkeit den Filemanager in den WYSIWYG-Editor TinyMCE einzubauen. Dieser besitzt von Haus aus keine Möglichkeit eines gezielten Upload. Eine Demo dazu findet ihr ebenfalls auf Christopher’s Seite..

Online Thumbnail Generator für Webseiten

Unabhängig von alles JS-Frameworks will ich mal einen kleinen Service vorstellen, mit dem man sehr einfach Thumbails von Websites darstellen kann.
Alles was man dafür benötigt ist ein Account auf Pageglimpse. Nach erfolgreicher Registrierung gibt man auf seiner Seite dem img-Tag als src Attribut einfach einen absoluten Link. Dieser kann dann wie folgt aussehen:

http://images.pageglimpse.com/v1/thumbnails?url=http://www.mysrc.de/&size=large&devkey=1234567890

Pageglimpse verfügt auch über eine kleine API. Was indem Fall nur bedeutet, dass dem GET-String einfach weitere Attribute hinzugefügt werden können.
Dazu gehören:

• devkey -> obligatorisch und auch üblich um einen Service im Web zu nutzen
• url -> WWW-Adresse die der Website die als Thumbnail angezeigt werden soll
• size -> Größe des Thumbails

Da die Thumbnails nicht sofort generiert werden, kann man einen Request senden um den Status zu prüfen. Ein Request sähe dann so aus:

http://images.pageglimpse.com/v1/thumbnails/request?

Hinter “request?” kann man dann noch die GET-Parameter anhängen. Beispiele dazu findet ihr auf Pageglimpse API.

Formulare mit AJAX und jQuery – Ein kleines Tutorial

AJAX ist eine vom Prinzip her sehr einfache Technologie. Request mit JS abschicken, Anfrage mit serverseitigem Skript verarbeiten und Ergebnis wieder im Browser ausgeben bzw. anzeigen. Allerdings steckt der Teufel wie immer im Detail. Dieser Post ist eine kleine Anleitung wie man AJAX mit einem Formular einsetzen kann. Weit einfacher ist dies mit der Verwendung eines JS-Frameworks, hier jQuery.

So zunächste einmal der Standardaufbau in HTML für ein Formular.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<div class="block">
<div class="done">
<b>Vielen Dank. Wir haben Ihre Anfrage erhalten</b>
</div>
	<div class="myForm">
	<form method="post" action="saveData.php">
	<div class="input">
		<label>Name</label>
		<input type="text" name="name" class="text" />
	</div>
	<div class="input">
		<label>Email</label>
		<input type="text" name="email" class="text" />
	</div>
	<div class="input">
		<label>Kommentar</label>
		<textarea name="kommentar" class="text textarea" /></textarea>
	</div>
	<div class="input">
 
		<input type="submit" id="submit"/>
		<div class="loading_icon"></div>
	</div>
	</form>
	</div>
</div>
<div class="clear"></div>

Nichts besonderes. Jedes Input Feld ist noch mit einem beschreibenden Label versehen. Zur einfacheren Gestaltung sind die einzelnen inputs mit ihren Labeln in einem div gehüllt. Die Divs mit der Klasse “loading_icon” und “done” sind zum Startzeitpunkt unsichtbar.
Das CSS dazu könnte man so umsetzen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

body{
        text-align:center;
}
 
.loading_icon {
	float:right;
	background:url(ajax-loader.gif) no-repeat 1px;
	height:30px;
	width:30px;
	display:none;
}
.done {
	background:url(iconIdea.gif) no-repeat 2px;
	padding-left:20px;
	font-size:12px;
	width:70%;
	margin:20px auto;
	display:none
}
 
.clear {clear:both}
 
.block {
	width:400px;
	margin:0 auto;
	text-align:left;
}
.input * {
	padding:5px;
	margin:2px;
	font-size:12px;
}
.input label {
	float:left;
	width:75px;
	font-weight:700
}
.input input.text {
	float:left;
	width:270px;
	padding-left:20px;
}
.input .textarea {
	height:120px;
	width:270px;
	padding-left:20px;
}
 
.input #submit {
	float:right;
	margin-right:10px;
}

So. Nun können wir uns endlich um den AJAX-Request kümmern. Schauen wir uns an wie wir die Daten nun weiter verarbeiten und an das PHP-Skript weiterleiten.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

$(document).ready(function() {
  //click event für submit button
  ('#submit').click(function () {
 
  //Daten von den HTML Feldern in JS-Vars übersetzen
  var name = $('input[name=name]');
  var email = $('input[name=email]');
  var website = $('input[name=website]');
  var comment = $('textarea[name=comment]');
 
  //die Daten sollen per GET an das PHP Skript weitergeleitet werden. Dafür bauen wir einen 
  //String
  var data = 'name=' + name.val() + '&email=' + email.val()
  + '&comment='  + encodeURIComponent(kommentar.val());
 
  //alle Textfelder deaktivieren
  $('.text').attr('disabled','true');
 
  //Icon während des Requests einblenden
  $('.loading_icon').show();
 
  //Request abschicken
  $.ajax({
	//Ort des Skriptes in dem die per GET übertragenen Daten verarbeitet werden sollen
	url: "saveData.php",
	//Angabe der GET Methode, auch POST wäre möglich. Allerdings nur sinnvoll
        //bei größeren Datenmengen
	type: "GET",
	//Daten die gesendet werden sollen			
	data: data,
 
	//bei Antwort des Requests (Response)
	success: function (reqCode) {
	//wenn saveData.php true bzw. den Status 1 zurückliefert
		if (reqCode==1) {
			//verstecken des Formulars
			$('.form').fadeOut('slow');
			//anzeigen der Erfolgsmeldung
			$('.done').fadeIn('slow');
 
		//wenn der Request eine Form von false zurückschickt, Fehler ausgeben.
		} else{
                        alert('Fehler beim Abschicken des Formulares.');
                }
	}
});
 
	return false;
        //der return wird benötigt, damit das Formular nicht tatsächlich abgeschickt wird und         
        //sich nicht wie ein normales Form mit Seiten Refresh verhält.
	});
});

All magic is done …

Demo

jQuery versus CSS

An einem kleinen Beispiel soll gezeigt werden inwiefern CSS und ein JS-Framework gleiche Funktionalitäten bieten aber auch gleichzeitig wo Unterschiede liegen.
Folgendes Codestück legt ein Zoom Icon über ein Bild rein unter zuhilfe von CSS. Hierbei wird ein leeres span-Tag eingefügt auf das wir später unser Icon legen wollen.

1
2
3
4
5
6
7
8
9
10
11

<div id="picGallery">
    <h2>CSS-Code</h2>
    <a href="someBigPic.jpg">
        <span></span>
        <img src="someSmallerPic.jpg" alt="" />
    </a>
    <a href="anotherBigPic.jpg">
        <span></span>
        <img src="AnotherSmallPic.jpg" alt="" />
    </a>
</div>

Das CSS sähe dabei so aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

#picGallery{
    width:       100%;
    overflow:  hidden;
}
#picGallery a {
    position:   relative;
    float:         left;
    margin:     5px;
}
#picGallery a span {
   display:none;
   background-image:url(zoom.png);
   background-repeat:no-repeat;
   width:48px;
   height:48px;
   position:absolute;
   left:15px;
   top:15px;
}
#picGallery img {
   border:    solid 1px #999;
   padding:  5px;
}
#picGallery  a:hover span {
   display:   block;
}

Soweit sogut. Nun mit Hilfe von jQuery. Der HTML Teil ist fast identsich. Allerdings brauchen wir hier die span-Tags noch nicht.

1
2
3
4
5
6
7
8
9

<div id="picGallery">
    <h1>jQuery Code</h1>
    <a href="someBigPic.jpg">
        <img src="someSmallerPic.jpg" alt="" />
    </a>
    <a href="anotherBigPic.jpg">
        <img src="AnotherSmallPic.jpg" alt="" />
    </a>
</div>

Der JS-Code erzeugt den span und kümmert sich um das Einblenden..

1
2
3
4
5
6
7
8
9
10
11

   $(document).ready(function(){
      //Füge jedem a-tag in dem div mit der id "picGallery" ein span-Tag hinzu
      $("#picGallery a").append("<span></span>");
      //Standard fading Funktionen von jQuery
      $("#gallery2 a").hover(function(){
      $(this).children("span").fadeIn(600);
      },
      function(){
      $(this).children("span").fadeOut(200);
      });
});

Das wars auch schon. Natürlich muss das CSS im HTML Dokument referenziert werden, allerdings kann dann die a:hover Eigenschaft weggelassen werden. Bei Click würde das Bild in einem neuen Fenster geöffnet, bei Bedarf ließe sich noch ein Bildergalerie Skript damit verbinden. Ich hoffe das bei Gelegenheit noch vorstellen zu können.
Viel Erfolg!!

jQuery UI CSS Framework

Heute mal ein kleiner Exkurs auf die Oberflächengestaltung das vereinfachte Zusammenarbeiten zwischen Entwickler und Designer.
jQuery bietet ein eigenes CSS Framework. Im Gegensatz zu YAML, wohl eines der bekanntetesten Frameworks in diesem Bereich, ist das UI CSS Framework meiner Meinung nach weitaus einfacher zu handhaben, allerdings auch nicht ganz so mächtig. In erster Linie werden Bezeichnungen für Elemente durch Klassen vorgegeben. Nun hält man sich einfach an diese Standards und man kann das “Look a like” seiner Oberflächenkomponenten durch Austauschen der Themes schnell und einfach ändern.

Auch wird die Umsetzung von “Rounded corners” mit CSS3 unterstützt. Natürlich in den Browsern, die sich nach dieser W3C Empfehlung richten. Der IE6 gehört natürlich nicht dazu, hierfür muss auch mit dem jQuery CSS Framework individuell angepasst werden. Genauso werden bisher noch keine transparente png’s im IE6 unterstützt, was sich aber bald ändern soll. Aber hierfür ist bisher noch der alte CSS pngfix notwenig.
Allgemein mehr über das CSS Framework könnt ihr unter Theming API herausfinden.

Auch äußerst interessant ist der ThemeRoller. Hält man sich an die Standards der Theming API lassen sich damit einfach ansprechende Benutzeroberflächen gestalten, die auf die eigene Seite als CSS übernommen werden können.

jQuery Media Plugin zum Einbinden verschiedener Mime-Types

Neulich bin ich auf ein jQuery Plugin gestoßen um verschiedene Player oder Media Files ganz einfach mit jQuery einzubinden. Eine kleine Auflistung der Player:

• Quicktime
• Flash
• Windows Media Player
• Real Player
• Silverlight
• iFrame

Es lassen sich damit auch direkt Dateien aufrufen, die dann mittels einem der genannten Player abgespielt werden. Vorrausgesetzt natürlich, dass das jeweilige Plugin des Players bereits im Browser installiert ist. Das Media Plugin besitzt ansich eine recht einfache Funktionsweise. Es ersetzt einfache a-Tags auf eine Media-File durch den für den Browser notwendigen Einbettungscode, der weitaus länger und komplexer ist.

Ein kleines Beispiel wie man mittels diesem Plugin eine PDF direkt auf der Website anzeigen kann:

1
2

//Aufruf des Media Plugins mit zwei Optionen(normalerweise innerhalb des DOM-Ready Events)
$('a.media').media({width:500, height:400});

Der HTML-Code müsste dann folgendermaßen aussehen:

1
2
3
4
5
6

<script type="text/javascript" src="jquery.media.js"></script>
 
<!-- metadata ist ebenfalls ein plugin das in diesem Beispiel zur Anzeige der Größe gebraucht wird -->
<script type="text/javascript" src="jquery.metadata.js"></script>
 
<a class="media" href="guice.pdf">PDF File</a>

That’s it. Zu finden ist das Ganze hier..

jQuery für mobile Browser (jQTouch)

In Zeiten in denen mobile Endgeräte immer leistungsfähiger werden, nehmen natürlich auch die Browser dafür an Bedeutung zu. Genau dafür kommt das sich derzeit in der Entwicklung befindende JQuery Plugin jQTouch von David Kaneda in Frage.
Er arbeitet derzeit also noch daran, aber dieses Plugin sollte im Auge behalten werden, da sich damit jQuery Funktionen auf die weniger bekannten mobilen Browser umsetzen lassen.

Ein Beispiel:

1
2
3
4
5

//initialisierung des jQTouch Plugins
$(document).jQTouch({
   icon: 'jqtouch.png',
   statusBar: 'black-translucent'
});

Attribute die für eine iPhone Applikation gesetzt sein müssen:

1
2
3
4
5
6
7
8
9

 fullScreen: true,
 slideInSelector: 'ul li a',
 backSelector: '.back',
 flipSelector: '.flip',
 slideUpSelector: '.slideup',
 statusBar: 'default', // options: black-translucent, blac
 icon: null,
 iconIsGlossy: false,
 fixedViewport: true

Desweitern soll es noch die bekannten Funktionen für Animationen, etc. bereitstellen.
Längerfristig soll das Plugin auch mit neuen Palm Pre und dem G1 funktionieren.

Wie nutzt man MooTools?!

Inspiriert von einem Artikel von “chromasynthetic” möchte ich ein paar Best Practices für den Umgang mit MooTools vorstellen und diese kurz erläutern.

• Elemente ansprechen
^?View Code JAVASCRIPT

1 2 3 4

//javascript methode document.getElementById("someID"); //mit Mootools $('someID');

Mit Mootools weit kürzer und vor allem problemlos zwecks CamalCases.

• “Value” bearbeiten
^?View Code JAVASCRIPT

1 2 3 4

//javascript methode var val= document.getElementById('input').value; //mit Mootools var val = $('input').getValue();

Mootools bietet diverse Methoden um Objekteigenschaften zu verändern oder auszulesen.

• Verketten von Methoden
^?View Code JAVASCRIPT

1 2 3 4 5 6 7 8

//javascript methode $('div').style.height = '100px'; $('div').style.background = '#ffc'; //mit Mootools $('footer').setStyles({ height: '100px', background: '#ffc' });

Einfaches Beispiel für eine Verkettung von Funktionen.

• Absetzen eines AJAX-Requests
^?View Code JAVASCRIPT

1 2 3 4 5 6 7 8 9 10

//falsche Methode new Ajax('eine.php?var1=test&var2=request');   //besser mit new Ajax('eine.php', { data: { var1: 'test', var2: 'request' } });

Beide Möglichkeiten führen zum selben Ergebnis. Allerdings ist die Überschaubarkeit für letzteres deutlich größer. Für nicht statische Variabeln wie z.B. der ‘test’-String lassen sich an dieser Stelle natürlich auch Selektoren benutzen.

• Event-Handling
^?View Code JAVASCRIPT

1 2 3 4 5

//Falsche Methode $('Container').onclick = doSomething;   //besser mit $('Container').addEvent('click', doSomething);

Die zweite Variante ist weitaus sicherer, da sich damit der Mootools Core um die Umsetzung auf den jeweiligen Browser kümmert.

• Einfache Iteration über Elementgruppen
^?View Code JAVASCRIPT

1 2 3 4 5 6 7

//Falsche Methode $$('div.collapsed').each(function(el){ el.addEvent('click', expand); });   //besser mit $$('div.collapsed').addEvent('click', expand);

Beide Versionen selektieren in diesem Fall jedes div mit der Klasse “collapsed” und legen darauf ein Click-Event. Das “$$” gibt Elemente in Form eines Arrays zurück, so dass eine Iteration mit der each-Funktion nicht mehr nötig ist.
Gleiches gilt für:

^?View Code JAVASCRIPT

1 2 3 4 5 6 7

//Falsche Methode $$('div.hidden').each(function(el){ el.removeClass('hidden'); })   //besser mit $$('div.hidden').removeClass('hidden');

Ich hoffe dem ein oder anderen Einsteiger wird damit klar, inwiefern sich Standard Javascript von dem Einsatz von MooTools unterscheidet und wie man diese Zusatzfunkionalitäten nutzen kann.

jQuery Debugger

Beim Entwickeln von Prgrammcode ist ein tieferer Blick in die Objektstruktur oft unabdingbar. Ein guter Debugger kann einem stundenlanges suchen nach Fehlern ersparen. Deshalb will ich kurz einen jQuery Debugger vorstellen. Downloaden könnt ihr ihn euch als jQuery Plugin auf: jQuery Debugger
Nachdem das Plugin eingebunden ist (ganz normal mit script-Tag und src-Attribut), könnt ihr es mit folgendem Code aufrufen:

1
2
3

var debuggen = new jQuery.debug();
// ...
debuggen.dump(Object);

Nun noch ein kleines Beispiel dazu:

1

<input name="LieferName"  value="" class="validate['required','length[6,-1]']" type="text" id="LieferName" />

Der Code um sich das Objekt näher anzuschauen kann wie folgt aussehen:

1
2
3
4
5
6
7
8
9
10
11
12

debug = new jQuery.debug({
	posTo : { x:'right', y:'bottom' },
	width: '480px',
	height: '50%',
	itemDivider : '<hr>',
	listDOM : [ 'tagName','id', 'innerText', 'href','value' ]
	});
 
function showMeDebug(){
  var input = $('LieferName');
  debug.dump(input);
}

Hier würde jetzt nach Aufruf der Funktion showMeDebug auf der unteren rechten Seite des Bildschirms eine Box, in der alle alle Attribute des “listDOM” für das Objekt “input” stehen, angezeigt.
Für ein Formularfeld ist diese Funktion nur teilweise interessant. Sinnvoller ist der Einsatz des Debuggers für komplexe Objekte vor allem natürlich Klasseninstanzen.

Zu beachten ist, dass vor “debug = new jQuery.debug” u. U. die “var” Deklaration von JavaScript stehen und “jQuery” durch $ ersetzt werden muss. Obiges Skript wurde im noConflict Mode von jQuery ausgeführt.

MooTools removeClass Problem

Hi,

am Wochenende habe ich ein paar verzweifelte Versuche unternommen eine CSS Klasse eines Inputfeldes mit der Methode Objekt.removeClass(“CSSKLASSE”) zu entfernen.
Nach langem ergebnislosem Suchen im Netz und durchstöbern der Doku, ließ sich auch nicht herausfinden warum es nicht funktionierte, zumal die Funktion addClass keinerlei Probleme machte.

Am Ende habe ich einen ganzen einfachen Weg gefunden, das Ganze zum laufen zu bringen. Ich sag mal, fast schon zu einfach um sofort darauf zu kommen.
Hier mein Workaround:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//Mittels Selektor eigenes Skriptobjekt erzeugen	
var input = $('LieferName');
 
//Ausblenden eines DIVs, danach sollte das Validierungsskript durch entfernen des CSS deaktiviert werden. Reiner JavaScript Syntax, man hätte auch Mootools Code dafür verwenden können..
document.getElementById('liefer').style.display='none';
 
//Folgende Funktion blieb immer ergebnislos
//input.removeClass('validate[\'required\',\'length[6,-1]\']'); 
 
//Workaround, einfach direkt das Objektattribut als einen leeren String definieren
input.className = "";
 
//Änderungen dem Validierungsskript bekannt machen
myCheck.register(input);

Damit läßt sich nun auf den gängigen Browsern eine CSS Klasse einfach zur Laufzeit entfernen.