MobileBrowsers

Contents 1 Introduction 2 Requirements 2.1 Android 2.2 iOS 2.3 PhoneGap 3 Mobile Browsers 3.1 Android 3.2 iOS 4 PhoneGap 4.1 Android 4.2 iOS 5 Troubleshooting

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
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
2. Install command line tools and iOS Simulator SDK
3. Enable WebKit Debugging on your iOS Device in mobile Safari Preferences.
4. Mobile device must be on the same network as developer machine.

PhoneGap

NetBeans 7.4 is able to build HTML5 project as PhoneGap 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:

1. Download and install PhoneGap from http://www.phonegap.com

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

PhoneGap

NetBeans 7.4 can build HTML5 project as native Android or iOS application.

Android

Create PhoneGap Application and run on Android Device:

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

iOS

Create PhoneGap Application and run in iOS Simulator:

1. Invoke New Project | HTML5 | PhoneGap Application
2. Specify PhoneGap Location and choose which Code Sign Identity and Provisioning Profile you want to use.
3. You can use default values in the wizard and push finish
4. PhoneGap application template is instantiated
5. Use browser chooser button and select "PhoneGap (iOS Simulator)" browser
6. Run Project (F6)
7. HTML5 project is build as native iOS Simulator application and it is uploaded to iOS Simulator and executed.
8. You can see Live DOM of your application running in iOS Simulator

Create PhoneGap Application and run on iOS Device:

1. Invoke New Project | HTML5 | PhoneGap Application
2. Specify PhoneGap Location and choose which Code Sign Identity and Provisioning Profile you want to use.
3. You can use default values in the wizard and push finish
4. PhoneGap application template is instantiated
5. Use browser chooser button and select "PhoneGap (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…