Visual Studio LightSwitch 2012 - Criando uma aplicação Básica

Em meu artigo Apresentando o Visual Studio LightSwitch - Macoratti.net escrito em 2010 eu apresentei o LightSwitch uma nova ferramenta para desenvolvimento de aplicações cujo objetivo é simplificar o desenvolvimento de aplicações para web e desktop e para nuvem. Com ele, é possível criar aplicativos comerciais sem ter que ser um especialista em programação.

Na nova versão do Visual Studio 2012 o LightSwitch esta integrado ao IDE sendo assim mais uma opção de modelo de projeto para desenvolvimento de aplicações a sua disposição.

O LightSwitch é um ambiente de desenvolvimento extensível que simplifica o processo de desenvolvimento uma vez que permite que você se concentre na lógica do negócio, enquanto ele cuida de uma grande parte do trabalho remanescente.

O LightSwitch é perfeito para aplicativos de produtividade para pequenas empresas ou departamentos que precisem ser desenvolvidos rapidamente.

Neste artigo eu vou mostrar como criar uma aplicação bem simples usando alguns dos recursos básicos do LightSwitch.

Eu estou usando o Visual Studio 2012 que você pode baixar neste link: http://www.microsoft.com/visualstudio/ptb/downloads

Parte 1 - Criando a aplicação LightSwitch e definindo os dados

Abra então o Visual Studio 2012 e no menu File clique na opção New Project ou clique diretamente em New Project no menu Start;

Na janela New Project selecione o template LightSwitch;

Você verá duas opções : LightSwith Application Visual Basic e C# , vamos escolher o LightSwitch Application (Visual Basic), informar o nome Agenda e clicar no botão OK;

Será criado o projeto e a tela abaixo será apresentada onde podemos notar:

  1. O Designer
  2. A janela Solution Explorer
  3. A janela de Propriedades

Podemos iniciar definindo os nossos dados na opção - Create New table ou usando os dados já existentes na opção Attach to external Data Source;

Vamos definir para o nosso exemplo uma nova tabela que vou chamar de Contatos;

Clique então na opção Create new table;

Será aberta no Designer a janela para criação da tabela onde definimos o nome do campo, o seu tipo e a informação se o campo é mandatório ou não;

Por padrão toda tabela criada no LightSwitch tem o campo Id criado por padrão como sendo requerido;

Definimos os seguintes campos para nossa tabela Contatos:

Note que temos os tipos Email Address e Phone Number pré-definidos e prontos para uso.

No caso do campo Telefone podemos definir um formato padrão usado no Brasil clicando na opção - Phone Number Formats - na janela de propriedades;

Na janela Phone Number Formats definimos o formato - NN-NNNN-NNNN e testamos para verificar se ele esta correto:

Para o campo Sexo podemos usar outro recurso interessante do LightSwitch, as Choice List;

Selecione o campo Sexo e na janela de propriedades clique em Choice List...;

Na janela Choice List vamos definir dois valores que será armazenados no campo:

Vamos acrescentar o campo Nascimento como sendo do tipo Date para armazenar a data de nascimento do contato.

Assim ao final do processo nossa tabela Contatos terá a seguinte estrutura:

Vamos agora para a segunda parte do processo de criação da nossa aplicação que é a definição das telas;

Parte 2 - Definindo as telas da aplicação

Para definir as telas podemos clicar com o botão direito do mouse no item Screens -> Add Screen na janela Solution Explorer ou no ícone Screen (Create Screen) no Designer;

A janela Add New Screen será exibida exibindo os templates de telas disponíveis;

Vamos selecionar o template New Data Screen e selecionar a tabela Contatos que criamos na primeira parte e seguir no botão OK;

 

Será apresentado no Designer o leiaute da tela criada como um modelo onde podemos editar cada controle que o LightSwitch gerou para a tela;

Nesse momento podemos já executar a nossa aplicação que irá apresentar a seguinte tela:

Já podemos incluir os dados nesta tela. Abaixo vemos a formatação definida para o campo Telefone:

Na janela a seguir vemos a definição usada na Choice List para o campo Sexo:

Para o campo nascimento vemos o controle Date Picker criado automaticamente pelo LightSwitch;

O campo foto , definido como do tipo Image, ao ser selecionado exibe o ícone Load Image que abre a janela para que uma imagem seja selecionada;

Ao final se todos os dados foram validados podemos clicar no botão Save para termos os dados gravados;

Note que após isso o campo Id aparece indicando o primeiro registro gravado;

No link Design Screen temos acesso ao modo de customização da tela onde podemos selecionar cada controle usado pelo LightSwitch e alterar seu texto, tipo, aparência, posicionamento e tamanho:

Vamos incluir outra tela na aplicação.

Na janela Solution Explorer clique com o botão direito do mouse no item Screens -> Add Screen;

Selecione a tela - Editable Grid Screen - e os dados ContatosSet e clique no botão OK;

Executando a aplicação e clicando sobre a guia TASKS e selecionando Editable Contatos Set Grid - iremos ver a tela exibindo os dados já gravados;

Note que temos os botões que permitem inclui, editar excluir e consultar dados nesta tela:

Abaixo vemos a tela para edição de dados exibindo todos os dados já gravados:

Como já disse podemos personalizar ainda mais nossa aplicação alterando a disposição dos controles, o texto e outras configurações.

Assim em poucos minutos criamos uma aplicação para manutenção de contatos com todas as funcionalidades padrão sem ter que digitar uma única linha de código.

Rom 8:10 Ora, se Cristo está em vós, o corpo, na verdade, está morto por causa do pecado, mas o espírito vive por causa da justiça.

Rom 8:11 E, se o Espírito daquele que dos mortos ressuscitou a Jesus habita em vós, aquele que dos mortos ressuscitou a Cristo Jesus há de vivificar também os vossos corpos mortais, pelo seu Espírito que em vós habita.

Referências:

José Carlos Macoratti