Caso nos sirva para alguma coisa esta comparação, Kendo UI é algo parecido ao que nos oferece jQueryUI, com a diferença de que ambas bibliotecas implementam alguns componentes (widgets) diferentes. Na realidade, a maioria do que podemos fazer em jQueryUI também pode ser feito com Kendo UI, mas esta última biblioteca vai um pouco mais além, permitindo algumas interfaces de usuário mais atuais.
A variedade de componentes para interfaces de usuário de Kendo UI inclui menus dinâmicos, gráficos, painéis, grades de dados, árvores, janelas, sistemas de upload de arquivos, etc. São 13 tipos diferentes de widgets altamente personalizáveis e com funcionalidades realmente avançadas.
É claro que se teve cuidado com compatibilidade em todos os navegadores mais habituais, como é costume neste tipo de produto. Deste modo, tanto as funcionalidades do framework quanto os diferentes widgets, rodam perfeitamente na Internet Explorer (versão 7 em diante), Safari, Chrome ou Firefox, tanto nas versões criadas para computadores pessoais, como em dispositivos móveis.
Por último, queremos destacar que Kendo UI, no momento de escrever estas linhas, está publicado em fase beta. Conforme explicado em sua página web se planeja oferecê-lo baixo duas licenças distintas, uma comercial e paga, com suporte e outras vantagens, e uma gratuita e de código aberto. Durante a fase beta, não se encontra disponível a licença comercial.
Podemos encontrar Kendo UI no seguinte endereço: http://www.kendoui.com/
1) Baixar Kendo UI
Podemos nos dirigir à página de Kendo UI para baixar a versão mais nova das bibliotecas. Obteremos um pacote comprimido que inclui diversas pastas.
2) Incluir o Javascript e CSS
O segundo passo seria incluir no cabeçalho da página, links com as folhas de estilo e os arquivos Javascript que seria necessário dispor para usar o framework.
Quanto às folhas de estilos CSS, Kendo UI vem com três distribuições distintas, das quais podemos escolher a que mais combine com nosso web site. Neste ponto perde um pouco com respeito a jQuery UI, já que essas bibliotecas incluem dezenas de temas muito variados. Kendo UI, pelo menos neste momento, dispõe de dois temas para usar com fundos claros (um em laranja e outro em azul) e um tema para usar com fundos escuros.
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css">
<link href="styles/kendo.kendo.min.css" rel="stylesheet" type="text/css">
Quanto aos arquivos Javascript a serem incluídos, existem diversas possibilidades, dependendo das funcionalidades ou componentes que vamos usar em nosso projeto. Nas páginas da documentação se especificam as dependências de arquivos, que devemos dispor quando usamos umas ou outras coisas de tudo aquilo oferecido pelas bibliotecas. No entanto, para nos facilitar a vida e de momento, vamos incluir um único arquivo "kendo.all.min.js", com todo o código de Kendo UI. É um arquivo um pouco grande, mas economizaremos preocupações com as dependências existentes e fará com que disponhamos de todo o framework, o que será útil pelo menos durante o desenvolvimento do projeto.
Agora , como havíamos dito, Kendo UI está baseado em jQuery, de modo que também teremos que incluir o arquivo de jQuery, justamente antes de incluir as bibliotecas deste framework. Ficaríamos com um código como este.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.all.min.js" type="text/javascript"></script>
Como se pode ver, estamos incluindo jQuery (atualmente na versão 1.6.2) do CDN de GoogleAPIs e o arquivo "kendo.all.min.js" que tem todo o código de Kendo UI minimizado.
3) Usar Kendo UI a partir de nossas páginas
Agora só faltaria começar a usar Kendo UI em nossa página, já que dispomos de tudo que precisamos para começar. Claro que neste momento, necessitaríamos consultar a documentação para saber como deve ser utilizado cada um dos componentes oferecidos pelo framework. Para isso, na sessão de "demos" poderemos encontrar bastantes exemplos e todos os detalhes necessários para implementá-los em nossa página web.
Para criar nosso menu devemos começar criando a estrutura HTML necessária para definir as opções de que disporá.
<ul id="menu">
<li>Opção primeira</li>
<li>Opção segunda
<ul>
<li>Opção aninhada 1
<ul>
<li>Podemos aninhar n niveis</li>
</ul>
</li>
<li>Outra opção aninhada</li>
</ul>
</li>
<li>Terceira opção</li>
</ul>
Depois devemos invocar o componente mediante Javascript, tal como estamos acostumados a fazer com os plugins jQuery.
$("#menu").kendoMenu()
Isso é tudo!! como poderíamos ver no seguinte exemplo o menu foi criado perfeitamente e se encontra animado por padrão com diversos efeitos.
Porém, além disso, ao criar o menu podemos dispor de diferentes opções para personalizá-lo. Cada tipo de componente suporta suas opções particulares, cuja explicação pode ser encontrada na documentação. Nós vamos ver um exemplo de personalização por opções, para fazer com que o menu apresente suas diversas opções na vertical ao invés de na horizontal.
$("#menu").kendoMenu({
orientation: "vertical"
})
Este menu pode ser visto em um exemplo em página à parte.
Se não bastasse, cada componente de interfaces de usuário oferecido em Kendo UI dispõe de uma série de métodos e eventos, encaminhados a melhorar ainda mais os comportamentos dinâmicos. Por exemplo, em um menu destas características podemos fazer coisas como adicionar opções, tirá-las, habilitá-las ou desabilitá-las, fechar uma aba ou abri-la, tudo através de métodos que podemos invocar sobre o objeto "kendoMenu". Podemos também definir instruções Javascript a serem executadas como resposta a eventos criados especificamente dentro do componente, como pode ser abrir uma aba do menu, fechá-la ou selecionar um elemento.
Para oferecer um exemplo destas possibilidades criamos um botão que serve para adicionar uma nova opção ao menu.
Isto é conseguido mediante dois simples passos. Primeiro, ao criar o menu, devemos salvar uma variável com uma referência do objeto "kendoMenu".
var menu = $("#menu").kendoMenu().data("kendoMenu");
Essa referência está armazenada na variável "menu", mas, além disso, lembrem-se que fizemos uma chamada ao método jQuery data() dentro do objeto kendoMenu, passando como parâmetro o valor "kendoMenu". Isto nos dá uma referência a esse objeto na qual estarão disponíveis todas as funcionalidades que define o widget das bibliotecas Kendo UI.
Uma vez que tenhamos essa referência, criar novos elementos é tão simples quanto chamar o método insertAfter(), que insere elementos no menu. Esse método recebe dois parâmetros. O primeiro é um JSON com os textos dos elementos a serem inseridos, indicados com a propriedade "text" (neste caso só há um, mas poderia ser um array em notação JSON). O segundo parâmetro é o objeto jQuery do elemento atrás de onde queremos inserir a opção ao menu.
menu.insertAfter({
text: "Redes sociais"
}, $("#li3"))
Vimos o componente KendoMenu, que nos permite fazer um Menu dinâmico, que é sem dúvida uma das funcionalidades mais típicas em interfaces de usuário. Em poucos minutos comprovamos o simples que é implementá-lo graças a Kendo UI e personalizá-lo segundo nossos interesses.
Continuaremos estudando Kendo UI para a criação de novos artigos para CriarWeb.com, já que o framework nos surpreendeu de uma grata maneira.
