MobileBrowsers

(Difference between revisions)
Line 7: Line 7:
==Android==
==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)
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:  
+
 
 +
'''Setup Instructions:'''
# Install Android SDK from http://developer.android.com/sdk
# Install Android SDK from http://developer.android.com/sdk
# Enable USB debugging on Android Device
# Enable USB debugging on Android Device
Line 14: Line 15:
==iOS==
==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+.
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:
+
 
 +
'''Setup Instructions:'''
# Install XCode from Mac App Store
# Install XCode from Mac App Store
# Install command line tools and iOS Simulator SDK
# Install command line tools and iOS Simulator SDK
Line 21: Line 23:
==PhoneGap==
==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.
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:
+
 
 +
'''Setup Instructions:'''
#Download and install PhoneGap from http://www.phonegap.com  
#Download and install PhoneGap from http://www.phonegap.com  
Line 27: Line 30:
NetBeans 7.4 can open any html page in mobile web browser.
NetBeans 7.4 can open any html page in mobile web browser.
==Android==
==Android==
-
Starting web project on Android Device:
+
'''Starting web project on Android Device:'''
# Invoke Tools | Options | and specify android location
# Invoke Tools | Options | and specify android location
# Make sure, that your Android 4.0+ device is connected via USB cabel and USB debugging is enabled.
# Make sure, that your Android 4.0+ device is connected via USB cabel and USB debugging is enabled.
Line 35: Line 38:
==iOS==
==iOS==
-
Starting web project in iOS Simulator:
+
'''Starting web project in iOS Simulator:'''
# Having web project selected, open browser drop down menu and select iOS Simulator
# Having web project selected, open browser drop down menu and select iOS Simulator
# Invoke Run Project (F6)
# 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.
# 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:
+
'''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.
# 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
# Open Mobile Safari on your iOS Device
Line 50: Line 53:
NetBeans 7.4 can build HTML5 project as native Android or iOS application.
NetBeans 7.4 can build HTML5 project as native Android or iOS application.
 +
==Android==
 +
'''Create PhoneGap Application and run on Android Device:'''
 +
# Invoke New Project | HTML5 | PhoneGap Application
 +
# Specify Android and PhoneGap Location
 +
# You can use default values in the wizard and push finish
 +
# PhoneGap application template is instantiated
 +
# Use browser chooser button and select "PhoneGap (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 PhoneGap Application and run in iOS Simulator:'''
 +
# Invoke New Project | HTML5 | PhoneGap Application
 +
# Specify PhoneGap Location and choose which Code Sign Identity and Provisioning Profile you want to use.
 +
# You can use default values in the wizard and push finish
 +
# PhoneGap application template is instantiated
 +
# Use browser chooser button and select "PhoneGap (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 PhoneGap Application and run on iOS Device:'''
-
 
+
# Invoke New Project | HTML5 | PhoneGap Application
 +
# Specify PhoneGap Location and choose which Code Sign Identity and Provisioning Profile you want to use.
 +
# You can use default values in the wizard and push finish
 +
# PhoneGap application template is instantiated
 +
# Use browser chooser button and select "PhoneGap (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=
=Troubleshooting=

Revision as of 11:32, 12 June 2013

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
  2. Enable USB debugging on Android Device
  3. Enable USB Web Debugging in Mobile Chrome

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.

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 | 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

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
>Your laptop and device must be on the same network. Check firewalls etc…
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