Introdução a Kendo MVVM

Pequena introdução ao framework Kendo MVVM. O que é o padrão MVVM. Ademais realizamos nosso primeiro exemplo baseado nesta biblioteca Javascript.

Por Javier Torrecilla Puertas


Publicado em: 23/12/13
Valorize este artigo:

Para aqueles que não sabem, Kendo é um framework Javascript que conta com suporte para as distintas plataformas de desenvolvimento (JAVA, PHP, ASP.NET y ASP.NET MVC) e que nos oferece uma interessante coleção de controles, simplificando-nos o desenvolvimento de nossa interface de usuario, e algo que está bastante na moda agora é a utilização do padrão MVVM.

O que é o padrão MVVM (Model-View-ViewModel)?

É um padrão de design que foi definido por John Grossman, um dos arquitetos que criaram WPF e Silverlight, como uma variante do padrão MVP e que se assemelha ao padrão MVC. Poderíamos dizer que este padrão vem a incorporar as vantagens provenientes do padrão MVC com o potente link para dados que WPF ou Silverlight apresentam.

As peças que entram em jogo dentro de MVVM são:

  • Model: É o objeto que contém os dados que queremos visualizar, poderíamos dizer que é um objeto do domínio, ou um DTO com a informação necessária para apresentar os dados.
  • View: É a vista donde se vão ser representados os dados de nosso modelo, e onde estarão, ademais, os controles que facilitem a interação entre o usuário e a persistência do objeto.
  • View-Model: Esta “camada” é um objeto intermediário que realiza a função de lincar os dados entre a vista e o nosso modelo. Através da definição de propriedades em nosso ViewModel podemos lincá-las dentro de nossa Vista para que seja modificada a informação, ou para que se os dados sejam salvos em Base de Dados pressionando um botão, por exemplo.

Kendo MVVM

Existem diferentes frameworks de Javascript que permitem utilizar o padrão MVVM de forma simples em ambientes web, como podem ser knockoutjs ou angularjs, porém, neste artigo vamos ver como realizar a implementação de MVVM com Kendo.
Para começar a utilizar Kendo é necessário baixá-lo do seu web oficial www.kendoui.com/download.aspx, onde encontraremos varias versões de pagamento (com teste de 30 dias) e uma versão de código aberto mais reduzida e sem tiques de suporte. Para este artigo vou utilizar a versão OpenSource que ocupa aproximadamente 19 Mb.

Uma vez baixado Kendo, vamos começar a escrever nosso primeiro exemplo com o editor que mais nos agrade.

Dentro de nosso arquivo HTML vamos adicionar as referencias Javascript a jQuery e ao arquivo kendo.web.min.js que baixamos. Bem, uma vez adicionadas as referencias vamos definir um viewModel simples:

var viewModel = kendo.observable({
Name: 'Javier Torrecilla',
Age: 30,
Description: 'Software Developer'
});

A continuação, definiremos a vista que vamos utilizar e veremos como, graças ao atributo "data-bind" lincaremos com o nosso viewModel.

<div id="example">
Name: <label data-bind='text: Name'></label> <br />
Age: <label data-bind='text: Age' ></label> <br />
Description: <label data-bind='text: Description' ></label><br />
</div>

O valor estabelecido dentro do atributo indica a propriedade do elemento HTML que vamos utilizar, neste exemplo a propriedade "text"e o elemento de nosso "viewmodel" com o que vai ser lincado.

Por último será necessário que através de Javascript indiquemos o link entre o viewModel e a vista, para isso utilizaremos o método "bind":

kendo.bind($("#example"), viewModel);

O primeiro parâmetro é o conteiner que vamos lincar, neste caso é um "div" chamado "example", e o segundo parâmetro é nosso viewmodel.

Se visualizarmos nossa página web de exemplo em qualquer navegador poderemos ver algo similar a esta imagem:

A continuação vamos definir uma função em nosso viewModel e um botão na vista para invocar essa ação:

var viewModel = kendo.observable({
Name: 'Javier Torrecilla',
Age: 30,
Description: 'Software Developer',
Greeting: function () {
alert('Good Morning');
}
});

<div id="example">
Name: <label data-bind='text: Name'></label> <br />
Age: <label data-bind='text: Age' ></label> <br />
Description: <label data-bind='text: Description' ></label><br />
<input type='button' data-bind="click:Greeting" value="Say Hello"/>
</div>

Se refrescarmos nosso navegador, veremos o novo botão na página, e se o pressionarmos será executado o código da função que definimos na função "Greeting".

Como você podem observar no tag data-bind, indicamos que o elemento que vai ser lincado é o evento clic do botão .

No próximo artigo veremos mais das características deste interessante framework para desenvolvimento de aplicações web com MVVM.





Comentários do artigo
Foi enviado 1 comentário ao artigo
1 comentário não revisado
0 comentários revisados

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor
Javier Torrecilla Puertas
Desarrollador en tecnologías .NET, colaborador en foros de MSDN, Geek.ms

Home | Sobre nós | Copyright | Anuncie | Entrar em contato