October 25, 2013 at 09:00DevExtreme: Quickly Create a Cross-Platform HTML5 Business Application in Visual Studio
- Tutorial
In previous articles, we already wrote about our framework for mobile development - PhoneJS . Today we’ll tell you about another product that is designed to increase developer productivity, including for mobile platforms.
It's about DevExtreme , a toolkit for Visual Studio 2010 and later.
DevExtreme includes:
A business application is usually the interface around the database plus business logic. Many web frameworks (Ruby on Rails, Django, Yii, ASP.NET MVC and others) include scaffold tools for instantly generating an application framework based on existing data.
DevExtreme provides a similar opportunity to create so-called multi-channel applications that will work both on mobile devices (including iOS, Android, Windows Phone 8, Tizen and Microsoft Surface), and in regular web browsers. This is done using a special generator.
Let's look at his work in action using the example of creating a simple system for processing orders.
Good applications consist of a frontend and a backend. Backend is increasingly being made as a thin server (for example, a REST service). The OData protocol is popular among .NET developers , so our wizard can generate code based on meta data returned by the OData service.
In general, when generating an application through a wizard, you can use any ready-made OData service with CORS or JSONP support . In our example, we will create our service using the DevExtreme 13.1 WCF OData Service project template , which is a slightly improved standard service over the Entity Framework model (we added support for CORS and JSONP as well
So, create a new project. Call it, for example, CRM.DataService. For the Solution name, we simply specify CRM.
Select "Generate from database".
Click "New connection".
For example, take the well-known Northwind.
We select the tables we need: Categories, Customers, Employees, Order Details, Orders, Shippers, Suppliers.
Done. You can already open our service in the browser (View in Browser in the context menu) and make sure that everything works fine:
We proceed to the generation of the application.
Now that we have a ready-made service with data, you need to add a new project using the DevExtreme 13.1 Multi-Chanel Application template . Do File > Add > New Project .
We select the necessary platforms on which our application should work. We note all.
Next, we indicate one of the predefined layouts. Let it be SlideOut.
In the next step, the wizard offers to select a data source. If the OData service is in the same solution as the application itself (like ours), then the data source will be specified automatically. If you use some kind of remote service, you must specify the URL manually.
Check the connection by clicking "Discover." Now you can select the necessary tables to generate models and views.
Please note that in the “Generate views” column, we marked only three entities that we want to use in the UI. The rest is needed only for working with data.
The switch in the “View generation options” section allows you to select the degree of isolation of the views. We'll specify “Add generated views to the shared platform-independent project” to use shared view files for all platforms, thereby avoiding code duplication.
On the other hand, if you want to customize the appearance on different platforms, it makes sense to generate files separately for each project. However, files can be copied from a Shared project to platform projects, and then some of the views will be common, and some specific.
Click Finish to complete the generation.
As a result, we get the following projects:
They have a similar folder and file structure, let's look at it in a bit more detail:
At the root are index files and configuration files.
Let's make CRM.Mobile the starting project and press F5 !
The browser starts and the application opens in the simulator. In it, you can view and edit information about products, suppliers and orders.
I would like to dwell a bit on the visual elements (widgets) that are used in the resulting application.
To present a list of data, dxList is used . It supports templates for items, displaying grouped data, and mobile UI idioms such as pull down to refresh and loading as you scroll.
Input fields are represented by the following widgets:
A complete list of widgets can be found in the documentation .
In order to check the operation of the application on a specific platform, a panel is provided on the left side of the simulator page where you can change the application theme and simulator skin, for example, on iOS7 or on Tizen expected from day to day . Themes for Android and Windows Phone 8 are also available.
Under the theme switching panel there is a QR code for debugging the application on a mobile device through a cloud proxy server, piercing access to the developer's machine.
The QR code contains a special URL that can be opened in the device’s browser or in the Courier application (available in iTunes and Google Play) Launching through Courier is functionally similar to assembling a native package with subsequent installation on a smartphone / tablet, but it saves time.
Applications for other platforms are located in the respective projects and run just as easily: CRM.Desktop launches a browser, CRM.Win8 launches the Windows Store application in full screen or in the emulator, and CRM.Win8Phone opens in the Windows Phone 8 emulator (provided that you have the SDK installed).
So, we got the application framework without writing a single line of code. Of course, the application has a fairly simple appearance, which is typical for business applications, but DevExtreme allows you to change and customize the UI to your taste.
The first thing that catches your eye is the lack of icons for the items "Orders" and "Shippers" in the navigation panel. This is explained by the fact that in the standard set there are no icons with the names “orders” and “shippers” (a complete list can be found in the demo application Kitchen Sink ).
For orders, it is quite possible to use the image “Money”, and for suppliers - “Car”. To do this, in the CRM.Mobile project in the crm.config.js file in the array,
See diff on GitHub .
All orders can be grouped into the following categories:
The dxTabs widget is well suited for visualizing these three groups . Add it to the markup. Double-click to open the file views / order / orders.dxview from the CRM.Shared project, a visual editor will open.
Make sure that it is configured for the right project and the right theme:
In the Toolbox, find the dxTabs widget and drag it onto the view layout.
The properties (Properties) change widget options
in the file with the code orders.js implement logic partitioning orders for the group. See full diff .
The product list now contains only names. It is logical to add prices here, for example, in the format of $ 9.99. To do this, in the views / product / products.dxview, change the markup :
On this screen, for more information, you can specify the contact details of suppliers.
Northwind has a phone number for each vendor. We will use it. Add the contact number to the shippers.dxview view:
Here, in addition to general information about the order, it would be convenient to display the products included in the order. To do this, add the data source for order products to the file with the code order-details.js:
For a visual representation of the list of products we will use the dxList widget . This can be done using the visual designer or manually. As a result, the following markup should be obtained:
See full diff .
The second thing that needs to be changed is the display of information in the field
It is also necessary to make similar changes to the order editing view - order-edit.dxview and to the file with the code order-edit.js. In the view order-details.dxview, the field must be specified
On this, customization of the application will be considered complete. But if necessary, you can make deeper changes to both the logic and the user interface.
The final chord of developing a mobile application using DevExtreme is the assembly of the native package and its installation on the device.
DevExtreme allows you to build packages for the following platforms:
Let's pack our app for the Android platform. To do this, on the project "CRM.Mobile" you need to right-click and select "Build native packages ..." in the menu that appears. After that, a dialog will open, with the help of which we will collect the native package.
Choose Android:
Next, you can use the existing developer certificate for Android, or generate a new one. To create a new certificate, Visual Studio must be running with administrator rights.
Now, you can start building the package and then install the resulting APK file on your Android device.
Next, you can click “Build another package” to build for other platforms or “Finish” to return to the IDE.
We showed how to quickly create cross-platform applications in Visual Studio using DevExtreme. From the launch of the IDE to the assembly of installation packages, ready to be downloaded to application stores, we spent no more than 15 minutes!
The resulting solution (available on GitHub ) contains a REST service for accessing data and workable project skeletons for desktop computers and a number of mobile devices - from iPhone to Microsoft Surface.
“Overboard” left a lot of interesting things, for example, we did not talk about the visual designer for ChartJS diagrams at all . We hope to fix this in the following articles, but for now we ’ll once again provide links to the official DevExtreme page and the DevExtreme Learning Center .
It's about DevExtreme , a toolkit for Visual Studio 2010 and later.
DevExtreme includes:
- Mentioned above PhoneJS .
- JavaScript library for visualizing ChartJS data .
- Project template for Visual Studio.
- A wizard for quickly creating a cross-platform application.
- Integrated visual designer in Visual Studio.
- A simulator of a mobile device for debugging an application in a browser.
- Means for quick launch on the device by QR code
- Tools for packaging applications in native containers.
A business application is usually the interface around the database plus business logic. Many web frameworks (Ruby on Rails, Django, Yii, ASP.NET MVC and others) include scaffold tools for instantly generating an application framework based on existing data.
DevExtreme provides a similar opportunity to create so-called multi-channel applications that will work both on mobile devices (including iOS, Android, Windows Phone 8, Tizen and Microsoft Surface), and in regular web browsers. This is done using a special generator.
Let's look at his work in action using the example of creating a simple system for processing orders.
Creating an OData Service
Good applications consist of a frontend and a backend. Backend is increasingly being made as a thin server (for example, a REST service). The OData protocol is popular among .NET developers , so our wizard can generate code based on meta data returned by the OData service.
In general, when generating an application through a wizard, you can use any ready-made OData service with CORS or JSONP support . In our example, we will create our service using the DevExtreme 13.1 WCF OData Service project template , which is a slightly improved standard service over the Entity Framework model (we added support for CORS and JSONP as well
ImageStreamProvider).So, create a new project. Call it, for example, CRM.DataService. For the Solution name, we simply specify CRM.
Select "Generate from database".
Click "New connection".
For example, take the well-known Northwind.
We select the tables we need: Categories, Customers, Employees, Order Details, Orders, Shippers, Suppliers.
Done. You can already open our service in the browser (View in Browser in the context menu) and make sure that everything works fine:
We proceed to the generation of the application.
Application creation
Now that we have a ready-made service with data, you need to add a new project using the DevExtreme 13.1 Multi-Chanel Application template . Do File > Add > New Project .
We select the necessary platforms on which our application should work. We note all.
Next, we indicate one of the predefined layouts. Let it be SlideOut.
In the next step, the wizard offers to select a data source. If the OData service is in the same solution as the application itself (like ours), then the data source will be specified automatically. If you use some kind of remote service, you must specify the URL manually.
Check the connection by clicking "Discover." Now you can select the necessary tables to generate models and views.
Please note that in the “Generate views” column, we marked only three entities that we want to use in the UI. The rest is needed only for working with data.
The switch in the “View generation options” section allows you to select the degree of isolation of the views. We'll specify “Add generated views to the shared platform-independent project” to use shared view files for all platforms, thereby avoiding code duplication.
On the other hand, if you want to customize the appearance on different platforms, it makes sense to generate files separately for each project. However, files can be copied from a Shared project to platform projects, and then some of the views will be common, and some specific.
Click Finish to complete the generation.
As a result, we get the following projects:
- CRM.Mobile
- CRM.Desktop
- CRM.Shared
- CRM.Win8
- CRM.Win8Phone
They have a similar folder and file structure, let's look at it in a bit more detail:
- data - is present only in the Shared project, contains observable models for entities (Product, Category, etc.),
- js - files from libraries (jQuery, Knockout, PhoneJS, etc.),
- css - built-in styles of themes for coloring the application in accordance with the platform,
- layout - a set of predefined layouts,
- view - application screens (on each screen a markup file and a code file)
At the root are index files and configuration files.
Let's make CRM.Mobile the starting project and press F5 !
The browser starts and the application opens in the simulator. In it, you can view and edit information about products, suppliers and orders.
I would like to dwell a bit on the visual elements (widgets) that are used in the resulting application.
To present a list of data, dxList is used . It supports templates for items, displaying grouped data, and mobile UI idioms such as pull down to refresh and loading as you scroll.
Input fields are represented by the following widgets:
- dxTextBox - for text data,
- dxNumberBox - for numbers,
- dxSwitch - to switch logical values (true, false)
- dxLookup - data entry with a choice from the list.
A complete list of widgets can be found in the documentation .
Debugging
In order to check the operation of the application on a specific platform, a panel is provided on the left side of the simulator page where you can change the application theme and simulator skin, for example, on iOS7 or on Tizen expected from day to day . Themes for Android and Windows Phone 8 are also available.
Under the theme switching panel there is a QR code for debugging the application on a mobile device through a cloud proxy server, piercing access to the developer's machine.
The QR code contains a special URL that can be opened in the device’s browser or in the Courier application (available in iTunes and Google Play) Launching through Courier is functionally similar to assembling a native package with subsequent installation on a smartphone / tablet, but it saves time.
Applications for other platforms are located in the respective projects and run just as easily: CRM.Desktop launches a browser, CRM.Win8 launches the Windows Store application in full screen or in the emulator, and CRM.Win8Phone opens in the Windows Phone 8 emulator (provided that you have the SDK installed).
So, we got the application framework without writing a single line of code. Of course, the application has a fairly simple appearance, which is typical for business applications, but DevExtreme allows you to change and customize the UI to your taste.
Improving the look
Navigation bar
The first thing that catches your eye is the lack of icons for the items "Orders" and "Shippers" in the navigation panel. This is explained by the fact that in the standard set there are no icons with the names “orders” and “shippers” (a complete list can be found in the demo application Kitchen Sink ).
For orders, it is quite possible to use the image “Money”, and for suppliers - “Car”. To do this, in the CRM.Mobile project in the crm.config.js file in the array,
navigationyou need to change the field iconfor the corresponding objects. You can set your own picture through the property iconSrc. See diff on GitHub .
Order list
All orders can be grouped into the following categories:
- New orders (New) - orders for which the delivery date (ShippedDate) and manager (EmployeeID) are not indicated;
- Orders in processing (In Progress) - orders for which the delivery date is not specified, but the manager is specified;
- Shipped Orders — Orders for which a delivery date is indicated.
The dxTabs widget is well suited for visualizing these three groups . Add it to the markup. Double-click to open the file views / order / orders.dxview from the CRM.Shared project, a visual editor will open.
Make sure that it is configured for the right project and the right theme:
In the Toolbox, find the dxTabs widget and drag it onto the view layout.
The properties (Properties) change widget options
items: tabs, selectedIndex: selectedTabIndex, itemClickAction: handleTabClickin the file with the code orders.js implement logic partitioning orders for the group. See full diff .
Grocery list
The product list now contains only names. It is logical to add prices here, for example, in the format of $ 9.99. To do this, in the views / product / products.dxview, change the markup :
Supplier List
On this screen, for more information, you can specify the contact details of suppliers.
Northwind has a phone number for each vendor. We will use it. Add the contact number to the shippers.dxview view:
Detailed presentation of the order
Here, in addition to general information about the order, it would be convenient to display the products included in the order. To do this, add the data source for order products to the file with the code order-details.js:
orderDetailsSource: {
store: CRM.db.Order_Details,
filter: ["OrderID", Number(params.id)],
expand: "Product",
paginate: false,
map: function(item) {
return new CRM.Order_DetailsViewModel(item);
}
},
For a visual representation of the list of products we will use the dxList widget . This can be done using the visual designer or manually. As a result, the following markup should be obtained:
Order items
Quantity:
Total price: See full diff .
The second thing that needs to be changed is the display of information in the field
Employee. It would be more correct to indicate the surname of the employee, and not his position (the heuristic of the generator unsuccessfully selected the Title field). To fix this, you need to present order-details.dxview field Employeeto replace data-bind="text: order.Employee.Title"on data-bind="text: order.Employee.LastName". It is also necessary to make similar changes to the order editing view - order-edit.dxview and to the file with the code order-edit.js. In the view order-details.dxview, the field must be specified
Employeeas the quality , and in order-edit.js, the object displayExprmust be additionally specified in the field .LastNameemployeesSourceselectLastNameOn this, customization of the application will be considered complete. But if necessary, you can make deeper changes to both the logic and the user interface.
Build a native package
The final chord of developing a mobile application using DevExtreme is the assembly of the native package and its installation on the device.
DevExtreme allows you to build packages for the following platforms:
- iOS
- Android
- Windows Phone 8
- Tizen
- Phonegap build
Let's pack our app for the Android platform. To do this, on the project "CRM.Mobile" you need to right-click and select "Build native packages ..." in the menu that appears. After that, a dialog will open, with the help of which we will collect the native package.
Choose Android:
Next, you can use the existing developer certificate for Android, or generate a new one. To create a new certificate, Visual Studio must be running with administrator rights.
Now, you can start building the package and then install the resulting APK file on your Android device.
Next, you can click “Build another package” to build for other platforms or “Finish” to return to the IDE.
Summary
We showed how to quickly create cross-platform applications in Visual Studio using DevExtreme. From the launch of the IDE to the assembly of installation packages, ready to be downloaded to application stores, we spent no more than 15 minutes!
The resulting solution (available on GitHub ) contains a REST service for accessing data and workable project skeletons for desktop computers and a number of mobile devices - from iPhone to Microsoft Surface.
“Overboard” left a lot of interesting things, for example, we did not talk about the visual designer for ChartJS diagrams at all . We hope to fix this in the following articles, but for now we ’ll once again provide links to the official DevExtreme page and the DevExtreme Learning Center .