Over a million developers have joined DZone.

Stackoverflow Client for iOS, Android and WinPhone in One Day

· Java Zone

Navigate the Maze of the End-User Experience and pick up this APM Essential guide, brought to you in partnership with CA Technologies

The Mobile market is growing rapidly. Today almost all software developers are thinking about creating their own mobile app. But it usually involves new programming languages and takes time to master new technology stacks. Apps for iOS, Android and WinPhone are created with different technologies: for iOS you need to learn Swift or ObjectiveC, Android requires Java, and for Windows Phone you need to know C# and XAML.

PhoneGap allows you to create mobile applications for all popular platforms with JavaScript, CSS and HTML which are familiar to web developers. There are lots of cross-platform mobile frameworks based on PhoneGap also available. In this tutorial we will show you how to create a  mobile application with DevExtreme. We chose the DevExtreme framework developed by DevExpress, because we already had good experience with their web controls.

Application Overview

We decided to create a mobile client for StackOverflow. It will allow you to see the list of questions filtered by tags, the list of comments to the questions and the list of SO users. A full version of the app is available from  AppStore, GooglePlay, Windows Market.

In this tutorial we’ll show how to retrieve data from StackOverflow and display the list of questions. At the end we’ll build native packages for iOS, Android and Windows Phone. You can build the application by following along with this tutorial.


Prepare Workspace

To create this app we need an IDE, DevExtreme, StackOverflow API docs and a couple of hours. We chose Visual Studio as the IDE, since DevExtreme has a number of useful tools for it:

  • Project templates
  • View designer
  • Mobile simulator
  • Native package builder for iOS, Android and Windows Phone

Let’s see how it all works.

Create Basic Application

DevExtreme provides several project templates available in Visual Studio wizard. Let’s use the simplest one - basic application template. Open new project wizard in VS with File | New | Project.

Choose DevExtreme from the Templates list, then Basic Application. Specify the name of the project StackOverflowApp and click OK. The created project has the following structure:

The basic template contains minimal resources required to create DevExtreme app. It includes:

  • js - required js libs - DevExtreme, jQuery, Knockout
  • css - application themes
  • layout - set of build-in application layouts
  • views - html markup and js code-behind of views
  • index.html - main application page with links to all resources
  • app.config.js - application configuration file

Click F5 to see how this basic application looks like. The app will be shown in DevExtreme mobile simulator with ability to switch between different devices. You can also use the “Courier” application (available on the app stores) to see how the application will run on a device, this is done by scanning the QR code from within ‘Courier’.


Create List

The creation of list is a straightforward process. Remove current content of the home view and leave only dxView and dxContent divs.

<div data-options="dxView : { name: 'home', title: 'Home' } " >
  <div class="home-view" data-options="dxContent: { targetPlaceholder: 'content' } ">

We can use the DevExtreme View designer to add a list. Open the home.dxview file in the View Designer. In the DevExpress Mobile Widgets section of the Toolbox, find the dxList widget and drag and drop it to the view in simulator.

The home view will have the following markup:

<div data-bind="dxList: { dataSource: [{ key: 1, title: 'Item1'}, { key: 2, title: 'Item2' }] }">
    <div data-options="dxTemplate : { name: 'item' } " data-bind="dxAction: '#itemDetailsViewName/{key}'">
        <div data-bind="text: title"></div>

Click F5 and see the result:


The list has two items, specified in option `dataSource`. The following custom `dxTemplate` is used to render items:

<div data-options="dxTemplate: { name: 'item' }" data-bind="dxAction: '#itemDetailsViewName/{key}'">
    <div data-bind="text: title"></div>

In most cases list items can have a complex structure. `dxTemplate` allows you to describe the format of list item and specify fields to be displayed. `dxAction` provides navigation between views. We’ll go deeper with navigation in the next part of the tutorial. For now just remove `dxAction` attribute.

Now let’s display SO questions with dxList. DevExtreme provides Data Layer that allows you to work with different data sources. To get the list of SO questions lets create following `DevExtreme.DataSource`:

