Nog even en dan gaat
Mockatoo online. Wat het precies is, blijft nog geheim. Om een tipje van de sluier op te lichten, kan ik verklappen dat in deze gloednieuwe Web2.0 applicatie gebruik wordt gemaakt van in-page windows. Dat lijkt een mooi woord voor 'popup', en eigenlijk is dat het ook

.
Het verschil is echter, dat deze Prototype Windows
in de pagina verschijnen, waarbij verschillende effecten kunnen worden gebruikt, zoals fade-in en fade-out. Daarnaast is elk window te verslepen, mimimaliseren, maximaliseren en is het met behulp van CSS compleet te stylen.
Ook is het mogelijk om een willekeurig URL in een window te openen. Er zijn ook specifieke Windows, zoals de Dialog, waarbij de popup op de voorgrond komt en de pagina op de achtergrond grijs (en disabled) wordt. Een goede toepassing is bijvoorbeeld een window om een gebruiker in te laten loggen: pas nadat een gebruiker zijn gegevens heeft ingevoerd en op 'Login' klikt (of op cancel), kan de webpagina weer gebruikt worden. Op deze manier komt het werken met een webapplicatie dicht in de buurt van het werken met een windows applicatie.
Bovendien is het mooie van Prototype Windows dat ze gemakkelijk in ATK te gebruiken zijn:
Registreer javascripts en css files
PHP:
<?php
// SCRIPT
$page = &atkinstance("atk.ui.atkpage");
$page->register_script(atkconfig("atkroot")."atk/javascript/prototype/prototype.js");
$page->register_script(atkconfig("atkroot")."atk/javascript/window/window.js");
$page->register_script(atkconfig("atkroot")."atk/javascript/window/js/application.js");
// als je gebruik wilt maken van effecten, zoals fade-in en -out
$page->register_script(atkconfig("atkroot")."atk/javascript/scriptaculous/effects.js");
// STYLE
// registreer de default-style
$page->register_style(".".atkconfig("atkroot")."atk/javascript/window/themes/default.css");
// en kies een style voor je windows
$page->register_style(atkconfig("atkroot")."atk/javascript/window/themes/alphacube.css");
?>
Maak het javascript voor de dialoog:
CODE:
<script type="text/javascript">
function showDialog()
{
Dialog.confirm("Prototype Window dialog test.",
{
windowParameters: {className: 'alphacube'}, okLabel: 'Ok', cancelLabel:'Close',
ok:function(win) {return true;}
});
}
</script>
En ten slotte een button, waarmee je de dialoog kunt openen:
CODE:
<input type="button" value="Open Dialog" onclick="showDialog()">
Voorbeelden met de vele andere mogelijkheden kun je vinden op
de Prototype Window homepage, of binnenkort op
www.mockatoo.com. De complete code is te vinden op de
ATK wiki.