Artigos HTML e CSS Apresentando o framework Kendo UI

Introdução

Neste artigo vamos falar sobre Kendo UI, que é um pacote de bibliotecas prontas para serem utilizadas por nós, desenvolvedores, em aplicações web dinâmicas. Essas bibliotecas são inteiramente criadas com JavaScript e baseadas em jQuery. Mesmo utilizando jQuery como base de seu desenvolvimento, podemos definir as mesmas como framework JavaScript, já que é composta por diversas funcionalidades básicas, tais como, arrastar e soltar e estruturar seu sistema de layouts usando JavaScript. Mas o forte mesmo nessas bibliotecas são suas interfaces de usuário prontas para utilizarmos em nossas aplicações web.

Kendo UI é possui mutias das mesmas funcionalidades que nos são oferecidas pelo jQuey UI. Com a diferença que ambas possuem alguns Widgets distintos. Mas a realidade é que uma grande porcentagem do que podemos fazer com o jQuery UI também podemos fazer com o Kendo UI. Mas o Kendo UI vai além, permitindo interfaces de usuários bem mais atuais e avançadas.

Com o Kendo UI temos à nossa disposição uma grande variedade de componentes para incluirmos em nossas interfaces, sendo esses: menus dinâmicos, gráficos, painéis, grids, árvores, janelas, entre outros, se tornando 13 tipos diferentes de widgets. E o melhor de tudo: são todos altamente personalizáveis e com funcionalidades realmente avançadas.

Compatibilidade

Kendo UI possui compatibilidade com todos os navegadores mais utilizados, como é normal nesse tipo de produto, para que desse modo funcionem perfeitamente tanto as funcionalidades do framework quanto os diferentes widgets, tanto em aplicações criadas para browsers desktop como para dispositivos moveis.

  • Internet Explores 7 ou superior
  • Safari
  • Chrome
  • Firefox

Download

Não podemos deixar de mencionar que o Kendo UI ainda se encontra em sua versão BETA. Conforme explicação colocada em sua página, planeja-se oferecê-lo em dois tipos de licença: uma licença comercial, ou seja, paga com suporte e outras vantagens, e uma outra open source (código aberto) gratuita. Mas por enquanto ainda só se encontra à disposição o modo gratuito. Para estarmos obtendo esse modo temos que acessar sua página de download efetuarmos um cadastro onde o concluímos em menos de 30 segundo. Para acessar a página de download utilize o link a seguir.

http://www.kendoui.com/download/download-kendo.aspx?pid=1035&lict=1.

Cadastro para download do Kendo UI

Figura 1: Cadastro para download do Kendo UI

Após termos preenchido todo o cadastro, clicamos em “Download”. A opção sobre marcar a newsletter fica à livre escolha do usuário. Depois que o download for concluído, temos que descompactar, pois vem em um pacote .ZIP. Após sua descompactação, teremos as seguintes páginas.

  • Exemples: Pasta que contém exemplos de uso de cada uma das funcionalidades do framework e dos widgets dinâmicos.
  • JS: Pasta que contém arquivos JavaScript compactos, que são adequados para utilizarmos em aplicações web que estejam em produção.
  • Source: Pasta que contém arquivos JavaScript e CSS com códigos completos e comentários ideais para aplicações em desenvolvimento.
  • Style: Pasta que contém arquivos CSS compactos, em três versões diferentes que dão aspectos diferentes aos componentes de interface do usuário.

Estrutura básica

Para montarmos nossa estrutura básica, a primeira coisa que temos que fazer é referenciar as folhas de estilo e os arquivos JavaScript que são necessários para estarmos fazendo uso desse framework.

Listagem 1: Referenciando arquivos no cabeçalho da página


<head>
<title>...</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css">
<link href="styles/ kendo.black.min.css " rel="stylesheet" type="text/css">
</head>

Esse arquivo kendo.common.min.css faz referências aos estilos comuns. E ste outro kendo.kendo.min.css, para o estilo que tenhamos escolhido entre os três disponíveis.

Temas disponíveis que podemos escolher.

  • kendo.kendo.min.css
  • kendo.blueopal.min.css
  • kendo.black.min.css

