Tag Archives: Dojo

Several weeks ago we had a post on how to get started building iPhone applications with the ArcGIS API for JavaScript. In this post we’ll dive a little deeper and look at how you take advantage of the features available in Android and iOS mobile browsers to build rich internet applications.

Mobile Frameworks

There are several mobile JavaScript frameworks available that provide a starting point for building iPhone and Android applications. Frameworks like JQTouch, dojox.mobile and JQuery Mobile (coming later this year) provide lightweight widgets optimized for mobile devices and CSS to easily give your application a native iPhone or Android look and feel. The examples in this post use dojox.mobile which provides a set of lightweight widgets that help you build pages that look and act like native applications.

Dojox.Mobile

Dojox.mobile is part of Dojo 1.5, which will be included with version 2.1 of the ArcGIS API for JavaScript. Dojox.mobile provides several lightweight widgets (views, buttons, lists, etc) that look and act like those found on the iOS and Android native interfaces. The View widget defines a single page in your application. You can add multiple views to your application then use the provided transitions (flip, fade, slide) to move between the views.

<div id="directionsView" dojoType="dojox.mobile.View">
  <h1 dojoType="dojox.mobile.Heading" back="Map" transition="flip" moveTo="mapView">Directions</h1>
  <div id="directions" dojoType="dojox.mobile.RoundRect" shadow="true" ></div>
</div>

A native-looking Progress Indicator is also provided. You can use this indicator to inform users that an operation is in progress. The progress indicator looks like that found on the target device, so if you are running the application on an Android it will look like a bar, and on an iOS device it will have a more circular look.

Android Example

iPhone Example

    progressIndicator = dojox.mobile.ProgressIndicator.getInstance();
    container.appendChild(progressIndicator.domNode);
    progressIndicator.start();

Applications that run on an Android have a distinctly different look than iPhone applications. Dojox.mobile provides CSS style-sheets for both the Android and iPhone. You could build a separate application for each device, or you could use JavaScript to determine the type of device the application is running on and then use the appropriate style-sheet.

 if (navigator.userAgent.indexOf('Android') > -1) {
document.write("<link href='http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojox/mobile/themes/android/android.css' rel='stylesheet'>");
} else {
document.write("<link href='http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojox/mobile/themes/iphone/iphone.css' rel='stylesheet'>");
}

Sample Applications

Let’s look at a few samples that use Dojox.mobile to build an application for the iPhone and Android.

Find nearby businesses

The first sample uses the Geolocation API to determine the current geographical location. Once the location is discovered, Yahoo’s Local Search Web Services is used to find businesses and services near the input location. In this snippet we use esri.request to request results from the local search web service.

  esri.request({
    url: "http://local.yahooapis.com/LocalSearchService/V3/localSearch",
    content: queryParams,
    handleAs: "json",
    callbackParamName:"callback",
    load: buildYahooLocalLocations,
    error: esriConfig.defaults.io.errorHandler
  });

Details about each result location such as phone number, address, and rating are displayed in a list. You can then use the Route Task to generate a route and driving directions from the input location to the selected item.

routeTask.solve(params, function(solveResult) {
  var directions  = solveResult.routeResults[0].directions;
  routeGraphicLayer.add(new esri.Graphic(directions.mergedGeometry));
  dojo.forEach(directions.features, function(feature,index) {
    //do something with the direction information here
  });
});

Volunteered Geographic Information (VGI)

This sample uses the new Feature Service in ArcGIS Server 10 to allow a user to provide geospatially-enabled feedback to an organization. If a resident in a local town spots a potential issue, he or she could make a note of where it is, provide some basic information including comments, and, optionally, take a picture of it and attach it to the report as a feature attachment. The sample also logs the date and time the report was created. This is a way for an organization to leverage volunteered geographic information (VGI) to create a dialogue between an organization and its constituents.

To capture user input, start listening for the Map’s onClick event when the Web page is initially loaded. Each time a user taps on the map, the onClick event fires, and a new feature is added to the Feature Service using the FeatureLayer’s applyEdits method.

function init() {
  clickHandler = dojo.connect(map, 'onClick', function(evt) {
    doReport(evt.mapPoint);
  });        
}
function doReport(geometry) {        
  var report = featureServiceLayer.types[0].templates[0].prototype;
  var newReport = new esri.Graphic(report.toJson());
  newReport.attributes.Comments = dojo.byId('comments').value;
  newReport.setGeometry(geometry);
  featureServiceLayer.applyEdits([ newReport ], [], [], reportComplete);
}

Once the edits are complete, we will populate a global variable with the Object ID for the newly created feature. We will need this later if the user chooses to add an attachment to their report.

function reportComplete(addResults, updateResults, deleteResults) {
  theAddedOID = addResults[0].objectId;
}

Now let’s look at how to add attachments, like a picture, to the newly created report. For the iOS, this application uses a third party helper application called PicUp to provide access to the camera, since the Safari browser on the device does not natively have access to it and does not support input type=”file”. Another application that provides similar functionality is cliqcliq Quickpic. For Android 2.2, the browser supports input type=”file”, so the user could provide a photo that has already been taken by browsing for it.

In order to add a photo feature attachment, we need to be able to allow a user to browse for a photo. In this case, we will use an input type=”file” html control and a button for submitting the attachment. We need to listen to the button’s onClick event, and when it fires, call the feature layer’s addAttachment method. We pass the Object ID of the feature we want to attach the photo to and a handle to the html form that contains the file input html element.

Function init() {
  var button = dojo.byId('submitButton');
  dojo.connect(button, 'onclick', function(event) {
    featureServiceLayer.addAttachment(theAddedOID, dojo.byId('myForm'), function(data){
      //Attachment Added
    });
  });
}

Resources

• Dojox.mobile test pages – Several samples showing how to use various features of dojox.mobile.
• Dojox.mobile Documentation
• API Reference for dojox.mobile
• Instructions for installing and configuring the Android Device Emulator. You can use the emulator to test the application if you don’t have access to an Android device.
• Visit the Safari Reference Guide or tips on building web applications on the iPhone

Contributed by Kelly Hutchins of the ArcGIS API for JavaScript development team, and Scott Moore of Esri Technical Sales.