I had my first successful forray using Ajax in Coldbox today! After reading a LOT, checking out some examples, and then letting my natural developer's instinct take its course, I ended up with a design that left me really wondering if I had taken a wrong turn or had a moment of brilliance . As I said, it works great, but is it an ideal pattern to use or did I cross one of those invisible "development ethics" lines with my approach? I'll let you be the judge. Before I share the details, I am assuming that the reader already has at least a basic working knowledge of Coldbox views, viewlets, handlers, and Ajax. That said, here be the details...
The Scenario
Upon arriving at my Coldbox app, the visitor will be dropped off at my default layout. Here's how it's organized:
We'll be focusing on the "login/logout" area since that is the portion I applied Ajax to. As you can see, in that area of the layout I am rendering by name the view named "login". My login.cfm view is actually a Coldbox "viewlet", meaning that it performs a private Coldbox call whenever it is loaded. Here's the pseudo-code of my login viewlet:
and here are the two faces that the viewlet can show:
grab the current user's login status;
if the user is not logged in
show the login form
else
show the logout form
end if
The execution of the private call to "authentication.login" (as seen in the pseudo code) is for the sole purpose of gathering current user status so we can control the flow and output of the login viewlet. Here's the actual handler method being called that accomplishes this:
<cffunction name="login" access="public" returntype="void" output="false"> <cfif not oSession.exists("loggedin")> Now, here's where the Ajax comes in to play. Both the login and logout form have as their submit action a call to a Prototype Ajax.Updater. Here are the actual functions:
The nutshell is that the Updater will execute the call to 'thisURL' and place the result, whatever it is, into the target 'loginlogout' div.
<cfargument name="Event" type="any">
<cfset var oSession = getPlugin("sessionstorage") />
<cfset oSession.setVar("loggedin",false) />
</cfif>
<cfset arguments.event.setValue("loggedin",oSession.getVar("loggedin")) />
<cfif not oSession.getVar("loggedin")>
<cfset arguments.event.setvalue("xe.frmAction","authentication.doLogin") />
<cfset arguments.event.setValue("User",oSession.getVar("User")) />
<cfif oSession.exists("sec_message")>
<cfset arguments.event.setValue("loginmessage",oSession.getVar("sec_message")) />
<cfset oSession.deleteVar("sec_message") />
</cfif>
<cfelse>
<cfset arguments.event.setvalue("xe.frmAction","authentication.doLogout") />
<cfset arguments.event.setValue("User",oSession.getVar("User")) />
</cfif>
</cffunction>
function logmein(thisURL){
var loginParams = $('loginform').serialize(true);
new Ajax.Updater('loginlogout',thisURL ,{parameters: loginParams, method:'post'});
}
function logmeout(thisURL){
new Ajax.Updater('loginlogout',thisURL,{method:'post'});
}
Okay, I have two more relevant methods in my Authentication handler: doLogin and doLogout. Here is the pseudo-code for 'doLogin':
This last line is taking advantage of two cool things Coldbox allows:
if login failed
set session.loggedin = false;
set session.securityMessage = "Login failed. Try again.";
else
set session.loggedin = true;
end if
//actual code used to perform the following...
<cfset arguments.event.renderData(type="plain",data=getPlugin('renderer').renderView('authentication/login')) />
1. The ability to render a view (or viewlet) within the handler and create a content variable;
2. The ability to render Data back to the caller rather than a view.
In my case, since "login" is a viewlet (making its own private call to the 'login' method in order to get current state variables), I'm simply rendering it inline. Then, I'm feeding the results of that rendering (a blob of HTML) to the renderData method, which is then passing that blob of HTML back to my Ajax call. Who, in turn, updates my target div with it; in this case, either a login form with a message displayed, or a logout form and a welcome message. Here is my rendition (in pictures) of how it flows:
'doLogout' performs almost identical actions...setting the session variables appropriately and then returning the HTML results of rendering 'authentication/login' inline.
As I said, it works great. But I am very interested in the opinion of others as to how they feel about the appropriateness of this approach. Any thoughts?
You are not logged in, so your subscription status for this entry is unknown. You can login or register here.