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:

  1. Install Android SDK from http://developer.android.com/sdk (SDK Tools Revision 20 or greater is required)
  2. Enable USB debugging on Android Device
  3. Enable USB Web Debugging in Mobile Chrome
  4. 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:

  1. Install XCode from Mac App Store (XCode 4.6 or greater)
  2. Install command line tools and iOS Simulator SDK
  3. Enable Web Inspector on your iOS Device in mobile Safari Preferences (Settings > Safari > Advanced > Enable Web Inspector).
  4. 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:

  1. Invoke Tools | Options | Miscellaneous | Mobile Platforms and specify android location
  2. Make sure, that your Android 4.0+ device is connected via USB cabel and USB debugging is enabled.
  3. Having web project selected, open browser drop down menu and select Android Device (Chrome)
  4. Invoke Run Project (F6)
  5. Your web page is loaded in Mobile Chrome and you see live DOM in the NetBeans IDE

iOS

Starting web project in iOS Simulator:

  1. Having web project selected, open browser drop down menu and select iOS Simulator
  2. Invoke Run Project (F6)
  3. 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:

  1. Make sure, that your iOS Device is connected to your Mac and Webkit Debugging is enabled in Mobile Safari Preferences.
  2. Open Mobile Safari on your iOS Device
  3. Having web project selected, open browser drop down menu and select iOS Device
  4. 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:

  1. Invoke New Project | HTML5 | Cordova Application
  2. You can use default values in the wizard and push finish
  3. Cordova Application template is instantiated
  4. Use browser chooser button and select "Cordova (Android Device)" browser
  5. Make sure, that your Android Device is connected and USB debugging enabled.
  6. Run Project (F6)
  7. HTML5 project is build as native Android application and it is uploaded to your Android Device and executed.
  8. Live DOM nor other live inspection features are not supported

iOS

Create Cordova Application and run in iOS Simulator:

  1. Invoke New Project | HTML5 | Cordova Application
  2. You can use default values in the wizard and push finish
  3. Cordova Application template is instantiated
  4. Use browser chooser button and select "Cordova (iOS Simulator)" browser
  5. Run Project (F6)
  6. HTML5 project is build as native iOS Simulator application and it is uploaded to iOS Simulator and executed.
  7. You can see Live DOM of your application running in iOS Simulator

'Create Cordova Application and run on iOS Device:

  1. Go to NetBeans Preferences and specify which Code Sign Identity and Provisioning Profile You want to use
  2. Invoke New Project | HTML5 | Cordova Application
  3. You can use default values in the wizard and push finish
  4. Cordova Application template is instantiated
  5. Use browser chooser button and select "Cordova (iOS Device)" browser
  6. Run Project (F6)
  7. 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.
  8. Now Push OK in the NetBeans IDE.
  9. 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.
Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo