Todos precisam desenvolver aplicações web que utilizem recursos dinâmicos como HTML 5 e o interesse por esse desenvolvimento é crescente, já que é uma plataforma de constante evolução para aplicações cada vez mais interativas, robustas, complexas e interessantes, que possam atender a consumidores e empresas que busca ferramentas que tornem seus processos mais rápidos, profissionais e fáceis.
Muitos fatores estão envolvidos no desenvolvimento de aplicações web de qualidade, sendo sua capacidade de adaptação a diversos dispositivos (responsividade). uma das principais.
Esta e outras atividades importantes na criação da app podem ser realizadas com elevado grau de facilidade quando utilizamos as ferramentas certas, como é o caso do nosso objeto de estudo desse artigo, o Kendo UI.
Ele é um framework que reúne uma série de recursos fáceis e que serão apresentados a seguir. Mas antes, vamos conhece-lo mais.
Kendo UI
Trata-se de um framework de interface com usuário em HTML5, que permite a construção de sites e aplicações interativas e de alto desempenho. Este conta com uma biblioteca de mais de 70 widgets para construção e manipulação de interfaces gráfica, além de uma abundante concentração de dispositivos para visualização de dados e fonte de dados do lado do cliente. Outro detalhe são bibliotecas para desenvolvimento que são baseadas na técnica Model-View-View-Model (MVVM), que é muito parecida com o MVC, mas este tem uma camada view intermediária para interagir com a cama Model, que é isolada.
O Kendo UI fornece ainda integração com outros dois frameworks: o Bootstrap e o AngularJS, facilitando ainda mais o desenvolvimento, pois uma aplicação pode ser distribuída em partes onde cada uma pode ser desenvolvida em um deles de acordo com as necessidades do seu projeto.
O Kendo é dividido em Kendo UI Core, Kendo UI Professional e Kendo UI Complete. E conheceremos cada um melhor a seguir:
- Kendo UI Core: Esta é a versão Open Source do Kendo UI, onde o desenvolvedor pode contar com um framework para construção de aplicações modernas, web e móveis, utilizando JavaScript e HTML5, além de mais de 40 widgets baseados em jQuery, entre outras características estruturais. Este é o pacote adequado para projetos de pequeno e médio porte e o estudaremos mais ao longo desse artigo;
- Kendo UI Professional: Esta é uma das versões comerciais do Kendo UI e possui uma biblioteca com mais de 70 widgets, além de uma interface simples e consistente de programação e uma sólida fonte de dados com diversos temas e muito mais. Dentre os widgets disponíveis nesta versão estão alguns que permitem o desenvolvimento de aplicações a nível empresarial, garantindo assim todo suporte necessário para o desenvolvimento de web sites profissionais;
- Kendo UI
Complete: É a mais completa das versões, pois incorpora todos os produtos
da família Kendo UI Professional,
incluindo UI para ASP.NET MVC, UI para JSP e UI para PHP;
o UI para ASP.NET MVC: É um complemento que tem como público alvo os desenvolvedores ASP.NET MVC. Inclui todos os componentes Kendo UI profissionais, além de métodos de extensão HtmlHelper que permitem configurar os widgets Kendo UI através de códigos C#;
o UI para JSP: É um complemento que tem como público alvo os desenvolvedores de aplicativos web em Java. Inclui os componentes Kendo UI profissionais, além de tags para que todos os seus widgets sejam acessados através de JSP;
o UI para PHP: São complementos Kendo UI para desenvolvedores PHP, que incluem classes PHP para configurar todos os widgets profissionais do Kendo UI.
A seguir vamos ver na prática alguns componentes da versão gratuita do Kendo UI.
Instalando e Configurando o Kendo UI Core
Antes de partirmos para a instalação do framework precisaremos de alguns pré-Requisitos. O primeiro é o pacote jQuery v1.9.1+ (vide seção Links). O Kendo UI Core não foi testado com outros pacotes, então não se pode garantir o seu bom funcionamento caso a versão do jQuery seja inferior a indicada.
Além disso, precisamos obter os fontes do framework e para isso existem duas formas: através do zip do site de seu distribuidor Teletrik.com, ou através do Gulp (os links estão na seção Links). Este último meio inclui uma opção para construção de uma distribuição Kendo UI cujo núcleo contenha apenas aquilo que julgar necessário para o desenvolvimento de sua aplicação. Contudo, a primeira opção é fortemente recomendada para quem está começando agora no desenvolvimento com ele, e é a que utilizamos nesse artigo.
Após descompactar o zip, a pasta onde o mesmo for instalado terá a seguinte estrutura:
- /examples – esta pasta armazena arquivos de demonstração. Apesar de serem HTML’s estáticos, é recomendado que os mesmos sejam abertos através de um servidor web, isto devido a alguns destes utilizarem recursos AJAX;
- /js – armazena os arquivos JavaScript;
- /styles – armazena os arquivos CSS e imagens temáticas. Esta pasta também inclui outros arquivos que podem ser enviados ao compilador, localizadas nas pastas styles/folder: styles/web/ estyles/mobile/. Contudo, muitos destes arquivos não estão disponíveis na versão teste;
- changelog.html – contém informações sobre atualizações, correções e outras referentes ao Kendo UI;
- /wrappers – contém os arquivos do lado do servidor. Esta pasta está disponível somente para as versões comerciais do framework; e
- /src – mantém os arquivos de código fonte. Esta pasta não está disponível na versão de teste.
Usando o Kendo UI em projetos web
Para podermos desfrutar de todos os recursos do Kendo UI, temos algumas configurações para realizar. Por exemplo, para utilizá-lo em um projeto web é preciso incluir os arquivos JavaScript e CSS necessários. Para isso devemos copiar as pastas /js e /styles para raiz da aplicação web e depois incluir o UI JavaScript Kendo e os arquivos CSS na tag HEAD do HTML da aplicação web. Verifique também se o arquivo Common CSS está sendo registrado antes do arquivo Theme CSS, como mostra o exemplo na Listagem 1.
Listagem 1. Exemplo de configuração do Kendo UI para projetos web.
1.<!DOCTYPE html>
2. <html>
3. <head>
4. <title>Welcome to Kendo UI!</title>
5. <!-- Common Kendo UI CSS for web and dataviz widgets -->
6. <link href="styles/kendo.common.min.css" rel="stylesheet" />
7.
8. <!-- (optional) Kendo UI web widgets' RTL CSS, include only in right-to-left applications -->
9. <link href="styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
10.
11. <!-- Default Kendo UI theme CSS for web and dataviz widgets -->
12. <link href="styles/kendo.default.min.css" rel="stylesheet" />
13.
14. <!-- (optional) Kendo UI Mobile CSS, include only if you will use the mobile devices features -->
15. <link href="styles/kendo.default.mobile.min.css" rel="stylesheet" type="text/css" />
16.
17. <!-- jQuery JavaScript -->
18. <script src="js/jquery.min.js"></script>
19.
20. <!-- Kendo UI combined JavaScript -->
21. <script src="js/kendo.all.min.js"></script>
22. </head>
23. <body>
24. Hello World!
25. </body>
26. </html>
Tudo pronto, agora basta usufruir de todos os recursos disponibilizados pelo Kendo UI Core, e alguns destes recursos serão apresentados no tópico a seguir.
Web Framework
Nesta categoria serão listados os componentes/recursos específicos para o desenvolvimento de aplicações WEB. Os exemplos de códigos e de como integrá-los em suas aplicações podem ser encontrados no próprio Kendo UI Core, na pasta examples. Estes não são postados aqui, somente os mais importantes.
DataSource: Desempenha o papel central de praticamente todas as aplicações web construídas com o Kendo UI. Trata-se de uma abstração para utilização de dados de matrizes locais de objetos JavaScript – ou serviços de web - e dados remotos recuperados com JSON, JSONP, OData ou XML, como mostra o exemplo da Figura 1.
Figura 1. DataSource com lista de produtos.
Drag and Drop: Certamente você já precisou ou quis criar aplicações web onde fosse possível arrastar os menus e demais componentes pela tela. O Kendo UI possui dois widgets distintos que, quando combinados, permitem arrastar e soltar componentes visuais nas aplicações web: KendoDraggable e KendoDropTarget. O primeiro permite selecionar e arrastar os componentes e o segundo cria a área que os armazenará, como mostra a Figura 2.
Figura 2. Drag and Drop, arrastando componentes pela tela.
Effects: Trata-se de um vasto conjunto de ferramentas que apresentam um desempenho otimizado para transição de elementos visuais. Cada um dos efeitos disponibilizados por esta widget é desenvolvido com CSS, e perfeitamente adaptáveis a navegadores mais antigos. Na Figura 3 é demonstrado o efeito zoom, aplicado a um dos personagens ao passar o mouse pela imagem.
Figura 3. Effects - Zoom
Globalization: Este widget permite o desenvolvimento de aplicações adaptativas à diferentes culturas, que definem informações como formatos de número, nome dos dias da semana, mês, data, hora, formatos entre outros. Veja um exemplo na Figura 4.
Figura 4. Adaptação e formatação automática com Globalization
Model View View Model (MVVM): Este é um padrão de design que auxilia a na separação do modelo, dados e apresentação. Desta forma, o modelo MVVM torna-se responsável por expor os objetos de dados de forma tal que esses sejam facilmente utilizados pela apresentação (View). Veja um exemplo na Figura 5 onde, ao selecionar um item, dados do mesmo são apresentados em uma layer, que antes estava oculta.
Figura 5. Exemplo da aplicação do MVVM.
Single-Page APP: Trata-se de um conjunto de classes que visam simplificar a construção de aplicações web profissionais (lado do cliente). Para que seja realmente possível compreender as funcionalidades deste componente, recomendo visitar o exemplo apresentado na Figura 6 e com link na seção Links.
Figura 6. Página desenvolvida com Single-Page APP.
Templates: Consiste em JavaScripts simples de se usar, mas de alta performance, com o objetivo de permitir a criação de pequenas partes de HTML que podem ser incorporadas automaticamente a dados provenientes de JavaScripts.
Validator: Este widget fornece aos usuários um modo fácil de realizar validações de formulários. Suporta uma variedade de regras embutidas e fornece formas simples de customizar estas. Um exemplo básico pode ser observado na Figura 7.
Figura 7. Validação de formulários com Validator.
Estes são os recursos oferecidos pelo Web Framework do Kendo UI Core, mas não terminamos por aqui, existem muitos recursos para serem explorados. Veremos a seguir os recursos Web WidGets.
Web WidGets
Assim como os recursos da categoria apresentada anteriormente, os apresentados a seguir também podem ser integrados as aplicações web e estão disponíveis na pasta examples.
Autocomplete: Trata-se de um recurso indispensável para os atuais desenvolvedores, isto devido a ampla utilização do Google Sugest. Este controle permite entradas múltiplas de valor, sendo que as sugestões para o processo de autocompletar podem vir de uma matriz local ou de uma fonte de dados remota. Apesar de simples, este widget garante grande conveniência associada a qualidade e desempenho, como mostra o exemplo na Figura 8.
Figura 8. Recurso Autocomplete.
Buttons: Frequentemente em uma aplicação web necessitamos de alguns botões com características específicas e este widget fornece um aprimorado controle de inserção de texto e imagens em botões, além de permitir a alternância dos modos do botão, bem como uma rica API para aprimorar a experiência do usuário. Veja um exemplo na Figura 9.
Figura 9. Recurso Button.
Calendar, DataPicker e DateTimePicker: Um ótimo, simples e moderno widget para calendários em HTML5. Permite selecionar datas e intervalos, oferecendo uma visão “multi mês”, além de modelos especiais de dias. É simples de personalizar e não prejudica o desempenho de suas aplicações web, como mostra a Figura 10. Os recursos DataPicker e DateTimePicker funcionam de forma semelhante.
Figura 10. Recurso Calendar.
Color-Picker: Permite que o usuário de suas aplicações navegue por uma paleta de cores, selecionando aquela que melhor lhe convir. Com isto, é possível personalizar suas aplicações, deixando-as da forma que melhor lhes convir.
ComboBox e DropDownList: Permite a seleção de valores predefinidos ou até mesmo a inserção de novos. Esta é uma versão mais rica do ComboBox HTML, fornecendo suporte nativo para dados locais e remotos, além de permitir configurar o comportamento da lista. Um bom exemplo pode ser observado na Figura 11.
Figura 11. Recurso ComboBox.
ListView: ao utilizá-lo, o desenvolvedor herda os benefícios do MVVM, personalização de modelos, apoio RTL, Globalization e recursos de navegação, como mostra a Figura 12.
Figura 12. Recurso ListView.
MaskTextBox: Não importa se sua aplicação web possui uma caixa de texto para cartões de crédito, número de telefone com código de área, ou qualquer outro tipo específico de entrada, pois este widget vai auxiliá-lo a definir e restringir a entrada de dados nos campos de seu formulário. A Figura 13 traz um bom exemplo.
Figura 13. Recurso MaskTextBox.
Menu: Este é um widget HTML5 flexível e fácil de personalizar, pois pode-se criar menus profissionais, interativos, dando assim a sua aplicação um visual moderno e de fácil navegação. Um exemplo de um dos vários recursos oferecidos por este widget pode ser observado na Figura 14.
Figura 14. Recurso Menu.
MultiSelect: Este recurso oferece uma forma fácil de fornecer aos usuários de suas aplicações a possibilidade de selecionar várias entradas para uma determinada operação. Utilizando este widget, é possível habilitar o multiselect com apenas uma linha de código, sendo os valores coletados de uma matriz JavaScript ou objeto JavaScript oriundo do Kendo UI DataSource.
Notification: Permite a comunicação entre sua aplicação e seus usuários, adicionando facilmente notificações que não são bloqueadas pelo navegador. Com este recurso é possível escolher entre vários tipos de notificações, permitindo inclusive que estas sejam empilhadas, como mostra o exemplo da Figura 15.
Figura 15. Recurso Notification.
Panel Bar: Permite a criação de um sistema de navegação profissional e flexível com o mínimo em codificação. Este widget é ideal para apresentação de informações em uma quantidade limitada de espaços, como vemos na Figura 16.
Figura 16. Recurso Panel Bar.
Slider: Permite que seu usuário selecione um valor dentro de um intervalo predefinido. Trata-se de um controle totalmente personalizável no que diz respeito a aparência, além de muitos outros suportes e possíveis configurações. Observe um exemplo na Figura 17, onde temos a possibilidade de desenvolver uma aplicação web para automação predial.
Figura 17. Recurso Slider.
Sortable: Permite que o usuário final faça a classificação de listas através do recurso arrastar e soltar. Permite até mesmo a criação de painéis interativos no estilo drag-and-drop. A Figura 18 apresenta um exemplo simples deste recurso.
Figura 18. Recurso Sortable.
Splitter: Permite redimensionar de uma forma simples conteúdos separados em aplicações web, ou seja, pode-se criar dois ou mais painéis redimensionáveis, cujo estado é automaticamente persistido pelo servidor. Um bom exemplo pode ser observado na Figura 19.
Figura 19. Recurso Splitter.
TabStrip: Este recurso permite organizar o conteúdo de um web site de forma eficiente. Com ele pode-se ter total controle sobre a aparência das guias, seu comportamento e orientação. Permite inclusive que usuários finais adicionem ou removam novas guias, isso tudo com apenas algumas linhas de JavaScript. Veja um exemplo na Figura 20.
Figura 20. Recurso TabStrip.
ToolBar: Imagine então, ao desenvolver sua aplicação web, poder contar com uma barra de tarefas profissional? Com este widget isto é possível e o próprio componente se encarrega de realizar os controles de visibilidade de acordo com a largura da janela de sua aplicação. Observe o exemplo da Figura 21.
Figura 21. Recurso ToolBar.
ToolTip: É uma forma de enriquecer projetos, pois exibe conteúdos dinamicamente - é o famoso “balãozinho” de informação, ou hint para os mais habituados ao desenvolvimento desktop. Veja o exemplo da Figura 22.
Figura 22. Recurso ToolTip.
Window: Esta widget permite a criação de janelas modais ou não que, por padrão, podem ser movidas, redimensionadas ou fechadas. Todo conteúdo desta pode ser definido como um HTML estático ou carregada dinamicamente via AJAX. Veja um exemplo na Figura 23.
Figura 23. Recurso Window.
Esta é de fato uma das melhores ferramentas para desenvolvimento web disponíveis na internet. Todos os recursos disponíveis são realmente incríveis e fornecem grande suporte para o desenvolvimento de aplicações profissionais, mesmo em sua versão free. A Kendo UI Core pode auxiliar a qualquer desenvolvedor a criar aplicações web profissionais, de forma que estas destaquem-se e o profissional também.
Quando nos referimos ao desenvolvimento de aplicações, segurança e tempo são preocupações comuns, e este framework é capaz de auxiliar nestes dois sentidos, pois todos os seus recursos são opensource, o que permite sua análise e adaptação, aumentando a segurança e o fato de grande parte de seus recursos serem justamente aos mais utilizados frameworks do momento. O tempo necessário para desenvolver aplicações com aparência agradável e profissional é reduzido de forma considerável.
Links
jQuery v1.9.1
http://www.jquery.com/
Zip do Kendo UI Core
http://www.telerik.com/kendo-ui/open-source-core
Gulp
http://gulpjs.com/
Exemplo do Single-Page
APP
http://demos.telerik.com/kendo-ui/websushi/
