osdata.org - Webentwicklung und mehr

osdata.org --> TechTalk --> AXAJ Part 1

02/06

Vom Web zum Desktop:

Frei positionierbare Elemente mit AJAX und PHP
Part I - Worum geht´s eigentlich ?

Bilder und HTML-Element durch die Gegend zu ziehen ist seit diversen JavaScript-Biblioteken kein Problem mehr. Und in Zeiten von AJAX kann man sich die neuen Positionen auch sehr elegant merken und speichern.

Ziel dieses kleinen Tutorials soll es sein, eine desktopähnliche Anwendung mit verschiebbaren Fenstern zu erstellen, welche auch noch nach einem Seiten-Refresh an der neuen Position zu finden sind.

Zum besseren Verständnis gibt es hier eine Demo.

Zum Verschieben der "Fenster" benutze ich das Scriptaculous-Framework, dass einige nette Funktionen bereitstellt. Zum Ermitteln der Fensterposition gibts ein JavaScript und zum Speichern der Koordinaten benutze ich das XMLHttp-Objekt in Verbindung mit PHP und MySQL.

Als Container für unsere verschiebbaren Elemente reicht im ersten Schritt eine normale HTML-Datei. In diesem Tutorial sieht sie folgendermaßen aus: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> <title>Positionierbare Seitenelemente</title> <link rel="stylesheet" type="text/css" href="style.css.php"/> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js" type="text/javascript"></script> <script src="js/desktop.js" type="text/javascript"></script> </head> <body> <div id="container"> <div id="message"></div> <div id="headerContainer" onmouseup="javascript:savePos('headerContainer')"> <h1>Hier steht ein Text</h1> </div> <div id="submenueContainer" onmouseup="javascript:savePos('submenueContainer')"> <span class="submenue"><a href="#">Link1</a></span> <span class="submenue"><a href="#">Link2</a></span> <span class="submenue"><a href="#">Link3</a></span> </div> <div id="menueContainer" onmouseup="javascript:savePos('menueContainer')"> <div class="menue"><a href="#">Hauptlink1</a></div> <div class="menue"><a href="#">Hauptlink2</a></div> <div class="menue"><a href="#">Hauptlink3</a></div> </div> <div id="mainContainer" onmouseup="javascript:savePos('mainContainer')"> <div class="main">Hier steht ein Text mit einem Bild darunter.</div> <img src="images/pic1.jpg" width="225" height="175" alt="Ein Bild" /> </div> </div> <script type="text/javascript"> new Draggable("headerContainer",{revert:false}); new Draggable("submenueContainer",{revert:false}); new Draggable("menueContainer",{revert:false}); new Draggable("mainContainer",{revert:false}); </script> <div style="position:fixed; left:10px; bottom:10px;"> <input type="button" value="Seite neu laden" onclick="javascript:document.location.reload();" /> </div> </body> </html> Der interessanteste Part hier ist sicherlich der <head>-Abschnitt:
An dieser Stelle wird, anstelle einer .css-Datei eine .php-Datei eingebunden. Dazu später mehr. Desweiteren werden noch die Scriptaculous-Biblioteken (prototype.js, scriptaculous.js) eingebunden, sowie mein kleines JavaScript (desktop.js).
Im Body werden die Element-Container mit einer ID und einem Eventhandler (onMouseUp) versehen. Am Ende der Datei, vor dem abschließenden Body-Tag, werden die später bewegbaren Container anhand ihrer ID bekannt gemacht.

Kommentar schreiben ( Verbindung zur Datenbank nicht möglich
Access denied for user 'osdata_org'@'localhost' (using password: YES)

02/06

Vom Web zum Desktop:

Frei positionierbare Elemente mit AJAX und PHP Part I - Worum geht´s eigentlich ?

Frei positionierbare Elemente mit AJAX und PHP
Part I - Worum geht´s eigentlich ?