Write Fast with AppMap

Introduction

The Ultimate UI Controls for Xamarin includes AppMap, which allows you to visually layout a UI in a WYSIWYG format while generating the necessary code. All of the code created by AppMap follow best practices PRISM code for the mobile app, including the navigation.

Lesson Objectives

At the end of this lesson, you will be familiar with how to use AppMap to design a navigational layout.

  1. Create an AppMap project
  2. Create an AppMap design
  3. Build and test the navigation

Step 1 Setting up the Project

First, verify that you have the Infragistics AppMap and Infragistics Toolbox installed. From Visual Studio, click Tools, and then click Extensions and Updates. The AppMap and Toolbox should be listed and enabled.

Setting up project AppMap

After verifying, close the Extensions and Updates window. From the Visual Studio homepage, click Browse project templates. In the Browse window, expand Infragistics and click Xamarin.Forms. Select the AppMap Project, and then click OK.

Xamarin AppMap

The Create new project window will appear, prompting you to select the platforms for the project. Ensure that Android and iOS are both selected. The DI Container should be set to Unity, and Show AppMap should be enabled. Click Create Project.

Infragistics Project Wizard

The blank AppMap displays the available pages, relationships, properties, and code generation options that are used with the AppMap.

Xamarin AppMap

Step 2 Design an AppMap flow

First, drag and drop a ContentPage from the Toolbox to the design area. The first ContentPage element is titled MainPage. Whether the page is actually the main page or not is controlled in the Properties menu. Change the Name to LoginScreen, and uncheck the Wrap in Navigation checkbox.

Design an AppMap flow

Drag and drop another ContentPage element from the toolbox to the right of the existing page. Drag and drop a Navigates To relationship to connect the LoginScreen page to the new page. Rename the new page to NewAccountScreen.

Xamarin AppMap

This is useful if the main page of an app prompts to create a new account. Drag and drop another Navigates To element to navigate back from the NewAccountScreen to the LoginScreen, for reverse navigation. Drag the element on top of the existing Navigates To element to ensure that it has arrows pointing both directions.

Xamarin AppMap

With the Navigates To element selected, review the available properties. Drag and drop a MasterDetailPage element to the design area and name the element MainPage. Notice the error message that appears indicates that the MasterDetailPage must be connected to at least one other page. Drag two additional ContentPage elements to the design area. Name one CustomersList, and the other AgendaView. Connect the MasterDetailPage to each new ContentPage using Navigates To elements.

Xamarin AppMap

Select one of the new Navigates To elements, and then enable the Wrap in NavigatonPage property.

Xamarin AppMap

Repeat this for the second Navigates To element from the MainPage. Each element will have a compass icon above the element.

Xamarin AppMap

Drag and drop a TabbedPage element to the right of the CustomersList element. Name the page CustomerDetails, and then add a Navigates To element from CustomersList to CustomerDetails.

Xamarin AppMap

Add two more content pages below the CustomerDetails page. Name the pages Sales and Employees. Connect the CustomerDetails page to each content page using the Has Child relationship element. Ensure that the Sales order is set to 0, and the Employees order is set to 1 using the element properties.

Xamarin AppMap

As a final piece to the puzzle, drag and drop an Absolute Navigation relationship element from the LoginScreen content page to the MasterDetailPage. This provides a one-way path from the login screen to the master content page, without a method of returning to the login screen.

Xamarin AppMap

Review the design as a whole to understand the logic of stepping through each page and the navigation options on each page. Click Generate AppMap when you’re ready to create the associated code.

Xamarin AppMap

The project will be created with all of the necessary files to support the design that was created in AppMap.

Xamarin AppMap

Browse through the view models and XAML to see how AppMap created the necessary Prism code and XAML based on the designs you used.

After exploring, right-click the Android package and then click Set as StartUpProject.

Xamarin AppMap

Right-click the project, and then click Build. After the build completes, run the project using your desired emulator or hardware device.

Xamarin AppMap

Click MainPage to navigate to the CustomerLIst page. Notice the hamburger menu icon in the top-left of the screen. Click the menu to display the content pages that you defined in the AppMap.

Xamarin AppMap

Navigate to the CustomersList page, and you’ll find the tabbed page with child objects. Click between the tabs to switch pages in the app.

Xamarin AppMap

Conclusion

The Infragistics Ultimate UI for Xamarin includes AppMap to visually design navigational elements. You can drag and rop the desired elements to create a full navigational menu system with dozens of pages in just minutes. All of the content pages use best practices Prism and XAML code when they are generated.