Finding information about features that are supported in the current environment

上QQ阅读APP看书，第一时间看更新

Finding information about features that are supported in the current environment

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.

How to do it...

Carry out the following steps:

Create and open a new file named ch01_03.js in the ch01 folder 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.

How it works...

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.