Preparing the development machine
Setting up the environment for developing Kendo UI Mobile applications is simple and straightforward. Create a base HTML file, add the required .js and .css Kendo UI Mobile file references and you are ready to go. You will only require a text editor to develop Kendo UI applications unless you want to use an HTML IDE such as Visual Studio, Dreamweaver, or Komodo. The only external dependency for Kendo UI is jQuery. Always check the version of jQuery supported by the version of Kendo UI you are using. There is no guarantee that the latest version of jQuery will be supported by the latest version of Kendo. So the safest way is to use the jQuery file available with the Kendo UI package.
You can use any operating system with an HTML5-supported browser to develop Kendo UI Mobile applications. The process that we will follow in this book to develop the mobile app will be to do the development on a desktop machine and run it on an emulator and a mobile device as a mobile website. The IDE we will be using is Visual Studio 2012 and the emulator will be Ripple from Research In Motion (RIM). If you are not comfortable using Visual Studio, feel free to use any HTML editor or a text editor; you will hardly feel any difference.
Tip
If you don't have Microsoft Visual Studio, a free copy of Visual Studio Express 2012 for web or a trial version of other flavors can be downloaded from this link: http://www.microsoft.com/visualstudio/downloads
Ripple Emulator
Mobile application development is different from desktop application development as the former is developed on a desktop and deployed on a mobile device, and the latter is developed and used on a desktop computer. Testing and debugging apps on mobile devices is not straightforward and sometimes close to impossible. As a result, emulators play a key role in testing and debugging mobile applications on desktops.
Ripple Emulator is one of the preferred emulators in the market which emulates a wide variety of mobile platforms such as Android, iOS, and BlackBerry. Ripple offers the ability to debug HTML5 mobile applications, giving full visibility into how the app will look in different platforms. Ripple helps developers to implement automated testing, JavaScript debugging, and multiple device and screen resolution emulation in real time without having to redeploy the mobile application or restart the emulator.
Ripple runs as a Google Chrome browser extension and so you will need to have Google Chrome installed on your machine.
Installing Ripple Emulator
The installation of Ripple is pretty straightforward and can be done in the following easy steps:
- Install the Google Chrome browser if it's not already installed and navigate to the Google Chrome store: https://chrome.google.com/webstore/.
- Search for Ripple Emulator.
- Now click on the ADD TO CHROME button.
- Click on Add when the following popup appear:
- Ripple will now be installed on your Chrome browser and can be enabled/disabled using the Ripple icon that appears on the top-right corner of the browser:
- Now let's visit the mobile website of reuters.com and see Ripple in action. Enter http://mobile.reuters.com/ on the browser address bar and when the website loads, click on the Enable button. If Ripple asks to select a platform to test with, select a platform of your choice. I am selecting Apache Cordova/PhoneGap so that we can emulate the behavior of a mobile app bundled using Cordova/PhoneGap. Once inside the emulator, you can select a device from the Devices list on the left. Let's select iPhone 5 and see how reuters.com appears on iPhone 5:
Ripple comes with lots of features such as changing device orientation, shaking the device, setting geolocation, and firing platform-specific events which helps developers to test and debug mobile applications on their desktop. We would highly recommend playing with Ripple Emulator a little bit at this point and getting a feel of all its features.
Tip
To test your mobile application locally using Ripple Emulator, it needs to be hosted as a website using your local web server. To learn more about Ripple, visit: https://developer.blackberry.com/html5/documentation/getting_started_with_ripple_1866966_11.html
Of course, nothing can replace the actual testing on mobile devices. In many cases, the Kendo UI Mobile styles look better on mobile devices than on desktop browsers. If you are serious about the application that you are developing, make sure you get your hands on all the target devices and do some rounds of testing before deploying the application.
- Go Web編程
- TypeScript Essentials
- Learning Cython Programming
- C語言程序設(shè)計(jì)（第3版）
- Machine Learning with R Cookbook（Second Edition）
- Python Deep Learning
- Java游戲服務(wù)器架構(gòu)實(shí)戰(zhàn)
- C語言程序設(shè)計(jì)
- Learning OpenStack Networking（Neutron）（Second Edition）
- 圖數(shù)據(jù)庫實(shí)戰(zhàn)
- Go語言底層原理剖析
- Flask Web開發(fā)：基于Python的Web應(yīng)用開發(fā)實(shí)戰(zhàn)（第2版）
- Python硬件編程實(shí)戰(zhàn)
- jQuery Essentials
- Python GUI設(shè)計(jì)tkinter菜鳥編程（增強(qiáng)版）