LightSwitch

Criando aplicativos modernos de produtividade dos negócios com o Visual Studio LightSwitch

Jan Van der Haegen
Beth Massi

Baixar o código de exemplo

Neste artigo, analisarei alguns dos novos recursos do Visual Studio LightSwitch que o ajudarão a criar modernos aplicativos móveis de produtividade dos negócios.

O Visual Studio LightSwitch (simplesmente LightSwitch daqui em diante para fins de brevidade) foi criado com o objetivo de simplificar e encurtar o tempo de desenvolvimento de aplicativos de negócios. Os aplicativos do LightSwitch podem consumir uma variedade de fontes de dados, fornecer lógica de negócios e de autorização, bem como criar clientes executáveis em inúmeros dispositivos, tudo sem a necessidade de compilar códigos de direcionamento.

O LightSwitch agrega várias fontes de dados e expõe automaticamente um conjunto de serviços de dados abertos (o protocolo Open Data, ou OData) de modo a disponibilizar suporte a clientes personalizados e cenários de autoatendimento de BI (business intelligence). O LightSwitch permite também compilar códigos usados na personalização dos aplicativos, conforme necessário, sejam eles controles da interface do usuário, lógica de negócios, serviços de dados ou outros componentes.

Com o lançamento em abril da atualização 2 do Visual Studio 2012, o LightSwitch incluiu também o recurso de criar rapidamente clientes HTML5 centrados no toque com boa execução em dispositivos móveis modernos. Os clientes HTML do LightSwitch são criados com base em JavaScript e HTML5 compatível com padrões e proporcionam experiências "touch first" modernas em Windows RT, Windows Phone 8, iPhones e iPads com dispositivos iOS 5 e 6 e Android 4.x.

Além disso, graças ao novo modelo de aplicativos SharePoint 2013, o LightSwitch oferece também a simplicidade e a facilidade de criar aplicativos personalizados de negócios no SharePoint e no Office 365. Atualmente, muitas empresas utilizam o SharePoint como hub para viabilizar uma melhor colaboração entre pessoas, conteúdos e processos. Embora você ainda possa optar por hospedar seus aplicativos da forma como preferir ou no Windows Azure, a ativação do SharePoint nos aplicativos do LightSwitch permite desfrutar dos benefícios do gerenciamento do ciclo de vida de aplicativos, identidade e recursos de controle de acesso no SharePoint, sem falar nos dados e processos de negócios já em execução no SharePoint em sua empresa.

O LightSwitch HTML Client

No LightSwitch, o ponto de partida será sempre o modelo de dados, não importa se esteja modelando novos dados ou conectando-se a fontes de dados existentes. Visto que neste artigo nos concentraremos nos novos recursos, criamos antecipadamente um modelo simples de dados e preenchemos o banco de dados com alguns dados inicias. Assim, já estamos prontos e preparados para iniciar a criação de um cliente que poderá ser uado como meio de garantir sua presença nas sessões mais interessantes ao participar de uma conferência emocionante, como a Visual Studio Live! Caso esta seja sua primeira experiência com o LightSwitch, certifique-se de não ignorar nenhuma das inúmeras opções de modelagem de dados, BI de autoatendimento, tratamento de simultaneidade e excelente multithreading oferecidos pelo aplicativo; para isso, leia os artigos anteriores da MSDN Magazine, como “Dê forma aos seus dados com o Visual Studio LightSwitch 2012”, edição de setembro de 2012 (msdn.microsoft.com/magazine/jj618303)—ou visite o LightSwitch Developer Center (msdn.com/lightswitch).

O cliente HTML oferece uma abordagem à criação de aplicativos touch-first de página única executáveis em uma ampla variedade de dispositivos móveis, geralmente denominados “aplicativos complementares”, significando que esses aplicativos desempenham uma única função específica em uma arquitetura mais ampla. A criação de aplicativos complementares destinados a pesquisar dados no local, como fizemos neste artigo, é um excelente exercício para se familiarizar com o cliente HTML, mas de forma alguma representa a infinidade de problemas que esses aplicativos podem solucionar. Esses aplicativos complementares poderão ajudar sua empresa a economizar tempo e dinheiro ao possibilitar não apenas a consulta de dados, mas também sua modificação e armazenamento (colhendo a assinatura de um cliente na entrega de um pacote, por exemplo) e às vezes fazendo até mesmo uso de certos recursos específicos ao dispositivo, como localização geográfica (capturando, por exemplo, o local em que determinada amostra do solo é coletada).

Modelos de tela e navegação Independentemente do tipo de cliente criado, o LightSwitch adota a mesma abordagem à definição de telas utilizando um conjunto de modelos predefinidos à sua escolha. Para adicionar uma tela, basta clicar com o botão direito do mouse no projeto do Solution Explorer e selecionar a opção Add Screen (Adicionar tela). Essa ação abrirá uma caixa de diálogo onde é possível selecionar modelos de tela e algumas opções adicionais, como nome da tela e dados a serem usados por ela. A tela será criada com base nos modelos escolhidos e aberta no designer de telas.

