Develop: Blog
| XAJAX: modal Window Plugin |
19.12.2007 14:00 |
Als Webanwendungsentwickler steht man häufig vor dem Problem, wie fängt man am besten Benutzereingaben ab und validiert diese, bevor die Daten letztendlich in der Datenbank landen.
Javascript bietet hier nur begrenzte Werkzeuge wie alert, prompt oder confirm, die nicht nur in ihrer Benutzung eingeschränkt sind, sondern die Usebility durch z.b. ständiges Aufploppen von irgendwelchen Alerts bei Formularvalidierungen stark herabsetzen. Zu dem passen sie meist in die heutigen Web 2.0 Anwendungen wie ein Holzrad an ein Formel 1 Auto.
Also stellte sich bereits schon vor einem Jahr die Frage, wie integriert man solche Abfrage und Hinweisfenster in eine Anwendung. Die Lösung war vom Prinzip her schnell gefunden, sie hiess Lightbox. Doch Lightbox war entwickelt worden um Bilder darzustellen, keineswegs aber komplexen HTML Code der dann auch noch mit weiteren Teilen der Anwendung interagieren soll. Und Lightbox hatte einen weiteren wesentlichen Nachteil, Multi-Layering war damit nicht möglich.
Deswegen entstand ein Derivat von Lightbox: Lockbox . Da zu der damaligen Zeit der Plugin-Layer von XAJAX noch nicht in dem Maße existierte wie heute, entstand erst jetzt das Plugin dazu für XAJAX.
Die Konfiguration ist ziemlich einfach, neben der XAJAX Klasse werden auch noch die xajaxPlugin sowie xajaxPluginManager Klasse eingebunden und danach noch die modalWindow Klasse:
<?php
$core = './xajax/xajax_core';
require_once( $core . '/xajax.inc.php' );
$xajax = new xajax();
require_once( $core . '/xajaxPlugin.inc.php' );
require_once( $core . '/xajaxPluginManager.inc.php' );
require_once './xajax/xajax_plugins/response/modalWindow/modalWindow.inc.php';
?>
In der ajax-Funktion wird dann einfach auf dem $objResponse-Objekt mit der ->plugin Funktion gearbeitet:
<?php
$objResponse = new xajaxResponse();
$objResponse->plugin( 'clsmodalWindow', 'addWindow', $windowcontent);
?>
Würde man die Funktion wie oben aufrufen würde $windowcontent in der Mitte des Browsers angezeigt werden. Man kann diesem Aufruf noch 3 weitere Parameter mitgeben:
<?php
$objResponse->plugin( 'clsmodalWindow', 'addWindow', $windowcontent, $backgroundcolor, $opacity, $className );
?>
$backgroundcolor ist dabei die Farbe des Layers der die Komplette Anwendung überdeckt,
$opacity ist dieProzentangabe [0-100] des alphawertes dieses Layers und mit
$className kann man dem layer fallsnötig noch eine Klassendefinition mitgeben.
Schliessen kann man die Fenster natürlich auch:
<?php
$objResponse->plugin( 'clsmodalWindow', 'closeWindow');
?>
oder aber man verwendet direkt im HTML-Code die Funktion
onclick="xjxmW.closeWindow()"
Für das Aussehen der Fenster ist natürlich dann jeder selbst verantwortlich, mehr ist aber nicht notwendig.
Zur Demo gehts hier.
| modalWindow_0.9.0_b1.rar | [5.4 KB | RAR] |
 |
|
| Permalink
|
| Enable File Upload with xajax 0.5 beta 2 |
24.02.2007 12:10 |
Based upon an xajax-extension from RainChen in the xajax-forum i have rewritten the small package for xajax 0.5 beta 2.
While xajax.processResponse() in the new version are expired and the xajax API works with requestobjects i have taken codeparts from the old version to parse the XMLDocument into a structure to make the ajax-calls on the xajax API
xajax.upload() is modified to take less ore more than the original 2 inputfields for files.
thats now the code for your html
<form id="testForm1" onsubmit="return xajax.upload('ajax_testForm', 'testForm1');" method="post" enctype="multipart/form-data">
<input name="somefile" type="file">
<input value="upload" type="submit">
</form>
You will find all informations about your file or files in $_FILES all the same how much fileinputs you use.
ajax_testForm is your callback function for your upload
<?php
function ajax_testForm()
{
$objResponse = new xajaxResponse();
// ... do something with $_FILES here
return $objResponse;
}
// register ajax_testForm()
// as JavaScript Function ajax_testForm()
?>
| xajax_eUpload.0.2_xajax.0.5.b2.rar | [3.1 KB | RAR] |
|
|
| Permalink
|
| amplified2 php5 ajax application framework |
10.02.2007 17:20 |
After a short push i have the first demo of my new php ajax application framework online.
The demo is an fully ajax-supported taskmanager and includes other libraries like
xajax 0.5 beta1
smarty
prototype/scriptaculous
ovberlib
my own lightbox remake named lockbox
fully languagesupport, but at the moment only in german
Test the demo on:
http://www.amp-lified.de/amplified2/index.php
and use as login: test / test |
| Permalink
|
| Lightbox vs. Lockbox |
29.01.2007 10:00 |
Für die Entwicklung von Ajax-Anwendungen war es für mich notwendig, auf verschiedene Art und Weise dem Benutzer Anwendungsfesnter einzublenden, in dem er Eingaben machen muss bzw soll. Leider berücksichtigt die Technik der Lightbox dabei nicht, dass solche eine Benutzerführung durch verschiedene Fenster auch in mehreren Ebenen erfolgen soll oder kann. Selbst Lightbox gone Wild mit dem eingebauten Ajax-Interface der Lightbox stößt dabei an seine Grenzen, und da war der Zeitpunkt gekommen, sich darüber Gedanken zu machen, wie man eine Multilevel Lightbox so hinbekommt, dass sie zum einen Ajax-Calls entgegennimmt, zum anderen aber auch wieder so deaktiviert werden kann, dass sie als HTML-Element vollständig aus dem DOM gelöscht ist. Ansonsten würde ein erneuter Aufruf in die gleiche Ebene fehlschlagen. Ein weiterer Punkt war dann noch, den übergebenen Content dann auch noch so zu platzieren, dass die Fenster immer mittig ausgerichtet sind.
Letztendlich entstand Lockbox, losgelöst von Lighbox, losgelöst von den Lightbox-Funktionalitäten lbOn und lbAction.
statisches Beispiel
Download |
| Permalink
|
RSS Feed |