All developers need to develop web applications using dynamic features such as HTML 5 and the interest in this development is growing, as it is a platform of constant evolution to increasingly interactive, robust, complex and interesting applications..
Many factors are involved in the development of quality web applications, and their ability to adapt to different devices (responsiveness). .
This and other important activities in the creation of the app can be performed with a high degree of ease when using the right tools, such as Kendo UI.
It is a framework that brings together a series of user-friendly features that we will present below. Butfirst, let’s discuss what Kendo UI is.
It is an interface framework with HTML5 user, which allows the construction of sites and interactive applications, with high performance. This has a library of over 70 widgets for graphical interfaces construction and manipulation, as well as an abundant aggregating devices for data visualization and source of client-side data. Another detail are libraries for development that are based on technical Model-View-View-Model (MVVM), which is very similar to the MVC, but this has an intermediate view layer to interact with the Model bed, which is isolated.
The Kendo UI also provides integration with other two frameworks: the Bootstrap and AngularJS, facilitating the development even more, because an application can be distributed in places where each can be developed in one of them according to the needs of your project.
The Kendo is divided into Kendo UI Core, Kendo UI Professional and Kendo UI Complete. And we will know each of the following best:
- Kendo UI Professional: This is one of UI Kendo commercial versions and has a library with more than 70 widgets, plus a simple and consistent programming interface and a solid source of data with various themes and more. Among the widgets available in this version are a few that allow the development of applications at the enterprise level, thus ensuring all necessary support for the development of professional web sites;
- Kendo UI Complete: It is the most complete versions, it incorporates all family products Kendo UI Professional, including UI for ASP.NET MVC, UI for JSP and UI for PHP; the UI for ASP.NET MVC: It is a supplement that targets the public ASP.NET MVC developers. It includes all professionals Kendo UI components, plus HtmlHelper extension methods that allow you to configure the Kendo UI widgets using C # code; the UI for JSP: It is a supplement that has as target web application developers in Java. Includes Kendo UI professional components, and tags for all your widgets are accessed via JSP; the UI to PHP: Are complements Kendo UI to PHP developers, including PHP classes to configure all UI Kendo practitioners widgets.
Below we see in practice some components of the free version of Kendo UI.
Installing and configuring the Kendo UI Core
Before we install the framework, we need some pre-requirements. The first is the jQuery v1.9.1 + package (see Links section). The Core UI Kendo has not been tested with other packages, then it can not guarantee its smooth operation if the jQuery version is lower than indicated.
In addition, we need to get the sources of the framework. There are two ways to do that: through the site's zip Teletrik.com your distributor, or through Gulp (links are the links section). The latter means including an option to build a Kendo UI distribution which contains only what it deems necessary for the development of your application. However, the first option is strongly recommended for those just starting development., and is the one used in this article.
After unpacking the zip, the folder where it is installed will have the following structure:
- /examples - This folder stores demo files. Although they are static HTML, it is recommended that they be opened through a web server. This is due to the fact that some of these use AJAX features;
- /styles - stores the CSS files and thematic images. This folder also includes other files that can be sent to the compiler, located in folders style /folder: styles/web/estyles/mobile /. However, many of these files are not available in trial version;
- changelog.html - contains information on updates, patches and other for the Kendo UI;
- /wrappers - contains the server-side files. This folder is available only for the commercial versions of the framework; and
- /src - keeps source code files. This folder is not available in the trial version.
Using Kendo UI in web projects
Listing 1. Example UI Kendo configuration for web projects.
All set, now just enjoy all the features offered by Kendo UI Core, and some of these features will be presented in the next section.
This category will be listed components / resources specific to the development of web applications. Examples of codes and how to integrate them into their applications can be found in the Core UI Kendo itself, the examples folder. These are not posted here. Only the most important ones are.
Figure 1. DataSource with product list
Drag and Drop: . Kendo UI has two separate widgets that when combined, allow drag and drop visual components in web applications: KendoDraggable and KendoDropTarget. The first lets you select and drag the components and creates the second area that stores, as shown in Figure 2.
Figure 2. Drag and Drop by dragging components around the screen
Effects: It is a comprehensive set of tools that have optimal performance for transition visuals. Each of the effects provided by this widget is designed with CSS, and perfectly adaptable to older browsers. Figure 3 shows the zoom effect applied to one of the characters to move the mouse around the image.
Figure 3. Effects – Zoom
Globalization: This widget allows the development of adaptive applications to different cultures that define information such as number formats, name days of the week, month, date, time, and other formats. See an example in Figure 4.
Figure 4. Adaptation and automatic formatting with Globalization
Model View View Model (MVVM): This is a design pattern that aids in separating the model, data and presentation. Thus, the MVVM model becomes responsible for exposing data objects in such a way that these are easily used by the presentation (View). See an example in Figure 5 where, when you select an item, even if the data are presented in a layer, it is hidden.
Figure 5. Example of application of MVVM
Single-Page APP: It is a set of classes to simplify the construction of professional web applications (client side). So that it is really possible to understand the functionality of this component, we recommend visiting the example shown in Figure 6 and link in the Links section.
Figure 6. Page developed with Single-Page APP
Validator: This widget provides users with an easy way to make form validation. It supports a variety of built-in rules and provides easy ways to customize them. A basic example can be seen in Figure 7.
Figure 7. Validation forms with Validator
These are the features offered by Web Framework Kendo UI Core. But we are not done here. There are many resources to exploit. We'll look at the web widgets resources.
In addition tothe resources category presented previously, the following web applications can also be integrated and are available in the examples folder.
Autocomplete: This is an indispensable resource for the current developers. This due to extensive use of Google Suggestion. This control allows multiple entries of value, and suggestions for the auto process can come from a local array or a remote data source. Though simple, this widget ensures great convenience associated with quality and performance, as shown in the example in Figure 8.
Figure 8. AutoComplete feature
Buttons: Often, in a web application, we need some buttons with specific features and this widget provides an improved text input control and images on buttons, and allows switching the button modes as well as a rich API to enhance the experience of user. See an example in Figure 9.
Figure 9. Feature Button
Calendar, DatePicker and DateTimePicker: A great, simple and modern widget for calendars in HTML5. Allows you to select dates and intervals, offering a "multi month" view, and special models of days. It's simple to customize and does not affect the performance of your web applications, as shown in Figure 10. The DataPicker and DateTimePicker features work similarly.
Figure 10. Resource Calendar
Color-Picker: Allows the user to select a color from acolor palette.. With this, you can customize your applications, leaving them in ways that works best for you.
ComboBox and DropDownList: Allows selection of default values or even inserting new ones. This is a richer version of HTML ComboBox, providing native support for local and remote data, and allows you to configure the list of behavior. A good example can be seen in Figure 11.
Figure 11. Resource ComboBox
ListView: to use it, the developer inherits the benefits of MVVM, customized models, RTL support, Globalization and navigation features, as shown in Figure 12.
Figura 12. Resource ListView
MaskedTextBox: Whether your web application has a text box for credit cards, phone number with area code, or any other specific type of input, this widget will help you define and restrict the entry of data in fields in your form. Figure 13 provides a good example.
Figure 13. Resource MaskTextBox
Menu: This is a flexible HTML5 widget and easy to customize, because it can create professional, interactive menus, thus giving your application a modern look and easy navigation. An example of the various features provided by that widget can be seen in Figure 14.
Figure 14. Menu Feature
Notification: Allows communication between your application and its users, easily adding notifications that are not blocked by the browser. With this feature you can choose between several types of notifications, including allowing them to be stacked, as shown in the example in Figure 15.
Figure 15. Notification Feature
Panel Bar: Allows you to create a professional and flexible navigation system with minimal coding. This widget is ideal for presenting information in a limited amount of space, as shown in Figure 16.
Figure 16. Resource Panel Bar
Slider: Allow your user to select a value within a predefined range. This is a fully customizable control in regards to appearance, as well as many other supports and possible configurations. Note an example in Figure 17, where we have the possibility of developing a web application for building automation.
Figure 17. Feature Slider
Sortable: Allows the end user to classify lists by dragging and dropping. Even allows the creation of interactive panels on the drag and drop style. Figure 18 shows a simple example of this feature.
Figure 18. Resource Sortable
Splitter: Allows you to resize a simple form for separate content into web applications, or you can create two or more resizable panels, which state is automatically persisted by the server. A good example can be seen in Figure 19.
Figure 19. Resource Splitter
Figure 20. Resource TabStrip
Toolbar: Imagine , when developing your web application, you can rely on a professional taskbar? With this widget this is possible and the component itself is in charge of carrying out the visibility of controls according to the width of your application window. Note the example in Figure 21.
Figure 21. Toolbar feature.
ToolTip: It's a way of enriching projects because it dynamically displays content - the famous "little balloon" of information, or hint for the more accustomed to desktop development. See the example in Figure 22.
Figure 22. Feature ToolTip
Window: This widget allows you to create modal windows , which by default, can be moved, resized or closed. All content of this can be defined as a static HTML or dynamically loaded via AJAX. See an example in Figure 23.
Figure 23. Resource Window
This is indeed one of the best tools for web development available on the Internet. All available resources are really amazing and provide great support for the development of professional applications, even in its free version. With the Kendo UI Core any developer can help create professional web applications,.
When referring to application development, security and time are common concerns, and this framework is able to assist with that, because all their resources are opensource, which allows analysis and adaptation, increasing safety and the fact that many of their resourcesare widely used. The time required to develop applications with pleasant and professional appearance is reduced considerably.
jQuery v1.9.1: http://www.jquery.com/
Kendo UI zip Core: http://www.telerik.com/kendo-ui/open-source-core
Example Single-Page APP: http://demos.telerik.com/kendo-ui/websushi/