Prototype window

ATK Howto: Prototype window Complexity: Easy Author: Jeroen

List of other Howto's

Prototype Windows can be used to create nice JavaScript Windows and Dialogs for ATK. The library even provides fancy visual effects such as fading in and out.

These windows can be easily used in ATK:

Register javascripts and styles

 $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");
 
 // include the following line, if you like fancy effects
 $page->register_script(atkconfig("atkroot")."atk/javascript/scriptaculous/effects.js");
 
 // register default-style
 $page->register_style(".".atkconfig("atkroot")."atk/javascript/window/themes/default.css");
 
 // choose a style from the themes/ directory
 $page->register_style(atkconfig("atkroot")."atk/javascript/window/themes/alphacube.css");

Create the javascript for your dialog

<javascript>

function showDialog()
{ 
  Dialog.confirm("Prototype Window dialog test.", 
  { 
    windowParameters: {className: 'alphacube'}, okLabel: 'Ok', cancelLabel:'Close', ok:function(win) {return true;}
  });
}

</javascript>

You can find a lot of other examples on the Prototype Window homepage.

Make a button to open the dialog

<input type="button" value="Open Dialog" onclick="showDialog()">

Complete code

The complete code for this ATK-application:

<?php
  $config_atkroot = "./";
  include_once($config_atkroot."atk.inc");

  /**
   * REGISTER JAVASCRIPT & CSS
   */
  $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");
  $page->register_script(atkconfig("atkroot")."atk/javascript/scriptaculous/effects.js");

  // registreer de default-style
  $page->register_style(atkconfig("atkroot")."atk/javascript/window/themes/default.css");
  $page->register_style(atkconfig("atkroot")."atk/javascript/window/themes/alphacube.css");

  /**
   * JAVASCRIPT FOR DIALOG
   */
  $window_code = "function showDialog()
                  {
                    Dialog.confirm('Prototype Window dialog test.',
                    {
                      windowParameters: {className: 'alphacube'}, okLabel: 'Ok', cancelLabel:'Close', ok:function(win) {return true;}
                    });
                  }";

  $page->register_scriptcode($window_code);

  /**
   * BUTTON
   */
  $page->addContent('<input type="button" value="Open Dialog" onclick="showDialog()">');

  /**
   * FLUSH OUTPUT
   */
  $output = &atkOutput::getInstance();
  $output->output($page->render(text('Prototype Window'), true));
  $output->outputFlush();
?>