Para desenvolvedores do LightSwitch com certa experiência, isso parece familiar, já que a experiência de tempo de design é praticamente a mesma de quando usamos o LightSwitch na criação de telas em aplicativos Silverlight dentro e fora do navegador, simplificando ainda mais o já simples processo de aprendizado. O LightSwitch mantém-se fiel à arquitetura básica MVVM (Model-View-ViewModel) de aplicativos e à forma como o designer de telas apresenta os modelos de exibição no lado esquerdo e a representação das exibições correspondentes à direita.

Uma mudança incrível é que a configuração da navegação de uma tela para outra (ou vincular qualquer outra ação a eventos gerados pelo toque do usuário nos elementos da tela) passou a ser um recurso de primeira linha no designer de telas. Isso é obviamente um aprimoramento, não apenas porque os aplicativos são altamente focados no toque, mas também porque o cliente HTML do LightSwitch produz um aplicativo de uma única página (SPA). No cliente Silverlight, havia um shell MDI (Interface de Documentos Múltiplos) com o qual era possível abrir várias telas ao mesmo tempo; por isso, nos aplicativos HTML do LightSwitch, a navegação entre telas tornou-se cada vez mais importante.

Por exemplo, se usar o modelo Browse Data na entidade de sessão para criar a primeira tela do aplicativo, será gerada uma tela contendo uma lista de sessões. (A seleção da lista é feita no designer de telas, seguida de um clique no link Edit Item Tap Action [Ação de toque Editar item] na janela Properties [Propriedades]). Isso abrirá uma caixa de diálogo altamente adaptável em suas sugestões: Visto que o usuário está navegando pelas sessões e tocou em um item individual, a caixa de diálogo sugere a ação de abrir uma tela onde o usuário poderá visualizar os detalhes da sessão selecionada. Pelo fato de a tela em questão não ter sido ainda criada, a caixa de diálogo sugere prosseguir e criar também a tela. Isso é mostrado na Figura 1.

Figura 1 Configurar eventos de toque passou a ser um recurso de primeira linha no designer de telas

Após aceitar, pressione F5 para criar o aplicativo e iniciar uma nova sessão de depuração no navegador padrão. A tela inicial abre e exibe uma lista simples de sessões. Ao tocar em uma sessão, o aplicativo navega livremente até a tela de detalhas recém-criada que exibe os detalhes da sessão em particular em um layout simples de duas colunas, conforme mostrado na Figura 2.

Figura 2 O design adaptável ajudar a compilar um único aplicativo para vários fatores forma

Embora a tela pareça simples, há muita coisa por trás nos bastidores. Essa “lista simples de sessões” é na verdade apoiada por uma coleção totalmente virtualizada que carrega mais elementos conforme o usuário faz a rolagem para baixo de modo a evitar a transferência desnecessária de grandes quantidades de dados pela conexão móvel. O layout em duas colunas adapta-se de forma dinâmica ao tamanho disponível, mudando para um layout de coluna única em dispositivos menores. Este é um elemento fundamental da estratégia para compilar aplicativos HTML individuais e executá-los em uma variedade de tablets e telefones, cada qual com seu próprio fator forma. A postagem do Blog da equipe do Visual Studio LightSwitch, “Design para vários fatores forma” (bit.ly/18F320N) de autoria do gerente de programas Heinrich Wendel, fornece mais detalhes sobre a visão por trás deste design adaptável, que geralmente exige muito trabalho do desenvolvedor, mas é oferecido de maneira bastante simples e sem muito esforço no LightSwitch.

Outros elementos notáveis no designer de tela incluem o uso aprimorado de janelas pop-ups e guias, cada qual com sua própria barra de comando. Um exemplo de como esses elementos podem tornar a vida mais simples para o usuário final é adicionar filtros nas sessões. Para isso, selecione primeiramente o elemento de consulta Sessions (Sessões) no modelo de exibição (no lado esquerdo do designer de tela) e clique em Edit Query (Editar consulta); essa opção abre o editor de consultas no qual é possível modificar rapidamente a pesquisa usada adicionando-se alguns argumentos opcionais. Em seguida, pressione o botão Add Data Item (Adicionar item de dados) para adicionar um propriedade Speaker (Orador) local chamada FilterBySpeaker, configure o vínculo de dados do ID do Orador com o correspondente argumento de consulta e repita o processo nas outras entidades: Espaço, intervalo e roteiro.

