I’m John C Bland II

Husband, Father, Tech Author, Deacon.
Founder ofย Katapult Media, and full-stack polyglot developer.
Political Free Agents Podcast Host.

I create. I launch.

YouTube Channel

I post regular fun on YouTube like me playing the bass and anything else I find fun.ย 

Get Something Built

All project work goes through Katapult Media. Business is open. Let’s chat.

cf.Objective() 2008 Review & CF8 .NET Integration Preso Files

What’s up folks? I haven’t blogged in a week or so due to the cf.Objective() ’08 conference. I put a lot of prep into it and it seemingly paid off. I’ll wait for the preso reviews to know for sure. ๐Ÿ™‚

**Conference**
The conference was fun. I put my face to my name for a good number of folks (Corfield, Camden, Steven Hauer, etc). They were folks I speak to via email/IM but we hadn’t met in person. That was a good thing.

As for the conference sessions, I REALLY enjoyed “Laura’s”:https://www.asfusion.com preso on “Mate”:https://mate.asfusion.com (pronounced: mah-tay). I’m more on the side of “Maxim Porges”:https://maximporges.blogspot.com (“no framework required”:https://maximporges.blogspot.com/2008/05/more-feedback-on-flex-without.html) but Mate was really nice. It is a framework but your app can just use the event routing without coding it specifically for use with Mate, meaning you could easily nix Mate when you choose to roll your own (not so easy in Cairngorm and others).

“Maxim Porges”:https://maximporges.blogspot.com had a good preso on not using a framework. He just showed how to roll your own MVC. I prefer not using frameworks (in CF and AS) so the session rocked for me because he had really GREAT reasons why you don’t have to use a framework.

Of course “Tom Jordahl”:https://tjordahl.blogspot.com/ had a good BlazeDS preso. He knows that product intimately so hearing from him is always a good thing.

Nothing against the other presenters…there were other good presos but my wrists are hurting and I still need to code today so I’ll stop here. ๐Ÿ™‚

**My preso**
As promised, here are “my preso files”:https://www.johncblandii.com/presos/cfobjective08/dotnet/ColdFusion8NetIntegration.zip (including PowerPoint). The C# and CF code is there. Fair warning…I’m using Visual Studio 2008 for the C# projects.

Enjoy!

LiveCycle Data Services ES 2.6 Beta 2 ROCKS HARD!!

Ok, I’ve been working on an article regarding LCDS + AIR and offline sync. I had everything pretty much done EXCEPT saving offline data back to the server (which I haven’t tested with 2.6 B2 yet but will). Yesterday I installed “LCDS 2.DS ES 2.6”:https://labs.adobe.com/technologies/livecycle_dataservices2_6/ and today I decided to toy with it. I jumped into the “Dev Guide”:https://download.macromedia.com/pub/labs/livecycle_datservices/2.6/docs/lcds26_devguide_040908.pdf and looked at what they said was needed to do online/offline.

So I’m a skeptic at times when I see a little bit of code doing a lot but DANG! This time I was proved wrong.

_airfds.swc_, I’m assuming, handles creating a sqlite database and updating it. I won’t spill the beans on all of the goods (my article will cover it more) but peep how flippin’ simple this is:

bq. contactsDS.saveCache(contacts);

Yep, that’s it. _contactsDS_ is my _DataService_ and _contacts_ is an _ArrayCollection_ loaded from LCDS. There are other things to do for loading data from the cache and your LCDS implementation, as well as saving data back, but for the most part…WOW!

I’m loving it and keep rockin’ Adobe/LCDS/Flex team!!

More to come…

ColdFusion 8.0.1: cftooltip is broken!

_cftooltip_ ignores attributes. Good thing is, I spent tonight figuring out what was up with it and have fixed it.

**Background**
_cftooltip_ uses “YUI”:https://developer.yahoo.com/yui/ (the Yahoo! UI Ajax library). CF actually uses the “YUI Tooltip”:https://developer.yahoo.com/yui/container/tooltip/ widget along with the “YUI Event Utility”:https://developer.yahoo.com/yui/examples/event/event-delegation.html to show/hide a tooltip on mouseover/mouseout.

