Tip of The Day using CFWindow

Word Count: 787

Another great tag in ColdFusion 8 AKA Scorpio is the cfwindow tag. This tag create a popup window in the browser without creating a separate browser instance. While I thought this was a great Idea I wasn't quite sure where I would use this. Once I got to thinking I quickly realized that it would be much easier figuring out where I wouldn't use it. This tag is very useful in so many ways and I would like to point out my first idea. This is just a quick example with a little code. If we were going to create an actual tip of the day application we could go much more in depth.

Let us say for example that every time someone visits my blog I want to display a tip of the day to them. Even better you could read in some type of session variable for the users settings or place a cookie on their machine. The session variable would tell us if we should display the tip of the day or not. If so we simply build our new tip of the day window. First off this is another tag that can take attributes as a structure and this seems to be better code to me so I am sticking with it. Here were are just defining the basic properties of our new window. For more information about all of the windows attributes please see the cfml reference.

<cfset win = structNew()>
   <cfset win.name = "totd">
   <cfset win.title = "Tip Of The Day">
   <cfset win.center = true>
   <cfset win.closable = true>
   <cfset win.draggable = true>
   <cfset win.initShow = true>
   <cfset win.modal = true>
   <cfset win.width = 600>
   <cfset win.height = 300>
   <cfset win.resizable = true>
Once we have our window ready all that is left to do is build the window and display our tip. My tip here is static but we could easily have a database full of tips and have a function that randomly returns to us a tip.

<!--- session variable for tip of the day --->
   <cfif session.showTOTD>
   <cfwindow attributeCollection="#win#">
   
      <h4>Did You Know?</h4>
      <p>Here are a couple tips when navigating around my website.</p>
      
      <ul>
         <li>You can use the search box to the right to search all archived articles</li>
         <li>By clicking on a subject under archives by subject you can see a listing of all articles by subject</li>
         <li>You can email me using danvega@gmail.com</li>
         <li>I use gtalk so you can contact me there as well</li>
         <li>Lebron James Is King James to you!</li>
      </ul>
   </cfwindow>
   </cfif>

If you would like to check out the demo I built you can visit the link below. Here is the final code I used.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <title>CFWindow / Tip Of The Day</title>
   <style>
   body,li,p {
      font-family:Arial,sans-serif;
      font-size:12px;
   }
   </style>
</head>

<body>

   <img src="images/website.jpg">

   <!--- show tip of the day --->
   <cfset session.showTOTD = true>
   <!--- just in case we forgot to set it --->
   <cfparam name="session.showTOTD" default="false"/>
   
   <cfset win = structNew()>
   <cfset win.name = "totd">
   <cfset win.title = "Tip Of The Day">
   <cfset win.center = true>
   <cfset win.closable = true>
   <cfset win.draggable = true>
   <cfset win.initShow = true>
   <cfset win.modal = true>
   <cfset win.width = 600>
   <cfset win.height = 300>
   <cfset win.resizable = true>
   
   <!--- session variable for tip of the day --->
   <cfif session.showTOTD>
   <cfwindow attributeCollection="#win#">
   
      <h4>Did You Know?</h4>
      <p>Here are a couple tips when navigating around my website.</p>
      
      <ul>
         <li>You can use the search box to the right to search all archived articles</li>
         <li>By clicking on a subject under archives by subject you can see a listing of all articles by subject</li>
         <li>You can email me using danvega@gmail.com</li>
         <li>I use gtalk so you can contact me there as well</li>
         <li>Lebron James Is King James to you!</li>
      </ul>
   </cfwindow>
   </cfif>
   
</body>
</html>


http://h127408.cf8beta.com/ajax/tipoftheday.cfm


Comments

#1 Posted By: Andy Matthews Posted On: 6/1/07 10:36 PM
Hmmm...

When viewing the demo in IE6, I get a tiny bit of vert scrolling, but about 3 inches of hor scrolling.
#2 Posted By: Rey Bango Posted On: 6/2/07 7:30 PM
Nice demo Dan. One thing to consider though, is page size. Just doing that 1 window forced a page size increase of 330k via 12 .js files. Thats fairly sizeable and needs to be a consideration when building out your apps.
#3 Posted By: Dom Posted On: 6/6/07 9:48 AM
I was wondering if it is possible to pass variables using GET over to the new window. The reason i need this is because another site not controlled by myself would be opening in this new window and i need to pass variables over the url to it.
#4 Posted By: Andy Matthews Posted On: 6/6/07 9:54 AM
@Dom...this is not a popup window like you're thinking of. This is called a Modal Window and exists completely in the current browser page. This example isn't loading in a new "page" so much as it is displaying additional content found in the current page.
#5 Posted By: Dan Posted On: 6/6/07 9:54 AM |
Author Comment
Dom,
In theory it should work. I am thinking you can use cfhttp to grab the content. So in your example you would click a button on your site that would open this window and based on some url variable we would grab the content via cfhttp right? If thats right Ill give it a quick test.
#6 Posted By: Dom Posted On: 6/6/07 10:06 AM
You got it Dan. The ability to do that could help out a lot around here.
#7 Posted By: Adam Posted On: 7/18/07 7:32 PM
Is there a way to use the source attribute (to define another cfm file as the content to load in the window) and change the window URL on the fly? Something like:

ColdFusion.Window.Location('windowname', 'newUrl');

would make my life a lot easier!
#8 Posted By: todd sharp Posted On: 7/18/07 9:19 PM
Adam: There are a few different options to do what you're looking for.

1. use binding within the source
Ex: source="myTemplate.cfm?foo={something}"

2. use ColdFusion.navigate('myTemplate.cfm', 'myWindow_body')

Each window gets two special variables created - windowName_title and windowName_body that you can use just like any standard div in JavaScript.

does that make sense?


Post Your Comment







Show Captcha

If you subscribe, any new posts to this thread will be sent to your email address.

Copyright © 2007 Dan Vega | BlogCFC was created by Raymond Camden. This blog is running version 5.8.001.