Posted in ColdFusion | Posted on 06-03-2007 | 7,297 views
Ok, the title is a dumb one, but one of the nice new tags in ColdFusion 8 is the cftooltip tag. As you can imagine, it creates a DHTML based tooltip. It is rather easy to use as well:
2<table>
3<tr>
4 <th>Product</th>
5 <th>Sales</th>
6</tr>
7<tr>
8 <td>Apples</td>
9 <td>3,313</td>
10</tr>
11<tr>
12 <td>Bananas</td>
13 <td>5,491</td>
14</tr>
15<tr>
16 <td>Cherries</td>
17 <td>1,232</td>
18</tr>
19</table>
20</cftooltip>
Whenever someone hovers their mouse over the table, the text explaining the data will pop up. The tag has a few optional arguments for how quickly the tool tip should appear or go away, but the other main attribute you can use is sourcefortooltip. Here is a simple example:
2 <cftooltip sourcefortooltip="test3.cfm?id=#x#">
3 <cfoutput>
4 <p>
5 This is the #x# paragraph.
6 </p>
7 </cfoutput>
8 </cftooltip>
9</cfloop>
Now when the user mouses over the paragraph, ColdFusion will do an AJAX request to test3.cfm?id=X, where X is a value from 1 to 5. You can return any HTML you would like, including images. Here is the simple file I used:
2<cfoutput>
3<b>Tip #url.id#</b>: This is an example of a dynamic tooltip.
4#timeFormat(now(),"H:mm:ss")#
5</cfoutput>
Why the time? I was testing. ColdFusion caches the result of the tooltip text, so even if you mouse away and return back over the item, the seconds value is not going to change. This is probably a good thing performance wise, but something you don't want to forget.
Personally, I can see this being very useful for forms. I can imagine using this quite a bit for buttons, links, etc, to make it clear what each item does. Since I have the ability to slow down the appearance of the tooltip, I can set this to a good value such as not to bug people who actually know what they are doing.
:)
Could be pretty handy, but I'd be interested in seeing how much javascript code they're using for a simple tooltip. My guess is at least 100k.
I wish it could do the following:
Allow for drag.
Allow for a close button.
Ability to disable autoclose.
Corner Arrow.
Seems to me that this type of tag should be released by Adobe as custom tag or CFCs. CF8 has a handful of this type of UI tag that I'm just not convinced should be in the core language.
For example:
<cfform name="testForm">
<cfinput type="text" name="test" tooltip="This is my toolTip!" />
</cfform>
I agree with you. It's a nice feature I suppose, but I have two issues with their implementation:
1) The size of the js libraries is WAY out of control. See a post by Rey Bango on Ben Nadel's cfwindow post. The libraries needed to run the window totaled up to 330k.
2) Like you said, does this really need to be in the core language.
@Dave Ferguson...
cftooltip doesn't need dragging, as it's not meant for that. If you want drag functionality then use the cfwindow tag. That's probably why you saw it in the core library, as it's there for cfwindow.
Whats the point? Well - would you want to include a huge library of JS _just_ for a cfwindow/cfmenu/cftooltip? Probably not... Would you want to include them for a full blown AJAX application? Yes. Before anyone complains one more time do me a favor - go log into GMail - tell me how long it takes. 10-15 seconds? Why? Because it is an AJAX _application_ - not a web site with some AJAXy stuff. Like everything else let's consider use cases before we blow everything out of proportion. Would you create a Flex SWF for a simple log in to an HTML site?
Ironically my captcha texts answers that question: "no"
You are correct, CFWINDOW is more suited for that type of implementation. I have not had the opportunity to check it out yet, but I will soon.
--Dave
And in terms of understanding what it takes to pull off amazing JS stuff, I do it EVERY DAY. On top of that, I'm a member of the jQuery project team so I live it every day. I'm keenly aware of what's involved which affords me the luxury to be able to offer advice on gotcha's that others, who may not be as involved, haven't see yet. Couple that with my 10 years of doing ColdFusion development and I think I'm certainly not missing the point.
Also, another thing to point out is that while CF8s library requires 300+k of JS code to show a simple modular window, jQuery offers that same functionality in less than 26k, cross-browser and EASY to set up.
--- jQuery (compressed) = 19kb (http://code.jquery.com/jquery-latest.pack.js)
--- jqModal = 2.85k (http://dev.iceburg.net/jquery/jqModal/)
---- (adding in CSS and drag n drop support bumps it to 5k total)
So, please don't think I'm griping about SOME file size, I'm just complaining about unnecessary file size.
http://h127171.cf8beta.com/rss/
and it came out to a nice healthy 717KB!! Almost a meg for a web page! w00t!
So I did it using jQuery. I even used your feed.cfm and feeds.cfm from your download:
http://h127187.cf8beta.com/rss.cfm
I'm seeing 25kb for the whole page and I included a nice fade in effect and some progressive enhancement by binding the anchor tags for the authors dynamically.
Now, 717kb for something that should've only taken max 30kb doesn't seem quite right to me and neither does your argument that you need to pull in huge libraries to make an Ajax application.
Nice work on your version though - that is cool. I certainly don't have the skills personally to master jQuery right now without digging into it. Maybe that's why I'm such a big fan of the CF Ajax stuff.
The CF8 stuff is very compelling and it excites me because I see it as a nice stepping stone for those that want to migrate into a full library such as jQuery, Prototype, Spry or YUI. Its Ajax for the masses. What I'm trying to do is educate folks on some of the things that I've had to contend with. I've seen how important file size is because it could mean the difference between someone using your site or leaving it. In usability studies, its been shown that the average consumer will not wait past 3-5 seconds for a page load. So if you already have a page this 50kb and now you tack on another 700kb, you're going to see an increase in download and page rendering time.
I want folks to use the CF8 tags but I also want them to have some ideas of what to expect. The best thing would be for Adobe to allow the YUI -min flag to be set so we can streamline the lib size. As you mentioned, its still prerelease so lets keep our fingers crossed.
Finally, as for jQuery, I think you would be VERY surprised as to how quickly you can pick it up, especially since AjaxCFC now uses it under the hood.
Teasing of course, but I think it would definitely be cool.
http://docs.jquery.com/Tutorials
http://15daysofjquery.com/
http://www.learningjquery.com/
You can use CF8's Ajax controls for quick and dirty stuff and jQuery for more involved and precise work.
http://blog.cutterscrossing.com/index.cfm/2007/4/2...
Also I wonder if the ajax request is using a GET method which will cache on IE?
Ray I imagine you were using FF so perhaps Adobe have implemented their own caching here.
To your second comment, I'm on FF/OSX.
I'm using FF 2.0.0.4 on Mac OSX and still getting the problem. Gotta love these little UI intricacies!
First, somehow we went from "234k" to "717k" for teh same example that highlighted, then we somehow got to "almost 1MB", and heck, soon we'll be at 1 GIGABYTE to run a window.....quick! Grab your pitchforks and rally the men :)
Let's take it down just a smidgen here...
First, we aren't done guys. We thought we'd get this out for you to play with though, and we appreciate the feedback. Second, when you use complex controls, like CFLAYOUT and SPRY components as in the example, you'll get those included, and all their dependencies, plus our stuff.
In Rey Bango's examples, he is using the border layout to implement a very simple condition (left and right layout areas, which is best done with a div-based layout and minimal CSS), which it is definitely overkill for. He's also using Spry, which all adds to the download size.
We'll be spending more time in the next few days playing with jQuery, and we'll post some more evaulations of it so folks can understand the real deal.
Damon
Actually, you're incorrect on two things. First, Nowhere was it mentioned that the same sample app "234k" to "717k". Andy Matthews made mention to a post I had made about another demo app made by Dan Vega that was a page size of ~330kb. My reference to 717k was made re: Todd Sharp's demo Feed Reader app. Next, I didn't make the demo app shown here:
http://h127171.cf8beta.com/rss/
The above is Todd's application and FireBug reported a page size of 717kb. *My version* is here:
http://h127187.cf8beta.com/rss.cfm
The above used jQuery and FireBug reported a page size of 25kb.
The only reason this was even done was because Todd had made a comment about me "missing the point". That has since been resolved and I thought this was a closed case.
Finally, I'm not sure what you mean by "so folks can understand the real deal". Considering that the CF community is heavily involved with jQuery, I would hope that you folks look at it objectively.
I'm sensing that folks are a bit sensitive these days and it could very well be because of that ComputerWorld article. I truly hope that I can continue to post my observations without it being misconstrued in some way. Ironically, it took these comments to get an Adobe rep out to say that a solution is already in the works. I guess some good came out of it.
Again, the design of that app was easy, but as I pointed out, used CFLAYOUT, SPRY, and our stuff.
We'll see if we can't make it down to 25k or less for the final for simple stuff like this. If you take SPRY and the Yahoo imports out of it, you get more of an apples-to-apples comparison with your simple example, and we end up with about ~31k (the size of the core cfajax Javascript).
More to come in terms of intelligent optimizations, since we've go the majority of the capability and ease of use done.
I think what you sensed was only sensitivity to objectivity. Any attempt to do an apples-to-apples comparison needs to be just that and fair and open and complete in the CF community, or watch out! :)
Again, a properly coded example like the oone you posted would be about 31k, vs your 25k.
Damon
As for filesize, I'm glad that you broght it down to 31k which seems more in line with what an app like that should be. So I think your next task is to post the code and a blog entry explaining best practices on optimizing the CF8 Ajax widgets so we can all benefit from the optimizations. That coupled with the compression that you'll be doing on the libraries before release (ie: the solution) should effectively stop anymore discussions about file size.
We'll do our part to make sure there's sufficient control over what gets downloaded to be able to make the right choices.
But understanding the trade-offs of functionality vs download size is, and will continue to be something all app developers need to be aware of.
Thanks for raising the flag!
Damon
A more apples-apples would be to use CFAJAXPROXY ad the base CF Ajax stuff to vs jQuery, and you'll see that's 31k vs 25k.
HTH
Dmaon
I sent you my code and I'm really interested in seeing a demo of how to streamline the code with the CFAjax stuff. Can you build a quick and dirty example so we can check it out?
Let's see thjose Ajax chops in action Rey :)
Damon
http://www.reybango.com/index.cfm/2007/6/6/CF8-Aja...
<CFINPUT type="text" name="Crit5_Value" tooltip="<b>Title Text</b><br>This is my toolTip!">
This makes it look a little fancier and opens up a lot of possibilities.
mycfc.cfc?method=mymethod&returnformat=plain
I'll do a blog entry on this later today.
[Add Comment] [Subscribe to Comments]