Ibuildings - Blog - ibuildings.nl

Blog

Ibuildings, blog

Blog

Jeroens blog

ing. Jeroen van Sluijs ing. Jeroen van Sluijs
Software Engineer
 Zend PHP5 Certified Engineer MySQL Certified Engineer
Jeroen is a Software Engineer at Ibuildings Vlissingen. In his role as an analyst he makes functional and technical designs in close cooperation with the customer. Besides programming himself, he guides other developers during projects as a lead developer.

Donderdag, 1 februari 2007

Prototype Windows

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.
Geplaatst door Jeroen van Sluijs op 12:40 | Reacties (0) | Trackbacks (0)
Tags voor deze bijdrage: , , , , , , ,
Share

Trackbacks
Trackback-URI voor dit artikel

Geen Trackbacks

Reacties
Geeft reacties weer als (Lineair | Samengevoegd)

Geen reacties

Reactie toevoegen

BBCode opmaak toegestaan
Met sterretjes wordt tekst *vet* gemaakt. Met underscores kan een _woord_ onderstreept worden.
Standaard emoticons zoals :-) en ;-) worden geconverteerd naar plaatjes.
Email adressen worden niet getoond en zijn alleen zichtbaar voor de blogger.

Om het posten door robots tegen te gaan, gelieve de letters die je in het plaatje ziet over te typen. Je commentaar wordt enkel gepost wanneer de letters overeen komen. Je browser dient cookies te ondersteunen (standaard staat dit aan), of je commentaar kan niet geverifieerd worden.
CAPTCHA
 
Ingestuurde reacties zullen eerst worden gecontroleerd voor deze geplaatst worden.
 

Benelux (wijzig / change)