What: “Developing Enterprise AJAX Applications Using Ext-JS 4″ with Steve Drucker

Our 12pm (US ET) talk on Thursday June 16 will be “Developing Enterprise AJAX Applications Using Ext-JS 4″ with Steve Drucker.  

TOPIC DESCRIPTION: (provided by the speaker)

Ext JS 4 is a major advance in JavaScript frameworks. Learn about its new features including Flash-free drawing and charting, an advanced data-handling package, the best datagrid commercially available, support for HTML 5 features, enhanced form validation feedback, easy theming using SASS & Compass, and an object-oriented MVC framework that ties everything together. Best of all, Ext 4 applications can now be made to be Section 508 compliant, localized for international support, and are backwards-compatible to IE 6.

MEETING URL: http://experts.acrobat.com/cfmeetup/

DURATION: Approx. 1 hour

RECORDING: All meetings are recorded. The URL will be posted after meeting at recordings.coldfusionmeetup.com

SPEAKER: (provided by the speaker)

Steve Drucker, Founder/President of Fig Leaf Software, has been implementing innovative, award-winning web sites with Adobe tools since 1996. Steve served as principal architect for two of the largest ColdFusion implementations ever – the Voice of America and National Park Service.  He has been a featured speaker at several trade shows including the Adobe MAX Developers Conference and CFUnited. Steve has developed about a dozen hands-on, instructor led courses — including acting as course architect and lead developer for Adobe’s official Advanced ColdFusion 9 courseware and is currently in the process of authoring the official instructor-led courseware for all of Sencha’s products. Recently he completed authoring “Fast Track to Sencha Touch” and “Upgrading to Ext JS 4″. Steve became a certified Adobe instructor in October 1997, and earned an “Adobe Master Instructor” rating in 2003. He is a certified instructor for ColdFusion, Acrobat, Dreamweaver, Presto, CommonSpot, JavaScript / AJAX, SQL, Adobe LiveCycle ES, Adobe Presenter, Sencha Touch, and Ext JS 4.

WHEN: Thurs. June 16, 12:00pm US ET (UTC/GMT-4)

What time is that for you? The following link shows [ what the time would be for you]. Here’s [ another option] that shows the time as US ET, and lets you choose your city from the list offered to see what time that is in your own timezone.

RECORDING: As always, the meeting will be recorded, and the recording URL will be posted after the meeting at http://recordings.coldfusionmeetup.com.

DOWNLOADABLE RECORDINGS:
In addition to the streaming recording posted immediately after the meeting, we now also post downloadable recordings (FLV, MP3, MP4, and WMV) usually within a few days after the meeting, also offered as a link from the recordings page.

LOGGING IN: When you login to the Connect room (the experts.acrobat.com/cfmeetup link above) to view the meeting, PLEASE USE THE “LOGIN AS GUEST” option, and USE YOUR NAME, but do NOT attempt to use your meetup.com username/password or any Connect account. Just sign in as a guest.

RSVP, but only if coming: We do appreciate folks RSVPing if they plan to come (using the link on this email or at the meetup site), though it’s not mandatory and it’s not a commitment. But there’sno need to RSVP if you can’t make it let alone explain why you can’t. With over 2,500 members, no worries.

FEEDBACK/MEETING DISCUSSION: Members will receive an email after the meeting or can click a link on the event page to offer. Note also the meeting-specific discussion area there at the bottom, in addition to the one-chance feedback feature on the right. Feel free to engage in discussions about the meeting topic.

ADD THIS TO YOUR CALENDAR: Want to add this event to your own personal calendar? After logging in here, you’ll see an option at the top of the event page, just below the event title,  saying, “Add to my calendar”, which offers calendar downloads for Outlook, iCal, Google, and Yahoo calendars. (Note that the calendar entry created will show the event taking 2 hours. That’s a default that meetup.com has chosen, which I can’t change. The meetings are generally about an hour, though often go as much as 30-45 minutes longer with Q&A and chat.)

Check it out!

http://www.halhelms.com/blog/index.cfm/2010/10/24/jQuery-Custom-Events–A-Deeper-Look

The fourth maintenance release for jQuery UI 1.8 is out. This update brings bug fixes for the Droppable, Resizable, Selectable and Sortable interactions as well as the Accordion, Autocomplete, Button, Datepicker Dialog, Progressbar, Slider and Tabs widgets. jQuery UI 1.8.3 was released a few days prior to 1.8.4, but there was a problem with the build system that caused some of the files to not contain any copyright information.

If you noticed the 1.8.3 release and upgraded, please upgrade to 1.8.4.

You can download it here.

This snippet “grays” out the screen and allows you to create a “modal” environment. A gray out is useful for creating a DHTML dialog box, or showing off a picture or video.

Here is the link.

We will discuss here the client-side way using Javascript and/or Ajax to refresh the session.
The script offers two ways of refreshing the session, one by just reloading the page and other by calling an Ajax function.

If your template is a form, you will want definitively to use Ajax, or you would lose all the fields already filled in. If you are in a simple display page, refreshing that page will not cause any problems.

So, I used a sample my friend Pedro Claudio posted on the CF-Brasil mailing group, and modified it to be used in CF templates with CFAJAX components (not the CF8 tag). I also modified it to use the Javascript function “setInterval()” instead of the “settimeout()” which will continue counting the time after every renewal.

