Pages

Showing posts with label Eclipse. Show all posts
Showing posts with label Eclipse. Show all posts

Monday, May 19, 2014

How to install PhoneGap for Android using Windows and Eclipse

Hi there! While installing phoneGap on Windows using the newst Eclipse version i've got some problems. That's the reason i wrote this post. The "Getting Started with Android" guide from PhoneGap is good, but does not show all pitfalls you may encounter like i did.


In this post we will learn how to:

  • Install Apache Ant
  • Install Java JDK
  • Install Eclispe Classic
  • Set all needed environment variables (JAVA:HOME, ANT_HOME and so on)
  • Install the Android ADT Plugin for Eclipse
  • Install the Android SDK
  • Intall PhoneGap Apache Cordova 2.2.0
  • Avoid the pitfalls while creating Android Projects


BASE REQUIREMENTS BEFORE STARTING


be sure you have all those tools installed before going further(we will see it step by step don't worry):

  • Pitfall CPU visualization
  • Apache ant (i used 1.8.4) 
  • Java JDK (i used jdk1.7.0_07)
  • Android SDK
  • Eclipse Classic (i used version 4.2.1)
  • All Path variables has been set (JAVA_HOME, ANT_HOME)

PITFALL CPU VISUALIZATION


Before doing all those steps (like i did) go to the end of this post "Launch your project" and check if your CPU supports visualization. If not, go and by another PC first or upgrade your CPU if possible! ;-) Otherwise at the end of this post, you will be disapointed. That's what happened to me, because there was no advise while installing PhoneGap Cordova.

DOWNLOADING APACHE ANT AND SETTING THE ANT_HOME VARIABLE


got to Apache Ant - Binary Distribution and download the version you want. in my case it was the newst one ant 1.8.4(at the time of this blog was written)




create a folder called ANT in the directory "C:\Program Files\" and unzip the downloaded file in it. By me it looks like that: C:\Program Files\ANT\apache-ant-1.8.4


Now copy this path (C:\Program Files\ANT\apache-ant-1.8.4) and set the ANT_HOME path. to do that go to: Start > System Setting > System and Maintenance > System > Advanced System Settings > Environment variable > by System variable click the button new > and then type in: ANT_HOME and C:\Program Files\ANT\apache-ant-1.8.4 into the fields. After that you must add this new variable to you PATH. Look for Path in the box System variable and press edit. Then add you new ANT_HOME path like this to the and of you Path: %ANT_HOME%\bin; Don't worry it is easier as you think. See the screen sequences bellow:





















DOWNLOADING JAVA JDK AND SETTING THE JAVA_HOME VARIABLE


Before doing that, find out which kind of processor your PC supports and then take the version with fits to your PC. (32Bit or 64Bit) To find it out which one you have go to Start > System Setting > System and Maintenance > System then you will see the information of your PC like 32bit or 64bit system. see the screen sequences bellow:









OK, now we will do the same process with the JAVA JDK as we did with ANT in the last section. That's a good exercise to see if you can do it by your self. Go to Java SE Downloads and download the version you want. In my case was jdk1.7.0_07 ath the time i wrote this post.





Good! Now just run the installer by doble clicking it and install it in the default directory it has been proposed by the wizard. Something like this by me: C:\Program Files\Java\jdk1.7.0_07 Now do the same steps as we did by Ant and set theJAVA_HOME variable and add it to your Path.

DOWNLOADING AND INSTALLING ANDROID SDK


Go to: Android SDK and download the installer. Double click it and install it in the proposed default folder. by me it looks like this: C:\Program Files\Android\android-sdk. That's all we need to know about it.




IMPORTANT: Now do the same steps as we did by Ant and set the ANDROID_HOME variable and add it to your Path BUTinstead of selecting a bin-folder you MUST add platform-tools and tools to it like that:


%ANDROID_HOME%\platform-tools; and %ANDROID_HOME%\tools;

DOWNLOADING ECLIPSE CLASSIC AND INSTALLING THE ANDROID PLUGIN


Great! We are fast there. Let's download and install Eclipse now. That's will be our development tool. Go to Eclipse Downloads and download the classic version version you want. In my case was 4.2.1 at the time i wrote this blog. As you know now which platform you have (32bit or 64bit) you can take the one which fits to your PC. In my case it is the 32bit version.







Because i'm using Norton as a security and virus protector, i descided to intall Eclipse in my user home so i do not have problems with admin rights and so on. I recommend to do it that way if you have similar setting. By me i looks like this: C:\Users\Ricardo\IDE\classic In there you unzip the downloaded file. After that you'll have something like this in it: C:\Users\Ricardo\IDE\classic\eclipse. I also recommendo to change the rename the folder eclipse to eclipse-4.2.1. This is useful if you may install other eclipse types and versions later but it is up to you to decide what fits better to you.


