cfclientsettings

Search
Go to ColdFusion CFML Reference User Guide

Description

This tag is similar to cfprocessingdirective and acts as a compiler directive to include plugins for various features (device detection and device API). You can use this tag to load all the required device plugins and device detection plugins.

Syntax

<cfclientsettings
enableDeviceAPI = "true|false"
detectDevice = "true|false"
deviceTimeout = Number
mobileServer
validationCFC>

See also

cfclient

History

  • ColdFusion (2018 release) Update 2: Added the attributes mobileServer and validationCFC.
  • ColdFusion 11: Added this tag.

Attributes

Attribute

Req/Opt

Default

Description

enableDeviceAPI

Optional

 false

Enable/disable the device API.

detectDevice

Optional

false

Enable/disable the device detection plugin.

deviceTimeout

Optional

10

The timeout for loading the plugins (in seconds).

If the plug-in takes more than 10 seconds (default timeout value) to load, you will get an error. Try increasing the timeout to avoid this problem.

If you have specified enableDeviceAPI as "true", the device plugins will be loaded. After the device plugins are loaded, ColdFusion waits for an event "DeviceReady" to be triggered. Once the DeviceReady event is triggered successfully, the execution of CFML starts. In a desktop browser, the DeviceReady event will not be triggered. However, for a mobile application (shell application or packaged application), the event is triggered.
So if you are trying to run a CFM where the device APIs are enabled on a desktop browser you will get a blank page and in the console you can see an error message about deviceTimeout

mobileServer

Optional

 

The server where the mobile app is located.

validationCFC

Optional

 

The path of the cfc that contains the handler cfc, which validates the access token. For more information, see  the section Helper CFC in  CFML for mobile development.

Device detection

The device detection feature of CFML allows you to identify the device properties and characteristics, which can be used to determine the best content, layout, mark-up or application to serve to the given device.

These characteristics include screen size, browser type and version, media support, and the level of support for CSS, HTML, and JavaScript.

For getting the device features and capabilities, you need to specify an attribute detectdevice in the <cfclientsettings> tag and set it to true:

<cfclientsettings detectDevice=true />

If the detectdevice attribute is set to true, ColdFusion automatically detects the features and capabilities of the device (width, height, and orientation) on which the application is running.

 

The following example shows the usage of the device detection feature:

<cfclientSettings detectDevice=true />

<cfclient>
<cffunction access="public" name="showCanvasSupport" returntype="void" >
<cfset document.getElementById('canvas').innerHTML= cfclient.properties.canvas>
</cffunction>
</cfclient>

Canvas support -<b id="canvas"></b><br>

<button onclick="invokeCFClientFunction('showCanvasSupport',null, null)">
Show canvas support
</button>

In the above example, we are trying to find if the device supports HTML5 Canvas.  cfclient.canvas returns a boolean value indicating the support for the HTML5 Canvas property.

In the above example, we are trying to find if the device supports HTML5 Canvas.  cfclient.canvas returns a boolean value indicating the support for the HTML5 Canvas property.

ColdFusion Server internally uses Modernizer JavaScript library (version 2.6.2) for the device detection feature.

The following table lists the supported device features with example usage:

Features Syntax
applicationCache cfclient.properties.applicationcache
Audio cfclient.properties.audio
Canvas cfclient.properties.canvas
Canvas Text cfclient.properties.canvastext
CSS 2D Transforms cfclient.properties.csstransforms
CSS 3D Transforms cfclient.properties.csstransforms3d
CSS Animations cfclient.properties.cssanimations
CSS Columns cfclient.properties.csscolumns
CSS Generated Content cfclient.properties.generatedcontent
CSS Gradients cfclient.properties.cssgradients
CSS Reflections cfclient.properties.cssreflections
CSS Transitions cfclient.properties.csstransitions
Device Group Descriptions cfclient.properties.deviceGroupDescription [array]
Device Group Name cfclient.properties.deviceGroupName [array]
Device Height cfclient.properties.deviceHeight
Device Width cfclient.properties.deviceWidth
Drag ‘n Drop cfclient.properties.draganddrop
Geolocation cfclient.properties.geolocation
Hash Change cfclient.properties.hashchange
Height cfclient.properties.height
History cfclient.properties.history
IndexedDB cfclient.properties.indexeddb
Input Attributes cfclient.properties.input.* (* refers to attributes for input elements. For possible values, see the Modernizr documentation)
Input Types cfclient.properties.inputtypes.* (* refers to input type attributes. For possible values, see the Modernizr documentation)
localStorage cfclient.properties.localstorage
Orientation cfclient.properties.orientation
Post Message cfclient.properties.postmessage
Session Storage cfclient.properties.sessionstorage
Touch Events cfclient.properties.properties.touch
Video cfclient.properties.video
Web Sockets cfclient.properties.websockets
Web SQL Database cfclient.properties.websqldatabase
Web Workers cfclient.properties.webworkers
Width cfclient.properties.width

 