I created this test environment that you may download here.

There are some scoped variables to use. I’m used to Fusebox, so I define them either in my “Application.cfc” or in my “fusebox.init.cfm”:
<cfscript>
application.sessionTimeout = 10; // session timeout in seconds (we set it to 10 secs for this test)
application.sessionTimeoutAlert = 5; //how many seconds before the timeout to send the alert
application.sessionTimeoutUseAjax=true; //use Ajax or reload the page
request.sessionTimeoutURL="index.cfm?fuseaction=home.logout"; //URL to jump when client denies refreshing
request.scriptDir = "scripts/"; //folder for the javascripts
request.componentDir = "components/"; //folder for the components
request.sessionRefreshFunction = "sessionRefresh"; //name of the function to call

Put the following code in the HEAD section:
<cfif application.sessionTimeoutUseAjax>
   <script type='text/javascript' src='#request.scriptDir#ajax/engine.js'></script>
   <script type='text/javascript' src='#request.scriptDir#ajax/util.js'></script>
   <script type='text/javascript' src='#request.scriptDir#ajax/settings.js'></script>
</cfif>
<script language="JavaScript" type="text/javascript">
var _cfscriptLocation = "#replace(request.componentDir, '.','/','all')#/ajaxFunctions.cfc";
var sessionTimeoutAlert = #application.sessionTimeoutAlert#;
var sessionTimeoutDays = 0;
var sessionTimeoutHours = 0 + (sessionTimeoutDays *60);
var sessionTimeoutMinutes = 0 + (sessionTimeoutHours *60);
var sessionTimeoutSeconds = (#application.sessionTimeout# + (sessionTimeoutMinutes *60)) - sessionTimeoutAlert;
var sessionTimeout = sessionTimeoutSeconds * 1000;
setInterval(
   function() {
      if(confirm('Your session will expire soon, do you want to continue? '))
      <cfif application.sessionTimeoutUseAjax>
         DWREngine._execute(_cfscriptLocation, null, 'sessionRefresh', 'true', sessionTimeoutResult);
      <cfelse>
         window.location.href = window.location.href;
      </cfif>
   else windows.location.href='#request.sessionTimeoutURL#';
   },
   sessionTimeout
);
<cfif application.sessionTimeoutUseAjax>
function sessionTimeoutResult(result){
// do nothing
}
</cfif>


I wrote a simple javascript with ideas from what I have seen on the web and it came out working good. So the credits are not all mine.
Download the code here

Here is the Javascript I called “moveSelectOptions.js”/*
By Ricardo Parente
October 20, 2008
rparente (at) cfdevelopers.net
*/
function moveIt(source,destination) {
   var oSource = document.getElementById(source);
   if (!hasOptions(oSource)) return;
var oDestination = document.getElementById(destination);
var aValue = new Array();
var aText = new Array();
for (var i=0; i< oSource.options.length; i++) {
if (oSource.options[i].selected) {
oDestination.options[oDestination.options.length] = new Option(oSource.options[i].text, oSource.options[i].value);
} 
}
var x=0;
for (i=0; i< oSource.options.length; i++) {
if (!oSource.options[i].selected) {
aValue[x]=oSource.options[i].value;
aText[x]=oSource.options[i].text;
x++;
}
}
oSource.options.length = 0;
for (i=0; i< x; i++) {
oSource.options[i] = new Option(aText[i], aValue[i]);
}
}
function selectAll(source) {
var oSource = document.getElementById(source);
if (!hasOptions(oSource)) return;
for (var i=0; i < oSource.options.length; i++) {
oSource.options[i].selected = true;
}
}
function hasOptions(obj) {
if (obj!=null && obj.options!=null) return true; 
return false;
}

Here is a form for testing the code: “moveSelectOptions.cfm”:
Insert this javascript call in the head section:
<script language="JavaScript" src="moveSelectOptions.js" type="text/javascript"></script>
Body section:<cfoutput>
<cfif structkeyExists(form,"destination")>
<cfdump var="#form#" />
</cfif>
<form name="myform" action="#cgi.script_name#" method="post" onsubmit="selectAll('destination');selectAll('source');">
</cfoutput>
<table>
<tr>
<td valign="top">From:
<td valign="top">
<select name="source" multiple size="5" style="width:150px;">
<option value="apples">Apples
<option value="oranges">Oranges
<option value="grapes">Grapes
<option value="tomatoes">Tomatoes
<option value="potatoes">Potatoes
<option value="pears">Pears
</select>
</td>
<td align="center" valign="top">
<input type="Button" value=">>" onclick="moveIt('source','destination');" />
<input type="Button" value="<<" onclick="moveIt('destination','source');" />
<input type="Button" value="All >>" onclick="selectAll('source');moveIt('source','destination');" /><br/>
<input type="Button" value="<< All" onclick="selectAll('destination');moveIt('destination','source');" /><br/>
</td>
<td valign="top">To:</td>
<td valign="top">
<select name="destination" multiple size="5" style="width:150px;">
</select>
</td>
</tr>
<tr>
<td colspan="5" align="right"><input type="Submit" value="Send" /></td>
</tr>
</table>
</form>