Introduction to DevExtreme

DevExtreme supplies HTML/JS tools for mobile and web development.

Mobile Development

DevExtreme contains everything you'll need to create native client applications using HTML5 & JavaScript and to deliver solutions with a single codebase that target today's most popular smartphones and tablet devices.

Overview

DevExtreme allows you to build HTML/JS applications that can be packed as native mobile applications using the PhoneGap Build and can then be installed to corresponding mobile devices. When installed, DevExtreme applications look and behave like native mobile applications. To build such mobile applications, DevExtreme comes with an SPA (single-page application) framework, a big suite of UI widgets and a data managing library. All these tools are based on JavaScript, HTML5 and CSS3. When developing DevExtreme applications, you will only need to use JavaScript, HTML and CSS. In addition, you will need basic knowledge of Knockout and jQuery.

The DevExtreme SPA framework supplies all the necessary tools and features an SPA requires.

  • URL Routing
    The framework uses familiar routing rules to define the relationship between the URL the user navigates to and the corresponding view that should load. As a developer, you specify the routing rules and define the application views your application requires and the framework's runtime takes care of actual navigation. When a view is navigated to and rendered, it will be made visible using the required animation or transition. The framework also tracks navigation between views and will automatically add the Back button should it be needed. Of course, you can override this behavior when necessary.

  • View Management and Rendering
    The DevExtreme SPA framework uses a built-in view engine. Apart from basic view rendering technology, this engine also provides the following sophisticated features.

    • Partial Views
      These allow you to share and reuse similar HTML markup among multiple views.

    • Context-dependent Views
      A view can be rendered with different content based upon the current device type, device orientation or another custom context.

    • Master Pages or Layouts
      You can extract a common application page layout as separate HTML markup (this is known as Master Pages or Layouts in some server-side technologies).

    • Pluggable Template Engine
      Since the DevExptreme SPA framework follows the MVVM pattern and is extensible, the view engine binds data to the view markup with the help of a special template engine. DevExtreme comes with a template engine for Knockout, but you can write your own to target any desired template library.

    • Separate View Files
      Another major advantage of the DevExtreme view engine is the separation of views into their own files. With DevExtreme, you do not have to place all your markup into a single HTML file - different views can be placed in different files and your application structure can be made more clear and logical.

  • Device-Specific Layout Engine
    Every mobile platform has its own strict UI guidelines published by the platform's vendor. These rules define how to navigate within an app, the type and location of different UI elements on the screen, colors, margins, fonts, animations and transitions, etc. The amount of effort required to meet these guidelines is tremendous. For a framework that uses HTML5 and JavaScript to create solutions that are compiled into native apps for the relevant App Store (where rules are applied before approval), this workload is magnified.

    DevExtreme provides built-in layouts that follow device UI guidelines set by supported platform vendors. It offers separate layouts for iOS and Android, so your apps can be approved quickly. The framework also provides layouts and navigation options that mimic Facebook and YouTube, out of the box and are ready to use.

  • View Caching and State Management
    In order to deliver superior performance and a better user experience, DevExtreme implements intelligent view caching. Views are cached using efficient smart algorithms that balance data storage (always at a premium on mobile devices) with performance. When a view is rendered, the view cache determines whether to save the rendered view and for how long, in case the user returns having visited it before. Again, since DevExtreme was created to be extensible, you can implement your own caching strategy or disable it completely.

    Another feature that the view cache provides is to cater for a common occurrence: receiving an incoming phone call or switching to another app. In this instance, the application would be immediately halted and even unloaded. When the user switches back to the app, it is loaded again. The application has a very short period of time to save its state in this scenario, such that, on returning, it can reload the state and present exactly the same view to the user. The DevExtreme framework provides this capability and will automatically store the current view to local storage and restore it on return.

DevExtreme includes a comprehensive library of UI widgets - ready-to-use UI elements rendered to a page. Typically, a widget is bound to data and provides user interactions. It is represented by an HTML element (container), JavaScript code and CSS stylesheets. When using widgets in a DevExtreme application, the framework automatically changes the appearance and behavior of individual widgets to match the look and feel of the platform. As a result, all DevExtreme applications look and behave just like a native application.

