Building a Multi-Channel Mobile App with DevExtreme
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, 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.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.
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.
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:
For more information about WCF Services, have a read through here:
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.
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:
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.
Open Visual Studio and select New Project. Under the DevExtreme option, choose to create a DevExtreme Visual Basic Service, as shown in Figure 2:
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:
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
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:
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:
Figure 5: Navigation
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:
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:
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:
Figure 8: Startup screen
Click on any of your names and you will see another detailed screen:
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:
Figure 10: A new record has been added
I hope you have enjoyed today's article as much as I have enjoyed writing it for you! Until next time, cheers!