Para finalizar a tela, basta arrastar essas quatro novas propriedades do modelo de exibição para a janela pop-up recém-criada na exibição (lado direito do designer de tela). Por padrão, o LightSwitch recomendará a visualização de cada propriedade como um controle Seletor modal, algo ideal para este aplicativo. Por fim, adicione um novo botão à barra de comandos e use a mesma caixa de diálogo exibida ao configurar Edit Item Tap Action para abrir a janela pop-up recém-criada.

Clicar em Save (Salvar) e atualizar o navegador é tudo o precisamos para visualizar o filtro recém-adicionado na ação (o JavaScript não requerer compilação com o os tradicionais aplicativos do Microsoft.NET Framework). A tela inicial abre exibindo todas as sessões em uma coleção virtualizada, incluindo uma barra de comandos azul contendi um botão Filter (Filtro) individual. Ao clicar nesse botão, é exibida uma janela pop-up mostrando as quatro opções de filtro (conforme mostrado na Figura 3) em alguns diferentes dispositivos. Tão logo seja feita uma seleção, os argumentos de consulta opcionais são automaticamente atualizados devido á vinculação de dados. Por sua vez, isso aciona uma nova operação HTTP GET a ser enviada ao serviço OData de back-end, que filtra as sessões pelos argumentos corretos e retorna o resultado.

Figura 3 O filtro adicionado em ação

Em resumo, o designer de tela faz um excelente trabalho de elaboração das abstrações corretas, permitindo a você concentrar-se na configuração de um aplicativo HTML profissional com o mínimo esforço. Por exemplo, o aplicativo inclui uma lista virtualizada que pode ser filtrada, todas as quais foram configuradas sem a necessidade de compilar uma linha individual de código.

No entanto, como desenvolvedor, não se preocupe tanto com a tal filosofia sem código.

Sim! É fato que o designer de tela se concentra em abstrair a tecnologia real de modo a aumentar sua velocidade e, à semelhança de todos os ambientes de desenvolvimento rápido de aplicativo (RAD), isso implica sacrificar certo grau de personalização. Contudo, o LightSwitch oferece inúmeros cenários no designer de tela, bem como um bom número de pontos de extensão; assim, você pode arregaçar as mangas e substituir, alterar ou acrescentar ao mix de HTML, JavaScript e CSS que compõe um aplicativo.

Como exemplo, você pode adicionar uma nova consulta ao aplicativo que retorna apenas essas sessões no próximo Intervalo como um Item de dados na tela e arrastar a consulta até a nova guia na tela inicial. Novamente, é possível manter o controle de Lista para apresentar as sessões, mas em vez de ter um resumo de linha única por sessão (o título), o designer de tela é usado para aninhar alguns layouts de linhas e colunas e exibir certas informações adicionais sobre a sessão; o resultado é o primeiro layout (no lado esquerdo) na Figura 4.

Figura 4 Três diferentes designs da tela inicial

Identidade visual, temas e personalização adicional Quando chega o momento de começar a mesclar em códigos personalizados, é rápido e fácil aplicar uma dose de temas e identidade visual globais. O logotipo, na verdade, é nada mais nada menos que um arquivo .png que pode ser substituído no Windows Explorer; por sua vez, o tema é simplesmente um tema JQuery Mobile padrão. O LightSwitch é fornecido com um tema no claro (padrão) e outro no escuro, ambos os quais podem ser modificados posteriormente usando o ThemeRoller do JQuery Mobile. Alterar o logotipo e o tema resulta no layout central da Figura 4.

Por fim, é possível aprimorar ainda mais o visual do aplicativo utilizando os métodos Render ou PostRender. Ao selecionar qualquer controle do LightSwitch no designer de tela, é disponibilizado um link na janela Properties (Propriedades) com o rótulo de PostRender Code. Ao clicar nesse link, é gerado um stub do método do JavaScript que será executado no tempo de execução, logo após a biblioteca JavaScript do LightSwitch processar os elementos HTML necessários ao controle em particular. Um possível uso deste ponto de extensão é alterar o plano de fundo de cada uma das linhas da lista, dependendo do roteiro do qual a sessão faz parte, compilando o seguinte código no referido método:

myapp.Home.NextSessionsTemplate_postRender =
  function (element, contentItem) {
  $(element).parent("li").css("background", 
    contentItem.value.Track.Color);
};

O código captura o pai do elemento HTML adicionado pelo LightSwitch e define a propriedade do plano de fundo do CSS na cor do roteiro da sessão atual (contentItem.value), cujo resultado é o layout na extrema direita da Figura 4.

A Figura 4 revela uma falha óbvia no design: Se houver uma cor viva associada ao roteiro, algum dos itens poderá se tornar ilegível devido ao contraste entre o conteúdo e o plano de fundo. Para corrigir o erro, adicione duas classes CSS reutilizáveis ao arquivo user-customization.css e altere o código para que acrescente uma destas classes: 