**Initial Code**
I created a custom tag to encapsulate “our”:https://www.sportmatchmaker.com tooltip functionality. The ‘tag took just a few attributes (source, color, hideDelay). The issue was hideDelay WOULD NOT WORK! Here’s the _cftooltip_ code.

bq. <cftooltip autodismissdelay=”5000″ showDelay=”2000″ hideDelay=”#attributes.hideDelay#” sourcefortooltip=”#attributes.source#”>
<img src=”/images/#attributes.color#.gif” width=”16″ height=”16″ />
</cftooltip>

No sweat, right? Wrong!

**How does _cftooltip_ work?**
If you View Source on a page with a _cftooltip_, you’ll see ColdFusion wraps your content in a _span_ tag then assigns a listener. Well, granted…I’m using an _img_ tag so maybe a _div_ in the content of _cftooltip_ wouldn’t result in wrapping it with a _span_ but I haven’t tested that thought. Anyways…back to the post at hand. ๐Ÿ™‚

bq. YAHOO.util.Event.addListener(“cf_tooltip_1208158360141″,”mouseover”,ColdFusion.Tooltip.getToolTip,{“_cf_url” : “/sometooltip.cfm”,”_cf_query” : “”,”context” : “cf_tooltip_1208158360141″,”hidedelay” : “15000”,”showdelay” : “2000”,”autodismissdelay” : “5000”,”preventoverlap” : “true”});

(**Update** Ignore extra spaces before the colon. MT is rendering it as a URL.)

That’s the YUI code created for my tooltip which points to a file called /sometooltip.cfm and is supposed to show after 2 seconds, auto-hide after 5 seconds and if the user mouses off the image hide the tip 5 seconds later.

**Sidebar: JS Coding**
Ok, I’m a stickler for code and my first look at this, Friday, threw me slightly. Why in the world did the config object (last parameter inside the curley braces) have quotes around the property name and value? That seemed weird. Maybe it is so it works in an older browser version or something. Oh well…not sweat…it worked.

**Back to “How it works…”**
ColdFusion now has a ColdFusion javascript package named…(take a big guess)…_ColdFusion_. ๐Ÿ™‚ I won’t paste the cfajax.js file but it is located here: /CFIDE/scripts/ajax/package/cftooltip.js. There are two functions in this file. _ColdFusion.Tooltip.getToolTip_ is the event handler for the _addListener_ call (see above). The other one is _ColdFusion.Tooltip.setToolTipOut_ which is called after a new listener is added to the tip for the _mouseout_ event.

_ColdFusion.Tooltip.getToolTip_ is where the problem resides.

**The Fix**
All of the code is legit and works. Don’t be afraid by the variables with numbers for names. The _349 argument is the one to focus your attention on. If you do a _for…in_ loop you will see all of the parameters you passed into the config argument (see above). Everthing goes in perfectly fine but it seems YUI ignores all parameters. Why? Well, I haven’t gone through the YUI code but I found a reason why it happens and here’s how to take care of the problem.

Jump in your cftooltip.js and right before…

bq. _34a=new YAHOO.widget.Tooltip(_349.context+”_cf_tooltip”,_349);

…copy and paste the following:

bq. if(_349.hidedelay != undefined) _349.hidedelay = Number(_349.hidedelay);
if(_349.autodismissdelay != undefined) _349.autodismissdelay = Number(_349.autodismissdelay);
if(_349.showdelay != undefined) _349.showdelay = Number(_349.showdelay);

**Solution Explained**
The problem is ColdFusion isn’t casting the _Number_ parameters as actual _Number_’s. So either YUI validates those config params as _Number_’s and if they aren’t it ignores them as config params. It seems like the only valid reason but YUI has obfuscated their code and minimized it which I don’t want to mess with.

So, to fix it we check to make sure the parameter of the _349 object exists then resets the value to the same value but casted as a _Number_.

You can open your cftooltip.js and make the change above for your entire server (or that server instance if you’re using a multiserver setup). If you use _cfajaximport_ and set the _scriptsrc_ to a local file you have BE SURE TO KNOW this is a change for ALL scripts on your site. So, you could get all CF Javascript files and put them in your site directory, set them with _cfajaximport_ and only edit it for your site (how you’d probably have to do it with a shared site).

