Light up Your Modern Apps with DevExtreme

Editor’ Note: This product was updated and renamed from DXTREME to DevExtreme.

With the release of Windows 8, and the remarkable PCs and devices such as the Microsoft Surface that it powers, you’ve probably seen some rich, interactive, modern applications, and wondered how you can build them for yourself. Developer Express has always been a leader in creating controls and add-ons to the development environment that make the task of building applications as easy as possible, and Windows 8 application development is no exception.

DXTREME (http://www.devexpress.com/subscriptions/DXTREME) is a new set of development tools that will allow you to build apps for this platform using XAML, as well as building for multiple mobile platforms using JavaScript and HTML. In this article, you’ll go end-to-end in building a rich, interactive application for Windows 8 using DXTREME XAML Controls.

The Application – Twitter Sentiment Search

The application that you’ll build in this article is one that allows you to search for a term on Twitter, display the most recent tweets about that term in a visual way, including pins on a map, and calculate a sentiment about those terms, so you can see if people are saying good things, bad things or neutral things about whatever you are interested in.

You can see a screenshot of the app in Figure 1. It is a panoramic app, touch-friendly allowing you to swipe across it to see new data.


Figure 1. The Tweet Search App

As you pan across the screen, you’ll see different information, including a chart of the most frequent tweeters, a map, and a character whose expression will change based on the sentiment. Sometimes he’s happy because you’ve said nice things. Sometimes he’s not. See Figure 2.


Figure 2. More information on the Tweet Search App

Building an application like this, with this much rich functionality might sound to be a very difficult proposition. But, thankfully, when using DXTREME, a lot of the hard work of the user interface is done for you. As you step through this article, you’ll see just how straightforward it can be. This will allow you, as a developer, to focus your time on what makes your application unique – in this case searching Twitter and aggregating the information, etc., so that you can provide greater value for your end users.

Introducing DXTREME

The DXTREME XAML Controls suite provides a number of different controls that your application can take advantage of. These controls come in a number of different groups:

  • Application Layout Controls are perhaps the single most useful set of controls, and something you’ll find indispensable as you build modern, Windows 8 applications. They provide the different types of views that you can have in your app, such as pages, tabbed views, sliding views, etc. The Twitter application uses Application Layout Controls extensively, making for example, the panoramic ‘sliding’ very straightforward.
  • Charts – DXTREME offers two types of charts, the Cartesian chart, which allows you to do standard bar, line, time series charts, etc. The Bar chart showing the tweeters in Figure 2 is an example of this. The Pie chart, which gives you a simple-to-implement pie chart, is seen in Figure 1.
  • Gauges are visualizations that offer a real-time view of rapidly changing data. Examples of these are Circular gauges that show information represented by a needle pointing to the arc of a circle, like a speedometer in a car or Linear gauges that show an example of an amount as a percentage of a filled line, like you would see with a thermometer.
  • Grids are, as the name suggests, controls that allow you to display data on a spreadsheet-like interface. They can be data bound, making the creation of dashboard style apps very straightforward.
  • Maps are, as their name suggests, controls that allow you to easily add an interactive map to your application. The DXTREME map control supports multiple mapping back-ends including Bing Maps, and the rights-free Open Street Map (http://www.openstreetmap.org).

You can download DXTREME from http://www.devexpress.com/Subscriptions/DXTREME/.

When you install DXTREME, you get all of the controls in these categories, as well as a number of Visual Studio 2012 templates that give you a quick start. Once installed, you’ll see the Windows 8 XAML control panel on your start screen. Launch it and you’ll see the desktop app from Figure 3.


Figure 3. Windows 8 XAML Controls Panel.

The Feature Demo contains a number of small, sample applications, focused on scenarios for a particular control. As a developer, you’ll find these extremely useful. It’s all too easy to get a new set of controls, only to find them buried in a big sample app and hard to learn from! But with DXTREME, the Feature Demo is your friend, giving you the code and the XAML that you need to implement a particular control.

You can see an example of this in Figure 4, where the Pie Chart control is shown.


Figure 4. Pie Chart in Feature Demo app.

Clicking on ‘Code’ on the top right hand side of the screen will show the XAML and/or C# code that is needed to implement a particular feature. It’s an extremely useful learning tool.

And, of course, in addition to the feature demos, the control panel also has a ‘Solution Demo,’ which is a full featured, real-world-like app (it uses dummy data), that shows off the type of application that is possible in Windows 8 with DXTREME.

It’s a Financial Tracker application, allowing you to look at a number of accounts, and their balances, etc. You can see it in Figure 5.


Figure 5. The Financial Application

In addition to all this, Visual Studio also has a bunch of new project templates and item templates that will allow your development to get up and running more quickly. You can see these as Windows Store items in Visual Studio 2012. See Figure 6.


Figure 6. DXTREME Templates in Visual Studio

All of these tools are useful to help you learn how to build a better app using DXTREME. For the rest of this article you’re going to roll your sleeves up and build your own, seeing how it’s done, step by step.

Getting Started with the Twitter App

To get started with the Twitter App, launch Visual Studio 2012 and choose the DXTREME 12.2 Blank App (XAML) template from the Windows Store Section in the templates list, as shown in Figure 6.

Call it ‘TweetSentiment’, and Visual Studio will create the project for you. This project will contain a page called MainPage.xaml containing a PageAdornerControl from DXTREME.

This control provides the ‘header’ for a Windows 8 page, where the title of the current page is rendered at the top, and ‘back’ navigation to the previous page, if you are clicking through, is available.

The text at the top of the page is data bound to the page’s view model, so to change it from the default ‘Header’ to a value such as ‘Twitter Search’, simply go to the view model for the page MainPageViewModel.cs and edit the property. You can do this at design or run time, but it’s a good idea to set the default value at design time. Simply edit the code in the view model constructor to read ‘Twitter Search’.

Run your app and you’ll see something like Figure 7.


Figure 7. Running the app.

It may not look like much right now, but it’s the beginnings of your app. In the next section, you’ll see how to create the view models that give you the results of a tweet search.

More by Author

Must Read