AJAX-Effekte mit Axure

Mit der steigenden Verbreitung von AJAX-basierten Websites kommt sicher auch die Frage auf, wie man solche Verhaltensweisen (z.B. Nachladen eines Teils einer Seite) in Axure nachbauen kann.

Der Nachteil an Abläufen in Axure ist, dass man zwar auf eine bestimmte Zeit hin timen kann, jedoch nur einmal. Das heisst, Abläufe wie “warte 0.5 Sekunden - zeige Panel 2 - warte nochmal 0.5 Sekunden - zeige Panel 3″ sind nicht möglich. Jedenfalls nicht ohne Hack.

Beispiel: Folgende Applikation soll gebaut werden. Ich gebe einen Wert in ein Formular ein, drücke einen Knopf und im Hintergrund wird der Wert verschickt (was mir auch angezeigt wird). Dann soll die Bestätigung des Versands angezeigt werden.

1. Wir erstellen in Axure ein dynamisches Panel und definieren 3 Stati:

2. Start Panel = das Formular im Anfangsstadium. Der Absenden-Button zeigt auf Panel-Status Nr. 2 ‘in progress’

3. in progress Panel = der AJAX-alike Teil. Wir erstellen zuerst mal die Ansicht, welche der Benutzer sehen soll, nachdem er auf den ‘absenden’-Button gedrückt hat:

4. Jetzt beginnt die Magie: über das ‘in Progress’-Bild packen wir eine Imagemap und versehen sie mit einem Onmouseout-Event. Wenn ich also mit der Maus aus dem Bereich fahre, wartet das System 0.5 Sekunden und leitet mich zur Ergebnisseite weiter.

5. Nun fehlt nur noch die Ergebnis-Seite, welche das Ganze abschliesst.

6. Fertig!
Beispiel ansehen
Axure File zum Download