One other thing you could do is use _<cfajaximport tags=”tooltip” />_ then directly use the _YAHOO_ package but nix the call to _ColdFusion.Tooltip.getToolTip_ and have the _mouseover_ listener call your own custom function.

Anyways…I hope this helps because I looked all over and couldn’t find 1 blog post about cftooltip not working. I had a business partner check and he found nothing either.

Adobe…please validate this fix and get it out there asap so the community is aware.

Designing the Moment

Our very own Robert Hoekman, Jr.’s newest book “Designing the Moment”:https://www.amazon.com/dp/0321535081?tag=geelif-20&camp=0&creative=0&linkCode=as1&creativeASIN=0321535081&adid=13RQV1EFNAT29RTPTS6G& is on the shelves.

You can read “Robert’s thoughts”:https://rhjr.net/theblog/2008/04/09/the-new-book-has-arrived/ on the book and his excitement to have his copy.

“BUY YOUR COPY TODAY”:https://www.amazon.com/dp/0321535081?tag=geelif-20&camp=0&creative=0&linkCode=as1&creativeASIN=0321535081&adid=13RQV1EFNAT29RTPTS6G&. My order is in already.

Stephen Asbill: Coding in Heaven

I try to keep personal things off this blog but it is industry related and it’s my blog so I say what I want! ๐Ÿ™‚

I can only pray Steve had everything together and is in Heaven right now coding on Windows Vista Angel edition. Steve died in a car wreck a couple weeks ago and it hit me pretty hard. He was roughly my age and in the same industry.

Have you ever met someone you feel could get an eskimo to buy ice? Steve was that kind of person. He could get the ocean to buy a drought protection insurance policy or a squirrel to sign a joint venture contract with Planters. He was definitely always on the move, mentally, and always had his entrepreneurial hat on.

Steve was also the first actual client of “Katapult”:https://www.katapultmedia.com when we made the official change from JDev, Inc. He kept me WAY BUSIER than I banked on being but we were doing some cool things so I didn’t mind. He introduced me to “Four Peaks”:https://www.fourpeaks.com, which has some good food and is where he ALWAYS wanted to meet for lunch. ๐Ÿ™‚ Good times.

Steve, you will be missed. Visit me in a dream and let me know how that Vista Angel edition is working for you.

RIP

Flex 3: Firefox Beta 3 returns 0 for HTTP status codes

What a weird issue to run into but I did.

So, yesterday I was tasked with building a charting app (simple 1 chart based on XML with a refresh interval). No problem…jumped in Flex Builder and banged it out in roughly 20 minutes (not bragging; will explain the reference in a few). The app worked perfectly fine.

Today I was tasked with integrating it into the actual page and putting up a test version to look at. So I did, showed Dave M. (he assigned it to me) but he was busy so I showed my manager, and it didn’t work!!! Huh?

First Error
My manager hit an RSL problem. The issue was with the “mime type not being registered”:https://kb.adobe.com/selfservice/viewContent.do?externalId=kb402864 in Apache. Easy one to get beyond. I nix’ed the use of RSL for now, until Apache on this server gets updated, and moved one.

Second Error
The code uses a URLLoader to load the XML. I added a listener for HTTPStatusEvent.HTTP_STATUS. 403 and 401 are there for authentication purposes and 200 is the only other I coded. Everything works great. If I get a 200 the timer is stopped then started again. I also have an Event.COMPLETE to “parse” the data and throw it in my chart (which charting+xml is saweet!!!). Again…everything works great. I sent it to my manager…BROKEN! Ahh…only in Firefox though. Huh? How’s that? This is Flash for Christ’s sake!!

I remove my setInterval and replace it with a Timer. That doesn’t work. I tried numerous other fixes and none of those worked. Then I added a double click listener to the chart and had it call loadData which actually worked. So I knew the networking portion was fine. Why in the world is my switch statement not making it to case 200:?

To find out I threw in an Alert.show(event.status) to see what code was coming back. It was 0!!!! HOW? HUH? WHAT?