Here is a full list of UI widgets that are currently provided for mobile development.

  • Action Sheet
  • Autocomplete
  • Button
  • Calendar
  • Check Box
  • Date Box
  • Drop Down Menu
  • Gallery
  • List
  • Load Indicator
  • Load Panel
  • Lookup
  • Map
  • Multi View
  • NavBar
  • Number Box
  • Overlay
  • Panorama
  • Pivot
  • Popover
  • Popup
  • Radio Group
  • Range Slider
  • Scroll View
  • Select Box
  • SlideOut
  • Slider
  • Switch
  • Tabs
  • TextArea
  • Text Box
  • Tile View
  • Toast
  • Toolbar
  • Tooltip

Each DevExtreme widget includes a jQuery plugin and KnockoutJS binding. You can choose whether to create a widget using the standard jQuery approach, or use the dependency tracking feature offered by KnockoutJS and use Knockout binding instead. Regardless of the approach you choose, you create and initialize the widget once, passing an object with specified configuration options.

DevExtreme UI widgets work with a specially designed DataSource object from the DevExtreme Data library. The DataSource is intended to simplify working with data, whether it be an in-memory array, a local browser storage, remote service, or any custom storage. The DataSource is a stateful object that keeps sorting, grouping, filtering, and keeps data transformation options and applies them each time data is loaded. It also provides events intended to handle changing data and the state. The DataSource underlying data access logic is isolated in a Store. Unlike the DataSource, a Store is a stateless object implementing a universal interface for reading and modifying data from a particular data storage. Regardless of the data storage type, a Store exposes the same set of methods.

All the products discussed above are supplied with the DevExtreme Mobile and DevExtreme Complete packages. The difference between these two packages is that the DevExtreme Complete package includes integration in MS Visual Studio: built-in project templates, view designer, device simulator and a wizard for building native packages. If Visual Studio is not the environment that you got used to, the DevExtreme Mobile package will be enough, because DevExtreme applications, being HTML/JS applications, can be implemented using a predefined application template in any code editor. In addition, you can use any web server (Apache HTTP Server, IIS or any other) and any device simulation tool (Ripple or another). To pack your application, use the PhoneGap Build.

Getting Started

A DevExtreme application is implemented using only HTML, JavaScript and CSS and is run by a browser. Thus, the documentation for the DevExtreme SPA framework and other DevExtreme products is presented independently from a code editor. At the same time, DevExtreme supports MS Visual Studio by providing integrated project templates and designers. These VS-integrated tools are described separately in the Guides | VS Integration section in the documentation.

To help you get started with DevExtreme quickly, the tutorials that are recommended to be performed first are given separately for VS users and those who got used to use another environment for mobile development.

  • Code editor-independent start
    Start learning DevExtreme from the Your First Application tutorial. It is presented in a special 'playground' where you can read the description of each step, find the code implemented at each step and see the running application in a device simulator. You can also edit code at any step. The project and tutorial contents are also available. As a result you will implement a simple application and will learn the base notions of the DevExtreme SPA framework.

  • Visual Studio-specific start
    Start learning DevExtreme from the Your First Mobile App in Visual Studio tutorial. This tutorial will guide you though the process of creating a DevExtreme application in Visual Studio. You will be introduced to the basic project template, a view designer and device simulator - the VS-integrated tools that simplify the process of implementing mobile applications in VS. As a result, you will implement a simple application and will learn the base notions of the DevExtreme SPA framework.

    There is one more DevExtreme project template provided in Visual studio - DevExtreme Multi-Channel Application. This project template is appropriate to implement applications for desktop, iOS, Android and Windows Phone using a shared code. Go through the Create a Mobile App in Visual Studio tutorial to try this project template. You will also be introduced to more VS-integrated tools - Project Wizard and Add Command editor. As a result, you will implement a more complex application than the one described in the Your First Application in VS - with three views, a search functionality and data provided from an OData service.

After you have implemented your first applications by the tutorials given above, read the Application Design guide. You will learn details of each step that you will take when developing applications using the DevExtreme SPA framework. You will also be provided with links to the topics that are useful for a better understanding of DevExtreme.

Working with Mobile Applications

When implementing your DevExtreme application, the following information will help you find proper solutions for your tasks.

