Going Native: Using Mobl with PhoneGap

This tutorial describes how to use PhoneGap and mobl to build a native iPhone application using web technologies. In my setup I use Xcode 4. Developing for Android and other platforms, should be very similar, however.

Why?

Why would you want to build native applications? There are a few reasons:

• Deploy to the app stores and market places. These provide exposure to your application, and make it easier to monetize.
• Access to more APIs. Mobl's PhoneGap API wrappers give you access to the phone's contact list, camera and many other APIs.

Requirements

• Mobl
• Xcode (I use 4, but 3 should just work fine too)
• PhoneGap

Setting up a PhoneGap project

Launch Xcode and create a new project. If you installed PhoneGap correctly, there should be a "PhoneGap-based Application" option (under iOS > Application). Pick this one and push next. Name your application. Push Next. Pick a location to store your application and choose "Create".

Your project has now been created. However, at least in Xcode 4, there is no www folder yet. This will be created when you first run the application. So push the "Run" button to launch the application in the iOS simulator.

After a while the application launches in the simulator. You will likely receive an error saying that the file "www/index.html" has not been found. Do not panic! Go to Finder to look at your project directory. You will see there is a www directory there.

You need to drag this directory onto the project in Xcode (the project, not the nested group with the same name). A dialog will pop-up asking how to import this directory. Uncheck "Copy items" and select "Create folder references for any added folders". Then push "Finish". The www folder will now be part of the project. Run the application again, it should now work.

Creating a mobl project

Now that we have a working PhoneGap project, let's create a mobl project inside of it. Launch Eclipse and go to File > New project. Instead of picking a "mobl project", pick "General" > "Project". Push "Next".

Name the project whatever you like. Then uncheck the "Use default location" checkbox and browse for a location. Navigate to the location of your PhoneGap project and select the directory that also contains the .xcodeproj file and www directory. Click "Open" and "Finish". An project will now be created.

Right-click the project in the package explorer and pick "New" > "File". Name your file config.mobl and put the following in:

configuration
html index.html
title "My Mobl Gap App"

The html configuration ensures the generated HTML file will be called index.html and the title option sets the application title.

Create another mobl file with a name of your choosing, e.g. app.mobl. Put the following in there:

application app
import mobl::ui::generic
screen root() {
  header("Hello mobl")
}

Save your files and switch back to Xcode. Push the "Run" button again. You should now have your mobl app running as a native app with PhoneGap.

Using PhoneGap-specific APIs

Mobl wraps a number of the PhoneGap-specific APIs as mobl libraries. In the current version only the camera is supported, but future version will wrap other APIs as well.

screen root() {
  var currentImage = ""
  header("Camera demo")
  button("Camera", onclick={
    currentImage = Camera.takePicture();
  })
  block {
    image(currentImage, width=200)
  }
}

Note that the camera does not work in the simulator, you'll have to test it on a real device.

tutorial/phonegap.txt · Last modified: 2013/10/01 02:29 (external edit)