Combinar Dados de duas Tabelas em um GridAutor: Ueli 25. maro 2011 21:24 At as aplicaes mais simples costumam ter diferentes tabelas, relacionadas entre elas. bem comum ter que criar uma tela com um grid que junta os dados de duas tabelas. Exemplo: Temos uma aplicao que organiza os contatos de um gerente de vendas. Existem duas tabelas, uma para empresas e outra para pessoas. Uma pessoa pode ser ligada a uma empresa. Uma viso tpica neste caso uma lista com detalhe (Master-Detail em ingls). Selecionada uma empresa na lista (1) aparecem em uma segunda coluna as pessoas ligadas quela empresa (2):

Em alguns casos queremos uma lista mais simples, por exemplo para poder exportar para Excel, do tipo Empresa / Pessoa / Tel Pessoa / Tel Empresa:

Banco do Brasil / Melinda Bieber / 31 4444-4444 / 31 1234-1234 Banco do Brasil / Clara Oliveira / 31 2222-2222 / 31 1234-5678 Cemig / Joo Silva / 31 1234-5678 / 31 1111-1111 Cemig / Alfredo Costa / 31 2345-6789 / 31 1111-1111 Vale / Rodolfo Togati / 31 9876-5435 / 31 8888-8888

Alm do nmero de telefone da pessoa queremos listar tambm o nmero da empresa, caso a pessoa no esteja disponvel no momento. bem fcil fazer isso com Visual Studio LightSwitch, sem escrever nenhuma linha de cdigo.

Pr-requisitosPara acompanhar este tutorial voc deveria saber como

Criar uma nova soluo LightSwitch Adicionar uma tabela Adicionar uma relao entre tabelas Adicionar uma tela

ResultadoAo final vamos ter uma aplicao com a seguinte tela:

1. Criar nova SoluoCriamos uma nova soluo do tipo LightSwitch com nome "LSBR_Combinar-Dadosde-duas-Tabelas". Alteramos a cultura do projeto para Portugus (Brasil).

2. Criar a Tabela "Empresa"

Criamos uma tabela cujo nome "Empresa" e com dois campos:

"Nome" do tipo String e obrigatrio "Telefone" do tipo String e obrigatrio

Observao: LightSwitch autmaticamente chama a tabela de "EmpresaSet".

3. Criar a Tabela "Pessoa"Criamos outra tabela cujo nome "Pessoa" e com dois campos:

"Nome" do tipo String e obrigatrio "Telefone" do tipo String e obrigatrio

Observao: LightSwitch autmaticamente chama a tabela de "PessoaSet". Em seguido precisamos adicionar uma relao da tabela "Pessoa" para a tabela "Empresa". A Multiplicity "Many : Zero or one" e o Delete Behaviour "Restricted":

5. Criar uma Tela para EmpresasPara listar as empresas criamos uma tela do tipo List and Details Screen. Na combobox Screen Data escolhemos "EmpresaSet". Inclumos Empresa Details e Empresa PessoaCollection:

LightSwitch chama a tela automaticamente de "EmpresaSetListDetail" o que vamos deixar deste jeito. Executamos o que j temos para adicionar algumas empresas e pessoas:

6. Criar uma Tela com Grid Empresas e PessoasPara listar as empresas, repetida para cada pessoa ligada a ela, precisamos inverter o pensamento. No vamos listar as empresas, mas as pessoas. O nome da empresa aparece como um campo adicional da prpria pessoa. Para conseguir isso criamos uma tela do tipo Editable Grid Screen. Na combobox Screen Data escolhemos "PessoaSet". LightSwitch chama a tela de "EditablePessoaSetGrid". Se tudo correu bem podemos ver no Designer a seguinte estrutura:

Atualmente a empresa aparece na terceira coluna, mas queremos t-la no primeiro lugar. Podemos clicar nela (1) e arrastar ao lugar entre Command Bar e Nome (2):

Falta adicionar o telefone da empresa na ltima coluna. Para isso selecionamos a Data Grid Row Pessoa (1), clicamos em Add (2) e Other Screen Data (3):

