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

Reverse Loop An Array of Structs

So I was trying to figure out how to loop an array of structs backwards. I found ways to loop arrays backwards but it only worked with using the reverse() function and that only works on a list of strings. Something that I was aware of until recently cfloop has a step attribute. So really it just came down like this, pretty simple:

view plain print about
1<cfloop from="#ArrayLen(ArrayofStructs)#" to="1" index="i" step="-1">
2 <cfdump var="#ArrayofStructs[i]#" abort="true" />
3</cfloop>

This is probably well known, but I wanted a reference so I can use it again later. Hope this helps someone.

Weird Coldfusion Error

So a coworker found this out if you run this test page Coldfusion will return that the cfcatch is not a struct even though when you dump the variable it says that it is a struct. Also on the argument in the function if you put a type="struct" Coldfusion will error out saying that it is not a struct. I have filed a bug here: Bug Also it turns out that it is not just a CF9 issue I have seen it as well in my local CF8 instance.

view plain print about
1<cffunction name="testFunction" output="true">
2    <cfargument name="exception" required="true"/>
3    <cfdump var="#arguments.exception#">
4    <cfdump var="#isStruct(arguments.exception)#">
5</cffunction>
6
7<cftry>
8    <cfthrow message="Help!!!!" />
9    
10    <cfcatch type="any">
11        <cfset testFunction(exception=cfcatch) />
12    </cfcatch>
13</cftry>

cfObjective(): SQLite Database Development for AIR with Raymond Camden

Ray did a good job at talking about SQLite and the basic information on SQLite. I have not used SQLite before and wasn't aware of some of it's functionality and it's limitations.

  • Features
    • Typeless
      • You can enter characters into an integer field
  • What's Missing?
    • Right outer join, full outer join
    • When altering tables only rename table and add column
    • Views are read only
    • No grant/revoke
    • No stored procedures
  • What's Missing in AIR?
    • FK Constraints
    • SQLite_Version(), Match()
  • SQLite In AIR
    • Support in both FLEX and HTML
    • Actionscript API
    • Connecting/Performing Questions/Table Analysis
    • Synchonous and Asynchronous
    • Encryption for "Sensitive" Data
  • Getting Started
    • Creating a DB
    • SQLConnection.open()
    • SQLConnection.openAsync()
    • Any filename is valid (and any extension)
    • In memory database are supported
  • Creating Tables
    • With SQL!
    • Create Table if not exists
    • Can also copy a "seed" db
    • Types: Integer, real, text, blob, null
    • Typeless: you can put text in integer
    • Column "Affinities" are used as hints
    • Affinities: Text, Numeric, Integer, real, Boolean, Date, XML, XMLList, Object, None
  • Performing Queries
    • Uses SQLStatement class
    • Speicfy SQL, Parameters, Connection, events
    • Returns a SQLResult Class
    • Contains Complete, data
  • Parameters
    • Performance, typing, security
    • Named
      • Values(:name, @rank)
    • Ordered
      • Values (?, ?)
  • Error Handling
    • Uses SQLErrorEvent Class
    • Focus on:Connection issues, sql syntax, constraint errors
  • Selecting With Class
    • Select results can be bound to ActionSCript Classes
    • Allows for Typed Results
  • Transactions
    • Gives much better performance for multiple inserts/updates
  • Paged Results
    • Allows you to paginate through large result sets
    • Stmt.execute(n)
    • Stmt.next(n)
  • Encryption
    • Uses a key for connection
    • Must be done at creation!
    • Can't change your mind...
    • Keys can be changed (reencryption())
    • Encryptions keys are bytearray (16 bytes)
  • Schema
    • Gives you access to tables, views, columns.
  • Tips
    • Using a pre-populated DB
    • Use On SQLSTatement per action
    • LITA is your friend
  • Air 2?
    • DB Transactions have save points

More Entries

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