When using DevExtreme widgets in DevExtreme applications, use the following documentation sections.

  • Videos on UI widgets
    These are videos that introduce some of the DevExtreme UI widgets.

  • Guides on UI widgets
    The UI Widget Categories subsection describes DevExtreme UI widgets by categories. You will find how to use the features that are common for different widget categories, as well as the features that are specific for each particular widget. The UI Widgets Deep-Dive subsection describes the features of "big" widgets that have many peculiarities that demand a detailed description.

  • Reference on UI widgets
    The reference section details all configuration options of UI widgets, as well as fields, methods and events exposed by widget instances. Most of the descriptions include an example that runs in the simulator accompanying the example code.

To learn how to access various data storages and services using the DevExtreme data library and how to perform different data manipulations, refer to the following tutorials and articles.

  • Tutorials on Data Library
    Using these tutorials, you will learn how to work with data using the DevExtreme Data Library. These tutorials do not utilize DevExtreme widgets to better demonstrate the features of the objects provided by the Data Library.

  • Guides on Data Library
    This a list of guides that provide a detailed description of Data Library concepts and features.

  • Reference on Data Library objects
    The reference section details all configuration options of Data Library objects, as well as their fields, methods and events.

Web Development

DevExtreme ships with a rich library of client-side widgets that can be used in any web application or website.

Overview

DevExtreme includes a comprehensive library of client-side touch-enabled widgets - ready-to-use UI elements rendered to a web page. Typically, a widget is bound to data and provides user interactions. It is represented by an HTML element (container) and JavaScript code.

To work with these widgets, you will have to use only HTML, Java Script and CSS (for styling UI widgets). In addition, you will need basic knowledge of jQuery.

Each DevExtreme widget includes a jQuery plugin and bindings to AngularJS and KnockoutJS. You can choose whether to create a widget via the standard jQuery method or use the declarative bindings and support for MVVM by creating the widget for AngularJS or KnockoutJS. Regardless of the approach you choose, you create and initialize the widget once, passing an object with specified configuration options.

UI Widgets Library

Here is a full list of UI widgets that are currently provided.

  • Autocomplete
  • Button
  • Calendar
  • Check Box
  • Color Picker
  • Context Menu
  • Data Grid
  • Gallery
  • Load Indicator
  • Load Panel
  • Lookup
  • Map
  • Menu
  • Multi View
  • Number Box
  • Overlay
  • Popover
  • Popup
  • Radio Group
  • Range Slider
  • Scroll View
  • Select Box
  • Slider
  • Tabs
  • TextArea
  • Text Box
  • Toast
  • Toolbar
  • Tooltip

The DevExtreme UI widgets are designed to look natural in native web applications on tablets or be displayed harmonically on desktop sites. For this purpose, several themes are supplied. These themes are represented by a set of CSS classes. You can apply an appropriate theme as is or define a custom one using the Theme Builder.

Data Visualization Library

DevExtreme comes with a set of widgets for visualizing data: charts, gauges, sparklines, vector map, etc. Whether you combine these widgets to beautiful informative dashboards or use them individually, it is easy to configure them to solve any visualization puzzle.

All the DevExtreme data visualization widgets are initially designed to look in a single style. For this purpose, DevExtreme provides 'desktop', 'ios', 'android' and 'win8' themes. You can set the required one or define a custom one and apply it.

  • Charts
    A big number of series types is provided, so you can choose the ones that are better appropriate for the current task. In addition, you can locate different series on different panes one after another, as well as use several value axes to present different data on one chart. To make multi-series charts look attractive and informative, several predefined palettes are supplied. You can choose the one you like most or define a custom one and apply it.

    All the charts are highly interactive, which includes the capability to handle series and point clicks, hovering and selection.

    In addition to the standalone Chart and PieChart widgets described above, DevExtreme provides the Sparkline and Bullet widgets - small charts that are appropriate for displaying trends of some parameters in a grid.

  • Gauges
    Three types of gauges are currently supplied: circular, linear and a bar gauge. The first two gauge types are more appropriate for displaying the current value of some changing parameter and marking several points on a gauge scale. The bar gauge is appropriate for displaying the current values of several changing parameters at once so that it is easy to compare them at a single glance.

  • Range Selector
    A widget for selecting a range on a numeric or date-time scale. This widget is useful in conjunction with charts. It allows end users to determine the range of data to be displayed on a chart.

  • Vector Map
    A widget for displaying a vector scheme of a particular region. This widget is created to be highly interactive so that you can show tooltips and handle area and marker selection.

