Building a Multi-Channel Mobile App with DevExtreme

Introduction

Hello again! A couple of months ago, I explained how to create a basic DevExtreme application, as seen in this link. Today, I will take it a step further and explain how to create a multi-channel application with DevExtreme and Visual Studio.

DevExtreme

DevExtreme, also from DevExpress, is the platform you can use to create any HTML 5 applications. In case you haven't heard about HTML 5 yet, in which age do you live? No, seriously, HTML 5 is the latest offering from the World Wide Web Consortium for you to create modern websites. Here is more information on HTML 5.

Other Technologies Used

Because the mobile world is vast, and the web has transformed into what it is today, you have to realize that HTML is solely used for getting the appropriate information on your web page or mobile app page. HTML is not strong enough to do everything. What am I talking about? Well, imagine a web page just displaying a set of links, tables, paragraphs, and images. Imagine further, a web page without any menu (or any other navigation system apart from links). That is what you will get; and that will put you back in the early nineties.

Any web page you visit does not just contain HTML; it contains a combination of technologies. These technologies can be CSS for your appearance, JavaScript or VBScript (known as client-side scripting) allowing you to validate input information, as well as menus. Take it further. You also get XML to represent your data in a more structured way, and PHP and ASP (known as server-side scripting), allowing you to process information on the server and send information back to the client.

Now, the web keeps evolving. XML is not so "hot" as it used to be. HTML 5 has become stronger, thus making it easier for you to achieve certain things like validation without the need for either server- or client-side scripting. Enter JSON (JavaScript Object Notation).

JSON

JSON is quickly becoming the norm for sending and receiving information in a quick and easy format that can be used over a wide range of web pages or mobile app pages. If you want to get into mobile development, JSON will be your best friend. Obviously, I can go on and on, but I digress a little bit.

Before you can start following the code in this article, you have to ensure that you do have a valid DevExpress and DevExtreme license and do have them both installed on your PC. For more information regarding DevExtreme, have a read through here.

If you do, in fact, have both installed on your system, you may follow along.

Databases

Okay, before continuing, you need to understand the concept of databases, especially how an SQL Server database works. Why? Well, because the whole idea of a multi-channel application is to allow multiple devices from multiple platforms to connect to some sort of Data store. In our case, the data store will be an SQL Server database.

For an overview about databases in general, have a read through these articles:

Services

For more information about WCF Services, have a read through here:

Our Project

The little app you will create today will communicate with a database and display the associated values on your Android phone, iPhone, iPad, or Windows 8 phone.

Database

Now that you have an understanding of SQL databases, please create a small table with three fields and name it anything you like. Keep in mind that I have named my SQL Server database Students. Inside the Students database, I created a Table named StudentDetails and created three fields inside it, as shown in Figure 1:

MCApp01
Figure 1: StudentDetails Table Design

I just populated each field with basic values. You may use your own values here.

The background work is basically done now; let's move on to create the Mobile project and service.

Service

Open Visual Studio and select New Project. Under the DevExtreme option, choose to create a DevExtreme Visual Basic Service, as shown in Figure 2:

MCApp02
Figure 2: DevExtreme Project Templates

  • Give your service a decent name and click OK.
  • A screen appears, which asks you where the data will be coming from. Select Generate from Database and click Next.
  • Set up a New Connection to the Database you created earlier, and choose how to store the password(s), if necessary. Click Next.
  • Select your table from the list and select Finish.

What happens now: Your WCF service gets created. This WCF service is more or less the same as any other WCF service, but it differs in how you will be able to communicate with the data. Seeing the fact that DevExtreme prefers JSON, it has already built in the capability for you to do so—without any code.

Figure 3 will display the following:

MCApp03
Figure 3: Data Model

This is the Entity Framework's representation of your database table. The service is now finished, and we can now continue to make the Mobile application

Multi-Channel App

Do not close your project! You will simply add a new project onto this existing one. Choose File, Add New Project and choose the Multi-Channel Application template from the list. Give it a name and click OK.

You are not done… You will be greeted by this screen:

MCApp04
Figure 4: Target Platform

Here, you choose the platform(s) that you want your app to be run on. In your case, select all of the available options by clicking each. This gets indicated by a check mark. Click Next.

Choose your Layout for your navigation controls:

MCApp05
Figure 5: Navigation

Click Next.

The Next screen pops up. This is where you have to choose the data store for your application. Click Discover and wait a little bit while it looks into your service you created earlier for a Data store. Once you see your Database table in the list, choose to create a model as well as a view for your data entity, as shown in Figure 6:

MCApp06
Figure 6: Data Entity

Click Finish to exit the wizard.

You will notice that 6 project will ultimately be created. there will be one project for each of the chosen platforms, as well as a Shared project thhat will hold all the settings and objects to all projects.

Once completed, your Solution Explorer will look similar to Figure 7:

MCApp07
Figure 7: Solution Explorer

Voilà! The entire project has been created, and guess what? You now have a fully functional application already!

As you can see from Figure 7, several files have been created. There is a file to show the data meaningfully to you, as well as a view to allow you for editing of the data.

Set your Mobile app as the Startup project and click the Run button inside Visual Basic. The first screen looks like Figure 8:

MCApp08
Figure 8: Startup screen

Click on any of your names and you will see another detailed screen:

MCApp09
Figure 9: Details

This screen includes functionality to delete this particular row of information, or to edit it. Click the Edit button to edit the information. Click the Delete button to delete this record. If you were to click Back, it would take you back to the previous screen. By the way, did you notice the + sign on the first screen? This allows you to add another record.

My main screen looks like this after I have added a record:

MCApp10
Figure 10: A new record has been added

Conclusion

I hope you have enjoyed today's article as much as I have enjoyed writing it for you! Until next time, cheers!



Related Articles

Comments

  • question

    Posted by Ayesha on 12/17/2015 09:26am

    Can I create only website using multi-channel application template? or is there any other way to do it ?

    Reply
  • Help me please!

    Posted by Luong Tu on 11/19/2015 02:23am

    My devextreme vers is 15.1. I have done figure 3 in this tutorial but can not add a Multi-Channel App, so I have a trouble here... Can you show how to fix it, please!

    • Support

      Posted by Alexander on 05/05/2016 08:33am

      You can ask your question in their support center https://www.devexpress.com/Support/Center/Question/List/1 . Also you can find more information in online documentation http://js.devexpress.com/Documentation/

      Reply
    Reply
Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date