Mobile and Tablet Specific Webskins

Released in FarCry 6.2

One of the cool new features of FarCry 6.2 is the introduction of Mobile and Tablet webskins. While fully responsive designs are cool and all, very often its helpful to use a hybrid approach and deliver *different* views to different device formats.

With FarCry you can add device detection based on client user agent string, and device specific webskins for mobile and tablets.

Mobile webskins are prefixed with mobile* (e.g. mobilePageStandard, mobileBody, mobileTypeBody, etc), and similarly Tablet webskins are prefixed with tablet*. Desktop webskins continue to use the prefix display*. You must ensure the mobile* and tablet* webskin prefixes have been added to the Webskin security section of the Anonymous role for the new device specific webskins to be accessible.

One final note is that any objects that make use of the "displayMethod" property (particularly dmHTML) will automatically detect the appropriate webskin based on the current device type. So if you have a dmHTML object with a displayMethod of "displayPage3Col" and you are currently viewing the site as a "mobile" device the framework will automatically look for a webskin called "mobilePage3Col" and try to use it if it exists, otherwise if you haven't implemented a mobile view for that displayMethod it will fall back to "displayPage3Col" (i.e. the desktop version of the page).

Enabling Device Specific Webskins

Additionally, device detection and device specific webskins must be enabled in your projects `farcryConstructor.cfm` if you wish to use them, e.g:

Changes to farcryConstructor.cfm

<cfset THIS.bUseDeviceDetection = true /> 
<cfset THIS.bUseMobileWebskins = true /> 
<cfset THIS.bUseTabletWebskins = false />

Remember to do an updateapp after changing these settings in the farcryConstructor!

Switching Between Device Modes

To switch between device types (i.e. to provide a link to "Full Site" or "Mobile Site") you can include some JavaScript from core and a HTML anchor (or other clickable element) with a specially crafted class name. In your headers (e.g. displayHeaderStandard and mobileHeaderStandard) load the JavaScript like this (ensure the webskin tag library has been imported):

Add switching JS to your header files

<skin:loadJS id="jquery" /><!--- not required for farcry core 7.x ---> 
<skin:loadJS id="farcry-devicetype" />

And in your footer add links such as (note the double # in case you're putting this inside a cfoutput tag):

Adding links to your footer (or wherever)

<a class="fc-switch-device-desktop" href="##">Full Site</a> 
OR
<a class="fc-switch-device-mobile" href="##">Mobile Site</a>

(Similarly for switching to tablet webskins you would use the classname "fc-switch-device-tablet" and place the relevant JS in your tabletHeaderStandard, etc).