The Dew Review – DevExpress Universal 14.2.4

Intro

Over the last several years, I have reviewed DevExpress components a number of times. Here are four of my most recent reviews.

This year I have been looking at and starting to use several components from the Universal 14.2.4 release. The DevExpress Universal subscription encompasses controls and modules for all types of .NET development as well as cross platform web and mobile development with DevExtreme. From WinForms to WPF and Windows Universal apps on the client, and WebForms, MVC, HTML5/JS on the web, DevExpress has something for every modern developer on the Microsoft stack.

What’s New

Something that is easily noticed about the 14.2.4 release of DevExpress is that there is a focus on delivering components that enable developers to create great experiences on today’s devices. First and foremost, that means touch. Unless you’re buying a server, it’s hard to find a new Windows device that isn’t touch enabled in some way, either the screen itself or via a multi-touch touchpad. Today’s apps need to support taps, pinches, flicks, and swipes. The Windows and web components from DevExpress help make that possible. Read more about it here.

Let’s call out a few specific new and/or improved features of the 14.2 release.

WinForms

  • Ratings Control
  • TimeSpan Editor
  • SQL Data Access Component
  • Workspace Manager

ASP.NET WebForms

  • Rich Text Editor
  • New Design-Time Wizards to create controls
  • Adaptive Panels – Get responsive layouts for your content
  • Spreadsheet – Password Protected Sheets and Elements added (Demo)

ASP.NET MVC

  • MVC Spell Checker
  • Spreadsheet – Password Protected Sheets and Elements added (Demo)

WPF

  • Radial Menu
  • Spell Checker – Check-as-You-Type Mode added
  • Chart Control – New series types added: Spline, Spline Area, Stacked Spline Area & Full-Stacked Spline Area

Windows 8 XAML

  • Tile Bar
  • MVVM Support

XAF

  • End-User Report Designer
  • New Notifications Module

DevExtreme

  • A Slew of new HTML5/JS Widgets
  • iOS 8 and Android 5 Support

Areas of Focus

Due to the breadth of the DevExpress Universal product, I’m going to focus on a couple of areas within the WPF and DevExtreme products.

WPF

Sample – Video Rental

One of the WPF sample applications provided with DevExpress Universal is the Video Rental application. It is a full-featured application for managing the operation of a video rental shop. Here are a few screen shots of the application in action.

View WPF Video Rental Sample Application

The application makes use of some of the rich Office-style controls you might find in Outlook, including a ribbon-style toolbar, whose contents are context aware and change while navigating through the application.

The code is extensive and well designed. The ViewModels are broken out into their own project, with other projects for UI, Resources, and Data/Platform Services. Here’s a diagram of the project dependencies.

Screen Shot 2015-02-07 at 1.57.40 PM

This is a good example of a fully baked, line-of-business app that can be built with WPF and DevExpress.

Templates

DevExpress Universal includes a template wizard to select the starting point that best suits your project based on platform, DX version, and programming language. When selecting WPF as the platform, the following templates are available.

WPF Templates 1

Selecting the ‘Project Wizard’ option, guides the developer through a series of choices to build the best possible starting point for the project. I’ve included the steps I have chosen in this gallery.

View WPF New Project Wizard

Obviously, not every project requires all of these features, and every step is an optional selection. Completing the wizard with all of the selections above produces a main window that looks like this. A complete UI ready to be hooked up to a view model with the DevExpress MVVM framework or any other MVVM framework. A reference to DevExpress.Mvvm.dll v14.2 is automatically added to the starting project.

WPF Main Window

Feature Focus – MVVM Support with POCO ViewModels

There are a handful of popular MVVM frameworks available to .NET developers, including MVVM Light and Caliburn.Micro. The DevExpress MVVM Framework has one feature that sets it apart from many others.

A developer can create a POCO (plain old CLR object), and turn it into a ViewModel based on convention and a call to the DevExpress.Mvvm.POCO.ViewModelSource class. The following conventions define how ViewModelSource will create the resulting ViewModel from the provided POCO.

  • All public virtual and auto properties with public getters and public/protected setters will have bindable properties generated.
  • If specific logic is to be executed when a property changes, a method should be created with either of these formats:  On[Property Name]Changed() or On[Property Name]Changing().
  • Commands are generated for all public methods with 0 or 1 parameters. There is an optional Command attribute and a fluent API to control the creation of the commands.
  • IDataErrorInfo can be added to POCO classes for validation by adding a class level attribute