LightSwitch abre uma janela onde selecionamos Empresa:

Atrs de Empresa digitamos um ponto (1), e o LightSwitch nos mostra automaticamente as propriedades da tabela Empresa. A nossa escolha "Telefone":

Depois de clicar em OK temos as quatro colunas do nosso grid, Empresa, Nome, Telefone e Telefone:

Temos duas colunas com o mesmo nome Telefone, uma vem da tabela Pessoa e a outra da tabela Empresa. Vamos deixar mais claro para o usurio da nossa aplicao qual qual. Selecionamos a coluna Telefone que acabamos de adicionar (1) e alteramos o Display Name para "Telefone Empresa" (2). Dica para controlar se alteramos o Telefone correto: podemos olhar para o campo Data Binding (3). A expresso PessoaSet(item).Empresa.Telefone significa O Telefone da Empresa da Pessoa.

Chegou a hora de mais um F5. Depois de selecionar a tela Editable Pessoa Set Grid podemos ver a lista exatamente do jeito que queremos:

o implementar a Busca numa Tela LightSwitchAutor: Ueli 18. junho 2011 08:14 Uma das funcionalidades poderosas do LightSwitch a busca. Para buscas bsicas no se precisa fazer nada, o campo de busca j faz parte de uma tela padro. Uma busca mais customizada d para implementar com poucos clicks. E para cenrios avanados possvel usar LINQ ou a extenso j pronta da Microsoft.

Pr-requisitosPara acompanhar este tutorial voc deve saber como

Criar uma nova soluo LightSwitch Adicionar uma tabela Adicionar uma relao entre tabelas Adicionar uma tela

1. Busca Padro1.1 Criar nova SoluoPara comear criamos uma nova soluo do tipo LightSwitch com nome "LSBR_Buscar". Alteramos a cultura do projeto para Portugus (Brasil).

1.2 Criar a Tabela "Cliente"Criamos uma tabela cujo nome "Cliente", com os seguintes campos:

"Id" do tipo Integer, no 'Display by Default' "Cdigo" do tipo String e obrigatrio "Nome" do tipo String e obrigatrio "CEP" do tipo Integer e obrigatrio

1.3 Adicionar Tela "Clientes"Criamos uma tela do tipo Editable Grid Screen. Na combobox Screen Data escolhemos "Clientes". O Display Name da tela mudamos para "Clientes". Quando executamos a nossa aplicao o LightSwitch nos oferece um campo de busca. Insira alguns dados e experimente:

Dica: As telas do tipo "List and Details Screen" e "Search Data Screen" tambm incluem este campo de busca padro. Voc vai perceber que a busca ignora o campo CEP. Esta a grande limitao da busca padro do LightSwitch: restrito aos campos do tipo String. Mas Date, nmeros do tipo Integer e Double etc. ficam por fora.

2. FiltrosNo prximo passo vamos incluir um campo para poder buscar clientes pelo CEP.

2.1 Adicionar uma Query "ClientesPorCEP"A tabela Clientes adicionamos uma query:

Iremos cham-la de "ClientesPorCEP":

2.2 Adicionar o Filtro "CEP"Adicionamos um filtro Single:

Escolhemos CEP:

Escolhemos o tipo Parameter:

E adicionamos um novo:

LightSwitch adiciona automaticamente o parmetro com nome CEP:

2.3 Adicionar Tela "Clientes por CEP"Criamos uma tela do tipo Editable Grid Screen. Na combobox Screen Data escolhemos "ClientesPorCEP".

O Display Name da tela mudamos para "Clientes por CEP". Analisando a tela que LightSwitch criou automaticamente achamos um campo de busca para CEP:

Vamos testar esta busca por CEP que acabamos de criar. Executamos a aplicao, escolhemos a nova tela Clientes por CEP (1), digitamos no novo

campo de busca um dos CEPs que criamos anteriormente (2) e depois a tecla Enter, e nos grid aparece o cliente ou os clientes com este CEP (3):

