Walk-through: Creating your first task for Windows application

Complexity: Beginner Data Requirement: Installed with software

In this walk-through, you will be guided to create a Hello World task for the Windows application. Specifically, the new Hello World task appears as a menu item on the View Map page menu. Tap this menu item and the application starts the Hello World task workflow and navigates to another page. This new page has the default page layout as other application pages, with title bar, navigation bar, Back button, and so on. The Back button takes you back to the View Map page to finish the task workflow.

During this walk-through, you will follow these steps:

Where to get the sample

This sample is available for download.

Prerequisites

To complete this walk-through, you need the following:

Creating a class library project with Visual Studio .NET 2008

Steps:
  1. Start Visual Studio .NET 2008: click File > New > Project. The New Project dialog box appears.
  2. Under Project types, click Windows in the Visual C# list.
  3. Choose .NET Framework 3.5 from the drop-down list at the top right of the dialog box.
  4. Click Class Library in the Templates pane.
  5. Name the project HelloWorldTask, specify the location for the project, then click OK to proceed.

    Need alt text

  6. Add references to the ArcGIS Mobile, application framework, and Windows WPF libraries as well.

    • ESRI.ArcGIS.Mobile
    • ESRI.ArcGIS.Mobile.Client
    • PresentationCore
    • PresentationFramework
    • WindowsBase

Creating a Hello World WPF page

This simple Hello World task has only one page in its workflow. When the task is executed, the application navigates to this page. Follow the steps below to create this Hello World WPF page.

Steps:
  1. Add a WPF user control to this project and name it HelloWorldPage.

    In the ArcGIS Mobile for Windows application, pages are derived from the MobileApplicationPage class, which defines a WPF user control. Visual Studio creates two files for this page: an XAML file that defines its user interface (controls and layout) and a CS file that contains function implementations.

    Need alt text

    Double-click the HelloWorldPage.xaml file to open it in Visual Studio.

  2. Add an XAML name space, MobileClient, and map it to the application framework library, ESRI.ArcGIS.Mobile.Client.

  3. Change UserControl to MobileClient:MobileApplicationPage. Use MobileApplicationPage as its base class.

    <MobileClient:MobileApplicationPage>
    ...
    </MobileClient:MobileApplicationPage>

  4. Add some controls to the page (for example, a button). Remove the definitions for height and width, since the size will be controlled by the application.

    The Hello World page XAML file looks like this:

    <MobileClient:MobileApplicationPage
        x:Class="HelloWorldTask.HelloWorldPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:MobileClient="clr-namespace:ESRI.ArcGIS.Mobile.Client;assembly=ESRI.ArcGIS.Mobile.Client"
    > 
      <Grid> 
        <Button Height="100" Width="200" Name="button1" >Hello again</Button> 
      </Grid>
    </MobileClient:MobileApplicationPage>

  5. Close the XAML file and double-click the HelloWorldPage.xaml.cs file to open it.
  6. Add a reference to the application framework library.

    using ESRI.ArcGIS.Mobile.Client 

  7. Change the page's base class to MobileApplicationPage.

    public partial class HelloWorldPage : MobileApplicationPage

  8. Set page title and subtitle.

    Add these two lines to the class constructor:

    this.Title = "Hello World Page"; // title 
    this.Note = "this is a simple page"; // subtitle 

  9. Set the page icon.

    Add an icon file to the project and change its Build Action property to Resource in the file Properties panel.

    Add these two lines to the constructor:

    // page icon
    Uri uri = new Uri("pack://application:,,,/HelloWorldTask;Component/Tips72.png");
    this.ImageSource= new System.Windows.Media.Imaging.BitmapImage(uri);

  10. Add a Back button.

    On the bottom of a page is the navigation bar, which contains buttons for navigation—Back/Cancel and Next/Accept/Finish—and there is a page menu in the middle. In this walk-through, you will only add a Back button. Insert this line in the constructor:

    this.BackCommands.Add(this.BackCommand); // back button

    Now when you tap the Back button, the application navigates to the previous page.

    protected override void OnBackCommandExecute()
    {
        MobileApplication.Current.Transition(this.PreviousPage);
    }

The Hello World page has been created and has a dummy button on it. The HelloWorldPage.xaml.cs file looks like this:

using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using ESRI.ArcGIS.Mobile.Client;

namespace HelloWorldTask
{
    /// Interaction logic for HelloWorldPage.xaml
    public partial class HelloWorldPage : MobileApplicationPage
    {
        public HelloWorldPage()
        {
            InitializeComponent();
            // title
            this.Title = "Hello World Page";
            //subtitle
            this.Note = "this is a simple page";

            // page icon
            Uri uri = new Uri("pack://application:,,,/HelloWorldTask;Component/Tips72.png");
            this.ImageSource= new System.Windows.Media.Imaging.BitmapImage(uri);

            // back button
            this.BackCommands.Add(this.BackCommand);
        }

