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

Recommend this page to a friend!

Download

Info

Example

Screenshots

Files

Install with Composer

Download

Reputation

Support forum

Blog

Links

Ratings				Unique User Downloads		Download Rankings
58%				Total: 2,017		All time: 1,948 This week: 78

Version		License		PHP version		Categories
`awfdialog` 1.2		GNU General Publi...		5.0		HTML, 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

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

AW Ford

Performance

Level

Name:	AW Ford `<contact>`
Classes:	1 package by AW Ford
Country:	United States

Level 1

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)

Files (53)

File	Role	Description
`awfDialog` (2 files, 3 directories)

Files (53)

awfDialog

File	Role	Description
`lib` (3 files, 1 directory)
`docs` (7 files, 1 directory)
`examples` (2 files, 2 directories)
`index.php`	Aux.	documentation redirector
`readme.txt`	Lic.	ReadMe File

Files (53)

awfDialog

lib

File	Role	Description
`images` (24 files)
`awfDialog.php`	Class	Main class file
`class.gradient_image.php`	Class	dependecy class
`image2.php`	Aux.	class dependency

Files (53)

awfDialog

lib

images

File	Role	Description
`exit.gif`	Icon	dependent image
`help.gif`	Icon	dependent image
`icoChat.gif`	Icon	dependent image
`icoConfig.gif`	Icon	dependent image
`icoDownload.gif`	Icon	dependent image
`icoError.gif`	Icon	dependent image
`icoHelp.gif`	Icon	dependent image
`icoInfo.gif`	Icon	dependent image
`icoKey.gif`	Icon	dependent image
`icoLocked.gif`	Icon	dependent image
`icoMail.gif`	Icon	dependent image
`icoMoney.gif`	Icon	dependent image
`icoSearch.gif`	Icon	dependent image
`icoUnlocked.gif`	Icon	dependent image
`icoUpload.gif`	Icon	dependent image
`icoUser.gif`	Icon	dependent image
`icoUsers.gif`	Icon	dependent image
`icoWarn.gif`	Icon	dependent image
`icoWizard.gif`	Icon	dependent image
`wizCancel.gif`	Icon	dependent image
`wizDefault.jpg`	Icon	dependent image
`wizNext.gif`	Icon	dependent image
`wizPrev.gif`	Icon	dependent image
`wizColorPicker.gif`	Icon	color picker button

Files (53)

awfDialog

docs

File	Role	Description
`images` (4 files)
`changelog.php`	Doc.	Change Log
`cssref.php`	Doc.	CSS Reference
`docmenu.php`	Aux.	Documentation Menu
`index.php`	Doc.	About and Feature List
`license.php`	Doc.	License Info
`style.css`	Data	stylesheet
`usage.php`	Doc.	Detailed property and method reference

Files (53)

awfDialog

docs

images

File	Role	Description
`cssref.jpg`	Icon	documentation image
`KLNminiLogo.jpg`	Icon	doc support file
`testlab2.jpg`	Icon	doc support file
`testlabhead.jpg`	Icon	doc support file

Files (53)

awfDialog

examples

File	Role	Description
`GradientBuilder` (3 files, 1 directory)
`SimplePlain` (1 file)
`style.css`	Data	example stylesheet
`examplemenu.php`	Aux.	examples support file

Files (53)

awfDialog

examples

GradientBuilder

File	Role	Description
`jscolor` (4 files)
`ajax.js`	Data	client-side ajax javascript for this example
`index.php`	Example	Gradient Builder example
`steps.php`	Example	server-side ajax callback for this example

jscolor

File	Role	Description
`cross.gif`	Icon	support image
`hv.png`	Icon	support image
`jscolor.js`	Data	supporting javascript
`s.gif`	Icon	support image

Files (53)

awfDialog

examples

SimplePlain

File	Role	Description
`index.php`	Example	Simplest usage example

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

	awfdialog-2008-03-27.zip 597KB
	awfdialog-2008-03-27.tar.gz 586KB
	Install with Composer

Needed packages

Class	Download	Why it is needed	Dependency
Gradient Image	.zip .tar.gz	Needed for gradient title bar suppor (included)	Conditional

Version Control

Unique User Downloads

Download Rankings

Total:	2,017
This week:	0

All time:	1,948
This week:	78

User Ratings

	All time
Utility:	70%
Consistency:	79%
Documentation:	79%
Examples:	75%
Tests:	-
Videos:	-
Overall:	58%
Rank:	1409

Applications that use this package

No pages of applications that use this class were specified.

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

Related pages


Official Support Site

About us

Advertise on this site

For more information send a message to info at phpclasses dot org.