Presentation Catalogue on Windows Phone 7

Abstract

The article describes how to create a powerful Windows Phone 7 catalogue presentation which downloads the actual data from Internet and displays them in an intuitive and innovative way on a Windows Phone 7 device.

The application we are about to create in this article will consist of two parts:

• Web Service – runs at server – provides data for the application
• Shopping Mall – a WP7 application visualizing data to the user through its GUI (rendered with the help of Bee Mobile Metropolis).

Key topics

which will be discussed in the article:

• How to create a Web Service.
• How to load data to a Data Set from XML file on server’s side and publish it through Web Methods.
• Create a WP7 client application which consumes a Web Service.
• Use Bee Mobile Metropolis (set of WP7 GUI controls) to create the application GUI.

What you will get

Idea of the application is to promote products for sale in a shopping mall through a colorful electronic catalogue. The application will ask the user to select a product category by drawing a map of the shopping mall. The user will click a particular department. In that moment the application downloads the products from the selected department from a web service and displays them so the user can view a photograph of that product, its name, description and price.

ShoppingMall - main screen

Shopping Mall - products download

Shopping Mall - product catalogue

What you will need

• Visual Studio 2010.
• Windows Phone 7 development SDK (can be downloaded from Microsoft web site).
• Bee Mobile Metroplis (you can download a free trial version here).

Application Logic

The following diagram shows a perspective view of the created applications. The user interacts with Shopping Mall application which in turn communicates with the OS. The OS is run either on an emulator (during development phase) or on an actual device. Emulator/device connects to a Web Service via Internet or Local Network to a server where Web Service is run.

Shopping Mall - perspective view

Web Service

We will start by creating the Web Service which will provide data for our application. Start Visual Studio 2010 and create a new Web Service project. The data will be taken from a DataSet. Add a DataSet to your project and name it “productsDataSet”. It will contain two tables: Products and Categories.

DatabaseDesign

You can see from the main screen of the application that there will be 7 categories in our shopping mall. Our Web Service will be very simple from the consumer’s perspective, it will only publish one web method – GetProducts. It will return a list of products from a specified category and will be defined so:

[WebMethod(Description= @"
Summary:
Returns the list of products (Product name, Product description, Product price, Product photo) based on the selection of store department.
categoryName - Name of the store department. Options = bakery, clothes, drinks, electronics, fresh food, home supply, parfume
")]
public List GetProducts(string categoryName)
{
     PrepareData(categoryName);

     if (_Products.Count == 0)
           return null;
      else
           return _Products;
}

The private PrepareData method simply fills a DataSet with data from an XML file. Once it is filled it iterates through all products which match the specified category. Each product that matches the specified category is put into a list. Then the products are returned to the client.

Mobile Application

The mobile client will behave according to the following state diagram:

Shopping Mall - State Diagram

When the application starts, Splash screen is displayed for several miliseconds and the application continues automatically to the main screen (Shopping Mall). The “Shopping Mall” screen displays a map of the shopping mall using RegionControl:

ShoppingMall Design

The user can click any department (product category) and when he does, RegionControl informs the developer by firing SelectedColorChanged event. The application then tries to download all products belonging to that category from the Web Service. If the Web Service is down (or any other error occurs), it informs the user by displaying an error message. The user can only confirm the error message which gets him back to the main Shopping Mall page. While the products are being downloaded the Connecting Screen is displayed to the user with Bee Mobile WaitingBar which informs the user of background operation taking place:

ConnectingScreen Design

Finally, if the connection succeeds, the application presents the products to the user using Bee Mobile BookControl. The user can flip the page of the BookControl. On each page there is a photograph of the product along with its name, description and the current price.

Product Catalogue

Conclusion

You can download the whole Shopping Mall sample project here. You are welcome to change it and/or use it in your projects.

Other possible scenarios include:

• On-line web store showing the products catalogue.
• Restaurant presenting the food it offers.
• Real-estate agency promoting the properties for sale.
• Fashion-model agency presenting the photographs of models in their database.
• etc.

If you have any suggestions, ideas or recommendations, please let us know by writing an email to support@beemobile4.net.