Event Handlers & Remote Methods

Working on a project today I came across a strange issue so I thought I would get everyones opinion on it. I am not really sure if its something I am doing wrong, a bug or maybe I am just missing something. In this application I have event handling turned on. this.ormenabled = "true"; this.datasource = "*********"; this.ormsettings = { cfclocation = "models", eventhandling = true, eventhandler = "cfc.com.*******.********.events.eventHandler", dbcreate = "dropcreate", sqlscript = "install/derby.sql" };

So for nothing special and up until this point everything has been working fine. Today I am adding some ajax via everyone's favorite framework (jQuery of course) and I came across something. This is my ajax call to my remote method. $.ajax({ url: "services/User.cfc", data: {method:"getByRole",role:roleid,returnformat:"json"}, success: function(data){ console.log(data); } }); And my remote method that does a join to pull all users who have a role id equal to the argument passed. remote any function getByRole(Numeric role){ var users = ormExecuteQuery("select u from User as u inner join u.roles as r where r.roleid = ?",[arguments.role]); return users; }

If you were to turn event handling off this works fine but with it on I am seeing the following error.

coldfusion.runtime.TemplateProxy$InvalidRemoteAccessException: The method 'preLoad' in component D:\websites\extranetsteriscom\cfc\com\*****\*****\events\EventHandler.cfc cannot be accessed remotely.

Comments (21)

Print

Send

del.icio.us

Digg It!

Download |

209 Views

Creating Apache Derby Custom Functions: Part 3

In Part 1 I looked at why I am using Derby and in Part 2 I looked at how to create custom functions. In the final part of this series we are going to look at the actual code to create our functions.

So in the last part we took a look at writing a replace function. In my example I needed to use a replace function on a database field. SELECT * FROM ModelNumber WHERE REPLACE(number,'-','') IN ('ABC1234','ABC5678') To create that function we have a class that looks like this. package org.vega.derby.functions; public final class StringUtils { public static String replace(String str,String subStr1,String subStr2){ return str.replace(subStr1, subStr2); } } Then I started thinking, what If I need to replace many instances of a string. The function above will only replace the first occurrence. No problem, as I said before we can take this opportunity to create a whole library of functions to use. package org.vega.derby.functions; public final class StringUtils { public static String replace(String str,String subStr1,String subStr2){ return str.replace(subStr1, subStr2); } } public static String replaceAll(String str,String subStr1,String subStr2){ return str.replaceAll(subStr1, subStr2); }

When I actually got back to writing my application I noticed another problem. What if I had to replace more than 1 item? With our current replace method I would have to do something like this. SELECT * FROM ModelNumber WHERE REPLACE(REPLACE(number,'-',''),' ','') IN ('ABC1234','ABC5678') That obviously does not make much sense so what I want to do is write a function that allows to replace multiple strings. In my case I am going to write a function that allows for a regular expression. package org.vega.derby.functions; public final class StringUtils { public static String replace(String str,String subStr1,String subStr2){ return str.replace(subStr1, subStr2); } } public static String replaceAll(String str,String subStr1,String subStr2){ return str.replaceAll(subStr1, subStr2); } public static String reReplace(String str,String regex,String replacement){ return str.replaceAll(regex, replacement); } Now I could do something like this. SELECT * FROM ModelNumber WHERE REREPLACE(number,'[^\w]','') IN ('ABC1234','ABC5678') On top of that I came up with a couple other methods that I thought I could use. package org.vega.derby.functions; public final class StringUtils { /** * Replace the first occurrence of one string and replace it with another in a string * * @param str * @param subStr1 * @param subStr2 * @return */ public static String replace(String str,String subStr1,String subStr2){ return str.replace(subStr1, subStr2); } /** * Replace all occurrences of one string and replace it with another in a string * * @param str * @param subStr1 * @param subStr2 * @return */ public static String replaceAll(String str,String subStr1,String subStr2){ return str.replaceAll(subStr1, subStr2); } /** * Replace all occurrences in a string with another based on regular expression argument * * @param str * @param regex * @param replacement * @return */ public static String reReplace(String str,String regex,String replacement){ return str.replaceAll(regex, replacement); } /** * Will take a string and reverse the order of all of its characters * * @param str * @return */ public static String reverse(String str){ int i; int len = str.length(); StringBuffer sb = new StringBuffer(len); for(i=(len-1); i>=0; i--){ sb.append(str.charAt(i)); } return sb.toString(); } /** * Trims any whitespace from both sides of the string * * @param str * @return */ public static String trim(String str){ return str.trim(); } /** * Repeats a string a number of times based on the count argument * * @param str * @param count * @return str * count */ public static String repeat(String str,int count){ String result = ""; for(int i=1; i<=count; i++){ result += str; } return result; } }

I also want to take the chance to get everyone into the mode of unit testing, so please take a chance watch this public service announcement.