Now let's install the Android Plugin. In the directory of your Eclipse double click eclipse.exe to start it.





Close the welcome tab and then select Help > Install new software... and install the ADT Plugin as described bellow. See the screen sequences bellow: PS: After installing Android ADT Eclipse may ask you to restart it. Say yes. At this point the Android SDK Manager may start and shows a list from uninstalled packages to you, just select them all and install it. this may take several minutes.








Alternatively you may go to Installing Eclipse ADT Plugin and take the steps directly from there.


DOWNLOAD AND INSTALL PHONEGAP APACHE CORDOVA


It is getting interresting. Lets download and install Apache Cordova now. Go to: Apache Cordova and download the version you want. At the time of this post it was version 2.1.0.




First pitfall: Do not unzip this file in the default folder C:\Program Files because of the spaces in it. Instead of that, create a new directory called: C:\development and unzip it in there. By me it looks like this: C:\development\cordova-2.1.0. Then in this directory unzip the file incubator-cordova-android. By me it looks like this:



PITFALLS WHILE CREATING PROJECTS


Pitfall one: Do not create your projects in the same directory as the eclipse workspace. This will result in a failure while trying to open your project later with Eclipse.


Pitfall two: Do not create a folder to hold your projects. If you do that, that following Step will fail with the statement: This project exits already! in the window command prompt console. This must be done with the create command we will see bellow.


Creating Projects: That's the interresting part. go into unziped directory called C:\development\cordova-2.1.0\incubator-cordova-android select the bin folder, press and hold the key shift and press right mouse click. From context menu select open command prompt from here. By me it looks like this:







Then run the create command with your coordinates to create a new project. by me it looks like this:


C:\development\cordova-2.1.0\incubator-cordova-android\bin>create C:\Users\Ricar
do\IDE\classic\eclipse\android_projects com.yourcompany.appname projectname

Pitfall: The folder android_projects does not exits already. It will be created with the create command above. If you create it manually before running the create command, you'll get an error saying: This project already exists! So do not create it manually.


A new project will be created. Don't worry if you get a "suposed" error here. Important is to 
check if the project was really created. To be sure go into directory 
C:\Users\Ricardo\IDE\classic\eclipse\android_projects and if there is a
 something like this bellow, then you are fine.





LOADING CREATED PROJECT INTO ECLIPSE


Now we are almost done! Start Eclipse again (if not already running) and press Ctrl + N and
 select Android Project from Existing Code > root to your created folder android_projects 
> select the new created project and press finish. Now we are ready to start. PS: If while
 starting Eclipse the Android SDK Manager starts and shows a list from uninstalled packages

 to you, just select them all and install it. this may take several minutes.





ONE MORE THING! ;-) CREATING AN AVD (ANDROID VIRTUAL DEVICE)


That's the Emulator in which you will simulate a Phone Device. We need to create one 
before starting the App.




LAUNCHING YOUR PROJECT


