A couple of weeks ago at the Microsoft Visual Studio Partners annual shindig and crabfeed (actually there was no crab), it was nice to run into Marissa Keller Outten from Syncfusion.
Syncfusion has been around since the early days of .NET with a terrific set of widgets to make your Windows or web app shine. Let's face it, the default set of Winforms controls are BORING. I think it would be cool to have something like this:
Or this:
Or maybe a camouflaged progress control for my new game Whack-a-Rat Extreme:
Anyway, Dee Dee Walsh and I were at the VSIP summit on campus and spent a bit of time with Marissa catching up on what's new over in North Carolina (home of the world's best BBQ and I will fight anyone to the death defending that opinion).
If you haven't checked out the astonishingly vast assortment of goodies available from Syncfusion lately you're missing out. Now the days of VB6 are gone, gone, gone so forget about finding component vendors who are still doing that, but for .NET or web you can get some nifty stuff. Developers could transform their VB6 apps using WebMAP 4.0 and then add some cool new UI features from Syncfusion.
One of the things that I like a lot is their HTML Dashboard.
I asked Marissa if the nice folks at Syncfusion would be interested in adding their dashboard to our sample app (Salmon King Seafood aka SKS). They kindly agreed so I sent them a copy of the source code after migrating it from C# to HTML5 using WebMAP. How did I migrate it with WebMAP? If you're new to this blog/website you may be confused by that simple statement. Alow me to doubleclick it briefly--if you're already familiar with WebMAP feel free to skip ahead.
WebMAP combines machine learning and AI to analyze and understand C#/.NET code and rebuild it as new code using ASP.NET MVC on the server side and HTML, TypeScript, Angular JS (or) KendoUI on the client side. In short--from desktop to modern web app. Old code becomes new code. Like you wrote it yourself, but about a zillion times faster and with fewer bugs to chase.
That's WebMAP.
Anyway, I migrated our demo app (Salmon King Seafood) from C# to ASP.NET MVC and sent it to Syncfusion to add a dashboard. They promptly returned it and I was interested to see what had changed.
Let's start with the UI. They added a menu item for the dashboard like so:
Clicking on the menu brings up a nifty view of the orders.mdb database:
Let's look at what it took to add it to the migrated SKS app:
That, of course, is super easy now that the UI is all HTML and CSS. Opening the SKS.frmMain.html file we see the following element was added to create the menu item:
Notice we are binding two elements: one for the top-level menu item (Dashboard) and one that actually links to the dashboard itself.
Since this app is MVC we have to add a bit more code.
We need to create a viewmodel in the frmMainViewModel.cs.
First, we add it to our Build() method to instantiate it (note because we're using DI we don't use the "new" keyword, instead we have to resolve the container):
And also:
MainMenu1.AddItem(mnuDashboard);
And of course we have to declare it:
public virtual UpgradeHelpers.BasicViewModels.ToolStripMenuItemViewModel mnuViewDbrd { get; set; }
public virtual UpgradeHelpers.BasicViewModels.ToolStripMenuItemViewModel mnuDashboard { get; set; }
While WebMAP defaults to put controllers in separate files (one per each original form file), you don't have to do it that way. The folks at Syncfusion elected to put the controller for the dashboard menu item in the HomeControllers.cs file (which WebMAP doesn't use, since we are creating a single page application). So to route the clicks on the dashboard menu item, we add the following code:
Note that the controller calls the dashboard service, which is installed on the web server (or somewhere else--it's just a URL). In this case--running on my development machine--it's installed locally and served via localhost.
Finally, in our logic file (frmMain.cs), we have to add the menu item to both the startup and shutdown methods:
ViewModel.mnuDashboard.LifeCycleStartup();
ViewModel.mnuDashboard.LifeCycleShutdown();
That's all that's necessary to build, connect, and bind our new menu item.
As you would expect, there's a boatload more gadgets you can drop onto your dashboard.
To try out the Syncfusion Dashboard Platform yourself, you could either download the free 30-day trial or download the Community License Edition if you are an individual developer or working at a start-up.
To kickstart your project migration from VB to .NET, check out the free app modernization starter kit.