Running DevExtreme as MVC project in simulator

DevExtreme has a nice (web) simulator that lets you preview your application on a target device (tablet, phone, iOS, Android).

 

That’s really nice. However, out of the box, it works only when you have a special type of Visual Studio project that comes with DevExtreme (when you create a new DevExtreme project through one of its templates). Which might be a problem if you have other project type (i.e. MVC) instead – DevExtreme project is meant for distribution as a packaged “native” application. In that case no simulator for you, at least not out of the box.

Luckily here is a simple solution how to enable simulator for any web project. The mandatory step is to

  • find WebServer folder that is part of DevExtreme extension for Visual Studio. Mine is located in C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE\Extensions\mblaqgom.mw5.
  • from WebServer folder found in step above copy simulator.html and Images and Simulator folders to root of your MVC project.
  • Do not copy web.config – it will wreck your application

That’s it. You can run your application by going to URL/simulator.html?appPage=index.html (assuming your starting page is index.html). Note that you can pass other parameters to simulator as well, like device=iPhone and orientation=p..

If you want to omit the appPage=index.html parameter you can rename index.html to app.html and simulator will pick app.html by default.

Incoming TypeScript definitions for PhoneJS and ChartJS (DevExtreme)

PhoneJS along with ChartJS are DevExpress’ efforts in providing single page web applications for mobile platforms (think Tablets and Phones).  Together they are combined into DevExtreme combo. In practice they are pure javascript libraries without ties to any server side platform - which is good, are built with KnockoutJS, jQuery in mind, etc (really plenty of nice features, check hyperlinks). And they can be packed into “native” applications for various platforms using PhoneGap. Added bonus is an emulator (again in javascript) that let’s your preview applications. Everything you need to run projects based on DevExtreme is a web server. Any web server on any OS since they are client side stuff.

I recently poked around this technologies and I soon felt that one, rather important feature (well, to me at least) was missing. Typescript definition files were missing. Until now that is. They are coming with v13.2 and you can already preview them in beta. Plus, there is a template that let’s you start your project with Typescript code instead of Javascript. While this doesn’t seem a big deal, well, it is. Typescript is a huge boost for javascript development, more so when it comes to bigger projects. Hence it is a big deal to be able to use all of Typescript goodies with DevExtreme goodies. And now I can.

Other improvements are coming as well (improved theming, improved and new widgets, localization…). While I can’t call myself experienced in DevExtreme it will be definitely my first choice for new projects.