Introdução ao Kendo UI. para aplicações MVC.

  • O que é: MVVM - Framework? É um poderoso framework HTML5/CSS3 e JavaScript para desenvolvimento front-end baseado no jQuery, muito próximo do velho conhecido jQuery UI, porém com um mecanismo JavaScript orientado ao modelo de desenvolvimento conhecido como MVVM, conta ainda com uma versão grátis e uma versão paga.

As 3 Partes do Kendo UI

  • kendoUI Web
  • KnedoUI DataViz
  • KendoUI Mobile

Kendo UI Web

Um framework robusto baseado em jQuery.

  • Data Source
  • Widgets
  • Templates
  • Globaliztion
  • Drag and Drop
  • Theme Builder
  • Mobile Ready

Kendo UI DataViz

  • Baseado em HTML5
  • SVG e VML para suporte a browsers antigos.
  • Alta performance
  • Gráficos
    • Pizza
    • Linha
    • Barra/ Coluna
    • Scatter Point

Kendo UI Mobile

Componentes que se adaptam ao tipo de dispositivo do usuário, simulando aparencia nativa de cada aparelho.

Controles disponíveis

  • Auto Completar
  • Botôes
  • Calendário
  • ComboBox
  • DropDownList
  • Grid
  • Menu
  • TextBox Numerico
  • PanelBar
  • Slider
  • Splitter
  • TabStrip
  • TimePicker
  • TreeView
  • Upload
  • Window

Iniciando um Projeto

	<!DOCTYPE html>
	<html lang="en">
		<head>
			<meta charset="utf-8" />
			<title>Kendo UI Web</title>
			<!--Estilo Base-->
			<link href="styles/kendo.common.css" rel="stylesheet"/>
			<!--Tema em Uso-->
			<link href="styles/kendo.silver.css" rel="stylesheet"/>
		</head>
		<body>
			...
			<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
			<script src="scripts/kendo.all.min.js"></script>
			<!--Lib completa, mas podemos utilizar os componentes individuais-->
		</body>
	</html>

Exemplo de iniciação dos componentes (widgets)

    
	<input id="auto-completar" />
	<script type="text/javascript">
	$(function(){
		var data = ["Animal","Antilope","Bird","Bath","Bellow"];
		$("#auto-completar").kendoAutoComplete(data);
	});
	</script>
	

Utilizando apenas o Estilo

	<button class="k-button">Isso é um Botão</button>

Data Source

  • transport - Define a url para endpoint ou Restful (read, insert, update, delete).
  • schema - Indica ao Data Source onde encontrar o conjunto do resultado (result set).
  • parameterMap - Define como formatar os parametros da url do request (Opcional).

Model-View- ViewModel

Definindo um modelo para utiliza-lo com o Data Source

	//Dados Locais
	var localData = [{id:1,name:"Fernando",twitter:"@newaeonweb"},{id:2,name:"Kendo",twitter:"@kendoUI"}];

	//Define o Modelo (Todas as outras propriedades são herdadas automaticamente)
	var Pessoa = kendo.data.Model.define({id:"id"});

	//Configura o Data Source para usar o Modelo
	var dados = new kendo.data.DataSource({
    data: localData,
    schema:{
        model: Pessoa
    }
	});

	//Para manipular as propriedades pode se utilizar a maneira abaixo...
	dados.get(id);

Validator

Validação Nativa

	<form id="kValForm" style="font-size:16px;">
    Email: <input type="email" required class="k-widget" /><br />
    Name: <input type="text" required class="k-input" /><br />
    Age: <input type="number" class="k-input" /><br />
    <input type="submit" value="Sumbit" class="k-button" />
	</form>
	<script type="text/javascript">
    $(function() {
         $("#kValForm").kendoValidator();
    });
	</script>

Validação Customizável

	<form id="kValCustom">
    Email: <input type="email" id="email" name="email" required /><br />
    Verify Email: <input type="email" id="vEmail" name="vemail" /><br />
    <input type="submit" value="Submit" class="k-button" />
	</form>
	<script type="text/javascript">
    $(function() {
         $("#kValCustom").kendoValidator({
             rules:{
                 emailMatch: function(input) {
                     if(!input.is("[name=vemail]")) return true;
                     return (input.val() == $("[name=email]").val());
                 }
             },
             messages:{
                 emailMatch:"Email deve ser igual"
             }
         });
    });
	</script>

Kendo Templates

Outro recurso muito bom é a criação de templates, que segue a mesma linha do handlebars e outros.

Em linha

	var template = kendo.template("Olá, #= firstName # #= lastName #");

EM HTML

	<script id="myTemplate" type="text/x-kendo-template">
    Olá, #= firstName # #= lastName #
	</script>
	//E, o mesmo comando dos templates em linhas...
	var template = kendo.template($("#myTemplate").html());

Syntax

  • #= Nome-da-Propriedade # renderiza o template, sem tags HTML
  • #: Nome-da-Propriedade # renderiza o template, com tags HTML
  • # if(…) {# HTML CONTENT #}# executa JavaScript como parte do template
  • \# escape para o caracter # já que o mesmo é parte do template

Kendo UI Mobile

Ex. de configuração

	<div data-role="view" id="index" data-url="/" data-animation="slide">
   <header data-role="header">
      <div data-role="navbar" class="km-navbar">
        <span data-role="view-title">My App</span>
      </div>
   </header>
   <div data-role="content">
   ...
   </div>
   <footer data-role="footer" data-id="default">
      <div data-role="tabstrip" data-selected-index="0">
        ...
      </div>
   </footer>
	</div>

Próximos passos

Em breve…

comments powered by Disqus