As you can see its pretty easy to create your own functions. On top of being extremely easy you can see its pretty powerful. I just really like being able to create methods in a familiar environment. I have attached my jar file that contains my StringUtils class but you can just as easily create your own. I hope to add some more classes + methods in the future so please give me your suggestions.

Comments (0)

Print

Send

del.icio.us

Digg It!

Download |

237 Views

Creating Apache Derby Custom Functions: Part 2

In the 1st part of this series we took a look at using Apache Derby. In the scenario we went over I came to the conclusion that I would need to write some custom functions for Apache Derby to solve my problems. In part 2 of this short series I will walk you through creating your own custom functions.

In other database management systems you have the ability to create user defined functions. You have the same option in Derby only you have to write these functions in Java. If your not a Java expert, don't worry I am not either and I can promise you this is a piece of cake. If you take a look the create function docs you will get the following explanation.

The CREATE FUNCTION statement allows you to create Java functions, which you can then use in an expression.

[More]

Creating Apache Derby Custom Functions: Part 1

At work we use Oracle for most of the web applications that we create. The only exception to that would be our intranet apps. We have many small applications that are created for internal use only. Instead of having to go through our DBA's to get these Oracle schema's created I found it much easier to just use Apache Derby the embedded version. If you did not know already Derby ships with ColdFusion so it's really easy to get up and running.

Yesterday I working on application where a user could enter a number and would have to do a lookup on this number to if we had it. So if we pull the problem out and take a look at it everything seems very simple. SELECT * FROM ModelNumber WHERE number = 'ABC-1234' So far pretty simple right? A user types ABC-1234 in a text box and we do a lookup based on that. Then the requirement came across that we needed to be able to enter many at one time. No problem, we can just change that to a text area and create pass a list to our query. SELECT * FROM ModelNumber WHERE number IN ('ABC-1234','ABC-5678')

[More]

Another reason unit tests rock

A unit test can really save you some time at the end of the end. I know what your thinking because I used to think the same thing. How on earth does writing more code help save time? Unless you write perfect code I am here to tell you it just will. I thought I would share a perfect example from a class I was writing this morning. I had a very simple method that took a string and repeated it x number of times. The class looked something like this. package org.vega.derby.functions; public final class StringUtils { public static String repeat(String str,int count){ String result = ""; for(int i=0; i<=count; i++){ result += str; } return result; } } I had a simple unit test to make sure the repeat method was doing what it was supposed to. package org.vega.derby.functions; import static org.junit.Assert.*; import org.junit.After; import org.junit.Before; import org.junit.Test; public class StringUtilsTest { @Before public void setUp() throws Exception { } @After public void tearDown() throws Exception { } @Test public void testRepeat(){ String password = "password"; String expected = "********"; String result = StringUtils.repeat("*", password.length()); assertEquals(expected,result); } }

My test kept failing over and over again and I could not figure out why. If you look closer you can see that I write to much ColdFusion code. I started my array loop at 0 and counted until the length of the string. This is going to throw and extra character in there. In Java this becomes much more of an issue because I have to compile my class and deploy it to my application. In ColdFusion I think its still a best practice to catch this now. This is because when you start writing code against your classes (or components) you can be confident that they will work.

jQuery plugins setting default values using extend

Working on my first jQuery plugin I needed a way for anyone calling the plugin to set some options. I am sure you have seen this in other plugins you have used before. With those options the user can provide you also need to account for no options being set. We can get around this by setting some defaults for configuration options. A user provided options to our plugin $(function(){ $("#menu").BigAssMenu({foo:"foo",bar:"foo"}); }); No options provided. $(function(){ $("#menu").BigAssMenu(); });

In our plugin we will allow the user to pass in the options. (function($){ $.fn.extend({ BigAssMenu: function(options){ } }); })(jQuery); Next we need to setup some defaults in case no options are passed to our plugin. (function($){ $.fn.extend({ BigAssMenu: function(options){ var defaults = { foo:"foo", bar:"bar" } } }); })(jQuery); Finally we need account for the case where some options are provided but not all of them are. We can do this using the extend function of jQuery. Here we are supplying 2 arguments our options object and our defaults object. This will merge the 2 objects by modifying the first. This way if 0 arguments are passed it will use the defaults but any argument passed in will override our default. (function($){ $.fn.extend({ BigAssMenu: function(options){ var defaults = { foo:"foo", bar:"bar" } var options = $.extend(defaults,options); } }); })(jQuery);

This is a great way to provide a configurable plugin. Please feel free to provide feedback, still a newbie when it comes to jQuery!

BigAssMenu jQuery plugin selector context tip

