WPF in Manufacturing Industries

Introduction

Today we begin an exciting look at how the Manufacturing Industry uses WPF in their Enterprise Applications. In this post, we are going to first take a look at what manufacturing industries consist of, why they are choosing WPF and how they typically represent data in their app. We will then switch gears and write a sample application using Telerik RadControls for WPF that can help accelerate your development efforts in this industry and others.

What are Manufacturing Industries?

The manufacturing industry refers to those industries which involve the manufacturing and processing of items and indulge in either creation of new commodities or in value addition. The manufacturing industry accounts for a significant share of the industrial sector in developed countries. The final products can either serve as a finished good for sale to customers or as intermediate goods used in the production process.

Examples of manufacturing industries include the following:

• General Motors Corporation – world’s largest automaker.
• General Electric –appliances, consumer electronics, lighting and more.
• Pfizer – world’s largest pharmaceutical corporation.

Manufacturing also includes chemical industries, textile industries, plastic industries and many more.

Bridging the Gap between Manufacturing Industries and WPF

Now that we have a grasp on what type of industries are included in manufacturing we need to examine how WPF can help bridge the gap between what the industry needs and what WPF can provide.

The manufacturing industry chooses WPF for a number of reasons:

• WPF is a mature platform existing since 2006 that runs on literally all versions of Windows – this is especially important to those that will be running Windows XP and 7 for years to come.
• WPF provides a Rich UI that includes vector graphic support which allows you to create stunning applications without forcing your users to upgrade to the latest Windows OS.
• WPF is perfect for handling occasionally connected locations through its full access to the file system.
• WPF provides the ability to handle a huge quantity of transactions simultaneously.
• WPF also has a powerful data binding mechanism in place that allows you to use MVVM to perform a separation of concerns – where the designer can work independently of the developer.

Of course, these are not all of the reasons, but let’s dig deeper into some of them.

Mature Platform to Build Enterprise Applications

It is easy to get caught up in all the new and shiny technology that is released every couple of months. But the fact remains, that most enterprises are still using older operating systems such as Windows XP, 7 and even Windows Server 2003. While interacting with several of our enterprise customers, we have found that they have no plans at the moment to upgrade, yet they still need a mature platform to build applications on. This again is where WPF comes in, not only can it run on these operating systems and more, but it has been out since 2006. This means that we have seven years’ worth of documentation on the platform available to us on the web.

Another key point, is that WPF has full access to the file system and hardware of the operating system. You can read or write a file anywhere, make a synchronous call to a web service, or interact directly with the hardware if need be. You are also in charge of the deployment model, whether it be standalone or XAML Browser Applications. You are not dependent on anyone or anything, unlike some of the newer technology which has to go through a review process by people outside of your organization.

Rich UI that includes Vector Graphics Support

It is important to note that users will only interact with the Graphical User Interface (GUI) of your application. They will never see the code running in the background no matter how well structured it is. Therefore, it is important that the application focus on a stunning GUI using proven design concepts that look great and prevent your users from becoming frustrated while using your application. You will notice that WPF applications step away from the standard colors of white/gray (often used in WinForms) and uses a rich color palette. It is also important to design and implement a consistent UI strategy throughout your application.

But what about vector graphics support? Why is that so important? Again, we will have to first define what vector graphics actually means: Vector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygons, which are all based on mathematical expressions, to represent images in computer graphics. [2]

In many manufacturing industries they are dependent upon charts and graphs that use the power of vector graphics to display information with detailed precision.

Besides the layout of precise data points, vector graphics is also important as it allows most controls and elements to be scaled without loss in quality or pixelization, thus increasing accessibility with a wide range of monitors common in this industry.

While looks are very important in the manufacturing industry, we still have to solve the business problem, after all that is what the overall goal is.

Occasionally Connected Applications

A problem that exists for many manufacturing industries as well as others, is clients that are located in places where they have no internet or limited internet connectivity. For these shops, it is too risky to have an application depend on the cloud or isolated storage which can become corrupt. Thankfully, WPF has access to the full .NET networking stack and can make any type of call (asynchronous and synchronous). It also has full access to the file system and can read/write anywhere on the local file system and then moved to the appropriate backup location on the network with the use of windows services, etc.

A Small Demo Application

After reviewing several applications in this industry, I have built a small demo application with the automotive industry in mind. I have built this application using WPF 4.5 and Telerik’s RadControls for WPF. Of course, no application can illustrate every scenario, but this demo will give you a chance to see what Telerik has to offer to assist you in your next enterprise application.

The scenario we will build against is an automotive executive who wants a quick glimpse of how all of the various automotive plants across the globe are doing at a given moment. He would like to see the amount of units produced, units in-progress, production growth since yesterday and the overall system health of the plant. He has assigned you the application and has given you the following requirements:

• The application to look modern and work on a variety of screen resolutions.
• A drop down list to easily filter the automotive plant locations.
• A list of all of the automotive plant locations displayed where he can scroll through them.
• A powerful grid that allows him to not only see the data, but filter the data with excel-like filtering and display relevant information.
• A chart that allows him to visualize the data as each location is clicked.

We can accomplish this by using RadControls for WPF in a variety of ways:

• Telerik’s built-in theming to select from a variety of Rich UIs without having to style the application ourselves.
• RadAutoCompleteBox to allow him to filter the various automotive plant locations.
• RadListBox to allow him to select from the various automotive plant locations.
• RadGridView has powerful Excel-like filtering along with drag/drop support for a column header to allow him to easily group items.
• RadChartView will allow him to visualize his data as he clicks upon the different locations.
• In addition to the previous controls, we will also use a RadButton and RadWindow to display a rich “About” dialog box.

Let’s go ahead and build this demo and show the first page of the dashboard.

Let’s Get Started

Before we get started, let’s take a look at what the completed application will look like as shown in Figure 1.

Figure 1: The International Motor Company Dashboard

We have already described in detailed, which controls we are using so now it is time to build the application.

Theming

One of the first requirements was that he wanted our application to look modern. Since very few developers have a full-time designer on staff that can produce the required styles, we went straight to Telerik’s built-in themes. Currently Telerik has a variety of themes that can be applied across your application. The full list can be found here. In our case, we are using the Expression_DarkTheme and it is as simple as adding in the assemblies and setting one line of code in our MainWindow constructor as shown below.

public MainWindow()

{

    StyleManager.ApplicationTheme=new Expression_DarkTheme();

    InitializeComponent();

    Loaded+=MainWindow_Loaded;

}

This automatically applies styles to all of our RadControls used in the application. Now that we have a theme in place, we need to add in a way to search various plant locations and display them on the screen.

Searching and Filtering Automotive Plants with RadAutoCompleteBox and RadListBox

Since many manufacturing industries can have a variety of plant locations that begin with a similar name, RadAutoCompleteBox will filter the data as shown in Figure 2.

Figure 2: RadAutoCompleteBox Filtering Data.

When the user hits the B key, all of the items that start with B will be displayed.

This can be easily created in XAML with the following code snippet:

<telerik:RadAutoCompleteBox x:Name="radAutoCompleteBox" SearchTextChanged="radAutoCompleteBox_SearchTextChanged_1" SelectionChanged="radAutoCompleteBox_SelectionChanged_1" SelectionMode="Single" Margin="10,5,10,135" DisplayMemberPath="Name" AutoCompleteMode="Suggest" WatermarkContent="Search for a plant..." Grid.Row="1"/>

Examining the XAML, we will see that this control has the ability to allow your end-user to select more than one item, if your application requirement calls for it, with the SelectionMode property. We can also change the way the text is filtered with the AutoCompleteMode property. This will be helpful in instances where you might want to search only the first letter or text contained somewhere in the ItemSource. We can also add a watermark to the control to give instructions to your users of what this input control is used for.

If the user does not want to filter the data and can see which plant location they want to use, then they simply select it from the RadListBox as shown in Figure 3.

Figure 3 RadListBox showing the available locations for the automotive industry.

Thankfully Telerik was thinking about you as they made the ItemSource property of both controls available to work with an ObservableCollection. In this case, I’ve created my class that lists the available locations and added each of these locations to that source. The only thing needed to display the data properly in the control is to set the DisplayMemberPath to Name as shown below for both RadAutoCompleteBox (Shown in Figure 2) and RadListBox (Shown in Figure 3).

<telerik:RadListBox x:Name="radListBox" Margin="10,0,10,10" SelectionChanged="RadListBox_SelectionChanged_1" Height="614" VerticalAlignment="Bottom" Grid.Row="1" DisplayMemberPath="Name" Grid.RowSpan="2" />

I’ve added the class below as well as a sample of the GetCountries() method. I’ve hard coded this data, but it could be coming from a web service as well.

public class Country

{

 public string Name { get; set; }

 public Country(string name)

    {

 this.Name=name;

    }

}

 public void GetCountries()

    {

 this.Countries=new ObservableCollection<Country>()

        {

 new Country("Australia"),

 new Country("Austria"),

 new Country("Azerbaijan"),

 new Country("Bahamas"),

 new Country("Bahrain"),

 new Country("Bangladesh"),

 new Country("Barbados"),

 new Country("Belarus"),

 new Country("Belgium"),

 new Country("Belize"),

 new Country("Finland"),

 new Country("France"),

 new Country("Gabon")

        };

        radListBox.ItemsSource=Countries;

        radAutoCompleteBox.ItemsSource=Countries;

    }

