Each device and platform offers a rich set of functionality. However, it is difficult to identify a set of features which are available across devices and platforms. In addition, even if we happen to find out the list of common features, there may be reasons where you may want to use a feature on a device which is not present on other devices and you would make your application work on those devices by performing the best approximation of that specific feature. For example, on a device if SVG is supported, you may want to make use of that feature in your application to render images using it, so that they are scalable. However, if another device does not support SVG, you may want to fall back to rendering your image into JPEG/PNG, so that the image will be visible to the user. This recipe describes how an application can detect the different features that a device supports. This comes in very handy to enable/disable certain application features based on the device-supported features.
Carry out the following steps:
Create and open a new file named
ch01_03.jsin thech01folder and paste the following code into it:Ext.setup({ onReady: function() { var supportedFeatures = "Ext.supports.AudioTag : " + (Ext.supports.AudioTag ? "On" : "Off"); supportedFeatures += "\nExt.supports.CSS3BorderRadius : " + (Ext.supports.CSS3BorderRadius ? "On" : "Off"); supportedFeatures += "\nExt.supports.CSS3DTransform : " + (Ext.supports.CSS3DTransform ? "On" : "Off"); supportedFeatures += "\nExt.supports.CSS3LinearGradient : " + (Ext.supports.CSS3LinearGradient ? "On" : "Off"); supportedFeatures += "\nExt.supports.Canvas : " + (Ext.supports.Canvas ? "On" : "Off"); supportedFeatures += "\nExt.supports.DeviceMotion : " + (Ext.supports.DeviceMotion ? "On" : "Off"); supportedFeatures += "\nExt.supports.Float : " + (Ext.supports.Float ? "On" : "Off"); supportedFeatures += "\nExt.supports.GeoLocation : " + (Ext.supports.GeoLocation ? "On" : "Off"); supportedFeatures += "\nExt.supports.History : " + (Ext.supports.History ? "On" : "Off"); supportedFeatures += "\nExt.supports.OrientationChange : " + (Ext.supports.OrientationChange ? "On" : "Off"); supportedFeatures += "\nExt.supports.RightMargin : " + (Ext.supports.RightMargin ? "On" : "Off"); supportedFeatures += "\nExt.supports.SVG : " + (Ext.supports.SVG ? "On" : "Off"); supportedFeatures += "\nExt.supports.Touch : " + (Ext.supports.Touch ? "On" : "Off"); supportedFeatures += "\nExt.supports.Transitions : " + (Ext.supports.Transitions ? "On" : "Off"); supportedFeatures += "\nExt.supports.TransparentColor : " + (Ext.supports.TransparentColor ? "On" : "Off"); supportedFeatures += "\nExt.supports.VML : " + (Ext.supports.VML ? "On" : "Off"); Ext.Msg.alert("INFO", supportedFeatures); } });Remove the following line from
index.html:<script type="text/javascript" charset="utf-8" src="ch01/ch01_02.js"></script>
Include the following line in
index.html:<script type="text/javascript" charset="utf-8" src="ch01/ch01_03.js"></script>
Deploy and run the application.
Check that the support for different features is encapsulated inside the Sencha Touch's Ext.supports class. This class applies different mechanisms to find out whether a requested feature is supported by the target platform/device. For example, to find out whether the device supports touch, this class checks whether ontouchstart
is present in the window object. Another example is, to find out whether SVG is supported on the target platform, it tries to add an SVG element (which it removes after successful creation and setting the flag to indicate that the device supports SVG) to the document.