myapp.Home.NextSessionsTemplate_postRender =
  function (element, contentItem) {
  $(element).parent("li").css("background",
    contentItem.value.Track.Color);
  $(element).addClass(
    (parseInt(contentItem.value.Track.Color.replace(
    "#", ""), 16) > 0xffffff / 2)
    ? 'darkForeground' : 'lightForeground'
  );
};

A personalização do processo de renderização por meio da compilação de métodos PostRender pode ser usada em uma variedade de opções, abrangendo desde truques simples do CSS, como alterar a cor de fundo para aplicar um widget JQuery reutilizável da interface do usuário em todos os itens de determinada lista, exceto um, ou transformar a lista em um carrossel de imagens ou banners dinâmicos. Os itens visíveis são alterados por meio de um temporizador ajustado, conforme descrito na postagem do blog (escrita pelo coautor Jan Van der Haegen) “Criando um controle deslizante JQuery para imagens em HTML do LightSwitch” (bit.ly/WJwnPw).

Após transformar a lista de futuras sessões em um banner com fundo codificado por cor, é fácil esquecer-se de que roteiro tem qual cor. Além de alterar os controles padrão do LightSwitch utilizando esta opção do PostRender, é possível também obter controle total sobre toda a renderização de elementos específicos, indicando que se tratam de controles personalizados no designer de tela e compilando seu próprio código no método JavaScript Render gerado nos mesmos moldes. Para adicionar uma legenda de roteiros no código da cor, inclua uma consulta sobre todos os roteiros na forma de um item de dados no modelo de exibição da tela e exiba-a como uma Lista de blocos (um controle integrado alternativo de coleta). No modelo de cada um dos blocos, processe a cor dos roteiros como um quadrado simples, usando o seguinte código JavaScript:

myapp.Home.Color_render = function (element, contentItem) {
  $("<div style='background-color: "+ contentItem.value 
  +";'> </div>").appendTo($(element));
};

Além de diversas personalizações visuais, o LightSwitch oferece também inúmeros pontos de extensão de código nas camadas ViewModel e Model para ajudar a ajustar o fluxo de controle e as regras de negócios dos aplicativos.

O aplicativo inclui agora uma primeira guia contendo as futuras sessões (na forma de um banner), além de uma legenda de cores por roteiro, juntamente com uma segunda guia em que há uma visão geral de todas as sessões, inclusive um filtro de fácil utilização. Visto que a tela inicial já exibe todas os roteiros, seria uma excelente ideia preencher o filtro na segunda guia quando o usuário toca um dos roteiros na primeira guia e, em seguida, fazer com a guia se concentre em mostrar apenas as sessões no roteiro selecionado.

Esse fluxo de controle pode ser configurado diretamente no designer de tela, mas é facilmente executado selecionando-se a Lista de blocos dos roteiros e, na janela Properties, vinculando a guia do item a fim de executar um método personalizado. Isso gera um stub do método JavaScript onde é possível compilar o seguinte:

myapp.Home.BrowseByTrack_ItemTap_execute = function (screen) {
  screen.getTracks().then(function (tracks) {
    screen.FilterByTrack = tracks.selectedItem;
    screen.showTab("AllSessions");
  });
};

O aplicativo agora conta com três diferentes perspectivas para organizar as sessões: veja as futuras sessões em um banner, clique no roteiro para visualizar a lista de sessões filtradas pelo roteiro em questão ou ajuste manualmente o roteiro, o intervalo, o orador ou o espaço no mesmo filtro.

Uma última perspectiva que pode ser adicionada corresponde a uma visão geral de suas sessões favoritas. Para realizar isso, adicione uma entidade individual chamada FavoriteSessions. Sessões favoritas são aquelas em que há uma entrada em Favorite­Sessions com um nome específico.

Ao abrir a tela para visualizar uma sessão em particular, determine se há alguma sessão do tipo executando uma consulta FindFavoriteSessions especializada de maneira assíncrona no servidor e armazenando a existência do resultado em propriedade de tela Booleana chamada IsFavorite:

myapp.ViewSession.created = function (screen) {
  myapp.activeDataWorkspace
    .ApplicationData.FindFavoriteSessions(screen.Session.Id)
    .execute().then(
      function (result) {
        screen.IsFavorite = result.results.length != 0;
      }
    );
};

Em seguida, adicione dois botões à barra de comandos da guia: Favorito e não favorito. Apenas um desses botões pode ser ativado ao mesmo tempo; portanto, use o ponto de extensão de código CanExecute do botão. A biblioteca JavaScript do LightSwitch chama esses métodos nos momentos apropriados e garante a correta atualização da interface do usuário. Embora seja possível substituir esse comportamento em cada uma das telas na janela Properties, a ação é executada por padrão ocultando-se os botões que não podem ser executados no momento, salvando um espaço precioso da tela em dispositivos pequenos:

