Building a Mobile App with DevExtreme and VB


Nowadays, you can't escape the fact that mobile apps are here to stay and mobile apps are slowly but surely surpassing ordinary technology. I mean that, sooner or later, in any developer environment you will encounter mobile apps and the environments surrounding it. Today, I will demonstrate how to create a very basic mobile app using Devextreme and Visual Studio.


In case you have missed my earlier article about Devexpress, you can read it here: http://www.codeguru.com/columns/vb/devexpress-controls-in-visual-basic.html.


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 do not contain just HTML; it contains a combination of technologies. These technologies can be CSS for your appearance, JavaScript, or VBScript for (known as client-ide 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 fashion, 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 as "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 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. If you do in fact have both installed on your system, you may follow.

Open Visual Studio and create a new Devextreme Basic application, as shown in Figure 1.

Figure 1: DevExtreme Project templates

Follow the wizard until done; keep all the default settings. Once the project has been created, you will notice that your Solution Explorer looks much different than what you may be accustomed to. A screenshot of the Solution Explorer is shown in Figure 2.

Figure 2: Solution Explorer

This takes some getting used to as it conforms to the MVVM view model. What is important here is that you may notice a file named home.dxview and a file named home.js. These are the two files you will program with during the course of this exercise. The dxview file is the view file. This is simply the design of your page. This design is mostly just HTML code consisting of the objects you have placed on your page. The js file is the JavaScript file you will use to give functionality to the objects on your view page.

Add a dxNumberBox to your page. If necessary, edit your code to resemble the next piece of code:

<div class="numberBox" data-bind="dxNumberBox: {
   min: 0,
   max: 100,
   showSpinButtons: true,
   step: 5,
   value: number

This adds a numberbox to your page. The properties I have set allow you set the number box's limits: Minimum number is 0 and highest number is 100. It shows the up and down buttons, and steps 5. This means that every time the up or down button has been pressed, it will either increase or decrease the number with 5. The last property is the most interesting. Now, you have to realize that you put an object such as the numberbox on your page to obtain information from the user; you need some way to store and keep track of the selected number. This gets done with the number variable you will create now inside the js file:

number = ko.observable(0);

ko stands for knockout. Basically, you create a variable named number and with the use of the knockout engine it keeps track of the variable.

Add the following code to your design page to create a drop down list:

<div class="dx-fieldset">
   <div class="dx-field">
      <div class="dx-field-label">Employee</div>
      <div class="dx-field-value" data-bind="dxSelectBox: {
         dataSource: employees,
         displayExpr: 'name',
         valueExpr: 'id',
         value: id
   <div class="dx-field">
      <div class="dx-field-label">Employee ID</div>
      <div class="dx-field-value" data-bind="text: id"></div>

And, to communicate with the Drop down, add the following to your js file:

id = ko.observable('1');
employees = [
   { id: 1, name: "Bob", hired: 2005 },
   { id: 2, name: "John", hired: 2007 },
   { id: 3, name: "Frank", hired: 2001 },
   { id: 4, name: "Robert", hired: 2007 },
   { id: 5, name: "Paul", hired: 2011 },
   { id: 6, name: "Elizabeth", hired: 2000 },
   { id: 7, name: "Mary", hired: 2002 },
   { id: 8, name: "Michael", hired: 2003 },
   { id: 9, name: "George", hired: 2002 },
   { id: 10, name: "Deborah", hired: 2000 },
   { id: 11, name: "Lisa", hired: 1999 },
   { id: 12, name: "Mark", hired: 2011 }

In the preceding two-step process, I first created the physical drop-down in code. I made use of the Field object so that it looks nicer as well as be a separate programmable entity. I set its datasource; this means where the data will come from. In our case, it is from the Employees JSON object I created in the bottom code segment. I specify its display member, which is the data that will be shown, and then its value member meaning once a value has been selected, which data should be sent for further processing; in this case, it is the id. So, when I click on Mark, I will in fact store the value 12.

Add the next code to your view:

<div class="dx-fieldset">
   <div class="dx-field">
      <div class="dx-field-label">Switch</div>
      <div class="dx-field-value" data-bind="dxSwitch:
         { value: switchState }"></div>
   <div class="dx-field">
      <div class="dx-field-label">Value</div>
      <div class="dx-field-value" data-bind="text:

Add the following to your js file:

switchState = ko.observable(false);

With the previous two code segments, you create an object known as a Switch. It functions like a light switch (on/off). In the design, I set its value to the switchState object that gets created in the js file. I went a bit overboard here, and included a field that displays the current value of the switch component, and it basically just displays On or Off, whereas the physical component's properties get set to On and Off as well.

The last two objects I want to mention are the Popup as well as the Button. Let's add their code now:

<div class="button" data-bind="dxButton:{text:'Show popup',
<div data-bind="dxPopup:{ visible:popupVisible,
   fullScreen:true }">
   <div data-options="dxTemplate:{name: 'title'}">
      <p>Popup title is <b data-bind="text:
      <p><span data-bind="dxCheckBox:
         { checked: buttonVisible }"></span>
         Show "Hide popup" button</p>
   <div data-options="dxTemplate:{name: 'content'}">
      <div class="button" data-bind="dxButton:
         { text: 'Hide popup', clickAction: hidePopup,
         visible: buttonVisible }"></div>
      <p>The popup contents.</p>

Before I add the last code segment making the above work, let me first explain what is happening here. I first created a button object with the caption of "Show Popup". Once clicked, an event (that we still need to create) called showPopup will fire. The next line of code sets up the Popup window. It indicates that the Popup window should be visible and fill the screen; its title gets set depending on the checkbox inside of it. Lastly, another button is created that will eventually hide the popup window. Let's add the necessary events now:

popupTitle = "My popup";
buttonVisible = ko.observable(true);
popupVisible = ko.observable(false);
showPopup = function () {
hidePopup = function () {

The popup window's title gets defined, as well as the Boolean flags for showing and hiding the buttons and popup window. The showPopup method gets created and the hidePopup function gets created. Both of them simply toggle the Boolean values of the popupvisible object.


This was fun, hey? Yes, it is always nice having a little break from VB. I hope you have enjoyed today's article and learned a great deal from it. Until next time, cheers!

This article was originally published on January 5th, 2015

Related Articles


Most Popular Programming Stories

More for Developers

RSS Feeds

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