So after my first stab at my first jQuery plugin I found a pretty big bug right away. First we should take a look at the core of the problem and how this works. When your using jQuery to select something from the DOM you can pass in an optional argument. This argument is the context in which you want to search. This will give us some obvious performance benefits because we don't have to drill down the entire node, we can just search the node we are in. return this.each(function(){ // the object we are working with var obj = $(this); // get a list of menu items var menuItems = $('li',obj); });

I did not think about it at first but the code as constructed is going to cause some problems. With this markup it will work fine. <div id="menu"> <ul> <li><a id="home" href="basic.html">Home</a></li> <li> <a id="about" href="#">About</a> <div> About Sub Menu </div> </li> <li> <a id="products" href="#">Products</a> <div> Products Sub Menu </div> </li> <li><a id="service" href="#">Service</a></li> <li><a id="support" href="#">Support</a></li> <li><a id="contact" href="#">Contact Us</a></li> </ul> </div> But what happens if there are any other list elemnents in the sub menus? This of course is going to come up so we have a problem on our hands. <div id="menu"> <ul> <li><a id="home" href="#">Home</a></li> <li> <a id="about" href="#">About</a> <div> about sub menu </div> </li> <li> <a id="products" href="#">Products</a> <div> <h2>Books</h2> <ul> <li>ColdFusion</li> <li>jQuery</li> <li>CSS</li> <li>HTML</li> <li>Groovy</li> <li>Hibernate</li> </ul> </div> </li> <li> <a id="service" href="#">Service</a> <div> service </div> </li> <li><a id="support" href="#">Support</a></li> <li><a id="contact" href="#">Contact Us</a></li> </ul> </div>

With that problem I started looking for a solution. Because I didn't really know how to accomplish this i was trying all kinds of selectors and traversing methods all of which came up short. Finally someone on the jQuery forums was able to help me out. We want only direct decedents of the object we are working with. I knew about this but what I did not know was that you could start off with it. Because we are starting off with the context of the object we are working with we can say only direct list items of the obj,ul. var menuItems = $('> ul > li',obj);

My first jQuery plugin: Big Ass Menu

I am not going to get into a tutorial on how to write a jQuery plugin. There are tons of tutorials out there so I will leave that explanation to the pros. Instead I will walk you through the process of building my plugin. This is the first take so please be nice! I will also come back in future posts and correct some of the mistakes made here. The first thing we need is the core code for our plugin. (function($){ $.fn.extend({ BigAssMenu: function(options){ return this.each(function(){ //core plugin code goes here }); } }); })(jQuery); With the code above we can call our new plugin using the following code. $(function(){ $("#menu").BigAssMenu(); });

Before we get into any more code I think its time to look at our markup. It is important to note that a plugin like this really needs 3 things to make it work well. We need to have the markup for the component (HTML), the look and feel (css) and the glue to put it all together (JavaScript). With that this is the markup we are going to work with. Our sub menus will be divs right under our main menu items. <div id="menu"> <ul> <li><a id="home" href="basic.html">Home</a></li> <li> <a id="about" href="#">About</a> <div> About Sub Menu </div> </li> <li> <a id="products" href="#">Products</a> <div> Products Sub Menu </div> </li> <li><a id="service" href="#">Service</a></li> <li><a id="support" href="#">Support</a></li> <li><a id="contact" href="#">Contact Us</a></li> </ul> </div>

Now that we have the core of plugin ready we need to start writing some code. First we are going to create a reference to the jquery object. Using that reference we can use that as the basis of our selector. This will indeed improve performance because we don't need to go searching the entire DOM now. In our example from above we are now strictly working with the menu node. (function($){ $.fn.extend({ BigAssMenu: function(options){ return this.each(function(){ // the object we are working with var obj = $(this); // get a list of menu items var menuItems = $('li',obj); }); } }); })(jQuery); With the code above we now have an array of menu items (menuItems) to work with. What we want to do is iterate over each of those items and do some work. Here we are going to find the id of the main menu item so we have an object to create a sub menu for. When we have that main navigation item we can look to the next node in the dom which should be our "div". // loop over every menu item menuItems.each(function(index,value){ // the id of the top level menu item var menuid = $(this).find("a")[0].id; var submenu = $("#" + menuid).next(); });

Next we are going to hide all of the sub menus and add a class to them called submenu. Later on we will make these configurable options but lets just run with this for now. With our id we can now listen for a hover event. When the user hovers over the menu item we want to fade in the sub menu and change the class of the menu item so the user knows they are "activating" a menu. When we roll off the menu item we are going to do just the opposite. var hide = false; var subMenuClass = "submenu"; var activeClass = "active"; // hide all sub menus $(submenu).hide(); // add a sub menu class to all sub menus $(submenu).addClass(submenuClass); // when you hover over the main menu item $("#" + menuid).hover(function(){ // fade in the sub menu $(submenu).fadeIn(fadeInDelay); // change the class of the menu item to create that on affect $(this).addClass(activeClass); },function(){ // when you move off the menu hide the sub menu hide = setTimeout(function(){ $(submenu).fadeOut(fadeOutDelay); }); // remove the active class from the menu item $("#" + menuid).removeClass(activeClass); }); This works except when we roll of the main navigation item the sub menu disappears. We can fix that by adding a hover event for the sub menu as well. When the user rolls of the main navigation item they will move onto our sub menu. // make sure the sub menu does not dissapear after you move off the main navigation item $(submenu).hover(function(){ if(hide){ clearTimeout(hide); $(submenu).fadeIn(fadeInDelay); $("#" + menuid).addClass(activeClass); } },function(){ // if you move your mouse out of the sub menu div, the div fades out and removes the active class hide = setTimeout(function() { $(submenu).fadeOut(fadeOutDelay); }); $("#" + menuid).removeClass(activeClass); });

So that is my first attempt at a plugin. Like I said before, there are probably better ones out there but this is a great learning experience for me so I am running with it. I will make this code available after the next couple of posts. I also want to get some credit where it is due. The reason I was able to write this plugin is because of the jDiv Skyrocket labs plugin. This is the code that flipped on the light switch for me so thanks to them for the great resource.

The Mega Drop Down Menu

I don't think this is the official name for it but you may get the idea from the name. Here are work we needed the ability to create a ton of content in drop down menus. As an example here is a quick wire frame that I threw together.

When you hover over a menu item the mega drop down will appear. The important thing to pay attention to here is that the content in the drop down menu should have the ability to contain any markup. There is a great article on site point about these menu's and how they are really starting to crop up everywhere.

I took a couple screen captures of some mega menus that I really like.

GoDaddy

Food Network

There are plenty more examples around the web but these are 2 that I like. Now that I have an idea of what I need to build I needed to figure out how to do it. To accomplish this you are going to need a combination of html/css/js. I did a quick search for a jQuery plugin and found instructions on how I could accomplish this. I decided that I really wanted to understand how the internals worked on this so it was time to create my first jQuery plugin. There are probably plugins out there that do what I am looking for but I needed to really understand how this works in case I need to make modifications in the future.

With that my first jQuery plugin (BigAssMenu) was born. Look for some more information about this plugin in the near future. I want to write about this plugin step by step so people can really follow along with me. Also, don't get to hyped up, it works but I need to come up with some really good examples to show of this plugin. Maybe I will try and recreate the menus above!

IE6 position absolute bug

I am working on some html/js/css menus and I came across an IE bug that I am not sure how to fix. I only say that it seems like an IE bug because it seems to work fine in Firefox/Chrom/Safari. Here is the markup for my menu. <div id="menu"> <ul> <li> <a id="home" href="basic.html">Home</a> <div class="submenu"> products sub menu </div> </li> <li> <a id="about" href="#">About</a> <div class="submenu"> about sub menu </div> </li> <li> <a id="products" href="#">Products</a> <div class="submenu"> products sub menu </div> </li> <li><a id="service" href="#">Service</a></li> <li><a id="support" href="#">Support</a></li> <li><a id="contact" href="#">Contact Us</a></li> </ul> </div> And the css. body {font: normal 75% arial,verdana,tahoma,sans-serif;color: #777;background: #fff;} #menu {width: 600px;height:25px;background: #6699CC;clear: both;} #menu ul {margin: 0;padding:0;list-style:none;} #menu ul li {display:inline;} #menu ul li a {float: left;display: block;font: bold 1.1em arial,verdana,tahoma,sans-serif;line-height: 25px;color: #fff;text-decoration: none;margin: 0;padding: 0 10px;} #menu ul li a:hover, #menu ul li a.active {color: #6699cc;text-decoration: none;background: #fff;} .submenu {position:absolute;width:560px;height:240px;margin:25px 0 0 0;padding:20px;background:#333;z-index:100;color:#fff;}

In Chrome


In IE6

I am sure there is probably some hack to fix this I just don't know what I am looking for. If anyone can help me figure this one out that would be great.

** UPDATE
Bradley Moore was able to help me out with this one. Here is the updated css. body {font: normal 75% arial,verdana,tahoma,sans-serif;color: #777;background: #fff;} #menu {position:relative;width:600px;height:25px;background:#6699CC;clear:both;} #menu ul {margin: 0;padding:0;list-style:none;} #menu ul li {display:inline;} #menu ul li a {float: left;display: block;font: bold 1.1em arial,verdana,tahoma,sans-serif;line-height: 25px;color: #fff;text-decoration: none;margin: 0;padding: 0 10px;} #menu ul li a:hover, #menu ul li a.active {color: #6699cc;text-decoration: none;background: #fff;} .submenu {position:absolute;top:0;left:0;width:560px;height:240px;margin:25px 0 0 0;padding:20px;background:#333;z-index:100;color:#fff;}