myapp.ViewSession.Favorite_canExecute
  = function (screen) {
  return !screen.IsFavorite;
};
myapp.ViewSession.Unfavorite_canExecute
  = function (screen) {
  return screen.IsFavorite;
};

Um incrível destaque sobre esses trechos simples do código é que a biblioteca JavaScript do LightSwitch mantém um registro de quando esses métodos Can­Execute deverão ser reavaliados. Assim como nos aplicativos Silverlight executados fora do navegador, não é preciso preocupar-se com o lançamento de eventos quando uma propriedade for alterada. Basta definir um novo valor para a propriedade IsFavorite em qualquer lugar no aplicativo, e o tempo de execução do LightSwitch saberá automaticamente como reavaliar esses métodos CanExecute em particular e atualizar a exibição (mostrar ou ocultar os botões), conforme necessário.

Tudo o que resta a fazer agora é compilar certo código que cria um novo FavoriteSession (ou o remove) quando o botão for clicado:

myapp.ViewSession.Favorite_execute = function (screen) {
  var favored = myapp.activeDataWorkspace.ApplicationData.
    FavoriteSessions.addNew();
  favored.setSession(screen.Session);
  myapp.applyChanges().then(screen.IsFavorite = true);
};

Após adicionar a lista de FavoriteSessions à nova guia na página inicial, o aplicativo estará pronto para ser empacotado e implementado.

De fato, o LightSwitch realiza um excelente trabalho mantendo o equilíbrio entre projetar o aplicativo em um designer de tela simples, mas eficaz, e o grau de personalização que deverá ser sacrificado neste desenvolvimento simplificado e rápido. O equilíbrio é alcançado por meio da introdução de uma grande número de pontos de extensão onde é possível compilar códigos personalizados para alterar, substituir ou acrescentar ao design padrão, fluxo de controle ou comportamento do aplicativo.

Integração com o SharePoint 2013 e o Office 365

O SharePoint 2013 apresenta um novo modelo de aplicativo baseado na nuvem que permite criar aplicativos que ampliam os recursos do site do SharePoint e oferece suporte a uma arquitetura em camadas na qual a lógica de negócios, os dados e a interface do usuário do aplicativo podem ser distribuídos. Os usuários descobrem e fazem o download de aplicativos no Office Store ou no catálogo de aplicativos privados de suas organizações e os instalam em seus sites do SharePoint. Em virtude deste novo modelo distribuído, é possível criar aplicativos do LightSwitch direcionados ao SharePoint 2013 no local e no Office 365. É possível implantar o LightSwitch Silverlight em clientes executados no navegador ou os novos clientes HTML baseados em mobilidade no SharePoint.

Com base no exemplo do Visual Studio Live!, é possível valer-se dos benefícios proporcionados pelos serviços do Office 365 para permitir que a equipe de conferências configure a programação de conferências utilizando um calendário do SharePoint no aplicativo do LightSwitch. Após aprovar uma nova sessão e selecionar um intervalo, será adicionada uma nova entrada no calendário. Você poderá então imaginar uma série de possíveis fluxos de trabalho que poderão disparar ações adicionais comuns ao SharePoint. Dessa forma, os aplicativos do LightSwitch permitem criar experiências habilitadas pelo toque que se beneficiam dos dados e processos de negócios já em execução no SharePoint em sua empresa.

Habilitando o SharePoint nos aplicativos do LightSwitch Nas propriedades do projeto, clique no botão Enable SharePoint (Habilitar SharePoint) e forneça um local ou um site remoto do SharePoint 2013 que deseja usar para o desenvolvimento. Ao fazer isso, você estará indicando ao LightSwitch que o aplicativo terá de ser implantado no SharePoint e poderá trabalhar com ativos do SharePoint. Esse procedimento adicionar referências adequadas do SharePoint ao projeto.

O LightSwitch cuidará também de executar automaticamente a autenticação no SharePoint via OAuth. É possível configurar o Serviço Controle de Acesso (ACS), outro servidor que media a autenticação entre o aplicativo e o SharePoint. O aplicativo terá um “segredo” conhecido do SharePoint e poderá usá-lo para executar autenticações via ACS, como no caso do Office 365. Você pode também optar por executar uma configuração de alta confiança se dispor da configuração local, conforme mostrado na Figura 5.

Figura 5 Habilitando o SharePoint no aplicativo do LightSwitch

Para começar a desenvolver rapidamente aplicativos do SharePoint, inscreva-se para obter uma avaliação gratuita da assinatura de desenvolvedor do Office 365 em dev.office.com. Os assinantes do MSDN podem também inscrever-se para obter um ano gratuito por meio do seu site de benefícios da assinatura.