Fcil demais.

LINQEscrevendo poucas linhas de cdigo usando LINQ d para implementar uma busca Full Text que busca no s nos campos do tipo String, mas em todos os campos e at em tabelas relacionadas. Isso vai ser explicado em um futuro tutorial.

Filter ExtensionUma forma bastante simples para implementar uma busca avanada a extenso oferecido pela Microsoft. Ainda Beta, mas d para usar e deve ser aperfeioado no futuro. Veja o tutorial neste blog.

Busca avanada com LightSwitch - Full Text SearchAutor: Ueli 30. junho 2011 09:34 A busca padro do LightSwitch muito simples de usar, veja Como implementar a Busca numa Tela LightSwitch. Mas esta soluo vem com uma grande restrio: Busca apenas nos campos do tipo String da tabela, e ignora completamente dados em tabelas relacionadas. Mas com um pouco de magia LINQ vamos implementar uma busca avanada do tipo Full Text. A nossa aplicao vai administrar pacientes e consultas de uma clnica odontolgica e ter a seguinte tela principal ao final:

Pr-requisitosPara acompanhar este tutorial voc deve saber como

Criar uma nova soluo LightSwitch Adicionar uma tabela Adicionar uma relao entre tabelas Adicionar uma tela

1. Criar nova SoluoPara comear criamos uma nova soluo do tipo LightSwitch com nome "LSBR_BuscaAvancada".

2. Criar Tabela DentistaCriamos uma tabela cujo nome "Dentista", com os seguintes campos:

"Id" do tipo Integer, no 'Display by Default' "Nome" do tipo String e obrigatrio

A Summary Property deve ser Nome.

3. Adicionar Tela DentistasCriamos uma tela do tipo Editable Grid Screen. Na combobox Screen Data escolhemos Dentistas. O Display Name mudamos para "Dentistas". Adicionamos alguns dentistas:

4. Criar Tabela PacienteCriamos uma tabela cujo nome "Paciente", com os seguintes campos:

"Id" do tipo Integer, no 'Display by Default' "Nome" do tipo String e obrigatrio "DataDeNascimento" do tipo Date e no obrigatrio

A Summary Property deve ser Nome.

3. Adicionar Tela PacientesCriamos uma tela do tipo Editable Grid Screen. Na combobox Screen Data escolhemos Pacientes. O Display Name mudamos para "Pacientes". Adicionamos alguns pacientes:

5. Criar Tabela ConsultaCriamos uma tabela cujo nome "Consulta", com os seguintes campos:

"Id" do tipo Integer, no 'Display by Default' "Data" do tipo Date e obrigatrio "Dentista" do tipo Dentista - relao One (Dentista) to Many (Consulta), On Delete Behaviour Restricted. "Paciente" do tipo Paciente - relao One (Paciente) to Many (Consulta), On Delete Behaviour Restricted. "Comentrio" do tipo String e no obrigatrio

A Summary Property mudamos para Data.

6. Adicionar Tela ConsultasCriamos uma tela do tipo Editable Grid Screen. Na combobox Screen Data escolhemos Consultas. O Display Name mudamos para "Consultas". Adicionamos algumas consultas:

7. Criar Query PacientesFiltradasClicando com o boto direito do mouse na tabela Pacientes criamos uma nova Query:

O nome da query "PacientesFiltradas":

Adicionamos um parmetro:

O nome do parmetro "TermoDeBuscaGeral", do tipo String:

Agora precisamos explicar para o LightSwitch o que fazer com este parmetro. O lugar para incluir um pouco de cdigo no mtodo "PacientesFiltradas_PreprocessQuery". Vamos abr-lo clicando em Write Code:

LightSwitch abre automaticamente o arquivo ApplicationDataService.cs. Podemos ver que o mtodo recebe um String com nome TermoDeBuscaGeral (1), o mesmo que acabamos de criar, e todos os pacientes, empacotados na varivel query (2):

