Leverage Your HTML5 Savvy to Build Commercial, Cross-Platform Apps and Games - Page 2

By Bill Hatfield  |  eMail Email    Print Print  

Exploring the IDE

The IDE is the integration point for all the features provided by the XDK. I’ll give you a quick run-down of what you’re seeing here.

The Toolbar

As you can see there’s a colorful button bar along the top of the screen. As you’d expect, this provides access to common features.


Going from left to right, here’s a quick description of each button. You can always see the button’s name by hovering over it.

  • Intel logo – It’s not a button. They just want to remind you who’s responsible for all this coolness.
  • Toggle Emulation/Editor – It toggles between the emulator, which is running your app and the editor where you modify the source code.
  • New application – Provides options for a variety of templates and demo applications you can use as a starting point for your new project. When new projects are created, they are stored on your local machine and can later be pushed to the cloud (on Intel’s servers). This makes it easy to develop and run your app on multiple machines and multiple platforms – including the target devices.
  • Project selector (or Switch application) – Switching between several projects you’re working on is simple with this dropdown. It’s also handy for jumping to the provided demos to steal (er, borrow) their code to use in your own projects.
  • Add release and Delete release – Provide source code and release management capabilities.
  • Open project folder – This is not the button you use to open a new project in the IDE. Use the Project selector for that. This button opens Windows Explorer, showing the folder that holds your project files.
  • Edit source code – Like Open project folder, this button doesn’t do what you might expect at first. The editor that’s built-in to the IDE is quite capable. But if you prefer, you can use your own favorite editor to develop your applications and use the IDE for compiling, emulating and building. If you do use a different editor, this button will launch that editor with the project you’re currently working with in the emulator.
  • Show/Hide Debug Console – One benefit of hosting the XDK IDE in Chrome is that you can use Chromes powerful built-in debugger to chase down problems in your HTML/JavaScript. This button opens and closes the debug console panel at the bottom of the browser window.

Debug Button

  • Test on Local WiFi – Opens a window that walks you through the steps you need to do on your device to test your app there via WiFi.
  • App Tester – Like Test on Local WiFi, this window provides instructions for a tester to open an app that you’ve provided access to. This will push your application to the cloud and the App Tester will need to have a local instance installed on your mobile device to pull your app from the cloud.
  • Send app link – Makes your app available to others so that they can test it.
  • Build for app store – When you’re ready to create your final build for submission, this is the place to go.
  • Previous Builds – Access previous builds for reference or troubleshooting.
  • Credentials – Allows you to set up oAuth or another credential system for use with your app.
  • API documentation – Links to the online API documentation page.
  • Help – Shows a menu with links to a variety of sources for information.
  • Account settings – Change your email, password and other features.
  • Logout – End the current session.

The Device Simulation Features

Mobile devices come in a variety of shapes and can be held and used in a variety of ways. The panels along the right provide a way of simulating some of these features in the emulator.

Device Emulation

Starting from the top:

  • DEVICE EMULATION – Select the device you want to emulate. This not only changes the look of the emulator, it sets the screen resolution appropriately so you can see how your user interface adapts.
  • ACCELEROMETER – Simulates tilting the device in three dimensions.
  • DATA CONNECTION – How does your application respond when bandwidth is limited or not available?
  • GEOLOCATION – If your app features geolocation features (i.e. where’s the nearest Mexican restaurant?), you don’t want to go traipsing all over the country just to test it! The bottom panel allows you to test your application as if it were at the location specified.

The Emulator Button Bar

Finally a few common emulator commands are available in the vertical button bar that appears on the left (only when you’re in emulation mode).

Vertical Button Bar

From the top:

  • Reload the app – Get into the habit of clicking on this immediately when you switch from the editor to the emulator. It re-retrieves the current files in your application and starts again from your home screen. If you don’t click, you may be running an older version of your app!
  • Rotate – Locks the current rotation.
  • Push Notifications – Provides the ability to simulate pushed message.
  • Enable multiTouch Emulation – Allows you to simulate multi-touch interactions with the emulator by using right-clicks along with left-clicks. Clicking this button will provide directions.

Page 2 of 6

Previous Page
1 2 3 4 5 6
Next Page

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  • HTML5 eBook

    HTML5 ebook

    HTML5 is the new standard that is expected to take over the Web. New versions of browsers are already starting to support the advanced features. Learn why HTML5 is important and discover how to use start using it today.
  • Html5 Logo