Listas do SharePoint na forma de entidades do LightSwitch Utilizando o Designer de Dados, é possível inserir listas do SharePoint na forma de entidades no modelo de dados do LightSwitch. Isso permite manipular dados da lista diretamente por meio do contexto de dados do LightSwitch. Em outras palavras, você pode criar diretamente com base nos dados da lista do SharePoint já configurados; por sua vez, o LightSwitch cuidará da autenticação e das operações de dados automaticamente. Por exemplo, no cenário do Visual Studio Live!, qualquer dado poderá ser armazenado nas listas do SharePoint, sem alteração da interface do usuário.

Ao inserir listas do SharePoint no modelo de dados do LightSwitch, é possível também acessar dados da lista por meio de um código de uma forma simplificada utilizando a API do LightSwitch. Por exemplo, no aplicativo Visual Studio Live!, queríamos compilar códigos que incluíssem automaticamente uma entrada no calendário do SharePoint sempre que uma nova sessão fosse adicionada. Para fazer isso, clique com o botão direito do mouse no nó Server (Servidor) do Solution Explorer e escolha “Add data source” (Adicionar fonte de dados); em seguida, selecione SharePoint como o tipo de fonte de dados. Após indicar o endereço do site do SharePoint e optar por escolher automaticamente a identidade do usuário, as listas do SharePoint serão exibidas.

O site em uso já contém um calendário chamado ConferenceSchedule. Ao inserir isso no modelo de dados, é possível configurar um relacionamento virtual nos dados da tabela de sessões. Basta clicar no botão Relationship (Relacionamento) na parte superior do designer de dados e definir um relacionamento One-to-Zero-or-one (veja a Figura 6).

Figura 6 Configurando um relacionamento virtual ente várias fontes de dados

Agora, é possível criar uma nova tela que permitirá à equipe inserir novas sessões. Você poderá incluir dados de ConferenceSchedule diretamente na tela, porém, nesse caso, será compilado determinado código de servidor de modo que o processo ocorra de forma transparente no segundo plano. Após salvar os dados da sessão, use os métodos _Inserting e _Updated do pipeline na entidade Session (Sessão) para adicionar uma nova entrada à programação a partir do servidor utilizando o código em Visual Basic .NET ou C# (veja a Figura 7 e a Figura 8, respectivamente). Há inúmeros ganchos no servidor com os quais é possível controlar a lógica de negócios e o processamento de dados dessa forma.

Figura 7 Código para adição de uma nova entrada no calendário do SharePoint usando o Visual Basic .NET

Private Sub Sessions_Updated(entity As Session)
  Me.UpdateCalendar(entity)
End Sub
Private Sub Sessions_Inserting(entity As Session)
  Me.UpdateCalendar(entity)
End Sub
Private Sub UpdateCalendar(entity As Session)
  If entity.Timeslot IsNot Nothing AndAlso
     entity.Room IsNot Nothing Then
      If entity.ConferenceSchedule Is Nothing Then
        entity.ConferenceSchedule = New ConferenceSchedule()
      End If
      entity.ConferenceSchedule.Title = entity.Title
      entity.ConferenceSchedule.Description = entity.Description
      entity.ConferenceSchedule.StartTime = entity.Timeslot.StartTime
      entity.ConferenceSchedule.EndTime = entity.Timeslot.EndTime
      entity.ConferenceSchedule.Location = entity.Room.Name
      Me.DataWorkspace.VSliveData.SaveChanges()
  End If
End Sub

Figura 8 Código para adição de uma nova entrada no calendário do SharePoint usando C#

private void Sessions_Updated(Session entity)
{
  this.UpdateCalendar(entity);
}
private void Sessions_Inserting(Session entity)
{
  this.UpdateCalendar(entity);
}
private void UpdateCalendar(Session entity)
{
  if (entity.Timeslot != null && entity.Room != null)
  {
    if (entity.ConferenceSchedule == null)
    {
      entity.ConferenceSchedule = new ConferenceSchedule();
    }
    entity.ConferenceSchedule.Title = entity.Title;
    entity.ConferenceSchedule.Description = entity.Description;
    entity.ConferenceSchedule.StartTime = entity.Timeslot.StartTime;
    entity.ConferenceSchedule.EndTime = entity.Timeslot.EndTime;
    entity.ConferenceSchedule.Location = entity.Room.Name;
    this.DataWorkspace.VSliveData.SaveChanges();
  }
}

Ao depurar o aplicativo (F5), a primeira pergunta será se ele é confiável. Após confirmar que sim, você verá um controle cromado do SharePoint na parte superior com o qual os usuários poderão navegar até o site do SharePoint no aplicativo do LightSwitch. Adicione uma nova sessão e clique em “Back to site” (Voltar ao site) no controle cromado para ver a Programação de conferências. Se clicar no item Event (Evento), você observará que ele foi criado pelo aplicativo do LightSwitch em nome do usuário. Isso comprova que as credenciais de usuário do SharePoint passam pelo aplicativo LightSwitch automaticamente.