Agora, em relação aos arquivos JavaScript serem incluídos, existem diversas possibilidades, tudo dependerá das funcionalidades que desejamos utilizar em nossas aplicações web. Mas uma forma de facilitar muito é utilizarmos o arquivo “kendo.all.min.js”, arquivo que possui todos os códigos do Kendo UI. Ele é um arquivo um pouco grande, mas isso é recompensado ao evitarmos preocupações com as dependências existentes, e isso faz com que tenhamos tudo que será útil durante o desenvolvimento da nossa aplicação.

Como tínhamos citado no início desse artigo, o kendo UI é baseado em jQuery, por esse motivo também teremos que estar referenciando o arquivo do jQuery. E esse arquivo deve ser referenciado antes de referenciarmos os arquivos JavaScript, ou seja, as bibliotecas desse framework, deixando nosso código da seguinte maneira.

Listatem 2: Adicionando arquivos jQuery e JS


<head>
<title>...</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css">
<link href="styles/kendo.kendo.min.css" rel="stylesheet" type="text/css">
	<!--Folhas de estilo CSS -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
	<!--jQuery Mobile -->
<script src="js/kendo.all.min.js" type="text/javascript"></script>
	<!-- Arquivos Kendo JS -->
</head>

Como podemos observar no código acima, o arquivo jquery.min.js foi carregado do CDN da googleAPIs e o arquivo “kendo.all.min.js” de dentro da pasta js daquele arquivo que fizemos download.

Agora que já possuímos todos os arquivos necessários para o funcionamento adequado do nosso framework kendo UI, podemos partir para parte onde adicionamos nosso conteúdo dentro do corpo da nossa aplicação web.

Agora vejamos um exemplo simples de menu.

Listagem 3: Criando menu com Kendo UI


<!DOCTYPE html>
<html>
<head>
    <title>RTL support</title>

    <link href="styles/kendo.common.min.css" rel="stylesheet">
    <link href="styles/kendo.black.min.css" rel="stylesheet">

    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.web.min.js"></script>
</head>
<body>
    <a class="offline-button" href="../index.html">Back</a>
    
        <div id="example" class="k-content">
            <div class="k-rtl">
                <ul id="menu">
                    <li>
                        Primeiro menu
                        <ul>
                            <li>Sub Item 1</li>
                            <li>Sub Item 2
                                <ul>
                                    <li>Sub sub item 1</li>
                                    <li>Sub sub item 2</li>
                                    <li>Sub sub item 3</li>
                                    <li>Sub sub item 4</li>
                                </ul>
                            </li>
                            <li>Sub Item 3</li>
                            <li>Sub Item 4</li>
                        </ul>
                    </li>               
                    <li>
                        Segundo menu
                        <ul>
                            <li>Sub Item 1</li>
                            <li>Sub Item 2</li>
                            <li>Sub Item 3</li>
                            <li>Sub Item 4</li>
                        </ul>
                    </li>
                    <li>
                        Terceiro menu
                        <ul>
                            <li>Sub Item 1</li>
                            <li>Sub Item 2</li>
                            <li>Sub Item 3</li>
                            <li>Sub Item 4</li>
                        </ul>
                    </li>
                </ul>
            </div>

            <script>
                $(document).ready(function() {
                    $("#menu").kendoMenu();
                });
            </script>
        </div>
</body>
</html>

Assim obtivemos três menus suspensos com sub menus e com o tema black.

Menus com Kendo UI

Figura 2: Menus com Kendo UI

Conclusão

Com esse artigo concluirmos que o Kendo UI com suas bibliotecas são uma excelente maneira para desenvolvermos nossas aplicações web. Possui diversas funcionalidades úteis e oferece resultados excelentes com os diversos componentes para a criação de interface de usuário.

Como exemplo desses componentes tivemos o kendomenu, que nos permitiu facilmente desenvolvermos um menu, que afinal de contas é uma dos elementos fundamentais em interfaces de usuário.

Espero que o conteúdo aqui tenha sido do agrado de todos os usuários. Me ponho à disposição para perguntas, dicas, sugestões e temas para futuros artigos.

Um grande abraço a todos.