awfDialog :: AJAX Enabled Dynamic Dialog Wizard Class :: Documentation

  Quick Start   Properties   Methods
awfDialog Class Quick Start
  1. Unzip the contents of the package zip file
  2. Upload the the awfdialog directory and all sub-directories to your server.
  3. Include the class using: include('awfDialog/lib/awfDialog.php');
    Change the include path based on relativity to file doing the inclusion.
  4. Create an instance of the class:
      $myClass = new awfDialog('id','My First Dialog','Hello World!', ICON_INFO,false,'300');
    Start manipulating the class using available functions and properties. See below for detailed description of each.
  5. When you're ready to render your dialog box:
      $myClass->Render();
  6. Happy coding!
awfDialog Detailed Guide

Class Properties

dialogID:
  • String, required. Unique identifier for the dialog box to be rendered. Useful, for instance, when creating sequential dialogs as in an application and you need to know your current position within the sequence. Also used as the prefix for all CSS classes and id's assigned to dialog elements to guarantee uniqueness when rendering multiple dialogs on a page.

    See SetID() method.

  • Cancel ButtondAjaxCancel:
  • String. Client-side Javascript method to tie to the Cancel button's onClick event. If empty, no Cancel button is rendered.

    See SetAjaxCancel() method

  • Next ButtondAjaxNext:
  • String. Client-side Javascript method to tie to the Next button's onClick event. If empty, no Next button is rendered.

    See SetAjaxNext() method

  • Previous ButtondAjaxPrev:
  • String. Client-side Javascript method to tie to the Previous button's onClick event. If empty, no Previous button is rendered.

    See SetAjaxPrev() method

  • dWizBGColor:
  • String, hex. Hexideciaml color code to use when rendering the Body pane of the dialog.

    See SetBodyBGColor() method.

  • dBodyHAlign:
  • Constant, integer. Determines the horizontal alignment of the body element of the dialog. Accepts one of three constant values:
      BODY_LEFT, align left
      BODY_CENTER, align center
      BODY_RIGHT, align right

    No direct method to set, use $MyClass->dBodyHAlign=VALUE.

  • dBodyVAlign:
  • Constant, integer. Determines the vertical alignment of the body element of the dialog. Accepts one of three constant values:
      BODY_TOP, align top
      BODY_MIDDLE, align middle
      BODY_BOTTOM, align bottom

    No direct method to set, use $MyClass->dBodyVAlign=VALUE.

  • dCSSArray:
  • Array. Stores CSS element values prior to Render().

    See SetCSS() method below.

  • dCSSOut:
  • String. Final CSS output string sent to the browser during Render().

    See SettCSS() method below.

  • dGradientDirection:
  • Constant, integer. Determines the direction to render the dynamic gradient image. Accepts one of two constant values:
      GRADIENT_H, horizontal
      GRADIENT_V, vertical

    See SetGradientDirection() method.

  • dIconSize:
  • Integer, constant, default ICON_SIZE_LG. Determines whether to render a small (20x20) or large (32x32) icon. Accepts one of two constant values:
      ICON_SIZE_LG, large icon
      ICON_SIZE_SM, small icon

    See SetIconSize() method.

  • ConstantValueIcon
    ICON_NONE0none
    ICON_CSS1custom
    ICON_INFO2
    ICON_HELP3
    ICON_WARN4
    ICON_ERROR5
    ICON_WIZARD6
    ICON_CONFIG7
    ICON_CHAT8
    ICON_SEARCH9
    ICON_USERS10
    ICON_USER11
    ICON_MAIL12
    ICON_DOWNLOAD13
    ICON_UPLOAD14
    ICON_KEY15
    ICON_LOCKED16
    ICON_UNLOCKED17
    ICON_MONEY18

    dIconType:
  • Constant. Property determines which icon, if any, is rendered in the top left hand corner of the title bar element. The table at right shows available constants and their associated icons.

    See SetIcon() method.

  • dIconValue:
  • String. Path and filename to use if dIconType is set to ICON_CSS in order to use custom icons instead of those supported natively by the class.

    See SetIconType() method.

  • dImagePath:
  • String. Relative path to thr 'awfDialog/lib/images/' directory. Prefixed to all image renders done by the class.

    See SetImagePath() method.

  • Exit ButtondModal:
  • Boolean, default false. Determines whether or not to render the dialog in modal form. It true, the dialog cannot be closed and the Exit button is not rendered.

    See SetModal() method.

  • dProcessArray:
  • Array. Internal class debug event log.

    See DebugDump() & _debug() methods.

  • dOutput:
  • String. HTML/browser output to render in the body element of the dialog.

    See AddOutput() & Render() methods.

  • dScrollType:
  • --. Reserved for future versions.

  • dTitle:
  • String. Title text to display in the title bar of the dialog. Can be set during class instatiation or afterwards.

    See SetTitle() method.

  • dTitleBGColor:
  • String, hex value. Hexidecimal color code for the background of the title bar element of the dialog.

    See SetTitleBGColor() method.

  • dTitleGrad1:
  • String. Hex code (minus hash symbol) used for the start point of the title gradient.

    See SetGradient() method.

  • dTitleGrad2:
  • String. Hex code (minus hash symbol) used for the end point of the title gradient.

    See SetGradient() method.

  • dUseGradient:
  • Boolean, default false. If true, the titlebar element will be rendered with a dynamically generated gradient image across the background. If you set hex values using SetGradient() you will automatically set this to true.

    See SetGradient() method.

  • dUseWizImg:
  • Boolean, default true. When Wizrd Mode is enabled the display of a wizard image is optional. When set to false, this variable disables rendering the wizard image.

    See DisableWizImage() and EnableWizImage() methods.

  • dVersion:
  • String, read only. Derived from the VERSION constant of the class. Primarily used for version verification and debug information.

  • dWidth:
  • String. Width value at which to render the dialog. Can be either fixed pixel width or percentage based.

    See SetWidth() method.

  • dWizBGColor:
  • String, hex. Hexideciaml color code to use when rendering the Wizard pane.

    See SetWizBGColor() method.

  • Default Wizard ImagedWizImage:
  • String. Relative path to image to use if dUseWizImg is true. when left empty the dialog will render the default wizard image from 'awfDialog/lib/images/'.

    See SetWizImage() method.

  • dWizMode:
  • Boolean, default false. Determines if the dialog will be rendered with the various wizard-style features enabled.

    See SetWizMode() method.

  • imagePHPBase:
  • String. Relative path to pointing to 'awfDialog/lib/image2.php'. Used to ensure your code knows how to find image2.php, which is the file that generated the dynamic grandient title image.

    See SetImagePHPURL() method.

  • imagePHPURL:
  • String. Final path to pointing to the image2.php file and includes all querystring parameters for color1, color2, width, height, and direction of the gradient to be rendered.

    See SetImagePHPURL() method.

  • Class Methods

    awfDialog(string $id [, string $title [, string $message [, integer $icotype [boolean $modal [, string width]]]]]):
  • Class instantiation method. This method is used when creating a new instance of the awfDialog class using the 'new' directive, as in:

    $MyClass = new awfDialog('id1');

  • $id - The unique DOM id to assign to the dialog. Required.
  • $title - Text to be rendered in the title bar element of the dialog. Optional.
  • $message - HTML to be sent to the Body element of the dialog. Optional. See AddOutput() method for more information on sending content to the Body element.
  • $icotype - Icon to render in the upper left corner of the title bar element. Optional. Default value is ICON_NONE. Accepts any one of the icon type constants provided by the class. See dIconType in the properties section above for a complete list.
  • $modal - Determines if the dialog can be closed. Default value is false. If false, the form is not modal, meaning the Render() method will included the Exit button in the upper right corner of the title bar element, as well as the javascript used to close the dialog. If true, the dialog is modal and cannot be closed.
  • $width - Width of the dialog box. Optional, default = 0. Accepts both pixel or percentage values. Note, this is also used to determine the width of the gradient image, if dUseGradient is true (See SetGradient() method.) Because of this, if you use both a percentage based width as well as a horizontal gradient the image will not fit the title bar width. It is highly recommended to only use pixel values for width when using horizontal gradients.

  • AddHelp(string $string ):
  • Appends HTML / text to the end of the output buffer for rendering in the Help pane during the Render() method. Example usage:

    $MyClass->AddHelp('How may I help you?');

  • $string - Properly escape special characters, quotes, etc, just as you would when using the echo statement.

  • AddOutput(string $data ):
  • Appends HTML / text to the end of the output buffer for rendering in the Body pane during the Render() method. Example usage:

    $MyClass->AddOutput('How do you like my wizard?');

  • $data - Properly escape special characters, quotes, etc, just as you would when using the echo statement.

  • Clear():
  • Clears the BodyPane and HelpPane output buffers while maintaining all the other class properties. Example usage:

    $MyClass->Clear();

    Use Clear() and SetID() together to quickly reproduce multiple dialogs while only setting the majority of properties once.

  • DebugDump():
  • Immediately prints the formatted contents of the debug log. Example usage:

    $MyClass->DebugDump();


  • DisableWizImage():
  • Turns off rendering of the Wizard pane when dWizMode = true, without effecting the render of wizard-style AJAX buttons. Example usage:

    $MyClass->DisableWizImage();

    See EnableWizImage() and SetWizMode() methods.

  • EnableWizImage():
  • Turns on rendering of the Wizard pane when dWizMode = true. Example usage:

    $MyClass->EnableWizImage();

    See DisableWizImage() and SetWizMode() methods.

  • Render():
  • Draw the dialog. Example usage:

    $MyClass->Render();


  • SetAjaxCancel(string $scriptname ):
  • Assigns a javascript method to the Cancel button's onClick event. Example usage:

    $MyClass->SetAjaxCancel("doStop('something')");

    In this example, the Cancel button will call the doStop() javascript method when clicked, passing in the value 'something'. See the Gradient Builder example for a complete study on setting up the AJAX calls and using this method.
  • $scriptname - Name of the javascript method to reference.

  • SetAjaxHelp(string $script ):
  • Assigns a javascript method to the Help button's onClick event. If this value is not set, either through SetAjaxHelp() or with UseHelp(), and UseHelp() is true, then the Help Button will open the HelpPane instead of making an Ajax call. Example usage:

    $MyClass->SetAjaxHelp("doHelp('something')");

    In this example, the help button will call the doHelp() javascript method when clicked, passing in the value 'something'. See the Gradient Builder example for a complete study on setting up the AJAX calls and using this method.
  • $script - Name of the javascript method to reference.

  • SetAjaxNext(string $scriptname ):
  • Assigns a javascript method to the Next button's onClick event. Example usage:

    $MyClass->SetAjaxNext("alert('You clicked Next!')");

    In this example, the Next button will call the alert() javascript method, when clicked, passing in the value 'You clicked Next!'. See the Gradient Builder example for a complete study on setting up the AJAX calls and using this method.
  • $scriptname - Name of the javascript method to reference.

  • SetAjaxPrev(string $scriptname ):
  • Assigns a javascript method to the Previous button's onClick event. Example usage:

    $MyClass->SetAjaxPrev("doStart('something')");

    In this example, the Previous button will call the doStart() javascript method, when clicked, passing in the value 'something'. See the Gradient Builder example for a complete study on setting up the AJAX calls and using this method.
  • $scriptname - Name of the javascript method to reference.

  • SetBodyBGColor(string $hex ):
  • Sets the background color of the Body element. Example usage:

    $MyClass->SetBodyBGColor('#ffffaa');

    The above example would set the Body element background to light yellow.
  • $hex - Hexidecimal color code, including hash symbol (#).

  • SetGradient(string $color1, string $color2 ):
  • Sets the colors to use when generating a dynamic gradient image for the titlebar element of the dialog. Example usage:

    $MyClass->SetGradient('ffcc00','ffffaa');

    The above example would produce an image fading from gold to light yellow
  • $color1 - Hexidecimal color value for the gradient start point without the hash symbol (#).
  • $color2 - Hexidecimal color value for the gradient end point without the hash symbol (#).

  • SetGradientDirection(integer $direction ):
  • Sets the direction to use when generating a dynamic gradient image for the titlebar element of the dialog. Default is GRADIENT_V. Example usage:

    $MyClass->SetGradientDirection(GRADIENT_H);

    The above example would set the gradient image for horizontal rendering
  • $direction - Accepts one of two possible constant values:
      GRADIENT_H, 0, horizontal
      GRADIENT_V, 1, vertical

  • SetHAlign(integer $value ):
  • Sets the horizontal alignment of the Body element. Example usage:

    $MyClass->SetHAlign(BODY_LEFT);

    The above example would set the Body element horizontal alignment to 3, which gets rendered as 'align=left' during the Render() method.
  • $value - Can be any one of three constants:
      BODY_LEFT, 3
      BODY_CENTER, 4
      BODY_RIGHT, 5

  • SetIcon(integer $type [, string $value] ):
  • Sets the icon to use, if any, on the dialog. Example usage:

    $MyClass->SetIcon(ICON_INFO);

  • $type - Constant value. See dIconType property above for a complete list of available icons.
  • $value - Optional. Override path to the image to be used when $type is set to ICON_CSS.

  • SetIconSize(integer $size ):
  • Sets the size of the icon rendered in the titlebar element. Example usage:

    $MyClass->SetIconSize(ICON_SIZE_SM);

    The above example would set icon size to approximately 20x20.
  • $size - Can be one of two constants:
      ICON_SIZE_SM, 0
      ICON_SIZE_LG, 1

  • SetID(string $id ):
  • Sets the unique DOM id of the dialog. The dialogID gets prefixed to all elements in the dialog to allow for extended output control via CSS. Example usage:

    $MyClass->SetID('Hdu5');

    The above example would replace the id used when instatiating $MyClass with 'Hdu5'. This way you don't need to have more than a single instance of the awfDialog class instantiated in order to generate multiple dialogs with differing CSS styles.
  • $id - Unique id to assign the dialog.

  • SetImagePath(string $path ):
  • awfDialog needs to know where to find the various icon and button images it uses during the Render() method. By default, it assumes you have installed the class in a subdirectory from your current execution path, as in 'awfDialog/lib/images/'. If the class is located somewhere else, you'll need to override this behavior. Example usage:

    $MyClass->SetImagePath('../../awfDialog/lib/images/');

    As this is a directory path, make sure your $path value includes the trailing '/'.
  • $path - Absolute or relative path to the images directory.

  • SetImagePHPURL(string $url ):
  • awfDialog needs to know where to find the file used to generate the dynamic gradient image during the Render() method. This file is in the 'awfDialog/lib/' directory along with the 'class.gradient_image.php' file. Both files need to be in the same directory. Example usage:

    $MyClass->SetImagePHPURL('../../awfDialog/lib/image2.php');

    or

    $MyClass->SetImagePHPURL('http://yourdomain.com/app/awfDialog/lib/image2.php');

    Make sure your $url value includes the 'image2.php' filename.
  • $url - Absolute or relative url to the lib directory.

  • SetModal(boolean $value ):
  • Sets the dialog modal or non-modal. Default false. If true, the dialog is modal, meaning it cannot be closed, so the Exit button is not rendered to the titlebar element. If false, the dialog is able to be closed. Example usage:

    $MyClass->SetModal(true);

  • $value - True or false.

  • SetTitle(string $title ):
  • Sets the title string to be rendered in the titlebar element. Example usage:

    $MyClass->SetTitle('Blackjack Install Wizard');

  • $title - Title string to assign to the dialog.

  • SetTitleBGColor(string $hex ):
  • Sets the background color of the titlebar element. Example usage:

    $MyClass->SetTitleBGColor('#ffffff');

    The above example would set the titlebar element background to white.
  • $hex - Hexidecimal color code, including hash symbol (#).

  • SetVAlign(integer $value ):
  • Sets the vertical alignment of the Body element. Example usage:

    $MyClass->SetVAlign(BODY_TOP);

    The above example would set the Body element vertical alignment to 0, which gets rendered as 'valign=top' during the Render() method.
  • $value - Can be any one of three constants:
      BODY_TOP, 0
      BODY_MIDDLE, 1
      BODY_BOTTOM, 2

  • SetWidth(string $width ):
  • Sets the width of the dialog and the gradient image in the titlebar element. Example usage:

    $MyClass->SetWidth('65%');

  • $width - Accepts both pixel and percentage width values.

  • SetWizBGColor(string $hex ):
  • Sets the background color of the Wizard pane. Example usage:

    $MyClass->SetWizBGColor('#ffcc00');

    The above example would set the Wizard pane background to gold.
  • $hex - Hexidecimal color code, including hash symbol (#).

  • SetWizImage(string $path ):
  • Sets the path for the image to display in the Wizard pane. By default, awfDialog will use the 'wizDefault.jpg' file located in 'awfDialog/lib/images' directory. Example usage:

    $MyClass->SetWizImage('http://mysite.com/images/myWiz.jpg');

  • $path - Absolute or relative path to the desired image.

  • SetWizMode(boolean $mode ):
  • Determines if the dialog will render the Wizard image and AJAX buttons. Example usage:

    $MyClass->SetWizMode(false);

    Note, setting this to false on a dialog that previously had wizard properties enabled also clears those properties.
  • $mode - True or false.

  • UseHelp(boolean $value [, string $script] ):
  • Determines if the dialog will render the the Help button in the title bar, the behavior of that button, and if the HelpPane will be rendered to the BodyPane. Example usage:

    $MyClass->UseHelp(true, 'alert("this is a test")');

    In the above example, the help button will be displayed, however, since the optional $script variable was supplied, if overrides the original behavior: instead of rendering the HelpPane, clicking the button will trigger a javascript alert() method. Had the $scipt variable been left blank the HelpPane would have been rendered containing any output written to it using the AddHelp() method.

    Note, setting this to false on a dialog that previously had help enabled also clears dAjaxHelp property.
  • $value - True or false.
  • $script - String, optional. If set, overrides the behavior of the Help Button with the passed in client-side Ajax call.
  • See AddHelp(), and SetAjaxHelp() methods.

    Docs

    About / Features

    Change Log

    Usage guide

    CSS Reference

    License

    Examples

    Simple Implementation

    Gradient Builder