DevExtreme widgets work with a specially designed DataSource object from the DevExtreme Data library. The DataSource is intended to simplify working with data, whether it be an in-memory array, a local browser storage, remote service, or any custom storage. The DataSource is a stateful object that keeps sorting, grouping, filtering, and keeps data transformation options and applies them each time data is loaded. It also provides events intended to handle changing data and the state. The DataSource underlying data access logic is isolated in a Store. Unlike the DataSource, a Store is a stateless object implementing a universal interface for reading and modifying data from a particular data storage. Regardless of the data storage type, a Store exposes the same set of methods.

All the products discussed above are supplied with the DevExtreme Web package. It comes as a zip archive that includes all the required libraries, demos, as well as a project template. This project template is intended for your quick start when training to work with widgets. At the same time, you can easily add DevExtreme widgets to any application project type (MVC, PHP or any other). Read on to see how to do this.

The DevExtreme Complete package also includes all the products for web development defined above.

Getting Started

To use DevExtreme widgets in websites/applications, add the following script libraries.

  • jQuery version 2.1.1 (but 1.11.1 for IE 8)
    These scripts are necessary since the DevExtreme scripts use them.
  • A data-binding library (optional): Knockout version 3.1.0 or AngularJS version 1.1.1
    Add the Knockout or AngularJS library, if you are going to use declarative binding and support the MVVM approach.
  • Globalize
    Add this library for widget localization.
  • WebAppJS (the whole library or the required modules only)
    This is the DevExtreme library with UI widgets.
  • ChartJS (the whole library or the required modules only)
    This is the DevExtreme library with Data Visualization widgets.

You can find all these scripts in the DevExtreme Web zip archive.

NOTE: Reference the libraries in the same order as they are listed above.

JavaScript
<script src="/js/jquery-2.1.1.min.js"></script>

<script src="/js/globalize.min.js"></script>
<script src="/js/dx.webappjs.js"></script>
<script src="/js/dx.chartjs.js"></script>

Add theme(s) for DevExtreme UI widgets.

CSS
<link rel="stylesheet" type="text/css" href="css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="css/dx.light.css" />

You can find all these themes in the DevExtreme Web zip archive.

NOTE: Data Visualization widgets do not demand the CSS themes above to be added to your project. These widgets have separate themes defined within the widget scripts. By default, the 'desktop' theme is applied. You can define a custom theme and apply it in code. To learn how to do this, refer to the Appearance Customization article.

For detailed information on how the scripts and themes listed above must be added and the ways to reference them, refer to the following articles.

As you can see, DevExtreme widgets can easily be used in any web project. You can find an application template in the DevExtreme Web zip archive. This template has all the required scripts and stylesheets added and referenced. You can use this project template for training purposes.

The following tutorials demonstrate how to add a widget (button, as a simple example). These tutorials are presented in a special 'playground' where you can read the description of each step, find the code implemented at each step and see the running application in a device simulator. You can also edit code at any step. The project and tutorial contents are also available.

You can reproduce the demos detailed in the tutorials above using the DevExtreme application template. If you work with MVC projects, start from the following tutorial instead.

Working with Widgets

For the effective solutions to your tasks that involve DevExtreme widgets, take a look at the following documentation.

UI Widgets

  • Videos on UI widgets
    These videos introduce some of the DevExtreme UI widgets.

  • Guides on UI widgets
    The UI Widget Categories subsection describes DevExtreme UI widgets by categories. You will find how to use the features that are common for different widget categories, as well as the features that are specific for each particular widget. The UI Widgets Deep-Dive subsection describes the features of "big" widgets that have many peculiarities that demand a detailed description.

  • Reference on UI widgets
    The reference section details all configuration options of UI widgets, as well as fields, methods and events exposed by widget instances. Most of the descriptions include an example that runs in the simulator accompanying the example code.

Data Visualization Widgets