Mobilize Blog

Application Modernization

WebMAP: changing the Kendo theme

Posted by John Browne on Jun, 21, 2018 @ 13:06

In our last blog post, we looked at how to change the styling of individual elements in our migrated Angular application. Just a reminder in case you haven't been following along, this is a simple hello world app migrated from Windows Forms to HTML and ASP.NET Core with WebMAP5.

Find the selector, edit the css file, and rebuild it. You can change the global styles.css file or individual css files for each component.

Or, as we will show in this post, you can change the whole kit and caboodle.

Progress Kendo UI has a full set of web components for Angular. And it happens to be our reference implementation for WebMAP

Kendo UI has three themes that are available: the default theme, which is what we implemented, a Bootstrap theme, and a material theme. Today we'll take our little hello world app and switch it to the hyper-cool material theme.

To set the stage, here's what our hello world app looks like using the default Kendo theme (which is the WebMAP default):


It's not bad, but there's room for improvement. Let's get busy.

Installing the Kendo UI material theme

Th is is easy-peasy. Open up the angular folder in Visual Studio Code, get a terminal, and install using NPM:

npm install --save @progress/kendo-theme-material

Once the theme has been installed, you can verify it by looking in node_modules\@progress\kendo-theme-material\dist where you should find the all.css file, a minified version of the styling for the theme. If you want to see what the theme does, the Kendo UI documentation has great examples.

Ok, all we have to do now is include the theme in our app and rebuild it. 

In our .angular-cli.json file we need to change the styles from kendo-theme-default to kendo-theme-material, like so:

All that remains is to execute an ng build command in the terminal and the front end code will be changed to the new theme. 

Here's our app running in material theme:

Themes are a great way to jumpstart a complete re-do of the look and feel of an app. And, of course, you can always go into the global styles or individual component styles to override something you want to change. We covered that recently.

Read More

Topics: Web Application Development, WebMAP

Modifying a WebMAP5 app

Posted by John Browne on Jun, 13, 2018 @ 15:06

We recently updated our WebMAP architecture posts to reflect the significant improvements that WebMAP5 makes in generated app code (compared to previous versions). If you haven't seen them, this is a good time to check out the details here, here, and here.

Read More

Topics: application modernization, WebMAP

WebMAP app architecture part 3

Posted by John Browne on Jun, 06, 2018 @ 13:06

Before we jump into the last installment, let's briefly review what we leaned in part 1 and part 2. If you're just jumping into this here, you probably want to go back to the beginning and read from there.

Read More

Topics: Web Application Development, WebMAP

Best of Build 2018 #MSBuild

Posted by DeeDee Walsh on May, 22, 2018 @ 21:05

It's been a couple of weeks and now we're fully recovered from the massive information dump we received at Microsoft Build 2018. Between tons of technical sessions, lots of new announcements, reconnecting with old friends, attending lots of parties and best of all, getting to hang out with bunnies and small horses (yes, Build had a petting zoo this year...), we had another great show. We have a yearly tradition of picking out our favorite sessions from Build so without further ado... 

Read More

Topics: Azure, Visual Studio, developer productivity, #MSBuild, Build, cloud, IoT, developers, code

Best of Build Day 3

Posted by John Browne on May, 09, 2018 @ 17:05

Instead of boring old words today I just decided to show you some Build 2018. So check out the completely unedited video. And congrats to our XBox winners. We went a little crazy and gave away three, not two.

Read More

Topics: #MSBuild

Best of Build Day 2

Posted by John Browne on May, 08, 2018 @ 17:05

Tuesday May 8 dawned foggy with a promise of clear blue skies later. There was no fogginess in Microsoft's announcement of .NET Core 3, however where they are doing  a lot of work to make older technologies like WPF and Win32 play nice on Windows 10. They even got Paint to run on on .NET Core 3 without access to the sources. So that implies that implementing this on your old code could be as easy as replacing some libs.

Read More

Topics: #MSBuild

Best of Build 2018 Day 1

Posted by John Browne on May, 07, 2018 @ 17:05

Build is Microsoft's annual homage to dorkiness and it's here in full glory. The de rigueur attire is a teeshirt with some kind of nerdy slogan or product (acceptable alternatives include beer but only craft beer), jeans, and a backpack apparently stuffed with the owner's entire worldly goods. 

Read More

Topics: #MSBuild, Build

Introducing WebMAP5

Posted by John Browne on May, 06, 2018 @ 20:05

When I first joined Mobilize.Net--actually before I joined Mobilize.Net, since I was interviewing for the job--and I heard the business model was tools to do code conversion,

Read More

Topics: WebMAP

Microsoft Build 2018 - Here we come!

Posted by DeeDee Walsh on Apr, 17, 2018 @ 18:04

It's that time of year when we get ultra-excited for our favorite developer event - Microsoft Build - the quintessential geek event! You want code? There's tons of code. You want Microsoft technical gods and goddesses - Build's got 'em. It's in Microsoft's hometown so all of the smartest and best Microsoft technical folks will be speaking and hanging out.

Read More

Topics: software development, Web Development, DevOps, developer productivity, #MSBuild, Build, cloud

Solving the legacy database problem

Posted by John Browne on Mar, 01, 2018 @ 06:03

Not every legacy app has a database connection but I've yet to see one of any size or value that didn't.

Read More

Topics: CONNX, data modernization