Windows 8 Metro Style Business Apps in VS 2012

Posted by: Mahesh Sabnis , on 10/8/2012, in Category DNC Magazine
Views: 47656
Abstract: Learn how simple and flexible it is to develop a Metro Style Business Application on Windows 8 and Visual Studio 2012

The Metro Design language became popular with the maturing of the Windows Phone 7 platform. Due to its popularity, it got adopted on the Windows 8 platforms too. Now that Windows 8 is released, we find the Metro Design to be rather elegant on the Desktop as well. WinRT is a new development runtime on Windows 8 and it provides a rich toolset for development of consumer and business applications.

Developers and Metro Applications

Apps developed using the new WinRT Runtime are referred to as Metro Apps. An important fact with these applications is that the devloper community can easily get started with developing Metro Apps

  • .NET developers with the knowledge of C# and XAML etc. can start developing applications using VS 2012, because XAML is a familiar technology from Silverlight and WPF. Metro Style apps uses similar UI elements and design patterns.
  • Web developers having expertise with JavaScript, jQuery, HTML 5 and CSS can also design these applications. Using JavaScript, the applications can make external call to WCF services or any external services to fetch data. Alongside, .NET 4.5 has come up with Web-API, using which Data Bound operations can be performed over plain (instead of the earlier WS-* layer).

Metro style apps can be considered as the future of Windows app development, be it x86 or ARM processors.

dncmag Are you interested in building Windows 8 Apps? The September issue of our Free .NET Magazine contains some excellent tutorials on building and testing Windows 8 Apps for C# and JavaScript developers.

IN addition to Windows 8 apps, we also have some nice tutorials on WCF 4.5, ASP.NET MVC 4, Azure and much more. Saving the best for the last, read a freewheeling interview with John Skeet, one of the best C# programmers on this planet

Download this Free Magazine Here

For end users, the shift from desktop computers to the more portable Laptops is now more or less complete. Most consumers now prefer a laptop to a desktop. However, technology is moving towards even more portability in terms of smaller than laptop devices; like tablets and big-screen smartphones. These devices are much smaller, their main user interface is touch-centric as opposed to pointer centric on the desktop and they have certain restrictions on CPU power. These devices are also geared towards single purpose, intuitive applications. These devices are not geared to be multipurpose fully functional computing devices. They allow users to consume content and interact with the content. In developer terms, these devices are targeted for using an app rather than developing the app. It is this segment of application usage, that needs apps with a touch-centric design philosophy like Metro a.k.a Windows 8 Style UI.

If we take a tablet or a large screen mobile device using Windows 8, a typical business case could be for users from Marketing field. These users could use applications on this device to record orders and generate invoices. Similarly doctors, can make use of applications to view their appointments, record their observations and so on. These kinds of applications and devices were earlier a niche, but with the popularity of tablet devices, they are fast becoming mainstream.

A Glimpse of Metro

glimpse-of-metro

This is a Tile based UI layout geared towards touch-based interaction. Each tile represents an App on Windows 8. Let us see how we can build one for ourselves.

Developing a Metro App

Let us develop a Metro styled application for marketing professionals that generates Invoices for medical orders. The architecture of the application is as shown here:

architecture

The Metro client application makes use of WCF Service to communicate with database server. The WCF service is hosted on IIS and is accessed by the client over HTTP.

Creating The Application

We use SQL Server 2008 as the backend. Our table structure is defined here.

database-diagram

DealerMaster and ProductMaster are master tables used to store information about Dealers and Products respectively. RowOrderMaster table is used to store Product wise row order bill and BillMaster is used store total bill.

Step 1: Open VS 2012 and create a blank solution, name it as ‘SLN_MetroApps’. In this solution, add a new WCF service, name it as ‘WCF_Sales_Service’. Rename ‘IService1.cs’ to ‘IService.cs’, ‘Service1.svc’ to ‘Service.svc’.

Step 2: We will use Entity Framework for data access. Add a new ADO.NET Entity data model in the WCF service and name it as ‘SalesInfoEDMX’. Complete the wizard and select the above tables. The corresponding entity diagram will be as follows.

entity-diagram

Step 3: Add the following contracts in the interface IService, these operations will return collection for Products, Dealers and Invoices. We also have a contract that is called for generating in Invoice

service-contract

Step 4: Implement this interface in the Service class. The implementation makes the DB calls via the EntityFramework ObjectContext. For example, the implementation below generates the invoice and Saves it to the database. Similarly we implement rest of the interfaces, using EF ObjectContext to save data.

generate-invoice

Step 5: At this point, our service layer is complete. We build the Service and publish it on IIS.

Creating Metro Style Client Application

Step 1: To create Metro app, Visual Studio provides multiple templates to get started with. These templates dictate how the applications must be laid out and bound to data. For our single page app scenario, we will pick the Blank App from the Windows Metro Style projects. We call the project ‘SalesInformation’ as below:

add-new-project

Note: You will get the template for Metro Style Application in Visual Studio 2012 installed on Windows 8 operating system. The screenshot shown above was taken using VS 2012 RC available during the time of writing this article.

Step 2: Open MainPage.Xaml and set up the UI to look as follows

invoice-generator

The TextBox for ‘Invoice No’ will show the generated Invoice Id after successfully storing Invoice details. The ComboBox for Dealer Name will display list of all dealers. The gray box is a ListBox where the Productwise bill will be generated. The button with “+” will add a new row in the ListBox for Productwise order details. The TextBox above the button ‘Save Invoice’ will show the Total Invoice value.

Step 3: Write helper methods to Read all dealers and Products using WCF Service Proxy as below:

helper-methods

One important observation in the above code is that, the call to the service is asynchronous, but still there is no completed event. The reason is that the return type of the asynchronous method is set to Task<T>. This class takes care of the call completion return data using ‘Result’ property.

Step 4: Write the helper method, to generate ListBox elements. This method will be called when the “+” button is clicked:

create-bill-ui-1

The above code instantiates a control hierarchy for displaying the Medicine List, Price and Quantity controls. The SelectionChanged event of the ComboBox fetches the Unit Price from the database. The Lost Focus event of the Quantity triggers the calculation of the item-wise total and the total bill.

Step 5: We instantiate the Products and Orders collections in the Constructor and in the MainPage_Loaded event handler we instantiate the Proxy and call the helper methods to load the data.

Step 6: Call the ‘CreateBillUI’ method on click event of the ‘+’ button

Step 7: Finally on the click event of the ‘Save Invoice’ button write the code for saving the invoice in the database.

SaveInvoiceClick

The above code makes call to GenerateInvoiceAsync method to save details in the database. We are set for our test run.

Test Run

In VS 2012, we can test metro style apps in multiple ways.

local-machine

We initially select the Local Machine (default) and press F5. Win 8 goes into Metro Mode and shows us the application.

invoice-generator-1

Select Dealer Name and Product Name from the respective dropdowns. Enter the Quantity and Unit Price. The Row bill will be calculated and the Total Invoice Value will be updated once user navigates away from the Product Row.

invoice-generator-2

Now click on ‘+’ button to add a new row and add another row of data

invoice-generator-3

After clicking ‘Save Invoice’, the generated invoice number will come up in the ‘Invoice No’ field.

To test it in the Tablet Simulator, we can change the Run option to the Simulator. On pressing F5 the simulator fires up and shows our application’s tile before launching the application itself.

final-image

Wrap Up

We developed a Metro (Windows 8 Style) Business Application. We could definitely reflect the Metro Design Aesthetic better, but as a quick sample, we focused on demonstrating the power of the platform. Metro Styled Apps with their rich design aesthetic are aimed at non-business Consumers. But as we saw, it provides enough flexibility to build functional Business Applications with minimum effort and using existing C# and XAML skills

Download the entire source code

Give me a +1 if you think it was a good article. Thanks!
Recommended Articles
Mahesh is having 10 years of experience in IT education and development. He is a Microsoft Certified Trainer (MCT) since 2005 and has conducted various Corporate Training programs for .NET Technologies (all versions). Follow him on twitter @maheshdotnet


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by Xiao Han on Monday, October 22, 2012 3:04 AM
Thanks for your tutorial, but it seems the source code link does not work.
Comment posted by Dale on Monday, October 29, 2012 5:36 PM
Very informative,however the source code link is not available.I'm getting 404 error.Could not find the page!
Thanks
Comment posted by Dale on Saturday, November 24, 2012 2:30 PM
Can't resolve MyRef. Can anyone assist me on this issue?
Thanks.
Comment posted by Dale on Saturday, November 24, 2012 2:39 PM
source code link still doesn't work!.
thanks.
Comment posted by janhvi japee on Monday, February 18, 2013 6:20 AM
hii sir it is very gud application.i want to make a application on photo gallery could u plz guide me.
Comment posted by Baijnath Pathak on Monday, March 4, 2013 5:32 AM
Thanks, very infiormative
Comment posted by Indrajit Sinh Rayjada on Sunday, March 10, 2013 4:14 AM
Mr Mahesh Sabnis

it is very good application.i want to make a application on database application witch Store client information  could u plz guide me.
Comment posted by Mahesh Sabnis on Monday, April 8, 2013 11:19 PM
HI All,
  Thanks a lot.
janhvi japee: Please have look to these posts of mine:
http://www.devcurry.com/2013/03/using-flipview-control-in-windows-store.html
http://www.devcurry.com/2013/02/windows-8-apps-creating-picture-library.html

Hi Indeajit,
Can you please elaborate the requirements

Thanks
Regards
Mahesh Sabnis
Comment posted by Prakash on Friday, August 16, 2013 3:22 AM
very nice article !!!..

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel