MobileBrowsers
Contents |
Introduction
NetBeans 7.4 supports HTML5 and JavaScript development for mobile devices (Android and iOS).
Requirements
Android
NetBeans 7.4 supports development, deploying, debugging and live CSS styling on Android devices. Debugging features are available only in Android 4.0+ with Mobile Chrome Web Browser. (Chrome is not available in Android Emulator)
Setup Instructions:
- Install Android SDK from http://developer.android.com/sdk (SDK Tools Revision 20 or greater is required)
- Enable USB debugging on Android Device
- Enable USB Web Debugging in Mobile Chrome
- Mobile device must be on the same network as developer machine.
iOS
NetBeans 7.4 supports development, deploying, debugging and live CSS styling also on iOS Devices. Support for iOS is available only on Mac. Debugging is available for iOS 6.0+.
Setup Instructions:
- Install XCode from Mac App Store (XCode 4.6 or greater)
- Install command line tools and iOS Simulator SDK
- Enable Web Inspector on your iOS Device in mobile Safari Preferences (Settings > Safari > Advanced > Enable Web Inspector).
- Mobile device must be on the same network as developer machine.
Cordova
NetBeans 7.4 is able to build HTML5 project as Cordova Application and deploy it to Android or iOS Device or Simulator. The IDE also supports live styling and debugging on iOS Device or Simulator.
Setup Instructions: Follow instructions at http://www.phonegap.com and install cordova: First, ensure you have NodeJS installed and then simply run
npm install -g cordova. Cordova also requires git to be installed. NetBeans requires both cordova and git to be on your PATH.
Mobile Browsers
NetBeans 7.4 can open any html page in mobile web browser.
Android
Starting web project on Android Device:
- Invoke Tools | Options | Miscellaneous | Mobile Platforms and specify android location
- Make sure, that your Android 4.0+ device is connected via USB cabel and USB debugging is enabled.
- Having web project selected, open browser drop down menu and select Android Device (Chrome)
- Invoke Run Project (F6)
- Your web page is loaded in Mobile Chrome and you see live DOM in the NetBeans IDE
iOS
Starting web project in iOS Simulator:
- Having web project selected, open browser drop down menu and select iOS Simulator
- Invoke Run Project (F6)
- iOS Simulator is started and your web page is loaded in Mobile Safari and you can see live DOM in the NetBeans IDE.
Starting web project on iOS Device:
- Make sure, that your iOS Device is connected to your Mac and Webkit Debugging is enabled in Mobile Safari Preferences.
- Open Mobile Safari on your iOS Device
- Having web project selected, open browser drop down menu and select iOS Device
- Your web page is loaded in Mobile Safari on connected iOS Device. You see live DOM in the NetBeans IDE
Cordova
NetBeans 7.4 can build HTML5 project as native Android or iOS application.
Android
Create Cordova Application and run on Android Device:
- Invoke New Project | HTML5 | Cordova Application
- You can use default values in the wizard and push finish
- Cordova Application template is instantiated
- Use browser chooser button and select "Cordova (Android Device)" browser
- Make sure, that your Android Device is connected and USB debugging enabled.
- Run Project (F6)
- HTML5 project is build as native Android application and it is uploaded to your Android Device and executed.
- Live DOM nor other live inspection features are not supported
iOS
Create Cordova Application and run in iOS Simulator:
- Invoke New Project | HTML5 | Cordova Application
- You can use default values in the wizard and push finish
- Cordova Application template is instantiated
- Use browser chooser button and select "Cordova (iOS Simulator)" browser
- Run Project (F6)
- HTML5 project is build as native iOS Simulator application and it is uploaded to iOS Simulator and executed.
- You can see Live DOM of your application running in iOS Simulator
'Create Cordova Application and run on iOS Device:
- Go to NetBeans Preferences and specify which Code Sign Identity and Provisioning Profile You want to use
- Invoke New Project | HTML5 | Cordova Application
- You can use default values in the wizard and push finish
- Cordova Application template is instantiated
- Use browser chooser button and select "Cordova (iOS Device)" browser
- Run Project (F6)
- HTML5 project is build as native iOS application and it is uploaded to iTunes. Now you are asked to install application using iTunes on your device and then tap on it.
- Now Push OK in the NetBeans IDE.
- The IDE connects to your application running on your iOS Device. You can see Live DOM and you can use all live inspection features.
Troubleshooting
Android Device is not recognised by NetBeans >use command line and run "adb devices" and check if the device is visible for android sdk Web app is not opened in chrome or safari, web address not available >Both developer machine and mobile device must be on the same network. Check firewalls etc… Web inspection features do not work with Mobile Safari >Make sure, that Web Inspector is enabled on your device. Settings > Safari > Advanced > Enable Web Inspector Connecting to iPhone or iPad is slow >Check if iTunes is synchronising your device. Wait for synchronisation to finish.