        // back button navigate the app to the previous page
        protected override void OnBackCommandExecute()
        {
          MobileApplication.Current.Transition(this.PreviousPage);
        }
    }
}

Creating a Hello World task

By default, Visual Studio creates a Class1.cs file for this new class library project. Rename it HelloWorldTask.cs by right-clicking the Class1.cs file and entering a new name. Choose Yes when you are prompted to rename the file. Double-click to open the file in Visual Studio.

Steps:
  1. Add a reference to the application library. Make the HelloWorldTask class inherit from the Task class in the application framework.

    using ESRI.ArcGIS.Mobile.Client;
    ...
    public class HelloWorldTask : Task

  2. Implement an abstract class for the Task class.

    Point to Task and choose Implement abstract class 'Task'.

    Visual Studio creates an Execute method for this class. When a task on the task list page is clicked, the Execute method will be called. In this sample, it navigates to the Hello World page you just created. To do this, use the Transition function provided in the MobileApplication class. The MobileApplication class can be accessed via its static field Current.

    public override  void Execute()
    {
        MobileApplication.Current.Transition(new HelloWorldPage());
    }

  3. Set task name, description, and icon.

    Insert the codes below to the HelloWorldTask constructor:

    //Name
    Name = "Hello World Task";
    //Description
    Description = "My hello world task"; 

    Add this function to the HelloWorldTask class for specifying a task icon:

    // task icon,
    protected override System.Windows.Media.ImageSource GetImageSource()
    {
    		Uri uri = new Uri("pack://application:,,,/HelloWorldTask;Component/Tips72.png");
    		return new System.Windows.Media.Imaging.BitmapImage(uri);
    }

You are finished coding this Hello World task. Compile the project to generate the assembly .dll, HelloWorldTask.dll.

Deploying Hello World task to the ArcGIS Mobile for Windows application

To have the Windows application load the Hello World task in a mobile project, add the task to the mobile project. There are two ways to do this: using an .ame file or adding a new task to a mobile project within Mobile Project Center. Here, you are going to use the first approach. The second approach is explained in the "Using ArcGIS Mobile Visual Studio project templates" section.

Steps:
  1. Copy the assembly HelloWorldTask.dll to the Windows Application bin folder or the application extensions folder.
    • Location 1: <Install Dir>\ArcGIS\Mobile10.0\bin
    • Location 2: C:\Documents and Settings\All Users\Application Data\ESRI\ArcGIS Mobile\Extensions\ (for Windows XP); C:\ProgramData\ESRI\ArcGIS Mobile\Extensions\ (for Windows Vista or 7)
      NoteNote:

      The mobile installer does not create the extensions folder; you need to manually create this folder if you want to deploy your extension assembly at this location.

  2. Create an ArcGIS Mobile application extension file (.ame).

    An .ame file describes the assembly's name, name space, class name, and settings if needed. The .ame file could be put into a mobile project folder (where you find the .amp file). When the mobile application opens the project, it reads the .ame file and loads the Hello World task from the specified assembly. The content of the .ame file will be merged into the project .amp file and deleted when the project is closed. The .ame file is an .xml file written in the format shown below:

    <Extensions>
    <Tasks>
        <Task assemblyQualifiedName="namespace.class_name, assembly_name" />
    </Tasks>
    </Extensions>

    For the Hello World task, create the .ame file as below and copy it to a mobile project folder. When the Windows application opens this project, it will read the .ame file and load the corresponding class library assembly. To have the Windows application load the extension assembly successfully, make sure the assembly's name space, class name, and assembly file name are spelled correctly here. (Name space and class name are case sensitive.)

    <Extensions>
    <Tasks>
        <Task assemblyQualifiedName="HelloWorldTask.HelloWorldTask, HelloWorldTask" />
    </Tasks>
    </Extensions>

    The .ame file also can be deployed to the Extensions folder (location 2 above). This task will then be available at the application level, and you will see it for all projects.

Trying the Hello World task

Steps:
  1. Launch the ArcGIS Mobile tablet application and open the project.

    Need alt text

  2. Click Hello World Task and the application navigates to Hello World Page .

    need alt text

Click the button. Nothing happens, since you did not implement the button click function. Click the Back button to return to the application task list page.

This walk-through explains how to develop a Hello World task for the ArcGIS Mobile for Windows application by creating a .NET assembly from scratch and deploy it using an .ame file. To give you a better development experience, a Visual Studio project template is provided to generate a C# project for a task as well as a project to create a Mobile Project Center (MPC) extension. With the MPC extension, you could add your task to a mobile project directly when creating a mobile project in MPC, without handling the .ame file. Refer to the "Using ArcGIS Mobile Visual Studio project templates" section for details.


9/20/2011