Originally posted March 23, 2008.

The first significant component I’ve written from the ground up in PHP, the awfDialog Wizard is a PHP class object that allows you to dynamically generate multi-page wizard dialogs, just like you’re already used to seeing in Windows application installers.

Why write this? Well first of all, I needed something to sink my teeth into while learning PHP and AJAX. Second, that I can find there is not another component like it available to developers, so it fills a void in the re-usable PHP software world.

I’ve added all the end-user documentation and supporting examples here to the site. You can download the awfDialog Wizard’s latest distribution from PHPClasses.Org.

If you’re looking for help using or support issues with awfDialog Wizard just leave a comment on this post until I get the support forums up and running.

Lastly, if you use this class, or find it interesting, please write a comment or review on PHPClasses, FreshMeat, or HotScripts. awfDialog debuted on PHPClasses last week with a 5-star “Notable” rating and topped out the week as the #7 most downloaded class.

Thanks.

• Many new graphics and art pieces, most associated with HistoryKnowledge projects
• History Earth application for HistoryKnowledge.Net. Think Google Earth + history timeline + wikipedia articles, all wrapped up in a neat little integrated package. Early test users are raving about the overall functionality.
• Prepping to close AnimalKnowledge.Net and UFOKnowledge.Net (in their current incarnations)
• awfRadial is still in a usable, functioning beta stage, but I’m not planning on releasing the open-source PHP class any time soon.
• awfDialog Wizard version 1.3 is on indefinite hold. No worries though, it will be resurrected at some point

It goes something like this:

Find image for inspiration
Open Inkscape
Zoom in at 1000%
Create vectors
Shade
Drop jaw…

It’s too easy!

In no time flat, I’ve become totally immersed in it’s intuitive tools and found myself looking reasons to create new graphics with it.

My latest example, “Old Man” took about three hours, but much of that was spent playing with the best strategy for using layers.

Fun stuff, Maynard!

I’ve created my own new contribution to PHPinup art. Click the thumbnail for a larger image.

Go take a look at this beauty in action at http://mailahug.com/test

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.

Next I’m looking into several javascript drawing libraries to create the lines running between base and items.

The premise is simple: display between 1 and 48 rendered “objects” in radial form around a central element, each object having user configurable HTML, CSS, and AJAX properties for complete customization. This will be generic so that it can be implemented in many ways; I’ll probably release several additional wrapper classes for some common implementations such as radial context menu, or data drill-through applications.

Having read-up some on other attempts to create browser-happy radial menus, I’m assuming this will be a fairly daunting project, as most people have moved on to Flash or Java applets to make it work. I aim to make the end result as extensible as possible, but I always take the “crawl, walk, run” approach with new projects. So the first version will likely be rendered as a flat HTML table emulating a circular layout. To do this with raw CSS positioning will have to wait for a later release. The cross-browser issues relating to DIV positioning are my pet peeve and I want to at least get proof of concept functional before banging my head against IE6.

1. Some of the elements referenced using the SetCSS method don’t appear to get their CSS styles under IE6. Most notable is the Title element. You can still get around at least some of those issues by being more explicit with your title string, meaning you can embed the raw html to fix display properties using the SetTitle() method
2. A larger problem is the clipping region of the BodyPane div. Although everything should scale dynamically based on the width property you set, it seems IE6 is going to ignore this and render roughly the right 30pixels of the BodyPane outside the div, clipping it. And it is ignoring the “overflow” CSS attribute. I’m stumped at how to deal with that, but it is a real issue if you are in Wizard mode, as it ends up hiding the Next button. Anyone know how to trick IE6 regarding div overflow and clipping regions?

This message is to let you know that your package “awfDialog Wizard” was considered notable. Congratulations!

This means that the site users interested in packages that have something special, are being notified to pay special attention to your package.

Notable packages are carefully hand picked by a site moderator. The moderator that picked your package wrote the following comment:

“Interesting solution to render Web based multi-step user interfaces using AJAX for faster page switching.”

Not a bad start for my first raw PHP project. Now comes all the feedback to tell me all the PHP best practices in application design I was ignorant of…

Just to help prevent the onslaught of spam, I do require that you register and log in to post comments. So if you’re looking for help with any of my code I’d get that part out of the way first.