CFCLIENT: Doc examples do not work; Can't get anything to work?

Question

So I realize that the new CF11 mobile features have been received with some very mixed reviews, but I wanted to try them out to see if I could use them for some really simple device detection, however I cannot get anything to actually work.

For example, I am looking at the doc for cfclientsettings, specifically at the first example on the page under the "Device detection" heading. Here's the code for reference (I formatted it a little to ensure it's easy to read here):

<cfClientSettings detectDevice=true /> 
<cfclient>
    <cffunction access="public" name="showCanvasSupport" returntype="void">
        <cfset evalStr = "document.getElementById('canvas').innerHTML='" & cfclient.canvas & "'">
    </cffunction>
</cfclient>

Canvas support -<b id="canvas"></b><br>
<button onclick="invokeCFClientFunction('showCanvasSupport',null)">Show canvas support</button>

Creating a new .cfm page and adding this code produces the text and button on the page, but clicking the button throws a JS error in Chrome: "Uncaught The function signature is invokeCFClientFunction(functionName [, arg1, arg2, arg3, ...], successCallback, failureCallback). The functionName, successCallback and failureCallback are mandatory. If you don't have a successCallback or failureCallback, null can be passed as the value."

Ok, not great. So I checked some more docs and decided to add another null argument to the invokeCFClientFunction() call to fix the missing callback. This at least corrects the JS error, but now nothing at all happens when clicking the button.

So after some more fussing, I arrived at the following code, which still does not work, but seems closer:

<cfClientSettings detectDevice=true />
<cfclient>
    <cffunction access="public" name="showCanvasSupport" returntype="void">
        <cfscript>
            document.getElementById('canvas').innerHTML=cfclient.canvas;
        </cfscript>
    </cffunction>
</cfclient>

Canvas support -<b id="canvas"></b><br>
<button onclick="invokeCFClientFunction('showCanvasSupport',null,null)">Show canvas support</button>

So this code, when you click the button, sets the innerHTML of the canvas element to "undefined". Awesome.

Honestly, I've been trying every example I can find for using cfclient and NONE of them work. Is there some secret I'm missing? I have a sneaking suspicion that if I'm not creating a 'Mobile Project' in CFBuilder that this stuff doesn't work? If so that's stupid and they don't state that in the docs really.

What I'm trying to do, in the end, is simply use cfclient for some basic device detection and to grab the width of the browser/device to do some basic media query style detection very much like in the "Using media queries" section of the cfclientsettings doc. I just want to grab the width and then set a session variable based on it.

I am running a fully patched developer version of CF11 on my Win7 machine setup with IIS. Any and all support is welcome.

Cross post on Adobe Forums: https://forums.adobe.com/thread/1929387

Answer 1

After bashing my head on my keyboard for a while more, I've gotten the cfclient scope working.

I finally found this page in the docs: Device Detection

At first glance, this page seems almost identical to the cfclientsettings doc page, even having the same code examples.

However, where the cfclientsettings doc uses the scope like this:

cfclient.canvas

The Device Detection doc page writes it like this:

cfclient.properties.canvas

Boom. That's of course all it took. What a waste of time. All the cfclient scoped variables work just fine if you add ".properties" in there.

I'm still not sure if the cfclientsettings doc is just plain wrong, or if it's referencing it in a different context. I'll definitely add a comment to it on that point.

(Also, the JavaScript still fails for this example on both doc versions, so there's that.)

Hope this helps somebody who wants to do simple ColdFusion client device detection.

Answer 2

Let me preface this answer by stating that I have never used cfclient and I am only relaying the documentation that I found online for it's use. This was too long for a comment.

You stated:

I have a sneaking suspicion that if I'm not creating a 'Mobile Project' in CFBuilder that this stuff doesn't work? If so that's stupid and they don't state that in the docs really.

I think they do state that in the documentation actually. Here is what I found. At the beginning of the Client-side CFML (for mobile development) document it states:

Before you begin – To try out the examples provided in this document, you need to set up the ColdFusion mobile development environment. See Configuring the development environment.

I am not going to repeat all of the information here as it is fairly substantial but the Configuring the development environment page mentions that you must install ColdFusion Server 11, install ColdFusion Builder and then create a 'ColdFusion Mobile Project' within Builder to help you along.

However that page also states that you can convert an existing ColdFusion project automatically by following the steps under Migrating existing projects where you 'Apply CF Mobile Nature' to the project from within ColdFusion Builder. This may be the piece that you are missing.

I think if you read through the documents that I referenced it may get you going. Also here is a link to their Building Mobile Applications documentation which contains an overview of the entire process.