For the description on all above mentioned features, see the Modernizer documentation.

Using media queries

Media queries allow you to apply changes to the page design based on the viewing size and capability of the device on which your content is displayed. A media query consists of one or more logical expressions formed using the detected device data that checks for certain conditions of media feature and based on the result of this expression we can change the layout of the page dynamically.

If you are building a mobile application, you can easily detect the characteristics of the device and customize the layout just for that device as shown in the following example:

<cfclientsettings detectDevice=true />
<cfclient>
<cfif cfclient.width lte 480 >
<cfinclude template=" phone.css ">

<cfelseif cfclient.properties.width gte 480 AND cfclient.properties.width lte
760>
<cfinclude template=" tablet.css ">

<cfelse>
<cfinclude template=" desktop.css ">

</cfif>
</cfclient>

In the above example, the web page is customized for different devices based on their screen sizes.

Handling orientation changes

For handling the device orientation changes, you can register a listener using the addOrientationListener() function:

<cfclientsettings detectDevice=true />
<cfclient>
Orientation : <b id="orientationId"></b><br>
Width : <b id="width"></b><br>
Height : <b id="height"></b><br>
<!--- Adding the orientation handler here. After adding
the handler, the handler will be invoked whenever there
is an orientation change. --->
<cfset cfclient.addOrientationListener(orientationHandler)>
<cffunction access="public" name="orientationHandler" returntype="void" >
<cfargument name="orientationString" type="string">
<!--- The orientation (landscape/portrait) will be
passed as an argument to the handler. You can also get
the orientation value from cfclient. --->
<cfset document.getElementById('orientationId').innerHTML= orientationString>
<cfset document.getElementById('width').innerHTML= cfclient.properties.width>
<cfset document.getElementById('height').innerHTML= cfclient.properties.height>
</cffunction>
</cfclient>

In the above example, addOrientationListener function is used to register a listener that monitors the orientation of the device (landscape or portrait). When the orientation of the device changes, an orientationHandler call back function is invoked.

You can use the removeOrientationListener to un-register the listener:

<cffunction access="public" name="removeorientationhandler"
returntype="void" >
<cfset cfclient.removeOrientationListener(orientationhandler)>
</cffunction>

You can also add multiple listeners:

<cfset cfclient.addOrientationListener(orientationHandler1)>
<cfset cfclient.addOrientationListener(orientationHandler2)>

When the device orientation changes, all the registered listener functions are invoked.

Handling window resizing events

For handling the window resizing events, you can register a listener using the addResizeListener() function:

<cfclientsettings detectDevice=true />
<cfclient>
Width :<b id="width"></b><br>
Height :<b id="height"></b><br>
Device width :<b id="devicewidth"></b><br>
Device height :<b id="deviceheight"></b><br>
<!--- Adding the resize handler here.
After adding the handler, the handler will be
invoked whenever there is a browser
resize. --->
<cfset cfclient.addResizeListener(resizehandler)>
<cffunction access="public" name="resizehandler"returntype="void" >
<cfargument name="width" type="string">
<cfargument name="height" type="string">
<!--- The width and height of the browser will be
passed as arguments to the handler. You can also
get the width/height value from cfclient. --->
<cfset document.getElementById('width').innerHTML= cfclient.properties.width>
<cfset document.getElementById('height').innerHTML= cfclient.properties.height>
<cfset document.getElementById('devicewidth').innerHTML= cfclient.properties.deviceWidth>
<cfset document.getElementById('deviceheight').innerHTML= cfclient.properties.deviceHeight>
</cffunction>
</cfclient>

You can also add multiple listeners:

<cfset cfclient.addResizeListener(resizeHandler1)>
<cfset cfclient.addResizeListener(resizeHandler2)>

When there is a change in window size  all the registered resize listener functions are invoked. You can use removeResizeListener() to un-register the handlers.

<cffunction access="public" name="removeresizehandler"
returntype="void" >
<cfset cfclient.removeResizeListener(resizeHandler)>
</cffunction>

Using the attributes mobileServer and validationCFC, 

<cfclientsettings mobileserver='http://localhost:8500' enabledeviceapi="false" validationcfc='C:\ColdFusion2018\cfusion\wwwroot\CheckAuthFlow\handler.cfc'>

Setting device timeout

In the <cfclientsettings> tag, an attribute called deviceTimeOut can be specified. The default value of deviceTimeout is 10 secs. When enableDeviceApi or detectDevice is set as true, the deviceTimeOut value will be honored. Time will be provided for the required plugins to be loaded. After the specified time, an exception will be thrown.

<cfclientsettings detectDevice=true deviceTimeOut="30" />

Adobe logo

Sign in to your account

Quick Links

View your apps Manage your plans

Legal Notices    |    Online Privacy Policy