O resultado do nosso mtodo tambm a varivel query. Ou seja, recebemos a query, fazemos algo com ela (filtramos alguns dos pacientes dentro dela) e a devolvemos. Ao final o mtodo vai ser da seguinte forma: ? 1 partial void PacientesFiltradas_PreprocessQuery(stringTermoDeBuscaGeral, ref IQueryable query)

2

{

3 4 5 6 7 8 9 1 0 1 1else query = from paciente in query where paciente.Nome.Contains(TermoDeBuscaGeral) DateTime data; if (DateTime.TryParse(TermoDeBuscaGeral, out data)) query = from paciente in query where paciente.DataDeNascimento == data || paciente.Consultas.Any(c => c.Data == data) select paciente;

|| paciente.Consultas.Any(c => 1 c.Dentista.Nome.Contains(TermoDeBuscaGeral)) 2

1 c.Comentrio.Contains(TermoDeBuscaGeral)) 3 1 4} 1 5select paciente;

|| paciente.Consultas.Any(c =>

Este tutorial no pretende ser uma introduo para LINQ, ento s vamos explicar os passos mais importantes: Primeiro o nosso mtodo tenta converter o termo de busca em uma data: ? 1data))if (DateTime.TryParse(TermoDeBuscaGeral, out

Se conseguir, ele pega todos os pacientes dentro da query: ? 1queryfrom paciente in

...que tem a data de nascimento igual esta data: ? 1paciente.DataDeNascimento == data ...ou com pelo menos uma consulta naquela data:

? 1|| paciente.Consultas.Any(c => c.Data == data) Se no for uma data, selecionamos todos os pacientes cujo nome contm o termo de busca: ? 1paciente.Nome.Contains(TermoDeBuscaGeral) ...ou que tinham uma consulta com um dentista cujo nome contm o termo de busca: ? 1c.Dentista.Nome.Contains(TermoDeBuscaGeral)) ...ou que tinham uma consulta com o termo de busca dentro do comentrio: ? 1c.Comentrio.Contains(TermoDeBuscaGeral)) Pronto! Agora s falta criar a ltima tela para testar.|| paciente.Consultas.Any(c => || paciente.Consultas.Any(c =>

8. Adicionar Nova Tela PacientesApagamos a antiga tela EditablePacientesGrid. Criamos uma tela do tipo Editable Grid Screen. Na combobox Screen Data escolhemos "PacientesFiltradas". O Display Name da tela mudamos para "Pacientes". Quando executamos a nossa aplicao o LightSwitch nos oferece um campo de busca. Executamos a aplicao e experimentamos. Buscando por "Masc" (seguido por Enter) achamos todos o pacientes que tiveram pelo menos uma consulta com Dr. Marcelo Mascarenhas:

Buscando por "Limpeza" achamos todos os pacientes que fizeram uma limpeza:

Buscando por "1/1/2011" achamos todos os pacientes que tiveram uma consulta ou que nasceram naquele dia:

Do jeito que est a tela ainda no faz muito sentido. Falta adicionar a lista de consultas do paciente e a possibilidade de adicionar uma nova consulta. rpido fazer isso. Criamos uma nova tela do tipo List and Details Screen, escolhemos Pacientes Filtradas na combo box Screen Data e adicionamos ambos Paciente Details e Paciente Consultas. Mudamos o Display Name para "Pacientes". Clicamos em Paciente Termo de Busca (1) e mudamos a Label Position para None:

Apagamos a tela EditablePacientesFiltradasGrid. Executamos a nossa aplicao novamente e buscamos por "Beth". O sistema acha um paciente que tive uma consulta com a Dra. Ana Elizabeth Fabrini, alm de uma paciente que se chama Beth:

ar Boto a uma Coluna do GridAutor: Ueli 29. maro 2011 16:42 O jeito padro do LightSwitch para editar dados escolher um registro no grid ou en uma lista, ir para a tela com a viso de detalhe e clicar l nos botes que executam as aes desejadas. s vezes isso pode ser um pouco chato, como mostra o seguinte exemplo: Temos uma aplicao simples para gerenciar as nossas tarefas. Cada tarefa registrada com o nome e a data de vencimento. Se queremos adiar uma tarefa por uma semana precisamos precisamos busc-la, abrir a viso de detalhe daquela tarefa, ir ao campo da data e alterar o valor. Muitos clicks para uma ao simples. Somos desenvolvedores que respeitam os nossos usurios, ento vamos acrescentar um boto a cada tarefa nos resultados da busca que aumenta o prazo por uma semana.

PrerequisitosPara acompanhar este tutorial voc deveria saber como

Criar uma nova soluo LightSwitch Adicionar uma Tabela Adicionar uma Tela

ResultadoAo final vamos ter uma aplicao com a seguinte tela:

1. Criar nova SoluoCriamos uma nova soluo do tipo LightSwitch com nome "LSBR_Adicionar-Botao-auma-Coluna-do-Grid". Alteramos a cultura do projeto para Portugus (Brasil).

2. Criar a Tabela "Tarefa"Criamos uma tabela cujo nome "Tarefa" e com dois campos:

"Nome" do tipo String e obrigatrio "DataDeVencimento" do tipo Date e obrigatrio

Observao: LightSwitch autmaticamente chama a tabela de "TarefaSet".

3. Criar uma Tela com GridEm seguido criamos uma tela do tipo Editable Grid Screen. Na combobox Screen Data escolhemos "TarefaSet". LightSwitch chama a tela de "EditableTarefaSetGrid" o que vamos deixar deste jeito. Vamos compilar e executar a nossa aplicao - F5 e adicionar algumas tarefas:

4. Adicionar BotoPara adicionar um boto que adia a data de vencimento por uma semana abrimos a tela TarefaSetListDetail (provavelmente ainda est aberta). a Data Grid Row que define

o as colunas, e aqui onde queremos posicionar o nosso boto. Se queremos ter uma prpria coluna para o boto no podemos adicion-lo diretamente Data Grid Row. Precisamos empacot-lo en um grupo. Com o boto direito do mouse abrimos o menu de contexto do Data Grid Row (Tarefa) onde clicamos Add Group:

Antes de adicionar o boto ao grupo mudamos o nome do grupo que mostrado para o cliente para "Adiar". Na rvore marcamos o Group (1) e nas propriedades alteramos o nome (2):

Com o boto direito clicamos de novo Group e em Add Button:

LightSwitch abre uma janela onde podemos dar um nome ao que queremos executor quando algem clicar no boto. Digitamos "Adiar1Semana":

Para deixar o boto mais bonito alteramos o texto nele para "+1 semana":

Se algum clicasse no boto agora nada aconteceria - bvio, porque precisamos escrever o cdigo que manipula a data de vencimento da nossa tarefa. Para abrir o cdigo abrimos o menu de contexto do Adiar1Semana e escolhemos a opo Edit Execute Code:

Com apenas uma linha de cdigo conseguimos o que queremos: Adiar Escrevemo o seguinte cdigo no mtodo Adiar1Semana_Execute: ? 1partial void Adiar1Semana_Execute() { 2 TarefaSet.SelectedItem.DataDeVencimento = 3TarefaSet.SelectedItem.DataDeVencimento.AddDays(7); 4 } Claro, seria bom fazer o cdigo mais intelligente de forma que quando a data j vencida a nova data seria daqui a uma semana. Mas vamos deixar isso para l. Bom, s falta compilar e executar e testar o nosso boto:

os automticos com o LightSwitch Filter ControlAutor: Ueli 15. maio 2011 23:03 Sabem aquelas aplicaes com tabelas de inmeros campos em que o usurio precisa filtrar os dados da forma mais maluca? Pois . Imaginem uma tabela com dados de funcionrios, sendo que desejamos selecionar apenas as pessoas de sexo femininio e com carga de chefia e pessoas de ambos sexos com salrio acima de 60.000 reais. Ainda queremos salvar este filtro, para podermos comparar os resultados com todas as pessoas de sexo masculino, sem cargo de chefia e salrio acima de 60.000. E depois queremos mudar o limite para 59.000... Para criarmos uma tela com um grid e os filtros teramos bastante trabalho... mas felizmente com LightSwitch temos o 'Filter Control' que nos d todas estas funcionalidades em, digamos 5 minutos.

Pr-requisitosPara acompanhar este tutorial voc deveria saber como

Criar uma nova soluo LightSwitch Adicionar uma tabela Adicionar uma relao entre tabelas Adicionar uma tela

ResultadoAo final vamos ter uma aplicao com a seguinte tela:

1. Instalar a Extenso "Filter Control"Vamos buscar a extenso no site http://code.msdn.microsoft.com/Filter-Control-forVisual-90fb8e93:

No arquivo LightSwitchFilter.zip buscamos a pasta Binaries e abrimos o arquivo LightSwitchFilter.Vsix.vsix:

Abre-se uma janela onde clicamos em 'Install':

Na janela seguinte clicamos em 'Ok':

2. Criar nova SoluoCriamos uma nova soluo do tipo LightSwitch com nome "LSBR_Filtrar-Dados". Alteramos a cultura do projeto para Portugus (Brasil).

3. Ativar Extenso

A extenso instalada no Visual Studio, mas para usar precisamos ativ-la dentro da nossa soluo. Para isso abrimos as propriedades da nosso projeto LSBR_Filtrar-Dados com click direito (1) e selecionamos Propriedades (2):

Na aba Extension marcamos LightSwitch Filter Control:

4. Criar a Tabela "Cargo"

Criamos uma tabela cujo nome "Cargo" (Plural Name: Cargos) e com dois campos:

"Id" do tipo Integer, no 'Display by Default' "Nome" do tipo String e obrigatrio

5. Criar a Tabela "Pessoa"Criamos uma tabela cujo nome "Pessoa" e com os seguintes campos:

"Id" do tipo Integer, no 'Display by Default' "Nome" do tipo String e obrigatrio "IsChefe" do tipo Boolean "DataNascimento" do tipo Date "Salario" (Display Name 'Salrio') do tipo String "Sexo" do tipo String e uma Choice List com dois tens: 'Masculino' e 'Feminino' "Cargo" do tipo Cargo

6. Adicionar uma Query "PessoasFiltradas"A esta tabela adicionamos uma query "PessoasFiltradas":

Ao filtro adicionamos um parmetro "TermoFiltro" do tipo String:

Em seguido precisamos manipular a query e escrever uma linha de cdigo dentro do mtodo PessoasFiltradas_PreprocessQuery:

Onde incluimos uma linha de cdigo: ?partial void PessoasFiltradas_PreprocessQuery(string TermoFiltro, ref

1IQueryable query) 2{ query = LightSwitchFilter.Server.FilterExtensions.Filter(query, 3 TermoFiltro, this.Application); 4}

7. Adicionar Tela "Cargo"Primeiro criamos uma tela do tipo Editable Grid Screen. Na combobox Screen Data escolhemos "Cargos". O Display Name da tela mudamos para "Cargos".

8. Adicionar Tela "Pessoa"Em seguido criamos uma tela do tipo Editable Grid Screen. Na combobox Screen Data escolhemos "PessoasFiltradas". O Display Name da tela mudamos para "Pessoas". Na tela mudamos o tipo do controle Pessoa Termo Filtro (1) para Advanced Filter Builder (2):

Para deixar a tela mais arrumada ainda escondemos o label. Nas propriedades do controle Pessoa Termo Filtro escolhemos Label Position - None:

Pronto!

Se executarmos agora a nossa aplicao (F5) temos a seguinte tela (novo filtro destacado em vermelho):

Agora voc pode adicionar alguns dados nas tabelas Cargos e Pessoas e experimentar com diferentes filtros e grupos de filtros:

Cuidado, a extenso em verso beta ainda e tem alguns bugs, mas mesmo assim, bastante impressionante o que d para fazer com to pouco trabalho!