Last year I learned a new acronym from Sarge. We were working on something and the issue I was having was a result of RTFM. RTFM (to me) reads “Read The Freaking Manual” (substitute your own F* word at your leisure). ๐Ÿ™‚

That was the problem…RTFM:

HTTPStatusEvent objects are always sent before error or completion events. An HTTPStatusEvent object does not necessarily indicate an error condition; it simply reflects the HTTP status code (if any) that is provided by the networking stack. Some Flash Player environments may be unable to detect HTTP status codes; a status code of 0 is always reported in these cases.
-Source Adobe LiveDocs – HTTPStatusEvent

Hopefully this helps someone. I basically moved my case 200: code to myย Event.COMPLETE handler and everything is good to go. The 403 and 401 blocks aren’t too important because you have to login before getting to the swf anyway so I didn’t worry about moving them.

All is well…everything works and almost 2 hours of debugging on a 20 minute app RTFM allows me to check it in and be done with it! ๐Ÿ˜‰

Updated: 6/28/11 – Replaced templating language with HTML equivalents.

Flex 3: Button click on Enter Key

Ok…this is one of those things that plagued me mentally because I blocked out possibilities. My main obstacle was in the approach. Should I add a key listener and check to see what field you’re in then have the appropriate buttons click event called? Nope…that sucks. Should I add a listener, to the _TextInput_ fields, for _keyUp_ or _keyDown_ and check to see if it was the _ENTER_ key? Nope…sucks too.

This wasn’t a big issue for me but I saw the question around a few times. Normally I had a situation where I was building a form and in that form you could assign a _defaultButton_ which would take care of calling the _click_ event for the _defaultButton_. That’s cool but using _Form_ means a vertical layout, right? WRONG! This is where I went wrong in my own mind.

I wrote this on (mental) stone tablets: “All display objects inside a _Form_ tag shall be _Formitem_ tags.” True but not. You can have a nice vertical form using _FormItem_ tags but sometimes you might not need all of the extra padding, etc that comes with _FormItem_’s and you might just want a _TextInput_ with a _Button_ to the right of it. Well, _Form_ is still your quick and easy answer.

bq. <mx:Form defaultButton=”{loadButton}”>
<mx:TextInput id=”feedURL” />
<mx:Button id=”loadButton” label=”Load” click=”someHandler(event)” />
</mx:Form>

That’s it. Now clicking _loadButton_ with the mouse or hitting the _ENTER_ key will call _someHandler_, _loadButton_’s _click_ event handler.

Hopefully this helps someone. Keep reading for a couple clarities.

**Clarities**
1) I know _FormItem_ has a _direction_ property which has a _horizontal as one of the options so vertical layouts are not the only type you can achieve with a _Form_/_FormItem_ combination. If you look at the space/padding for the _label_ of a _FormItem_ it isn’t as clean as throwing the _Form_ in an _HBox_ or putting an _HBox_ as the first child in the _Form_.
2) There are scenarios, I’m sure…somewhere in the world, where a listener for the _ENTER_ key in a _TextInput_ is needed. I’m not bashing all scenarios…just the general one of assigning a default button.

That’s all of the clarities I think. ๐Ÿ™‚ L8rz!

Adobe Photoshop Express Launched

I’m not even going to pretend like I know anything about this. I just so happen to be up late and saw “Ryan has a detailed post”:https://blog.digitalbackcountry.com/?p=1366 so I registered. Figured I’d share the wealth. The only thing I do know is the entire thing is built in Flex. {Homer’s voice} Hmmmm…sexxxy!

“Check it out here:”https://www.photoshop.com/express/.

mx:Repeater – “Error #2006: The supplied index is out of bounds.”

This one was a bit weird for me. I found a lot of posts online about the error but the one’s pertaining to the Repeater component didn’t help at all. Well…I shouldn’t stay “at all” since one of them did make mention of the stack trace not being specific to the code they wrote. So that did prompt me to look at the stack trace.