If you get an error like this bellow, then your processor may not support Visualization. 
To find out if your CPU supports visualization you may go to Intel CPU and check it out 
by typing your CPU type in the search field. In my case, my CPU does not supports 
visualization ;-(












Friends, If you like this post, please share with your friends on Facebook and Google+ and recommend us on Google using the g+1 button on the top right hand corner.

How to Set Up Eclipse for Java Development

Install the Java Run-Time Environment

If you do not already have a desired Java Run-time environment on your computer, you will need to install one. You can go to the Oracle website to download it. You can choose to download either a JRE or a JDK. For most of the functions in Eclipse, a JRE should be sufficient. But I noticed that if you want to develop a Dynamic Web Project, and if you want to debug it with a J2EE Preview server, you will need a JDK to power the Eclipse IDE. In this study note, I chose the JDK version (Java SE 8U5) for windows 64-bit computers and installed it to the default location.
 The installer added both JRE and JDK to the computer. We will need to remember this location and later configure Eclipse to use this particular version of Java Run-time environment.

Download the Eclipse

You can go to the official Eclipse website to download the desired version of Eclipse. In this study note, I downloaded the Eclipse Kepler (4.3.2). There are many Eclipse packages to choose from. Since I will be doing a lot of web application development, I choose the "Eclipse IDE for Java EE Developers" for windows 64-bit computers. The following is the downloaded zip file from the Eclipse website.
After downloading the zip file, you can extract this zip file to any location on your computer.
The "eclipse.exe" file is the file to launch Eclipse on a windows computer. But before lunching Eclipse, we need to configure the desired version of the Java Run-time environment to power it.

Choose the Desired Java Run-time to Launch Eclipse

It is very common that you have multiple versions of Java Run-time environment on your computer. It is desirable to specify the desired one to power Eclipse. According to the Eclipse documentation, there are three common methods to specify the Java Run-time environment.
  • If a Java Run-time environment is installed in the eclipse/jre directory, Eclipse will use it;
  • Otherwise the Eclipse launcher will consult the "eclipse.ini" file and the system path variable. Eclipse does not consult the JAVA_HOME environment variable;
  • You can also choose to directly invoke the desired JVM to start the "jar" file that launches Eclipse. For the version of Eclipse in my study note, it is the "org.eclipse.equinox.launcher_1.3.0.v20130327-1440.jar" file in the "plugins" folder.
According to the Eclipse documentation, the most recommended method is to specify the desired Java Run-time in the "eclipse.ini" file.
In my study note, I added the "-vm" parameter in the "eclipse.ini" file pointing to the JVM that I just installed. After saving the "eclipse.ini" file, we are ready to launch Eclipse.

Launch Eclipse

Add caption
Eclipse organizes the code in "workspaces". A "workspace" is a folder where Eclipse put all your code for your projects. To launch Eclipse, let us create an empty folder called "FirstEclipseWorkspace" anywhere in the computer.
In the windows environment, we can double click the "eclipse.exe" file to launch Eclipse.

During the launching process, Eclipse will ask us to select a "workspace". We can browse to the folder just created and click the "OK" button.
Since the "FirstEclipseWorkspace" folder is empty, Eclipse shows us the welcome page. To double check that Eclipse is indeed powered by the desired version of JVM, we can click on the "Help" menu item and then click on "About Eclipse" to open the "About Eclipse" window.
In the "About Eclipse" window, clicking on the "Installation Details" button will open the "Eclipse Installation Details" window.
We can see that the JVM that powers this instance of Eclipse is indeed the JVM that we specified in the "eclipse.ini" file.

Create a Simple Dynamic Web Project

We have successfully launched Eclipse, now we will create a simple dynamic web project in Eclipse. I will use Tomcat to debug this project. If you do not have a installation of Tomcat on your computer, Eclipse can install it for you and you will need to create a folder on your computer for Eclipse to install Tomcat. Since I will use Tomcat 7 for the development work, I named the folder "Tomcat7".
After creating the Tomcat installation folder, we can create the web project in Eclipse using the project wizard provided by Eclipse.
The project wizard can be launched from the Eclipse menu "File" -> "New" -> "Dynamic Web Project".
Let us give the project a name "SimpleWeProject" and configure the project to use Tomcat. Clicking on the "New Runtime" button will bring us the "New Server Runtime Environment" wizard.
We can select "Apache Tomcat v7.0" and click the "Next" button to set up the Tomcat server for the project.
Since we do not have a Tomcat installation on the computer yet, we can click the "Download and Install" button to install Tomcat in the "Tomcat7" folder that we have created earlier. After the successful installation of Tomcat, The project wizard should look as the following.
Clicking the "Next" button "twice" we will be ready to finish creating the "dynamic web project" using the "New Dynamic Web Project" wizard.
Make sure to check the "Generate web.xml deployment descriptor". By checking this checkbox, the wizard will add the "web.xml" file in the project, which is used to configure a lot of important information about the web application. After clicking the "Finish" button, the wizard will create an empty "dynamic web project" in Eclipse.

Add a Simple Java Server Page to the Project

To add a JSP page to the project, we can right click on the "WebContent" folder -> "New" -> "JSP File" to launch the "New JSP File" wizard.
Give the JSP file the name "index.jsp" and click the "Finish" button, the JSP file is added to the project.
We can then edit the "index.jsp" file. To keep this project as simple as possible, the only thing that "index,jsp" does is to display the text "Eclipse is cool!" in the browser.

Run the Web Project in Eclipse with Tomcat

To run the web project in Eclipse with Tomcat, we can right click on the project "SimpleWeProject" -> "Run As" -> "1Run on Server". A pop up window will show up to let us to select the server to run the application.

Since we have configured the "Target runtime" of this project as "Apache Tomcat v7.0", we can take all the default selections and click the "Finish" button to run the web application in a web browser embedded in Eclipse.

Of course, you can also load the page into a standalone browser. The following picture shows the web page displayed in Firefox.

Friends, If you like this post, please share with your friends on Facebook and Google+ and recommend us on Google using the g+1 button on the top right hand corner.