Over the past few days I have been going over the Yahoo! User Interface or YUI for short. Up to this point I have discussed the Tab View and the Connection Manager.

For my last trick I am going to dive into the Dialog control. The dialog is really sweet because you can get a “popup” that looks and behaves like it would on the desktop. Now I will tell you upfront that I normally shy away from popups because they interrupt the flow of the app (don’t get me started on popups on top of popups…*shudder*).

However, for the real estate site the dialog provided a nice way of logging into the site, as well as a data collection form. For this article, I will focus on the login form.

Now what you can’t see in the screenshot is that the dialog can be dragged around and such. Not all that useful, but cool just the same. That happens automatically…no code required!

Ok, so the screenshot doesn’t really tell you how to do it right? So lets get to it.

<div id="loginDialog">
<div class="hd">Login</div>
  <div class="bd">
     <form method="POST" action="Commands/Login.aspx">
       <div class="smallTitle">Welcome to the Xxxxxx Management System.</div>
       <br/>
          <div class="smallText">
          <table cellpadding="0" cellspacing="0" border="0">
          <tr>
	 <td style="width: 80px"><label for="username">Name:</label></td>
	 <td><input type="text" name="username" class="textBox" /></td>
          </tr>
          <tr>
	 <td><label for="password">Password:</label></td>
	 <td><input type="password" name="password" class="textBox" /></td>
          </tr>
          <tr>
	 <td colspan="2"><div id="loginError">Invalid login.</div></td>
          </tr>
          </table>
       </div>
    </form>
  </div>
</div>

So at the top you will notice a few divs. The first one has an id of “loginDialog”. This is important because the id of this top div is what lets the framework find it. Next we have one has a class of “hd” and another with “bd”. Those are classes designed by the YUI and basically stand for “header” and “body” respectively. The header is a nice way to give a caption to the dialog. The body is where everything else goes.

Just after the divs you see a form with an action. This is telling the YUI where the server side code is that gets launched when you click the button (much like the entry point I mentioned yesterday).

Next…a table…I usually shy away from them, but time was of the essence when I was constructing this and I wanted to line everything up nicely.

Look inside the table and you will see a standard <input> tag…make sure it has a name property filled in(you will see why in a bit). Other than that there isn’t much to it. Now lets mosey on over to the javascript.

var handleLogin = function() {
   this.submit();
};
		        
var handleLoginSuccess = function(o) {
    if (o.responseText == "success")
    {
       getListings();
    }
    else
    {
       Initialize(true);
    }
};

var handleLoginFailure = function(o) {
    alert("Submission failed: " + o.status);
};

// Instantiate the Dialog
var loginDialog = new YAHOO.widget.Dialog("loginDialog", 
{ 
    width : "340px",
    fixedcenter : true,
    visible : false, 
    constraintoviewport : true,
    draggable : true,
    buttons : [ { text:"Login", handler:handleLogin, isDefault:true }]
} );
	     
loginDialog.callback = { success: handleLoginSuccess,
                                failure: handleLoginFailure };
													 
// Validate the entries in the form to require 
that both first and last name are entered

loginDialog.validate = function() {
    var data = this.getData();
    if (data.username == "" || data.password == "") 
    {
	alert("Please enter a username and password.");
	return false;
    } 
    else 
    {
	return true;
    }
};

Whew! Its not as bad as it looks. Actually if you read Part II of my little series, some of it will look familiar.

Lets jump down to where we are instantiating the dialog itself. We do this by creating a variable (I call it strangely enough, loginDialog). Our little create statement has a lot of different properties, but most of them are self-explanatory, and they are all optional.

The important one is the “buttons” property. You can have as many buttons as you want on the form (although having 17 buttons might look a little funny). In my example I only have one…Login.

buttons : [ { text:"Login", handler:handleLogin, isDefault:true }]

This property has 3 parts:
1. The text of the button
2. The method that handles what happens when it is clicked
3. isDefault says whether or not it is the “default” button…genius.

You will see the handleLogin() function up at the top. I am simply submitting the form, but you could do just about anything here.

Just under the instantiation you see me loading the .callback property. This is exactly the same as the callback property I talked about with the connection manager. It sets up what happens when the asynchronous call is successful and when it fails.

You can see that when my login dialog it is successful it calls handleLoginSuccess(). On the server side, I process the login and pass “success” if all went well. If the login is unsuccessful (note I didn’t say fail) because the username or password is wrong, then I don’t pass back anything. In handleLoginSuccess() I see what the responseText is…if it is successful, I show the real estate listings. If it isn’t then I call my Initialize method which will reshow the dialog and show the “loginError” div that you may have noticed in the HTML. If an error occurs, then the failure is triggered.

The last point I want to cover is validation. One of the cool aspects of the YUI dialog is that you can validate your data client side rather than jumping back to the server to do it. Yes, this can be done manually, but the framework makes it easy as loading the validate property (loginDialog.validate).

Oddly enough you load the property with a function. Inside this function I call this.getData(). This is a YUI function that retrieves all the data stored in the dialog’s form. You can see that after I call this my data object is loaded with a bunch of properties that just happen to be exactly the same as the name I gave the input tags. Nice.

So I am simply checking whether or not the user entered something in the username and password fields. If they did, I return true and everything keeps truckin’. If they didn’t I fire up an alert and stop the form from submitting. (Its important to note that even if you don’t validate your fields, the name property on the inputs is important for grabbing things on the server side.)

There you have it…the Dialog. As usual, there is are a lot of goodies that I didn’t cover here, but this should get you started.

I hope you all have enjoyed this little series on the YUI. Over the coming weeks and months I plan on doing more of these with various frameworks and technologies. If there is something in particular you want to see, let me know and I will do my best to accommodate.