PHP Classes

awfDialog Wizard: Generate wizard-like Web user interface using AJAX

Recommend this page to a friend!
  Info   View files Example   Screenshots Screenshots   View files View files (50)   DownloadInstall with Composer Download .zip   Reputation   Support forum (4)   Blog    
Ratings Unique User Downloads Download Rankings
StarStarStar 58%Total: 2,016 This week: 1All time: 1,949 This week: 560Up
Version License PHP version Categories
awfdialog 1.2GNU General Publi...5.0HTML, AJAX
Description 

Author

This class can be used to generate wizard-like Web based user interface using AJAX to avoid reloading the page when advancing to a new step. It features:

- Modal forms dialogs that cannot be closed, or non-modal with an exit button
- Display form icons from a set of icons supplied with this package or from a custom icon set. Icons may have standard 32x32 or 20x20 sizes.
- Wizard display mode that causes the form content region to render in two side-by-side panes
- AJAX wizard buttons to go to the previous and next pages or cancel
- Present the forms with configurable gradient colors
- The user interface elements have unique ID values to allow customization of presentation details via CSS

Innovation Award
PHP Programming Innovation award nominee
March 2008
Number 4


Prize: One book of choice by Packt
Wizard is the name that is called to user interfaces that guide the user through a series of steps that need to be performed to achieve a certain task. This kind of user interfaces is typically found in desktop applications.

It is possible to implement wizards in a Web site by showing a sequence of pages with all the steps. However, multi-page wizard are not as usable as desktop application wizards, as they make the user wait for the next page to load.

This class provides a solution to implement Web based wizards that uses AJAX to minimize the time it takes to load the next page. This way, Web based wizards are practically as usable as desktop application wizards.

Manuel Lemos
Picture of AW Ford
  Performance   Level  
Name: AW Ford <contact>
Classes: 1 package by
Country: United States United States
Age: 54
All time rank: 1497224 in United States United States
Week rank: 411 Up48 in United States United States Up
Innovation award
Innovation award
Nominee: 1x

Example

<?php
   
//Version 1.2 (final)
  
include('../../lib/awfDialog.php');
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>awfDialog Class :: Gradient Buider Example</title>
        <link rel="stylesheet" href="../style.css" type="text/css" media="screen" />
        <script language="javascript" src="ajax.js"></script>
        <script src="jscolor/jscolor.js" type="text/javascript"></script>
    </head>
    <body>
        <script>
            jscolor_init();
        </script>
        <div class="header">
            <img src="../../docs/images/testlab2.jpg" align=right><img src="../../docs/images/testlabhead.jpg">
        </div>
        <div class="content">
            <table width="100%" cellpadding="2" cellspacing="1" border="0">
                <tr>
                    <td width="100%" valign="top">
                        <font size="1">awfDialog :: AJAX Enabled Dynamic Dialog Wizard Class :: Gradient Builder Example</font>
                        <center>
                        <div id='container'>
<?php
   
   
    $str1
="<b>Welcome to the Gradient Builder Wizard.</b><br><br>The purpose of this wizard is to demonstrate both the awfDialog Wizard class, as well as dynamic creation of gradient images using the GD library and the gradient_image class from <a href='http://phpclasses.org' target=new ><font color=#008800>PHPClasses.Org</font></a>.<br><br> If the title bar above does not render a dark green-to-light green gradient you may not have the GD library installed or could be missing the dependency class. See the documentation on how to verify the class files.<br><br>Click the Next button to continue the wizard.<br><br>";
   
   
$m1 = new awfDialog('D1','Gradient Builder',$str1, ICON_NONE,false,575);
   
$m1->SetImagePath("../../lib/images/");
   
$m1->SetVAlign(BODY_MIDDLE);
   
$m1->SetHAlign(BODY_CENTER);
   
$m1->SetIconType(ICON_INFO);
   
$m1->SetIconSize(ICON_SIZE_LG);
   
$m1->SetGradient('224e15','c3f60a');
   
$m1->SetImagePHPURL('../../lib/image2.php');
   
$m1->SetWizMode(true);
   
$m1->SetAjaxNext("doStart();");
   
$m1->EnableWizImage();
   
$m1->SetBodyBGColor('#efffca');
   
$m1->Render();
   
$m1->Clear();
?>
</div>
                    <!--<div id='error'><textarea id="raw" cols=75 rows=10 class="color"></textarea><br><input type=text class="color"></div>-->
                    </center>
                    </td>
                    <td width="120px" bgcolor="#efffca" valign="top" class="quick">
                        <?php include('../examplemenu.php');?>
</td>
                </tr>
            </table>
        </div>
        <div class="footer">
            <img src="../../docs/images/KLNminilogo.jpg"><br><font color="white">
            TestLab is an internal-use only production of <a href="http://knowledgelinknetwork.net">Knowledge Link Network</a></font><br>
        </div>
    </body>
</html>



Screenshots  
  • cssref2.jpg
  • scr1.jpg
  • scr2.jpg
  Files folder image Files  
File Role Description
Files folder imageawfDialog (2 files, 3 directories)

  Files folder image Files  /  awfDialog  