Here’s a simple POCO that will be turned into a full-featured ViewModel at runtime by ViewModelSource using Reflection Emit.

using System;
using System.ComponentModel.DataAnnotations;
using DevExpress.Mvvm.DataAnnotations;
using DevExpress.Mvvm.POCO;

namespace Alvin.DXWPF.Sample1
{
    [POCOViewModel(ImplementIDataErrorInfo = true)]
    public class MainViewModel
    {
        //Bindable SummaryName property will be created with validation
        [Required(ErrorMessage = "Please enter the summary name.")] 
        public virtual string SummaryName { get; set; }

        //Bindable Categories property will be created
        public virtual IObservable<string> Categories { get; set; } 

        //SaveSettingsCommand will be created
        public void SaveSettings(string fileName) {
            // save logic here
        }

        //Will validate if the SaveSettingsCommand can be executed
        public bool CanSaveSettings(string fileName) {
            return !String.IsNullOrEmpty(fileName);
        }

        //Method that will NOT become a Command
        [Command(isCommand: false)]
        public void DoSomethingThatIsNotACommand()
        {
            // doing stuff
        }

        //prevent creating the View Model without the ViewModelSource 
        protected MainViewModel() { }

        //Use the ViewModelSource class to create a MainViewModel instance 
        public static MainViewModel Create()
        {
            return ViewModelSource.Create(() => new MainViewModel());
        } 
    }
}

As you can see, this method of creating view models can keep classes simple and clean.

DevExtreme

Sample – DX Hotels

The DX Hotels sample application is a web application for booking hotel rooms. It is built on the DevExtreme platform using ASP.NET MVC, Razor views, OData, Entity Framework, jQuery and Knockout.js. Here’s a peek at the project structure.

Screen Shot 2015-02-07 at 12.29.39 PM

This is what the page looks like when first loaded. The web application’s user can select a location and dates for booking.

DX Hotels Screen

The amount of code in this project is much less than the WPF sample project for Video Rentals, but it also has a good deal of feature function. Users can search for, select and book hotels, and there is a simple login function that takes any user/password combo and simulates a logged-in state.

Templates

DevExtreme templates provide options to create JavaScript or TypeScript applications, as well as OData service projects in Visual Basic or C#.

Screen Shot 2015-02-07 at 2.55.18 PM

Selecting the “DevExtreme 14.2 Basic Application” template produces the following for a new project.

Screen Shot 2015-02-07 at 3.04.45 PM

In addition, there are 13 CSS files inside the css folder. The project is a cross-platform mobile web app which will launch in web based simulators in the selected browser when running the solution. By default, iOS is the selected simulator. Here’s the bare-bones project running as an iOS DX app.

Screen Shot 2015-02-07 at 3.07.15 PM

Because DevExtreme apps take advantage of Apache Cordova, your apps can access native platform features like camera and location across device types. There has been a lot of discussion around Cordova app development recently, with the capability to build these apps being built in to Visual Studio 2013 and 2015. DevExtreme has been making this possible for a couple of years now.

Wrapping Up

This article has taken a look at just a small part of what is possible with the controls and modules available in DevExpress Universal 14.2. Visit the DevExpress website to learn more about what their control suite can do to accelerate your application development in 2015, and don’t forget to download a free trial.

My next review will focus on DevExpress TestCafé, a powerful to make functional web testing easy and fun. Check back soon to read all about it.

 

Happy Coding!

 

Disclosure of Material Connection: I received one or more of the products or services mentioned above for free in the hope that I would mention it on my blog. Regardless, I only recommend products or services I use personally and believe my readers will enjoy. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.

 

The Dew Review – DevExpress WPF Subscription – 2013.1 Release

Introduction

I have been using the latest release (2013.1) of DevExpress’ WPF Subscription over the last several weeks on my new Ultrabook, and I have had a great time exploring the expansive collection of tools and controls included in the suite. I have only used a fraction of the available controls available in this release, but I have been very impressed with everything I have been able to test drive so far.