As you can see from the XAML listed above, several other properties/events have been set. The one that we want to pay special attention to is the SelectionChanged event as that leads us into populating the data for RadGridView and RadChartView.

Displaying and Visualizing your Data with RadGridView and RadChartView

When the SelectionChanged event fires, we run a method that is called GetData() that returns a Name, Description and a random Total. We can see this data populated in RadGridView as shown in Figure 4.

Figure 4: RadGridView displaying data from the currently selected location.

The XAML is completely straight-forward as I’m simply instantiating the control and only setting the ColumnWidth property to *, so that each column’s width will adjust accordingly to the space available on the screen. Everything else will be auto-generated at run-time.

<telerik:RadGridView x:Name="radGridView" Grid.Column="1" ColumnWidth="*" Grid.Row="1"/>

One of the most interesting aspects of RadGridView is the Excel-like capabilities to filter data as shown in Figure 5. We are only displaying a few rows. Imagine hundreds and thousands of rows. We can easily group columns by dragging and dropping it onto the header bar or clicking the filter button on the column.

Figure 5: Excel like filtering built into RadGridView.

One of our last requirements was a chart that he could quickly visualize the data located inside of RadGridView. By using RadChartView as shown in Figure 6, we were able to easily bind our existing “Total” data from RadGridView into a BarSeries.

Figure 6: RadChartView representing the data visually from RadGridView.

Again, we were able to accomplish this with only a few lines of XAML and creating a Class called LocationDetails and LocationDetailsService.

<chart:RadCartesianChart x:Name="chart" Grid.Column="1" Grid.Row="2">

 <chart:RadCartesianChart.HorizontalAxis>

 <chartView:CategoricalAxis PlotMode="BetweenTicks"/>

 </chart:RadCartesianChart.HorizontalAxis>

 <chart:RadCartesianChart.VerticalAxis>

 <chartView:LinearAxis/>

 </chart:RadCartesianChart.VerticalAxis>

 <chartView:BarSeries ValueBinding="Total" CategoryBinding="Name" />

</chart:RadCartesianChart>

The Location Details class only contains a few properties and the LocationDetailService uses an ObservableCollection to notify our UI that the underlying data has changed. A code snippet is provided below: 

public class LocationDetails

{

 public string Name { get; set; }

 public string Description { get; set; }

 public int Total { get; set; }

}

ic static ObservableCollection<LocationDetails> GetLocations()

{

rvableCollection<LocationDetails> locations=new ObservableCollection<LocationDetails>();

 Random rnd=new Random();

 //For Production

  LocationDetails ld=new LocationDetails();

  ld.Name="Units Produced";

  ld.Description="Units Currently Produced";

  ld.Total = rnd.Next(75, 100);

  locations.Add(ld); 

 return locations;

 }

Putting on the Finishing Touches with RadWindow and RadButton

From Figure 1, in the upper right-hand corner you can see RadButton in action. The button looks very sleek as it has the theme that we applied earlier to it. As you hover over it, you will notice the sleek animation is applied to it. If you click the button then RadWindow will appear as shown in Figure 7.

Figure 7: The “About” dialog box.

Contrary to what you might believe, this Window is not a UserControl or WPF Window, it was declared entirely in C# by using our RadWindow control. Again, the theming was automatic. The complete code for RadWindow is shown below:

RadWindow radWindow=new RadWindow();

radWindow.Width=400;

radWindow.Height=300;

radWindow.ResizeMode=System.Windows.ResizeMode.NoResize;

radWindow.WindowStartupLocation=System.Windows.WindowStartupLocation.CenterOwner;

radWindow.Header="International Motor Company";

TextBlock tb=new TextBlock();

tb.Text="Created by : International Motor Company \r\nVersion 1.0 \r\nAll Rights Reserved.";

tb.VerticalAlignment=System.Windows.VerticalAlignment.Center;

tb.HorizontalAlignment=System.Windows.HorizontalAlignment.Center;

radWindow.Content=tb;

radWindow.ShowDialog();

We first created an instance of RadWindow, then set a few properties relating to position and then created a TextBlock to display the text shown in the window. Finally, we wrap up by showing the dialog to the user.

Summary

We have taken a look at what the Manufacturing Industry is, along with the requirements found in that industry. We built a small sample application using RadControls for WPF and it helped us complete the project in a timely manner. I would encourage you to download RadControls for WPF and check out the source code of the sample application to get a better understanding of how the controls were used. If you have any questions or comments, then please leave them in the comment field below. But before you go:

Do you work in the Manufacturing industry? What scenarios do you encounter? What strengths and weaknesses do you find in using WPF? If you’re not in the Manufacturing industry, do you see similar challenges in your industry? How do they differ?

Also check out: Jesse Liberty’s post on the BFSI Industry using WPF.