Need Your Help!

I know I haven't blogged in awhile and this isn't tech related BUT my wife (Cassondra Bellows) managed to be a finalist for the Zoo Photo Contest! Please go to this page http://a.pgtb.me/rk1Bck and vote for her! Her picture is in the Just Keep swimming section. It's the 7th picture and it's of the Leafy Sea Dragon. (It also says her name) Just click the little box to vote for her! This is important to her, so please vote!

Updating Adobe Coldfusion Builder Error

So I was updating from Adobe Coldfusion Builder 2.0 to 2.0.1 and the installation said that it completed with errors. (I didn't uninstall first because the internet told me I didn't have to) After this error and the installation completed I couldn't open up Coldfusion Builder. I would get this error:

"The CFbuilder executable launcher was unable to locate its companion shared library"

So I decided that I was going to uninstall it and reinstall it. After I go to Uninstall Programs and try to uninstall it I was receiving this error:

"You do not have sufficient access to uninstall Adobe Coldfusion Builder 2. Please contact your system administrator."

Which is weird because I should have admin permissions. After looking online it seems that others have seen this error but there was no solution. Just for fun I decided to rename my Adobe directory (c:\Adobe\) which is where eclipse and what not is installed. After I did that I re-ran the installation for CFB 2.0.1 and wala it worked. Kind of hacky but seemed to work for me.

Quick Review - Adobe Brackets

So I finally got around to playing around with Adobe's open source IDE, Brackets used to edit HTML/JS/CSS, built with HTML/JS/CSS! So far I really like it. It's really light weight, opens up really fast and remembers the last files you were working on. My favorite feature is it has JSLint built into it so as you are working on a JS file it parses your file and gives you errors as you save. This is great I spent some time the other day just working through the JSLint errors. Found a lot of unnecessary code from it. For example I had this (don't know why it was left in there but JSLint found it)

view plain print about
1if (variable) {
2    doSomething();
3} else {
4    //doSomethingElse();
5}

JSLint complains about unnecessary brackets because of code being commented out. This is slick because if I don't need the function call then I don't need the call. (don't need commented out code if you are using some sort of version control).

Another slick thing about Adobe Brackets is that since it's built using HTML/JS/CSS you can tweak any of the settings by jumping into the source code. I do warn you tweaking this can cause issues with rendering the IDE mainly because it's not fully stable yet. I should warn you that it's in what I call pre-alpha stage.

If you want to check it out you can d/l it at The GitHub

Returning Dynamic Content In A PhoneGap App

This is probably known to many but I was looking into this for fellow co-workers and I figured I would blog it so I don't forget it in the future. PhoneGap is great at making an HTML page into an mobile application. The thing with HTML is, it's static. You can't do direct database calls on load. Here is a quick solution I have found that seems to work. If other's have found a better solution, please post it.

index.html

view plain print about
1<!doctype html>
2<html>
3    <head>
4        <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
5        <title>My App</title>
6        <script src="phonegap.js" type="text/javascript" charset="utf-8"></script>
7        <script src="jquery.js" type="text/javascript" charset="utf-8"></script>
8        
9        <script type="text/javascript">
10            jQuery(document).ready(function() {
11                $.ajax({
12                    url:"http://www.ryanvikander.com/test.cfc?method=getdata",
13                    success: function(data){
14                        var content = $("#content");
15                        
16                        content.html(data);
17                    },
18                    error: function(e){
19                        console.log(e);
20                    }
21                });
22            });
23        </script>
24
25    </head>
26    <body>
27         <div id="title_bar">Test</div>
28        This is a test
29        <div id="content"></div>
30    </body>
31</html>

So really all I am doing is making a call to a cfc on load that returns some content and then adds that content to a div. Pretty simple.

A Little JavaScript Formatting

So I am a stickler when it comes to code formatting. If I see this:

view plain print about
1<script type="text/javascript">
2    function demo(){
3        var hello = "world";
4        var someNumber = 132;
5        var anotherString = "some string value";
6 }
7</script>

I cringe and tell you to clean up your code. Instead of doing that you can do this:

view plain print about
1<script type="text/javascript">
2    function demo(){
3        var hello = "world",
4            someNumber = 132,
5            anotherString = "some string value";
6    }
7</script>

Also, in development putting them on new lines is great for readability. Coldfusion Builder by default wants to format them to one line.

Want To Speak At cf.Objective()?

Want To Speak At cf.Objective? Well now you can! Sign up today for lightning talks and Bird of a Feather session and you too can speak!

Call for Lightning Talk Speakers and BoF Survey for 2012 Now Open

Using Twitter Authentication in an Application

I will begin with a little back story. So I manage an internal User Group inside the company I work for (ImageTrend, INC). I proposed a challenge to the attendees to come up with a cool implementation of an app using the Twitter API.

Myself being the proposer I feel I am not eligible for the prize but wanted to take on the challenge just for fun. I found a good blog post by Mr. Ray Camden Adding support for automated tweets with OAuth that was very helpful getting started. I won't go into detail on setting up the Twitter Application on Twitter it's in his blog post. But it's kind of an older post and Twitter4j was released newer versions that do not work with his implementation in the blog. Scanning through the comments on the post, Sean Ryan had posted a blog entry with the updated details using the latest version of Twitter4j. Here is the post

Now to some code examples. Setting up the application cfc I added this code snippet to my onApplicationStart method:

view plain print about
1var paths = [this.siteroot & "twitter4j/twitter4j-core-2.2.6-SNAPSHOT.jar"];
2        application.javaloader = createObject("component", "javaloader.JavaLoader").init(paths);
3        
4        application.RequestAccessToken = "Consumer Key From Twitter";
5        application.RequestAccessSecret = "Consumer Secret From Twitter";
6        
7        application.Twitter = application.javaloader.create("twitter4j.TwitterFactory").init().getInstance();
8        application.Twitter.setOAuthConsumer(application.RequestAccessToken,application.RequestAccessSecret);

My callback URL on Twitter is setup to call http://www.ryanvikander.com/twitter/twitterlogin.cfm?mode=1 I created a CFM page to handle the twitter login. This file looks like this:

view plain print about
1<cfset userInfo = application.userController.getTwitterCredentials(session.userid) />
2
3<cfif userInfo.recordCount EQ 0 AND NOT structKeyExists(url,'mode')>
4    <cfif NOT structKeyExists(session, "RequestToken")>
5        <cfset Session.RequestToken = application.Twitter.getOAuthRequestToken(application.twitterlogin)>
6    </cfif>
7    
8 <cfset Session.oAuthRequestToken = Session.RequestToken.getToken()>
9 <cfset Session.oAuthRequestTokenSecret = Session.RequestToken.getTokenSecret()>
10     
11 <cflocation url="#Session.RequestToken.getAuthorizationURL()#" addtoken="No">
12<cfelseif userInfo.recordCount GT 0>
13 <cfset session.StoredAccessToken = userinfo.token>
14 <cfset session.StoredAccessSecret = userinfo.secret>
15     
16 <cflocation url="index.cfm" addtoken="false" />
17<cfelse>
18 <cfset AccessToken = application.Twitter.getOAuthAccessToken(Session.RequestToken,url.oauth_verifier)>
19 <cfset session.StoredAccessToken = AccessToken.getToken()>
20 <cfset session.StoredAccessSecret = AccessToken.getTokenSecret()>
21
22    <cfset application.userController.saveTwitterCredentials(session.userID,AccessToken.getTokenSecret(), AccessToken.getToken()) />
23
24 <cflocation url="index.cfm" addtoken="false"/>
25</cfif>

Very similar to Ray's code for the one time authentication but I wanted to database the tokens that Twitter returned so in the else if I check to see if the user exists and I have stored their token if they do not exist I database the token and secret so they don't have to authorize the app every time.

Once this is complete you can do pretty much whatever is available from the Twitter4J class library.

I apoligize if this is a scattered post wanted to do a quick write up. If you have any questions/concerns I am more than willing to try and answer.

cf.Objective 2011!

I was blessed to be able to attend cf.Objective() again this year. I will be posting my notes as I did last year. I hope to meet any of the people that read this blog. I will be the guy with the big beard.

Using Local SQL Server Express 2008 Server with Coldfusion

So I know there are a few articles out there on this subject but I seem to have to reinstall sql server on my laptops often and I always have to hunt down how to do it so I thought I would post a blog so it would be a bit more recent.

I won't go over installing SQL Server Express, it takes a while seems like a good 30 minutes. Anyways, once you install it you can connect to your local database by connecting to the server (depending on what you named your server) [PC_Name]\SQLEXPRESS and depending on if you are using windows authentication you would enter your user name and password.

Ok so once you've gotten that installed there are some more tricky stuff you need to do within SQL Server. First you will need to turn on TCP/IP which is located under Start > Microsoft SQL Server 2008 > Configuration Tools > SQL Server Configuration Manager. Once you open up the manager go under: SQL Server Network Configuration and click on Protocols for SQLExpress (I assume this the name of the server). By default TCP/IP is disabled. So enable it by right clicking and enabling it. You will be prompted to restart your server service but I would wait until finished to do so. Now double-click TCP/IP or right click and go to Properties. Go into the IP Addresses tab and for each IPs enter in under TCP Port 1433. This allows for Coldfusion to connect to your database. Now you can apply and restart your server service.

A tip if you skip that last step you will get this annoying error message and this is why I needed to post this:

Connection verification failed for data source: rvikander java.sql.SQLNonTransientConnectionException: [Macromedia][SQLServer JDBC Driver]Error establishing socket to host and port: localhost:1433. Reason: Connection refused: connect The root cause was that: java.sql.SQLNonTransientConnectionException: [Macromedia][SQLServer JDBC Driver]Error establishing socket to host and port: localhost:1433. Reason: Connection refused: connect

If anyone has any thoughts or questions I would love the comments. Otherwise I hope this helps someone.

Modal Helper for ColdMVC

So during my spare time I have been working on a wedding site for myself and its written in a coworker's Coldfusion framework ColdMVC. Within learning the language I decided I was going to create my own custom helper for a modal window. I went with the jQuery modal library jQModal. The way I created the helper you can use whatever modal window library you want this is just one that I like. But anyways enough with that let's look at some code.

So a typical ColdMVC directory will look like this. Inside I have a Helpers folder. This folder is where you will put your CFCs that contain your helper functions. I do believe you can override the built in functions if they are the same name and function name? I am not positive but I can find out.

My modal CFC contains one function called display and this is where you would put your HTML to render your modal window. Since I went with jQModal I have had to add some certain classes that only pertain to that library. Your function might be different.

view plain print about
1<cffunction name="Display" returntype="any">
2        <cfargument name="ID" required="true" />
3        <cfargument name="URL" required="false" default="" />
4        <cfargument name="Content" required="false" default="" />
5        <cfargument name="Label" required="false" default="" />
6        <cfargument name="Title" required="false" default="Modal Window" />
7        <cfargument name="Loading" required="false" default="" />
8        
9        <cfset var html = "" />
10        
11        <cfsavecontent variable="html">
12            <cfoutput>
13            <script type="text/javascript">
14                $(document).ready(function() {
15                    $('###arguments.ID#').jqm({
16                            modal: true,
17                            trigger: 'a.modal_link#arguments.ID#'
18                            <cfif arguments.URL NEQ "">
19                                ,ajax: '#arguments.URL#'
20                                ,ajaxText: "#arguments.Loading#"
21                            </cfif>
22                    });
23                });
24            </script>
25            
26            <div id="#arguments.ID#" class="jqmWindow">
27                <div class="modal_title">#arguments.title# <div class="floatright text_right"><a href="##" class="jqmClose">Close</a></div></div>
28                <div class="text_left">
29                    <div class="modal_content content">
30                        #arguments.Content#
31                    </div>
32                </div>
33            </div>
34            <a href="##" class="modal_link#arguments.ID#">#arguments.label#</a>
35            </cfoutput>
36        </cfsavecontent>
37        
38        <cfreturn html>
39    </cffunction>

The function itself accepts an ID which is required and must be unique. This is for the fact that if you want to have multiple modal windows on your page we need them to be unique. The URL argument is used if you are doing an AJAX call. This will do a refresh every time you make a call to the modal window. The content argument is used if you want to send in content to the window by using cfsavecontent and passing the variable to the function. The label argument is used for the link. This can be modified if you want to do something different to display for the user to trigger the modal window. Title is the title of the argument. By default the window will just say "Modal Window" this is incase I forgot to include a title of course you don't HAVE to have a title, but I like it. Loading is just some HTML that I display for the AJAX calls so the user just doesn't see a blank window.

So that's the function now how do we use it? Well there are two ways I use the modal window. Well there is two different ways you can use it. First is if you want to take some content and pass it to the modal window. Here is how I do that:

view plain print about
1<cfsavecontent variable="text">
2Hello World!
3</cfsavecontent>
4
5<cfoutput>
6#$.modal.display(label="Click Me", Content=text, id="displaycontent", title="How We Met")#
7</cfoutput>

Now if you are not familiar with ColdMVC I suggest visiting: Tony Nelson's blog and read up on some of his posts explaining the ins and outs on the framework. But just for this blog I will explain that $ replaces the helper scope inside ColdMVC so you don't have to type out helpers every time. That's one way I call the modal helper. The next way is by making an AJAX request.

This way is a bit more trickier:

view plain print about
1#$.modal.display(ID="loginWindow", URL="#linkTo({controller='wedding',action='loginform'},'currentView=#cgi.path_info#')#",label="Login", loading="<div class='text_left'>Loading<marquee style='width: 1.5em;'>.....</marquee>")#

The first thing I do is use the built in ColdMVC linkTo() function to link to my controller and pass the action of loginform. Again, ColdMVC is going to know how to use that and render the correct view. The only other thing different is I pass in some HTML for loading so I can display loading to the user while the page loads. *note my best use of the marquee tag ;)* And that's pretty much it. I have some custom css for displaying the modal window and it comes out looking like this:

Example of non AJAX modal:

Example of AJAX modal:

Note I am in no way the best designer. I am sure someone could design a better window. I am up for suggestions.

Also here is a link to the jQuery plugin I used jQModal

More Entries

BlogCFC was created by Raymond Camden. This blog is running version 5.9.6.004. Contact Blog Owner