PHP Classes

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

Recommend this page to a friend!
     
  Info   Example   Screenshots   View files Files   Install with Composer Install with Composer   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
StarStarStar 58%Total: 2,017 All time: 1,948 This week: 78Up
Version License PHP version Categories
awfdialog 1.2GNU General Publi...5.0HTML, AJAX
Description 

Author

AW Ford

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  

Level 1 Star

 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 (3)  
  • cssref2.jpg
  • scr1.jpg
  • scr2.jpg
  Files folder image Files (53)  
File Role Description
Files folder imageawfDialog (2 files, 3 directories)

The PHP Classes site has supported package installation using the Composer tool since 2013, as you may verify by reading this instructions page.
Install with Composer Install with Composer
Downloadawfdialog-2008-03-27.zip 597KB
Downloadawfdialog-2008-03-27.tar.gz 586KB
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,017
This week:0
All time:1,948
This week:78Up
 User Ratings  
 
 All time
Utility:70%StarStarStarStar
Consistency:79%StarStarStarStar
Documentation:79%StarStarStarStar
Examples:75%StarStarStarStar
Tests:-
Videos:-
Overall:58%StarStarStar
Rank:1409
  

  Applications that use this package  
No pages of applications that use this class were specified.

Add link image If you know an application of this package, send a message to the author to add a link here.


  Related pages  
Official Support Site