- Sencha Touch Cookbook
- Ajit Kumar
- 537字
- 2021-08-20 15:56:07
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 thech01
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
.
See also
- The recipe named Setting up the browser-based development environment in this chapter
- The recipe named Setting up the production environment in this chapter
- 在最好的年紀學Python:小學生趣味編程
- Learning ArcGIS Pro 2
- Web交互界面設計與制作(微課版)
- 軟件測試工程師面試秘籍
- Learning AWS Lumberyard Game Development
- 自制編程語言
- Scala編程實戰(原書第2版)
- PHP 7+MySQL 8動態網站開發從入門到精通(視頻教學版)
- 低代碼平臺開發實踐:基于React
- 小程序,巧應用:微信小程序開發實戰(第2版)
- INSTANT Silverlight 5 Animation
- Machine Learning for Developers
- 交互式程序設計(第2版)
- Go語言入門經典
- Learning Unreal Engine Game Development