File Role Description
Files folder imagelib (3 files, 1 directory)
Files folder imagedocs (7 files, 1 directory)
Files folder imageexamples (2 files, 2 directories)
  Accessible without login Plain text file index.php Aux. documentation redirector
  Accessible without login Plain text file readme.txt Lic. ReadMe File

  Files folder image Files  /  awfDialog  /  lib  
File Role Description
Files folder imageimages (24 files)
  Plain text file awfDialog.php Class Main class file
  Plain text file class.gradient_image.php Class dependecy class
  Accessible without login Plain text file image2.php Aux. class dependency

  Files folder image Files  /  awfDialog  /  lib  /  images  
File Role Description
  Accessible without login Image file exit.gif Icon dependent image
  Accessible without login Image file help.gif Icon dependent image
  Accessible without login Image file icoChat.gif Icon dependent image
  Accessible without login Image file icoConfig.gif Icon dependent image
  Accessible without login Image file icoDownload.gif Icon dependent image
  Accessible without login Image file icoError.gif Icon dependent image
  Accessible without login Image file icoHelp.gif Icon dependent image
  Accessible without login Image file icoInfo.gif Icon dependent image
  Accessible without login Image file icoKey.gif Icon dependent image
  Accessible without login Image file icoLocked.gif Icon dependent image
  Accessible without login Image file icoMail.gif Icon dependent image
  Accessible without login Image file icoMoney.gif Icon dependent image
  Accessible without login Image file icoSearch.gif Icon dependent image
  Accessible without login Image file icoUnlocked.gif Icon dependent image
  Accessible without login Image file icoUpload.gif Icon dependent image
  Accessible without login Image file icoUser.gif Icon dependent image
  Accessible without login Image file icoUsers.gif Icon dependent image
  Accessible without login Image file icoWarn.gif Icon dependent image
  Accessible without login Image file icoWizard.gif Icon dependent image
  Accessible without login Image file wizCancel.gif Icon dependent image
  Accessible without login Image file wizDefault.jpg Icon dependent image
  Accessible without login Image file wizNext.gif Icon dependent image
  Accessible without login Image file wizPrev.gif Icon dependent image
  Accessible without login Image file wizColorPicker.gif Icon color picker button

  Files folder image Files  /  awfDialog  /  docs  
File Role Description
Files folder imageimages (4 files)
  Accessible without login Plain text file changelog.php Doc. Change Log
  Accessible without login Plain text file cssref.php Doc. CSS Reference
  Accessible without login Plain text file docmenu.php Aux. Documentation Menu
  Accessible without login Plain text file index.php Doc. About and Feature List
  Accessible without login Plain text file license.php Doc. License Info
  Accessible without login Plain text file style.css Data stylesheet
  Accessible without login Plain text file usage.php Doc. Detailed property and method reference

  Files folder image Files  /  awfDialog  /  docs  /  images  
File Role Description
  Accessible without login Image file cssref.jpg Icon documentation image
  Accessible without login Image file KLNminiLogo.jpg Icon doc support file
  Accessible without login Image file testlab2.jpg Icon doc support file
  Accessible without login Image file testlabhead.jpg Icon doc support file

  Files folder image Files  /  awfDialog  /  examples  
File Role Description
Files folder imageGradientBuilder (3 files, 1 directory)
Files folder imageSimplePlain (1 file)
  Accessible without login Plain text file style.css Data example stylesheet
  Accessible without login Plain text file examplemenu.php Aux. examples support file

  Files folder image Files  /  awfDialog  /  examples  /  GradientBuilder  
File Role Description
Files folder imagejscolor (4 files)
  Accessible without login Plain text file ajax.js Data client-side ajax javascript for this example
  Accessible without login Plain text file index.php Example Gradient Builder example
  Accessible without login Plain text file steps.php Example server-side ajax callback for this example

  Files folder image Files  /  awfDialog  /  examples  /  GradientBuilder  /  jscolor  
File Role Description
  Accessible without login Image file cross.gif Icon support image
  Accessible without login Image file hv.png Icon support image
  Accessible without login Plain text file jscolor.js Data supporting javascript
  Accessible without login Image file s.gif Icon support image

  Files folder image Files  /  awfDialog  /  examples  /  SimplePlain  
File Role Description
  Accessible without login Plain text file index.php Example Simplest usage example

Downloadawfdialog-2008-03-27.zip 597KB
Downloadawfdialog-2008-03-27.tar.gz
Install with ComposerInstall with Composer
Needed packages  
Class DownloadWhy it is needed Dependency
Gradient Image Download .zip .tar.gz Needed for gradient title bar suppor (included) Conditional
 Version Control Unique User Downloads Download Rankings  
 0%
Total:2,016
This week:1
All time:1,949
This week:560Up
 User Ratings  
 
 All time
Utility:70%StarStarStarStar
Consistency:79%StarStarStarStar
Documentation:79%StarStarStarStar
Examples:75%StarStarStarStar
Tests:-
Videos:-
Overall:58%StarStarStar
Rank:1382