StackOverflowApp.home = function() {
    var viewModel = {
        questions: new DevExpress.data.DataSource({
            load: function(loadOptions) {
                var $deferred = $.Deferred(),
                    options = {
                        page: (loadOptions.skip / loadOptions.take + 1),
                        pagesize: loadOptions.take,
                        site: "stackoverflow"
                $.ajax("http://api.stackexchange.com/2.2/questions?" + $.param(options)).done(function(e) {
                }).fail(function() {
                return $deferred.promise();
    return viewModel;

We should specify the `load` method of data source to load data. It accepts a single argument `loadOption` containing paging configuration (`take` and `skip` parameters). Now we can send the request to SO url http://api.stackexchange.com/2.2/questions. The data page index can be calculated based on `loadOptions.take` and `loadOptions.skip` params. For async source the `load` method should return jQuery.Deferred that should be resolved with the request result (the list of questions in our case).

Now bind our `DataSource` to dxList specifying the `dataSource` option:

<div data-bind="dxList: { dataSource: questions }">
    <div data-options="dxTemplate : { name: 'item' }">
        <div data-bind="text: title"></div>

Start the application and see the list of questions:


List Custom Template

Now our list shows only title of questions. Each question has lots of details. Let’s show each question as a card that will contain three parts. The top part is a question itself, the middle part is additional question info (number of answers, views and votes) and the bottom part is information about question author. The template has following structure:

<div class="card-viewer" data-bind="dxList: { dataSource: questions}">
      <div class="card" data-options="dxTemplate: { name: 'item' }">
          <div class="question-details  dx-clearfix">
              <span data-bind="html: title" style="white-space: normal"></span>
          <div class="question-info">
              <div class="item-info">Answers: <i data-bind="text: answer_count" style="white-space: normal"></i></div>
              <div class="item-info">Views:  <i data-bind="text: view_count"></i></div>
              <div class="item-info">Score:  <i data-bind="text: score"></i></div>
          <div class="question-owner">
              <img class="avatar dx-icon-user" data-bind="attr: { src: owner.profile_image }" />
              <div class="user-name" data-bind="text: owner.display_name"></div>

Add some css to make our cards look prettier:

.card-viewer { background: #EFEFF4;}
.card-viewer .dx-list-item { padding: 5px; box-sizing: border-box; cursor: pointer }
.card { background: #fff; border: 1px solid #d8d8d8; border-radius: 3px; padding: 0}
.card:after { display: none;}
.question-details, .question-info { padding: 10px;}
.item-info { display: inline-block; padding: 5px; margin-right: 3px; font-size: 80%; border-radius: 3px; border: 1px solid #d8d8d8; color: rgb(38, 38, 38); }
.item-info  i { font-style: normal;}
.question-owner { background: #f5f5f5; padding: 5px 15px; overflow: hidden;}
.avatar { float: left; margin-right: 10px; width: 46px; height: 46px; border-radius: 50%; background-size: 100%;}
.user-name { color: #404040; font-size: 80%; font-weight: bold; line-height: 46px;}

Here is how it is looking so far:


Application Appearance

DevExtreme provides several built-in themes that are automatically applied on devices. To make our app looking nice in all themes, we need to add css for all platforms, or force single theme for all devices. We chose the latter option. Add device forcing to index.js:

DevExpress.devices.current({ platform: "ios", version: [7] });

The DevExtreme framework comes with a set of predefined layouts. You can find them in the layouts folder. Basic application uses navbar layout by default. To use SlideOut layout lets link it in index.html:

<link rel="stylesheet" type="text/css" href="layouts/SlideOut/SlideOutLayout.css" />
<link rel="dx-template" type="text/html" href="layouts/SlideOut/SlideOutLayout.html"/>    
<script type="text/javascript" src="layouts/SlideOut/SlideOutLayout.js"></script>

And change the layout in app.config.js:

window.StackOverflowApp = $.extend(true, window.StackOverflowApp, {
  "config": {
    "navigationType": "slideout"

Look at what we got:


Build Native Package

Now we are ready to build native packages for your device, however, this requires a developer certificate. If you don’t have one, you can use the DevExtreme certificate generator available in Visual Studio. To build a native package click according item in the VS project context menu.

Choose target platform and specify your certificates in the Build Package dialog. Within a few seconds we have a native app package that can be installed on the device.


In this tutorial we created the first version of our StackOverflow client. With DevExtreme we successfully connected to SO API and displayed the list of question with nice-looking cards. Finally, we built native packages for iOS, Android and Windows Phone 8. In the second part of the tutorial we’ll create more views with question and user details, and see how to implement navigation between views.

Thanks for reading!

Thrive in the application economy with an APM model that is strategic. Be E.P.I.C. with CA APM.  Brought to you in partnership with CA Technologies.


The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}