All 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 constantly evolving to increasingly interactive, robust, complex and interesting applications that can meet consumers and companies search tools that make your fastest, professional and easy process. Many factors are involved in the development of quality web applications, and its ability to adapt to different devices (responsiveness), one of the main.
This and other important activities in the creation of the app can be performed with a high degree of ease when we use the right tools, such as our study of this article object, Kendo UI.
It is a framework that brings together a number of user-friendly features and are presented below. But before we know it more.
This is an interface framework with HTML5 user, which allows the construction of sites and interactive applications, and high performance. This has a library of over 70 widgets for graphical interfaces construction and manipulation, as well as an abundant concentration of devices for data visualization and source 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.
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 parts where each can be developed in one of them according to the needs of your project. Kendo Kendo UI is divided into Kendo UI Core, Complete and Professional. And we will know each 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 some that enable 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 PHP for UI; 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, and HtmlHelper extension methods that allow you to configure 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 through JSP; the UI to PHP: Are supplements 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 leaving for the installation of the framework we will 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 proper functioning if the jQuery version is lower than indicated.
In addition, we need to get the sources of the framework and that there are two ways: through the site's zip Teletrik.com your distributor, or through Gulp (links are in the links section). The latter means includes an option to build a Kendo UI distribution whose nucleus contains only what it deems necessary for the development of your application. However, the first option is strongly recommended for those who are starting now in development with him, it is that we use in this article.
After unpacking the zip, the folder where it is installed will have the following structure:
- /examples - This folder stores demo files. Despite being HTML's static, it is recommended that they be opened through a web server, this is due to 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 the folder styles/folder: styles/web/estyles/mobile/. However, many of these files are not available in the test 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.
In this category are listed the componentes/features specific to the development of web applications. Examples of codes and how to integrate them into their applications can be found in the Kendo UI Core own in the examples folder. These are not posted here, only the most important.
Figure 1. DataSource with product list.
Drag and Drop: Surely you ever needed or wanted to create web applications wherever possible drag menus and other components around the screen. Kendo UI has two distinct 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 wide range of tools that have optimized performance for transition visuals. Each of the effects provided by this widget is designed with CSS, and perfectly adaptable to older browsers. In Figure 3 is shown the zoom effect applied to one of the characters when mousing over 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 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 the data objects in such a way that these are easily used by the presentation (View). See an example in Figure 5 where, when selecting an item, even if the data are presented in a layer that was previously hidden.
Figure 5. Example of application of MVVM.
Single-Page APP: This is a set of classes to simplify the construction of professional web applications (client side). To be really possible to understand the functionality of this component, I recommend visiting the example shown in Figure 6 and link in the Links section.
Figure 6. Page developed with Single-Page APP.
These are the features offered by Web Framework Kendo UI Core, but not done here, there are many resources to exploit. We will see the following Web widgets resources.
As the resources of the category shown above, presented 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 autocomplete process may come from a local array or a remote data source. Although simple, this widget ensures great convenience associated with quality and performance, as the example in Figure 7.
Figure 7. Autocomplete feature.
Buttons: Often in a web application need some buttons with specific features and this widget provides an improved text input control and images buttons, and allows switching the button modes as well as a rich API to enhance the experience of user. See an example in Figure 8.
Figure 8. Feature Button.
Calendar, DataPicker 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 9. The DataPicker and DateTimePicker features work similarly.
Figure 9. Calendar feature.
Color-Picker: Allows the user to navigate its applications for a color palette, selecting the one that best suits you. With this, you can customize your applications, leaving them in ways that best suit them.
There is still a number of other resources available that will not show in this article, but no doubt 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. The UI Core kendo any auxiliary developer can create professional web applications, so that these become detached and professional as well.
When we refer to application development, security and time are common concerns, and this framework is able to assist these two senses, because all their resources are opensource, which allows analysis and adaptation, increasing safety and the fact that large of their resources just be the most widely used frameworks of the moment. The time required to develop applications with pleasant and professional appearance is reduced considerably.
Kendo UI Zip Core