O projeto do SharePoint e o modelo de objeto no lado do cliente O uso de listas como entidades não é a única forma de acessar dados do SharePoint. Ao habilitar o SharePoint em seus aplicativos do LightSwitch, você tem a seu dispor também o modelo completo de objetos no lado do cliente (CSOM) do SharePoint. É possível manipular não apenas listas por meio desse procedimento, mas também acessar outros ativos do SharePoint. Por exemplo, se sua intenção for criar um aplicativo geral que possa ser vendido no SharePoint Store, provavelmente será necessário implantar e manipular listas do SharePoint de uma forma mais genérica.

Ao habilitar o SharePoint, é adicionado um projeto do SharePoint à sua solução do LightSwitch. Se passar para a Exibição de arquivos no Solution Explorer, você o verá como mostrado na Figura 9. Esse procedimento permite adicionar uma variedade de itens específicos ao SharePoint no aplicativo que serão implantados no empacotamento. Você poderá usar então o CSOM para manipular esses itens no código. Por exemplo, é possível adicionar uma lista personalizada ao projeto e interagir com a referida lista via CSOM. O LightSwitch expõe um objeto do SharePoint no objeto Application (Aplicativo) que pode ser usado para acesso nas Webs de aplicativos e do host.

Figura 9 Adicionando listas personalizadas e outros itens do SharePoint por meio do Solution Explorer