What’s New

DevExpress has been building WPF controls for a long time now, but I cannot remember the last release with so much new stuff included. Here’s a quick rundown of the new features in 2013.1:

  • Getting Started Tutorial (New – Online)
  • Data Grid (Enhanced)
  • Chart Control Wizard (New)
  • Map Control (Enhanced)
  • Property Grid (New)
  • Row Multi-Select in Grid Lookup Control (New)
  • Range Control Integration in Scheduler Control (New)
  • Design-Time Extensions (SmartTags in the Designer) (New)
  • Scaffolding Wizards (New)
  • WPF Data Source Wizard (New)
  • Instant Layout Assistant (VS2012 Only) (New)
  • Icon Library w/VS Integrated Image Picker (New)
  • Windows UI Style Controls (New)
  • Touch Enabled Theme (New)
  • Window Visual Effects (New)
  • Touch-Friendly Date Picker Control (New)
  • Touch-Friendly Range Control (New)
  • Visual Studio Template Gallery

Quite a list, eh?

I will focus this article on a few of the coolest (in my opinion) features: the Template Gallery, the Windows UI Style Controls, and the Touch-Enabled Theme.

Template Gallery

DevExpress now integrates their own Template Gallery into Visual Studio. Under the DevExpress menu, you will find an ‘All Platforms’ submenu containing ‘New Project’ and ‘New Item’ menu items.

dx1

Selecting either of these launches the Template Gallery. The project templates are divided into WPF Common, WPF Business Solutions, and WPF Windows UI Solutions.

dx2

The Business Solutions are project templates that create Word and Outlook applications with main windows that are modeled after Microsoft Word and Outlook, each very functional. Here is a screen shot of the Word style application running with no extra code added:

dx3

There is a full ribbon control filled with controls that manipulate the rich text editor. Everything I tried works as expected.

The ‘New Item’ Template Gallery window provides the following list of item templates to select:

  • WPF Common
    • DXWindow
    • DXRibbonWindow
    • DXSplashScreen
    • UserControl
  • WPF Views for MVVM
    • Tabbed MDI View
    • Business Object View
    • Collection View
  • WPF View Models for MVVM
    • Blank View Model
    • Business Object View Model
    • Collection View Model
  • WPF Data Models for MVVM
    • Entity Framework Data Model

Each of the item templates has its own wizard to assist in binding to existing or new data sources. MVVM out-of-the-box… nice. Hopefully, we will have the same kinds of choices built into Visual Studio’s New Item dialog soon.

Windows UI Style Controls

Selecting the Tile Application project from the DevExpress Template Gallery will create a WPF project that looks like a Windows UI Style app. Run the project for the first time and here is what you will see:

image

It is a full-screen WPF desktop application with no close button or other window chrome. If you didn’t alt-tab back to Visual Studio and see the application’s icon in the Windows Desktop taskbar, it would be hard to tell the difference. The Windows 8 look-and-feel is provided by the DevExpress TileLayoutControl and groups of TileControls.

This is an MVVM application with two views (in addition to MainWindow.xaml), two view models and a sample data source used as the model.

image

Touch-Enabled Theme

A new theme called TouchlineDark was added to support touch screen PCs and tablets. By changing the dx:ThemeManager.ThemeName to TouchlineDark in MainWindow.xaml from the previous section, the whole app switches to the new theme.

image

By default, DevExpress WPF controls styled with this theme will be larger and more touch-friendly, as can many of the standard WPF controls from Microsoft. Here’s a shot of the DevExpress WPF Data Grid using TouchlineDark I found in the online documentation.

HelpResource

Summary

As you can see, the WPF Subscription from DevExpress has everything a developer could ask for to create great-looking line-of-business (LOB) or Windows UI Style applications in as little time as possible. With advanced support for MVVM, data binding, theming and simple but powerful controls, the suite will be an integral part of my developer toolbelt for my next WPF project.

Happy coding!

 

Disclosure of Material Connection: I received one or more of the products or services mentioned above for free in the hope that I would mention it on my blog. Regardless, I only recommend products or services I use personally and believe my readers will enjoy. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.

 

Mastodon
github.com/alvinashcraft