Getting started
DevExtreme is a cross-platform application framework for smartphones and tablets that includes everything you need to create native-looking hybrid applications using HTML5 and JavaScript in Visual Studio. Since DevExtreme does not target any specific mobile operating system, you can begin to create your apps immediately using only your favorite device, local web server, and Visual Studio.
Let us begin with a simple scenario for a DevExtreme app:
We all eat out. Some of us more often than others. And on those occasions when we happen to dine out with a group of friends, we undoubtedly encounter that unavoidable moment when the check arrives and we must all decide how much a tip each of us owes. I don’t know about you, but I’ve often wished for an app that could tell each person in my party exactly what he or she must pay. This is the idea behind our real-world TipCalculator demo, which provides this exact capability. I'll use this simple scenario and app to demonstrate the main concepts underlying DevExtreme’s framework, even though the TipCalculator app consists primarily of one screen. You can try out the demo here and get the source code here.
Basic use
Structurally, a DevExtreme app is a single-page application (SPA) built around the Model-View-ViewModel (MVVM) design pattern. The entry point to this SPA is an index.html file that contains the required meta tags and resource references. One resource type that is used extensively is the view and these are generally stored as separate view files.
<linkrel="dx-template"type="text/html"href="views/home.html"/>
This approach allows you to overcome a widespread inconvenience common with SPAs when a single html file contains the entire HTML markup for all the possible views in the app.
The next step is to take a look at code in the index.js file to see how to declare the TipCalculator namespace and create an HtmlApplication object. This object is the main view engine for the SPA: it takes care of displaying the correct view and populating it with data.
TipCalculator.app = new DevExpress.framework.html.HtmlApplication(…)Layout
For displaying views, DevExtreme uses the concept of layouts. These layouts define a template for data and widgets that the application object will populate and insert into the page. DevExtreme provides several popular default layout types. The TipCalculator demo utilizes the simplest built-in layout – the Empty layout, so called because you can put any widget or data within it. You can learn more about Views and Layouts in our documentation.
DevExtreme also supports routing– the ability to navigate through the app via synthetic URLs that define views and data to display.
TipCalculator.app.router.register(":view", { view: "home" });
This code registers a simple route, which takes the view name to display from the URL. If the view name is not part of the URL, the “home” view will be used as default, for example at startup.
ViewModel
Corresponding with the “home” view, there should be a “home” function within the TipCalculator namespace (in the views/home.js file). This function should create a ViewModel for the “home” screen.
TipCalculator.home = function(params) {
// …
};
For the tip app, there are three input parameters:
- The total amount for the check or bill (billTotal);
- The number of people in the dinner party (splitNum);
- The amount (expressed as a percentage) of the tip (tipPercent).
These parameters are declared as observable values. In doing so, we can bind them to widgets in the UI and track value changes.
var billTotal = ko.observable(),
tipPercent = ko.observable(DEFAULT_TIP_PERCENT),
splitNum = ko.observable(1);
var totalTip = ko.computed(…);
var tipPerPerson = ko.computed(…);
var totalPerPerson = ko.computed(…);
var totalToPay = ko.computed(…);
As with all monetary calculations, we have to allow for the calculated values to be rounded. To help with this, the TipCalculator demo implements the roundUp and roundDown functions, changing the roundModel value. This should result in a recalculation of the totalToPay value.
var totalToPay = ko.computed(function() {
var value = totalTip() + billTotalAsNumber();
switch(roundModel()) {
case ROUND_DOWN:
if(Math.floor(value) >= billTotalAsNumber())
return Math.floor(value);
return value;
case ROUND_UP:
return Math.ceil(value);
default:
return value;
}
});
At the same time, you must reset rounding when you alter any of the input parameters, so that a user can see the exact number. To achieve this, the demo uses the subscribe method.
billTotal.subscribe(function() {
roundMode(ROUND_NONE);
});
tipPercent.subscribe(function() {
roundMode(ROUND_NONE);
});
splitNum.subscribe(function() {
roundMode(ROUND_NONE);
});
The ViewModel for the tip calculator is quite simple, especially for those readers who are aware of Knockout, the MVVM library that underpins DevExtreme views. If you are unfamiliar with Knockout at present, the View model is a good representation of its capabilities.
View
Let’s take a look at the HTML markup, namely the views/home.html file. At the top, there are two div elements: one defines the view with the name, “home”, and the other defines its content (and has the name, “content”).
<divdata-options="dxView : { name: 'home' }">
<divdata-options="dxContent : { targetPlaceholder: 'content' }">
...
</div>
</div>
Inside the content, there is a toolbar:
<divdata-bind="dxToolbar: { items: [{ location: 'center', text: '@tipCalculator' }] }"></div>
dxToolbar is a PhoneJS widget that is created using the Knockout approach.
“@” is used for localization.
Then there are fields and sets created by predefined CSS classes - dx-fieldset and dx-field. Inside, there is a dxNumberBox for entering the bill amount, along with two dxSliders for the tip percentage & the number of persons in the party.
<divid="billTotalInput"class="dx-field-value"data-bind="dxNumberBox: { ... }"></div>
<divdata-bind="dxSlider: { ...}"></div>
<divdata-bind="dxSlider: { ...}"></div>
Below, you can see two dxButtons intended for rounding the final total and result output:
<divclass="round-buttons">
<divdata-bind="dxButton: { text: '@roundDown', clickAction: roundDown }"></div>
<divdata-bind="dxButton: { text: '@roundUp', clickAction: roundUp }"></div>
</div>
<divid="results"class="dx-fieldset">
<divclass="dx-field">
<spanclass="dx-field-label">@totalToPay</span>
<spanclass="dx-field-value"style="font-weight: bold"data-bind="text: Globalize.format(totalToPay(), 'c')"></span>
</div>
<divclass="dx-field">
<spanclass="dx-field-label">@totalPerPerson</span>
<spanclass="dx-field-value"data-bind="text: Globalize.format(totalPerPerson(), 'c')"></span>
</div>
<divclass="dx-field">
<spanclass="dx-field-label">@totalTip</span>
<spanclass="dx-field-value"data-bind="text: Globalize.format(totalTip(), 'c')"></span>
</div>
<divclass="dx-field">
<spanclass="dx-field-label">@tipPerPerson</span>
<spanclass="dx-field-value"data-bind="text: Globalize.format(tipPerPerson(), 'c')"></span>
</div>
</div>
Run, debug and package for markets
Throughout the development of an application, there are the opportunities for running, testing and debugging, with the last step of all packaging the application for a particular platform market.
To run and debug an application, it is sufficient to configure your local web server (Apache, IIS, nginx or whatever) and open the URL on a device, device emulator or browser. If you choose a desktop browser, you will need to replace the UserAgent string so it looks like a smartphone or tablet. Developer tools in modern browsers typically allow this, although a better option is to use something like Ripple Emulator to run and debug code.
To package a mobile app, you can use Android SDK with Eclipse (for Android package), Windows Phone SDK with CordovaWP8App (for WindowsPhone package), Mac (for iOS package) or PhoneGap Build. At the same time, DevExtreme allows you to easily build a mobile package from within Visual Studio. You do not even need to install these SDKs or have a Mac. Just right-click the application project and choose Build Native Packages as described in our documentation.
Of course, in order to publish a mobile app in the various stores (AppStore, Google Play or Windows Store), you must register as a developer on Apple, Google or Microsoft sites.
Conclusion
This simple example shows how quickly you can develop and package a mobile app with DevExtreme using your existing Web programming skills. The main benefits DevExtreme brings are structuring, minimal code, and the easy building of apps for mobile devices. Are you ready to get started? Then download DevExtreme here. And if you get stuck, don’t worry – our support team is ready and willing to help.
