MobileBrowsers

(Difference between revisions)
(Created page with '* Android Device # Install Android SDK from http://developer.android.com/sdk # Enable USB debugging on Android Device # Webkit debugging works only with Mobile Chrome * iOS # Av…')
(Troubleshooting)
 
(8 intermediate revisions not shown)
Line 1: Line 1:
-
* Android Device
+
__TOC__
-
# Install Android SDK from http://developer.android.com/sdk
+
 
 +
=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 debugging on Android Device
-
# Webkit debugging works only with Mobile Chrome
+
# 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, [http://nodejs.org ensure you have NodeJS installed] and then simply run
 +
<pre>npm install -g cordova</pre>. Cordova also requires [http://git-scm.com 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
+
==iOS==
-
# Available only on Mac
+
'''Create Cordova Application and run in iOS Simulator:'''
-
# install latest xcode from app store
+
# Invoke New Project | HTML5 | Cordova Application
-
# install command line tools and iOS Simulator SDK
+
# 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
-
* NetBeans
+
'''Create Cordova Application and run on iOS Device:''
-
# Go to NetBeans Preferences | Misc Tab and setup PhoneGap and Android locations.
+
# Go to NetBeans Preferences and specify which Code Sign Identity and Provisioning Profile You want to use
-
# Create a new HTML5 project
+
# Invoke New Project | HTML5 | Cordova Application
-
# There are new Mobile Configurations available in browser dropdown. you can open web app in mobile browser
+
# You can use default values in the wizard and push finish
-
# To run webkit debugging session on Android go to Project Properties. Select Run category and select Browser "Android Device" and bellow choose "Chrome" as Browser.
+
# Cordova Application template is instantiated
-
# You can go to Project Properties | PhoneGap and check [x] PhoneGap application. Now you can build and run native apps and deploy them to device
+
# 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.
+
=Troubleshooting=
-
  Device is not recognised by NetBeans
+
  Android Device is not recognised by NetBeans
-
  ''>Run "adb devices" and check if the device is visible for android sdk
+
  ''>use command line and run "adb devices" and check if the device is visible for android sdk
-
  Web app is not opened in chrome, web address not available
+
  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…''
+
  ''>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.

Current revision as of 11:21, 23 August 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 (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