ConceptsThe awfDialog class is explicitly designed so you should only ever need a single instance of the class to render any number of dialogs. To that end, the one critical piece to understand is the role of the unique id you assign to the dialog. That id is used heavily to ensure that all HTML elements sent to the browser are themselves unique and can be manipulated via CSS, javascript, or other client-side techniques that don't even yet exist.
For example, let's say you've created an instance of the class using
$myDialog = new awfDialog("mini");
The string "mini" will be prefixed to all the HTML elements for that dialog. So if you wanted you could add
#miniTitle {
color:#fff;
font-family:arial;
padding:1px;
}
to your CSS stylesheet in order to control the display of the title bar region.
That's fine for a fairly static design where you are not rendering elements on the fly. But what if you are using user input to determine the dialog id, or use a database driven theme system? That's where the extended CSS support added in version 1.2 comes in. To accomplish the same thing in a more dynamic development environment you can use the SetCSS() method:
$MyDialog->SetCSS("Title", "color:#fff;font-family:arial;padding:1px;");
The CSS that gets generated for you during the Render() method will be specific to the elements, but embedded as a style tag, not an HTML attribute. This will be important for future versions when this is extended further to add class overrides.
Ready to get started? Use the element reference below to get familiar with what parts of the dialog you can control with SetCSS()CSS Element Reference- MasterDiv
This is the overall container DIV for the dialog. It has no direct display properties of it's own, however you may find it necessary to modify the 'display' or 'float' properties depending on your site's layout.- Table
The top level display element. - Title
Container for the titlebar region. Includes the title text, icon, control box(help and exit buttons).- Icon
Icon displayed on the left side of the Title element. - ControlBox
Container for the help and exit Ajax buttons as well as any optional title bar elements that may get added in the future.- AjaxHelp
Help button on the right side of the title bar. By default, not rendered unless UseHelp() is set to 'true'. - AjaxExit
Exit button on the right side of the title bar. Rendered by default unless SetModal() is set to 'true'.
- WizardPane
Image panel displayed below the title bar and to the left of the BodyPane. Not rendered by default unless SetWizMode() is set to 'true' AND you call the EnableWizImage() method. - BodyPane
Main content panel. This is where all the content you add using the AddOutput() method goes. Also contains the HelpPane and the WizButtons.- HelpPane
Help panel rendered hidden above the rest of the BodyPane content. Not rendered by default unless UseHelp() is set 'true'. Also not rendered if the default Help Button behavior is overriden using your own Ajax methods. When the Help Button behavior is not overriden you can add help content using the AddHelp() method. - WizButtons
Container for the Ajax wizard buttons, rendered beneath the BodyPane content. Contains the AjaxPrev, AjaxCancel, and AjaxNext elements. Not rendered by default unless SetWizMode() is 'true' and at least one of the Ajax wizard buttons is enabled.- AjaxPrev
The Ajax Previous button rendered on the left side of the AjaxWizardBar. - AjaxCancel
The Ajax Cancel button rendered in the center of the AjaxWizardBar. - AjaxNext
The Ajax Next button rendered on the right side of the AjaxWizardBar.
- Footer
Not yet used.
Example | 