For reference, here’s the trace:
bq. RangeError: Error #2006: The supplied index is out of bounds.
at flash.display::DisplayObjectContainer/addChildAt()
at mx.core::UIComponent/https://www.adobe.com/2006/flex/mx/internal::$addChildAt()
at mx.core::Container/addChildAt()
at mx.effects::EffectManager$/removedEffectHandler()
at Function/https://adobe.com/AS3/2006/builtin::apply()
at mx.core::UIComponent/callLaterDispatcher2()
at mx.core::UIComponent/callLaterDispatcher()

Hrmm…look at this line specifically:
bq. at mx.effects::EffectManager$/removedEffectHandler()

Why in the heck is the _EffectManager_ concerned with me calling _removeAll()_ on the bound _ArrayCollection_?

Here’s the answer:
bq. <mx:VBox xmlns:mx=”https://www.adobe.com/2006/mxml” resizeEffect=”Resize” **removedEffect=”Fade”**>

That’s what I get for trying to mess with animations!! ๐Ÿ™‚ I nixed _removedEffect_ and everything works fine, as it once did.

I have to get back to dev’ing so I didn’t spend time figuring out why but here’s my speculation:
The _Repeater_ is notified of the collection updates and removes all children. The _EffectManager_ is attempting to animate each child but in doing so a race condition occurs where the _Repeater_ has nixed “item N” and the _EffectManager_ is trying to access it. Since it isn’t there you Error #2006 due to it accessing an item in an array that doesn’t exist.

Hopefully this helps someone else as Google didn’t provide much for my specific scenario.

ColdFusion 8 Ajax UI Controls: Refresh active tab???????

Where are you?

I’ve tried numerous things to get the tab to refresh. First off I was looking at Ext 2.0 docs but I didn’t realize it until I did a dump on the _ColdFusion.Layout.getTabLayout(“tabs”).getActiveTab()_ and noticed a method not mentioned on the docs. Oops…my bad! ๐Ÿ˜‰

So…instead of just bashing CF8’s attempt at UI Controls via Ajax I figured I’d ask anyone listening.

bq. How do you refresh the active tab dynamically?

Before you answer, let me clarify. I have N number of tabs and inside this particular tab I open a _CFWindow_ (a few gripes about this too) which does some updating and when done I need the selected tab to refresh the contents so it properly shows the latest and greatest info.

Here is what I found to work (and all that worked):

bq. function refreshActiveTab(){
var activeID = ColdFusion.Layout.getTabLayout(“tabs”).getActiveTab().id;
ColdFusion.Layout.hideTab(“tabs”, activeID);
ColdFusion.Layout.showTab(“tabs”, activeID);
ColdFusion.Layout.selectTab(“tabs”, activeID);
return;
}

That’s quite a sucky way to do it, IMO. The user doesn’t see the hide/show…at least in FF. In IE7 the modal background has no alpha (which looks crappy) so I can’t see it anyway.

Either way, after my trials tonight it merely validates my thoughts on CF’s Ajax UI Controls: they need a lot of work! I’ll rant later but the CF Ajax binding is SWEET (lacking a couple things but still sweet). I just want to see the UI controls come up to a really professional level.
</partialRant>

BlazeDS SVN Repo

In case you were wondering how to get involved with BlazeDS development, grab a Subversion client and checkout this repo: “https://opensource.adobe.com/svn/opensource/blazeds/trunk”:https://opensource.adobe.com/svn/opensource/blazeds/trunk or just click on that link to look through the repo in the browser.

I suggest reading a bit more about the repo here: “https://opensource.adobe.com/wiki/display/blazeds/Source”:https://opensource.adobe.com/wiki/display/blazeds/Source. They suggest not checking out entire repo…just trunk. “Warning: You probably don’t want to check out the entire blazeds directory, as you’ll get every branch and tag, each of which is comparable in size to the trunk.”

Flex SDK SVN Repo

In case you were wondering how to get involved with the Flex SDK development, grab a “Subversion”:https://subversion.tigris.org/ client and checkout this repo: “https://opensource.adobe.com/svn/opensource/flex/sdk/”:https://opensource.adobe.com/svn/opensource/flex/sdk/ or just click on that link to look through the repo in the browser.

If you just want to view change logs for the most recent available downloads, “go here”:https://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+3.

Free Flex Builder 3 Pro for Education Registration Site