Por exemplo, adicionamos uma lista personalizada ao projeto VSLive.SharePoint que é usado para compilar entradas de auditoria sempre que uma sessão for adicionada, atualizada ou excluída. Podemos explorar novamente o pipeline de salvamento e usar a lista por meio do CSOM. Primeiramente, importe o namespace Microsoft.SharePoint.Client e, em seguida, compile o código mostrado na Figura 10 (Visual Basic .NET) ou Figura 11 (C#).

Figura 10 Manipulando listas do SharePoint via CSOM no Visual Basic .NET

Private Sub Sessions_Inserted(entity As Session)
  Me.LogAuditEntry(entity, "inserted")
End Sub
Private Sub Sessions_Updated(entity As Session)
  Me.LogAuditEntry(entity, "updated")
End Sub
Private Sub Sessions_Deleted(entity As Session)
  Me.LogAuditEntry(entity, "deleted")
End Sub
Private Sub LogAuditEntry(  entity As Session, actionDescription As String)
  Using ctx = Me.Application.SharePoint.GetAppWebClientContext()
    Dim web As Web = ctx.Web
    Dim lists As ListCollection = web.Lists
    Dim auditLog As List = lists.GetByTitle("AuditList")
    Dim ci As New ListItemCreationInformation()
    Dim auditEntry As ListItem = auditLog.AddItem(ci)
    auditEntry("Title") = String.Format("Session {0} {1}",
    actionDescription,
    entity.Title)
    auditEntry("Name") = Me.Application.User.FullName
    auditEntry("Date") = DateTime.Now
    auditEntry.Update()
    ctx.ExecuteQuery()
  End Using
End Sub

Figura 11 Manipulando listas do SharePoint via CSOM no C#

private void Sessions_Inserted(Session entity)
{
  this.LogAuditEntry(entity, "inserted");
}
private void Sessions_Updated(Session entity)
{
  this.LogAuditEntry(entity, "updated");
}
private void Sessions_Deleted(Session entity)
{
  this.LogAuditEntry(entity, "deleted");
}
private void LogAuditEntry(Session entity, string actionDescription)
{
  using (ClientContext ctx =
     this.Application.SharePoint.GetAppWebClientContext())
  {
    Web web = ctx.Web;
    ListCollection lists = web.Lists;
    List auditLog = lists.GetByTitle("AuditList");
    ListItemCreationInformation ci = new ListItemCreationInformation();
    ListItem auditEntry = auditLog.AddItem(ci);
    auditEntry["Title"] = string.Format("Session {0} {1}",
    actionDescription, 
    entity.Title);
    auditEntry["Name"] = this.Application.User.FullName;
    auditEntry["Date"] = DateTime.Now;
    auditEntry.Update();
    ctx.ExecuteQuery();
  }
}

Para obter mais informações sobre como usar o CSOM com o LightSwitch, bem como outras dicas e truques, consulte os tópicos do SharePoint no Blog da equipe do Visual Studio LightSwitch em bit.ly/16JIWn6.

Considerações sobre implantação do SharePoint Os aplicativos do LightSwitch são apenas aplicativos da Web, ou seja, é possível hospedá-los em servidores IIS Web ou na nuvem, como no Windows Azure. Ao instalar um aplicativo do SharePoint, é instalado também um manifesto contendo informações sobre onde o aplicativo é executado. Como parte do novo modelo de aplicativos do SharePoint, qualquer aplicativo contendo códigos no lado do servidor, que é o caso de todos os aplicativos do LightSwitch, deve ser executado em um servidor à parte, fora do SharePoint. Esse isolamento proporciona uma melhor estabilidade ao farm do SharePoint.

O LightSwitch oferece suporte a dois tipos de implantação do SharePoint: auto-hospedada e hospedada no provedor. Essas opções devem ser levadas em consideração ao criar aplicativos, pois poderão afetar diretamente a arquitetura dos dados.

Com aplicativos auto-hospedados, o site e o banco de dados são provisionados automaticamente no Windows Azure toda vez que o aplicativo for instalado. Os dados são provisionados no SQL Azure, e a camada intermediária, em um site do Windows Azure. Isso quer dizer que cada instância do aplicativo do LightSwitch instalada no SharePoint foi isolada de todas as demais instâncias em outros sites do SharePoint. Temos aqui um tipo rápido e fácil de implantação. Contudo, se o aplicativo for desinstalado, tudo será excluído, inclusive os dados.

Aplicativos hospedados no provedor proporcionam a flexibilidade de hospedar o aplicativo e o banco de dados da Web onde desejar. Contudo, neste modelo, todas as instâncias de aplicativos do SharePoint compartilham a mesma camada intermediária e dados; sendo assim, você terá de fornecer seu próprio isolamento locatário. O LightSwitch fornece mecanismos de filtragem em nível de linha no pipeline de consulta para ajudar a criar aplicativos com vários locatários. Será necessário também gerenciar a disponibilidade, pois se o servidor ficar inativo, todos os aplicativos do SharePoint deixarão de funcionar.

Você terá de especificar também como deseja que o aplicativo execute a autenticação. Esta é a escolha “ACS versus alta confiança” que é feita ao iniciar desenvolvimentos no SharePoint. Se o servidor ou farm do SharePoint está usando ACS, como é o caso do Office 365, basta então um ClientID e o segredo compartilhado entre o aplicativo e o SharePoint.

Use o assistente de publicação do LightSwitch para especificar essas configurações e empacotar o aplicativo. Dependendo do tipo de hospedagem, o serviço de aplicativos e o banco de dados serão implantados no servidor que você especificar (ou no Windows Azure), como é o caso da hospedagem no provedor, ou tudo será incluído no pacote de desenvolvimento do SharePoint. Feito isso, instale o pacote no catálogo de sites do SharePoint. Dessa forma, os usuários poderão acessar o catálogo para adicionar seu aplicativo aos sites deles.

Para obter mais informações sobre hospedagem de aplicativos do LightSwitch no SharePoint, veja as seguintes postagens no Blog da equipe do Visual Studio LightSwitch: “Opções de hospedagem e autenticação no SharePoint para LightSwitch” (bit.ly/10vEJez) e “Publicação de aplicativos do LightSwitch para SharePoint no catálogo” (bit.ly/11wSFqo).

Conclusão

Como você pode observar, há uma infinidade de novos recursos na versão mais recente do LightSwitch na atualização 2 do Visual Studio 2012. Esses recursos complementam o cliente Silverlight baseado em desktop que está disponível desde o último lançamento até os dias de hoje. Contudo, com tantos funcionários trazendo seus dispositivos particulares ao local de trabalho, criar um cliente nativo para cada dispositivo e processar cada implementação em lojas de aplicativos distintas é praticamente inviável. Os clientes HTML do LightSwitch são criados com base em JavaScript e HTML5 compatível com padrões e proporcionam experiências "touch first" modernas aos dispositivos móveis dos nossos dias.

Além disso, a ativação do SharePoint nos aplicativos do LightSwitch permite desfrutar dos benefícios do gerenciamento do ciclo de vida de aplicativos, processos, dados de negócios e recursos de controle de acesso no SharePoint já incorporados em muitas empresas atualmente.

Jan Van der Haegen é um "geek verde" que transforma café em software. Ele é um marido dedicado, viciado em .NET,fã árduo do LightSwitch, blogueiro, consultor independente e colunista da MSDN Magazine on-line. Ele alimenta o sonho secreto de tornar-se pastor profissional de cabras um dia. Você pode encontrar suas experiências com codificação em switchtory.com/janvan.

Beth Massi é gerente de programas sênior da equipe de Visual Studio na Microsoft e uma adepta de comunidade de desenvolvedores de aplicativos corporativos. Ela é uma palestrante frequente em diversos eventos sobre desenvolvimento de software,e você pode encontrá-la em uma série de sites de desenvolvedores, incluindo o MSDN.com, o Channel 9 e em seu blog, bethmassi.com. Siga-a no Twitter, em twitter.com/BethMassi.

Agradecemos aos seguintes especialistas técnicos pela revisão deste artigo: Brian Moore (Microsoft) e John Stallo (Microsoft)