How to use Eclipse with App Inventor

Started by Emily Erdman and Lyn Turbak

June 5, 2012

Note: before reading this document make sure you are comfortable with how to download and build App Inventor.

This is a work in progress, please get in touch if you want to help improving it!

Use ant to build your local copy of App Inventor, probably inside the appinventor folder if you have cloned it from github:

     cd appinventor-sources/appinventor

     ant clean

     ant

In appinventor-sources, create an empty bin folder:

     cd appinventor-sources

     mkdir bin

Launch Eclipse.

You may be prompted for a workspace. You may use your default one.

NOTE: If you want to use the EGit plugin within Eclipse, follow the instructions below in the Egit section to import your project (the import process will be the same described here, but there are a couple of additional steps you can take).

In Eclipse, select File>New>Java Project

In the resulting Create a Java Project window

  1. Leave project name empty.
  2. Un-click “Use default location”.
  3. In Location, use Browse to select your appinventor-sources folder
  4. Click Next >

In the resulting Java Settings folder:

  1. When the Source tab is selected (the default = the leftmost tab), in the Default output folder slot at the bottom of the window, use Browse to select the bin subfolder of appinventor-sources (This is the bin folder you created above.)
  2. When the Order and Export tab is selected (the rightmost tab), check or select the *two* occurrences of jar files named android.jar (one from appinventor/lib/android/2.2 and one from appinventor/buildserver/build/classes/BuildServer/files) and click the Bottom button  to move them to the bottom of the list. (This step prevents the dreaded red X error messages in Eclipse due to the isEmpty() method.)
  3. Click Finish
  4. In the window that pops up which says: “The output folder has changed. Do you want to remove all generated resources from the old location...?” Click “Yes”.

You should now have an appinventor-sources project in Eclipse without errors. (We like to view it with the Package Explorer.) Eclipse’s automatic build process will put .class files in appinventor-sources/bin, but you don’t care about these. Use ant to build appinventor as usual.

Style Guide

Eclipse defaults to using Tabs of size four but the style guides for App Inventor are:

“We indent by two spaces, with four spaces for line continuations.  Never use tab characters.”

To change this in Eclipse go to:

Project --> Properties --> Java Code Style --> Formatter

Once there check the box that reads: ‘Enable project specific settings’ and click the ‘Edit’ button.

You will have to change the Profile name to be able to save it, and in the first tab called ‘Indentation’ you can choose to use ‘Spaces only’ as you Tab policy, and use a size of 2. On this same tab, under the indent section check all boxes except ‘Empty lines’.

On the seventh tab called ‘Line Wrapping’, under ‘general settings’ change the ‘Maximum line width’ to 100.

Here is a style profile that you can feel free to import to Eclipse and use. I can’t guarantee that it is correct for all cases but I have been using it for the last 6 months or so without too many issues. Feel free to make and share updates.

Integrate EGit

Started by Kate Feeney

June 27, 2012

Note: New releases of Eclipse come with a the EGit plugin already installed. This includes Eclipse Juno and also the new ADT bundle that can be downloaded from the Android developers site.

For older versions of eclipse, EGit can be installed as a plugin by following the instructions at: http://www.eclipse.org/egit/download/

This section shows how to use EGit within App Inventor; for more details about EGit itself please consult the documentation at: http://www.eclipse.org/egit/

Setting up the project

These instructions work under the assumption that you do NOT have the App Inventor sources already imported in Eclipse. If you already have it, you can either delete it (not off the disk just from Eclipse), or skip steps 2 and 3, and instead right click on your already existing project and click on ‘Team → Share Project’ after you have configured your repo in step 1 below.  (Newer versions of Eclipse may do the below automatically)

With Eclipse opened go to: Window → Open Perspective → Other... and select Git Repository Exploring. Click OK Once in the Git Repositories View:

  1. Add your appinventor-sources repository.
  1. Click on the icon for adding an existing local git repository to this view (it is the yellow database icon with the green plus sign and says git)
  2. Click Browse... to select your appinventor-sources directory
  3. Under search results a repository will appear with the checkbox marked next to it. Click Finish.
  4. Now your app-inventor repository is listed in the Git Repository view.
  1. Import the project into Eclipse
  1. Select the app-inventor repository in the Git Repository view.
  2. Right click on it.
  3. Select Import Projects
  4. Select the option to use the New Project wizard and then click Finish.
  1. The project wizard will launch select JavaProject.  Follow the same direction described above for importing you project, starting right after the select File>New>Java Project instructions.

Now if you switch back to the Java Perspective ( in the top right hand corner there are icons for each perspective, click the one for Java) the appinventor project will be listed in your projects.

EGit configuration

Make sure you go to Preferences → Team → Git and add your user name and email for using Git.

If you are using Git through SSH. also make sure your configuration in Preferences → General → Network → SSH2 are correct. You can generate ssh keys in the tab ‘Key Management’ if you haven’t done so before. ssh keys are generally stored in your user’s home folder; somewhere like: ~/.ssh/ or C:\Users\username\.ssh

There is some additional configuration you can use so that EGit marks the code that has been changed in the editor, and also gives you a quick diff preview of changes.

To get this working go to Preferences and filter by the word ‘quick’; this should show an option called ‘General → Editors → Text Editors → Quick Diff’. Clicking on quick diff, mark ‘Enable Quick Diff’ and ‘Show differences in overview ruler’, and in the drop box for reference source choose ‘A Git Revision’. Feel free to change the colours in there too. From now on (after restarting the editor) you should be able to see the changes with respect to HEAD as shown in the following images, the first one showing that a change happened in Line 429, and the second hovering over Line 429 to show the quick diff:

Using EGit

Most EGit features can be found by right clicking on your project -> Team

Local Branches

1. Right click on your project -> Team -> Show in Repository View.  The Git Repository View will appear

2. Expand the appinventor-sources repository by clicking on the arrow next to it.

3. The first item listed should be Branches. Expand Branches.

4. Inside Branches expand Local to see a list of all your local branches. This is where the foocomp branch would be listed following the example from Developing MIT App Inventor with gitHub and github.com.

5. There will be a check mark indicating which branch is checked out. If you would like to check out a different branch simply double click on that branch.

Potential future tasks

Adding this section for future things that could be beneficial to look at (please keep on adding!):