I ran across this site on a mailing list and thought I’d help propogate the existence of it. It has been public knowledge for a while so I’m not first to post or anything. ๐Ÿ™‚

Anyways…not much to say other than check it out:

“Adobe Flex Builder 3 Pro is available for free to all education customers. This includes all students, faculty and staff of eligible education institutions.”
Source: “https://www.flexregistration.com”:https://www.flexregistration.com/

Binding a cfselect to a cfgrid

I had some problems with this because I’m so used to using datagrids in Flash and they work a bit different. First, there aren’t a ton of resources out there about binding a cfgrid to a cfselect. I looked and looked but I shouldn’t have since the reason my initial statements weren’t working is because I treated the cfgrid like a Flash datagrid. So, let’s get into it.

Binding a cfselect to a grid is as simple as this:

bq. <cfgrid name=”mygrid” format=”html” query=”somequery” />
<cfselect name=”myselect” bind=”cfc:somecfc.someMethod({mygrid.id})” bindonload=”yes” … />

That’s it. What happens here is the _bind_ attribute sets the bind to my _somecfc_ cfc’s _someMethod()_ function and passes in the _id_ value from _mygrid_. Nothing special here.

So, why did I have problems? Well, I didn’t let the query create my columns. I created them. Let’s take a look at this again.

bq. <cfgrid name=”mygrid” format=”html” query=”somequery”>
<cfgridcolumn header=”Name” name=”name” />
<cfgridcolumn header=”Some Column” name=”somecolumn” />
<cfgridcolumn header=”Birthday” name=”birthday” />
</cfgrid>

<cfselect name=”myselect” bind=”cfc:somecfc.someMethod({mygrid.id})” bindonload=”yes” … />

The difference here is the _cfgridcolumn_’s specify what columns are shown. The first example will show all of the columns in the grid. This grid (the second example) shows only the _name_, _somecolumn_, and _birthday_ columns. Any other columns are not available.

This _cfselect_ bind will not work. The problem is there is no such column named _id_. BUT THE QUERY HAS AN _id_ COLUMN…WHY ISN’T IT INCLUDED? I’m glad you asked.

If you do not specifically specify a _cfgridcolumn_ the value will not be included. When you think about it…this is pretty cool. Think of a query with 20 columns. I wouldn’t want a grid to have to manage 20 columns if all I want to show are three of them. It is annoying but it works.

So, the working example would be:

bq. bq. <cfgrid name=”mygrid” format=”html” query=”somequery”>
<cfgridcolumn header=”id” name=”id” display=”no” />
<cfgridcolumn header=”Name” name=”name” />
<cfgridcolumn header=”Some Column” name=”somecolumn” />
<cfgridcolumn header=”Birthday” name=”birthday” />
</cfgrid>

<cfselect name=”myselect” bind=”cfc:somecfc.someMethod({mygrid.id})” bindonload=”yes” … />

Notice the _cfgridcolumn_ with the name _id_. The attribute _display_ is set to _no_ so it will not show up in the grid. Now the _cfselect_’s binding will work properly.

I searched the WHOLE INTERNET for this solution and didn’t find it. I saw an example with the same binding as I was using, _mygrid.somecolumn_, but it wouldn’t work for me. At least I have the solution now. I guess I should have read the manual. ๐Ÿ™‚

Hope this helps someone.

Picnik.com ROCKS!

There isn’t too often I run into an RIA that I can’t break down and come up with numerous feedback emails (which I may or may not send). So…here is my take on “Picnik”:https://www.picnik.com:

IT ROCKS!

I remember seeing the site before but I didn’t pay much attention because I just clicked around a couple times and left. This time I looked at it and actually used it. This is the “general computer user’s” Photoshop online. That is sweet! Now people who need to edit a photo can jump into Picnik, make their edits, and save it to their computer or do a any number of saves (to computer, online service, etc).

Here is a “picture of me and my son (John III) at the Suns game”:https://www.flickr.com/photos/johncblandii/2297997880/ last friday edited on Picnik. Here is the “original picture”:https://www.flickr.com/photos/johncblandii/2286794402/.

Pretty cool huh? Rock on Picnik!!

“Try it for yourself”:https://www.picnik.com!