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.
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.
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.
A file where all the resources required for DevExtreme UI widgets are linked. Add the required markup to this file.
- Widget Basics - jQuery - information on working with widgets with jQuery approach
- Widget Basics - AngularJS - information on working with widgets with AngularJS approach
- Widget Basics - Knockout - information on working with widgets with Knockout approach
- UI Widget Guides | UI Widget Categories - guides on different DevExtreme widgets
- Data Visualization - guides on different DevExtreme widgets
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 AngularJS application templates are provided.
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 Widget Basics - Knockout Approach topic.
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 AngularJS application templates.
A mobile application template where the SlideOut widget is used for global navigation.
These application templates have a similar structure.
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.
A folder with HTML templates for sample views and layouts of the application.
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 Toolbar 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 (NavBar or Pivot), 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 SlideOut 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 AngularJS approach, refer to the Widget Basics - AngularJS Approach topic.