Earlier this month I posted on a powerful ExtJS extension for handling multiple file uploads. Today we will delve deeper into this widget and explore handling the uploads on the server end.

Keep reading →

YUI provides for the creation of forms dynamically without the need for pre-existing markup through the Button object.

Despite its name, the button is a rich widget that supports the creation of:

• Push Buttons
• Link Buttons
• Submit Buttons
• Reset Button
• Checkboxes
• Radios
• Menus
• Split button (hybrid button menus)

Today we are exploring the creation of buttons dynamically from javascript.   Creation itself is simple. 

Keep reading →

After yesterday’s comment regarding my display:none / innerHTML hack on building a YUI panel.  I thought I’d quickly show you how to build a panel from markup without the display:none;

For a quick refresher, I recommend you read: http://www.ajaxbestiary.com/2007/09/19/building-a-form-in-a-modal-panel-with-yui/

Now, to achieve the same results we can do the following.

1. Remove the display:none from the panel div
2. Place the form into a <div class="bd"> tag
3. Place the form header in a <div class="hd"> tag before the bd tag but inside of the panel div.
4. If you’re going to add a footer, place it after the <div class="bd"> tag inside of a <div class="ft"> tag
5. Replace the instantiation command with myPanel = new YAHOO.widget.Panel( "panelid"); where "panelid" is the id of the div wrapping the various panel containers. 
6. You now have a panel to render, show, hide & modify based on your page content.

I apologize for the shotgun approach to this post, but I thought it was a handy correction to get out there.

Building a Modal Filtering List with YUI

In this tutorial we will build a simple form and embed it in a modal panel.

Building the form
There are two approaches we could take towards building the form : dynamic or static. A dynamically loaded interface is built by the javascript executed on page load, a static interface lurks hidden inside the html source and is displayed when needed. For the sake of simplicity, we will be using a static interface in this tutorial.

Our form is quite simple. It consists of 3 tiers of options and a submit button:

<div id="filterpanelform" style="display:none">
<fieldset><legend>Type</legend>
<input name="type" value="berry" type="checkbox">Berry
<input name="type" value="citrus" type="checkbox">Citrus
<input name="type"value="drupe" type="checkbox">Drupe
<input name="type" value="Melon" type="checkbox">Melon
</fieldset>

<fieldset><legend> Size </legend>
<input name="size" value="small" type="checkbox">Small
<input name="size" value="medium" type="checkbox">Medium
<input name="size" value="large" type="checkbox">Large
</fieldset>

<fieldset><legend> Color </legend>
<input name="color" value="red" type="checkbox">Red
<input name="color" value="orange" type="checkbox">Orange
<input name="color" value="yellow" type="checkbox">Yellow
<input name="color" value="green" type="checkbox">Green
<input name="color" value="purple" type="checkbox">Purple
<input name="color" value="pink" type="checkbox">Pink
</fieldset>

<button value="Filter" name="doFilter" type="button"id="doFilter">Filter</button>
</div>

Notice the style=”display:none;” on the containing div? This is to hide the contents from view until our user calls the modal dialog.

Building the Modal Interface

Now we need to build a YUI panel to contain the filtering interface. Unlike the form elements, the panel we will build dynamically. The panel will be created on page load, but will remain hidden until called for.

// Instantiate a Panel from script
YAHOO.example.container.FormPanel = new YAHOO.widget.Panel("formPanel", { width:"320px", visible:false, draggable:true, close:true} );
YAHOO.example.container.FormPanel.setHeader("Form Panel");

//populate the panel with the form we've hidden in the HTML
YAHOO.example.container.FormPanel.setBody( document.getElementById("filterpanelform").innerHTML );

YAHOO.example.container.FormPanel.render("container");

In part one we discussed the general layout and design of the application. In this chapter we will build the server side in the storage for the application using the powerful PHP object generator (POG).

Keep reading →

This is part one of a multipart tutorial on AJAX application construction. Today we will be building a Software Project Scheduling application based on Joel Spolsky’s Painless Software Schedules system.

The application will be built using the Php Object Generator, and ExtJS Framework.

Keep reading →