Two-Minute Tutorials 0.1

TMT0.1 User Tips for AppLaud including DDMS and AVD

This tutorial provides tips for AppLaud users who have completed the first Two-Minute Tutorial, TMT0, or the equivalent (create project, edit, run on Android device or AVD). Tips and suggestions for using Eclipse, JSLint, DDMS and AVD aimed at improving your development cycle.

  • Using DDMS
  • AVD – Android Virtual Device
  • Eclipse and AppLaud User Tips

Note: As keyboard shortcuts are different on Windows/Mac/Linux, they are not provided here. Please refer to the shortcuts provided on the menu items.

Using DDMS (Dalvik Debug Monitor Server)

Android Developers Guide: Using DDMS

Open the DDMS Perspective

  • Window -> Open Perspective -> Other.. -> DDMS
  • OR: Click on the Open Perspective icon (shown below) and select Other -> DDMS

Select a Device in the Devices View

  • In the Devices window (upper left by default) select the device. The AVD is selected in the image below:

Clear Output in LogCat

  • In the right side of the LogCat View menu, select the Clear Log button (shown below):

Add Debug Output to your JavaScript

Use console.log(<string>); in your javascript to view string/value, including line number, in LogCat. The string will appear mixed in with all other output, usually in green.

  • Note console.log is not supported on many HTC devices. A workaround is to use weinre. More details here.

Find a JavaScript Error in LogCat

To filter the LogCat output to show only errors (will appear in red), select the Error button (red E in image above).

To demonstrate what a caught error in javascript may look like in the DDMS LogCat, an error was inserted at line 69 of the file mappapp.js. The image below shows the error description in red:

05-08 15:33:24.444: ERROR/Web Console(10264): Uncaught TypeError: Cannot read property ‘latitude’ of undefined at file:///android_asset/www/mapapp.js:69

Configuring the AVD (Android Emulator)

Include SDK Tools and support for the AVD

  • Make sure you’ve completed step 4 (Configure ADT Plugin) in Get Started with AppLaud

Launch the SDK Manager and Create a New AVD Android Emulator

  • Android Developer Instructions: Managing an AVD
  • Android Developer Instructions: Launching an AVD

Customize the Hardware emulation components in the AVD

Depending on the app’s needs, it may be required to explicitly include hardware emulation components when creating a new AVD. For example, TMT3 requires an SD Card. A few examples are:

  • SD Card
  • Accelerometer
  • Touch-screen Support
  • Audio Support
  • GPS Support

Note: When you are ready to run your app on the AVD, the list of created AVD’s will appear in the Run Configuration menu. Review TMT0 Part 2 Step 5.a for more information.

Tips for getting the most from AppLaud and Eclipse

Eclipse Terms

  • Views
  • Perspective – The configuration of a set of views for a related set of functions. Switch in the top right corner.
  • Preferences – see Window -> Preferences

Add the Console or Other View to the JavaScript Perspective

  • Window -> Show View -> Console

Restore Default Perspective Views and Layout

  • Window -> Reset Perspective

Maximize/Minimize View in Eclipse Window

  • Double click on top bar of that view (e.g. top area of Editor) to toggle between max/min
  • OR: Click on Minimize of Maximize icon in upper right corner of that view

Easily Manage Perspectives in the Perspectives Tab

  • Expand the space in the “Perspectives Tab” by grabbing the light colored tab indicator (see mouse pointer below) and stretching it left to reveal the entire open Perspective list. Default size of this tab shows only one open Perspective
  • This enables easy navigation between Perspectives by simply clicking on the desired Perspective

Toggle AppLaud’s JSLint on a Project

Right click on project, select Enable/Disable jslint4java

Customize AppLaud’s JSLint

Window -> Preferences -> jslint4java

Toggle Comments in Source Code with Key Input and/or Menu

Highlight line or lines to be un/commented then:

  • Source -> Toggle Comment
  • Source -> Add Block Comment
  • Source -> Remove Block Comment

Place Cursor in desired position then Generate Comment Element with:

  • Source -> Generate Element Comment

Editor Preferences

  • Window -> Preferences -> (+) General -> (+) Editors -> (+) Structured Text Editors OR (+) Text Editors

Format Source Code

Highlight line or lines to be formatted then:

  • Source -> Format

Switch Views, Perspectives or Editors

  • Window -> Navigation