- ColdFusion Developers Guide
- Develop ColdFusion applications
- Introducing ColdFusion
- Changes in ColdFusion
- Changes in ColdFusion
- Replacement of JRun with Tomcat
- Security enhancements
- ColdFusion WebSocket
- Enhanced Java integration
- ColdFusion ORM search for indexing and search
- Solr enhancements
- Scheduler enhancements
- Integration with Microsoft Exchange Server 2010
- RESTful Web Services in ColdFusion
- Lazy loading across client and server in ColdFusion
- Web service enhancements
- Displaying geolocation
- Client-side charting
- Caching enhancements
- Server update using ColdFusion Administrator
- Secure Profile for ColdFusion Administrator
- Introduction to application development
- The CFML programming language
- Building blocks of ColdFusion applications
- Develop CFML applications
- Develop CFML applications
- Design and optimize a ColdFusion application
- Handle errors
- Use persistent data and locking
- Use ColdFusion threads
- Secure applications
- Client-side CFML (for mobile development)
- Use the ColdFusion debugger
- Debugging and Troubleshooting Applications
- Develop globalized applications
- REST enhancements in ColdFusion
- Authentication through OAuth
- Social enhancements
- Develop mobile applications
- Access and use data
- ColdFusion ORM
- ColdFusion and HTML5
- Flex and AIR integration in ColdFusion
- Request and present information
- Office file interoperability
- ColdFusion portlets
- Work with documents, charts, and reports
- Use web elements and external objects
- Use external resources
- Send and receive e-mail
- Interact with Microsoft Exchange servers
- Interact with remote servers
- Manage files on the server
- Use event gateways
- Create custom event gateways
- Use the ColdFusion extensions for Eclipse
- Use the data services messaging event gateway
- Use the data management event gateway
- Use the FMS event gateway
- Use the instant messaging event gateways
- Use the SMS event gateway
Detecting the device characteristics
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.
Note: If detectDevice is set to false, all <div> elements need to be defined before the <cfclient> block.
Supported device detection features
The following example shows the usage of the device detection feature:
<cfClientSettings detectDevice=true /> |
In the above example, we are trying to find if the device supports HTML5 Canvas. cfclient.properties.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 |
Touch Events |
cfclient.properties.touch |
Canvas Text |
cfclient.properties.canvastext |
Canvas |
cfclient.properties.canvas |
Geolocation |
cfclient.properties.geolocation |
Web Sockets |
cfclient.properties.websockets |
Drag ‘n Drop |
cfclient.properties.draganddrop |
History |
cfclient.properties.history |
applicationCache |
cfclient.properties.applicationcache |
localStorage |
cfclient.properties.localstorage |
Width |
cfclient.properties.width |
Height |
cfclient.properties.height |
Device Width |
cfclient.properties.deviceWidth |
Device Height |
cfclient.properties.deviceHeight |
Orientation |
cfclient.properties.orientation |
Device Group Name |
cfclient.properties.deviceGroupName |
Device Group Descriptions |
cfclient.properties.deviceGroupDescription |
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 2D Transforms |
cfclient.properties.csstransforms |
CSS 3D Transforms |
cfclient.properties.csstransforms3d |
CSS Transitions |
cfclient.properties.csstransitions |
Audio |
cfclient.properties.audio |
Video |
cfclient.properties.video |
Hash Change |
cfclient.properties.hashchange |
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) |
Post Message |
cfclient.properties.postmessage |
Session Storage |
cfclient.properties.sessionstorage |
Web Workers |
cfclient.properties.webworkers |
Web SQL Database |
cfclient.properties.websqldatabase |
For the description on all above mentioned features, see the Modernizr 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 /> |
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 /> |
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" |
You can also add multiple listeners:
<cfset cfclient.addOrientationListener(orientationHandler1)> |
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 /> |
You can also add multiple listeners:
<cfset cfclient.addResizeListener(resizeHandler1)> |
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" |
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" />