Ibuildings - Blog - ibuildings.com

Industry news, case studies and analysis of PHP-related topics from business perspective.

php blog, php development blog, php businesss blog, enterprise php

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.

Thursday, February 1. 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.
Posted by Jeroen van Sluijs at 13:40 | Comments (0) | Trackbacks (0)
Defined tags for this entry: , , , , , , ,
Share

Trackbacks
Trackback specific URI for this entry

No Trackbacks

Comments
Display comments as (Linear | Threaded)

No comments

Add Comment

BBCode format allowed
Enclosing asterisks marks text as bold (*word*), underscore are made via _word_.
Standard emoticons like :-) and ;-) are converted to images.
E-Mail addresses will not be displayed and will only be used for E-Mail notifications

To prevent automated Bots from commentspamming, please enter the string you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly.
CAPTCHA
 
Submitted comments will be subject to moderation before being displayed.
 

United Kingdom (change)