Application Templates

The DevExtreme Widgets library is extensive and powerful enough for you to build applications based only on the DevExtreme widgets. To start building such applications quickly, DevExtreme supplies different application templates. The DevExtreme Complete package comes with Visual Studio -integrated project templates that allow you to build both mobile and web applications using either the DevExtreme SPA Framework or the AngularJS framework. To learn more on VS templates as well as on the wizards and designers for Visual Studio, refer to the VS Integration guides.

To help you build applications in environments alternative to Visual Studio, DevExtreme Web and DevExtreme Mobile provide templates for web and mobile applications. Read below for details.

Web Application

The DevExtreme Web package supplies a large library of web-optimized widgets. To start using them quickly, use the DevExtreme application template. It is located in the Application Template folder of the DevExtreme Web zip archive. The application template has the following structure.

  • css
    A folder with common and platform-specific stylesheets responsible for giving consistency to the application based on DevExtreme widgets. Refer to the Predefined Themes to learn more about the DevExtreme themes.

  • js
    A folder with all the JavaScript libraries required for DevExtreme widgets.

  • index.html
    A file where all the resources required for DevExtreme UI widgets are linked. Add the required markup to this file.

  • index.js
    A file that is supposed to be used to implement JavaScript logic behind the application page.

See Also

Mobile Application

The DevExtreme Mobile package supplies a big library of mobile-optimized widgets. To help you build a mobile application using these widgets, use the DevExtreme application templates. They are located in the Application Templates folder of the DevExtreme Mobile zip archive.

DevExtreme widgets can be used in Knockout and Angular -based applications. Thus, Knockout and Angular application templates are provided.

Knockout Approach

To create mobile applications based on Knockout binding, you will need a framework to manage view navigation and rendering. The DevExtreme SPA framework solves these tasks. So the Knockout application template is based on the DevExtreme SPA framework. You can learn template structure details from the SPA Framework | Application Project article. To learn how to build applications using the SPA framework, refer to the Application Design article. To learn how to create DevExtreme widgets using the Knockout approach, refer to the Knockout Approach topic.

NOTE
The Knockout application template uses the dxNavbar widget as a global navigation control. You can change it to the dxSlideOut widget. To learn how to do this, refer to the Use a SlideOut Menu tutorial.

Angular Approach

DevExtreme widgets can easily be used in single-page applications built using the AngularJS framework. To help you start quickly with an Angular-based application utilizing DevExtreme widgets, the DevExtreme Mobile package supplies the following Angular application templates.

  • Navbar
    A mobile application template where the dxNavBar widget is used for global navigation on iOS and Android devices and the dxPivot widget - on Windows Phone 8 devices.

  • SlideOut
    A mobile application template where the dxSlideOut widget is used for global navigation.

These application templates have a similar structure.

  • css
    A folder with common and platform-specific stylesheets responsible for giving consistency to the application based on DevExtreme widgets. The application-specific stylesheets are also located in this folder.

  • lib
    A folder with all the JavaScript libraries required for the DevExtreme widgets and Angular applications.

  • js
    A folder where all the application-specific JavaScript logic is implemented.

  • partials
    A folder with HTML templates for sample views and layouts of the application.

  • index.html
    An application file (the main HTML template file of the application).

As you can see, the application template includes two sample views - 'Home' and 'About'. You can find their templates in the partials/home.html and partials\about.html files, and their controllers in the js/controllers.js file. Both these views are included to the application's routing - see the js/app.js file.

To display a toolbar on application views, both the view templates include a toolbar template defined in the partials/toolbar.html file. The toolbar template uses the DevExtreme dxToolbar widget and is managed by a controller defined in the js/controllers.js file.

Navbar Application Template Specifics

To provide a navigation control for both the 'Home' and 'About' views, the application page includes a layout template. You will find the navbar.html and pivot.html layout templates in the partials folder. To determine the platform of the device on which the application is currently running and to apply the navbar.html or pivot.html layout template respectively, the device service is implemented in the services.js file. Information on the current device is received by using the DevExpress.devices.current() method.

To provide a list of items for the navigation widget (dxNavBar or dxPivot), the navigationItems service is implemented in the services.js file. To highlight the navigation item corresponding to the currently displayed view, the getSelectedIndex service of the currentViewInfo factory is added. The currentViewInfo factory also provides the getTitle service to determine a view title to be displayed on the toolbar.

SlideOut Application Template Specifics

The dxSlideOut widget is added as a navigation control directly to the application page. The visibility of the slide-out menu is managed by the menu factory implemented in the services.js file.

To provide a list of items for the slide-out menu, the navigationItems service is implemented in the services.js file. To highlight the navigation item corresponding to the currently displayed view, the getSelectedIndex service of the currentViewInfo factory is added. The currentViewInfo factory also provides the getTitle service to determine a view title to be displayed on the toolbar.

 

Using these templates as a base you can easily implement mobile applications with various views. To learn how to add DevExtreme widgets using the Angular approach, refer to the Angular Approach topic.