Fabian André Gehrke

Overview

Neste artigo vamos ver como criar um serviço no Windows Azure para ser consumido a partir de um aplicativo Silverlight publicado no SharePoint 2010.

As técnicas utilizadas neste artigo podem ser utilizadas para o SharePoint 2010 OnPremise (local) ou para o SharePoint Online (Office 365).

Solução

Descrição da Regra de Negócio

Antes de iniciar a parte técnica do post vamos falar sobre a regra de negócio e o objetivo do projeto (vamos fazer uma simulação de algo real).

O objetivo do projeto consiste em permitir que os usuários de um site SharePoint possam fazer uma simulação de qual o valor do seu salário após o percentual de aumento. Para isso o usuário irá informar o seu salário atual e o percentual de aumento, o resultado será a aplicação desse percentual sobre o salário. Por causa da complexidade da regra de negócio e a falta de estrutura local para processar os valores de tantos funcionários, a empresa resolveu contratar e publicar um serviço no Windows Azure para permitir a entrega dessa demanda. O site SharePoint atualmente fica na estrutura local, mas pelos problemas de hardware estão planejando fazer a migração para o SharePoint Online em breve. A solução adotada deve poder ser executada no SharePoint OnPremise ou SharePoint Online, sem que nenhuma alteração seja necessária.

Com o case definido, uma de nossas opções é resolver utilizando Silverlight. Uma outra opção seria utilizar JavaScript. Web parts e outros códigos que executem no servidor não podem ser utilizados porque a Sandbox Solution não permite a chamada de serviços externos ao SharePoint. Sendo assim, somentes soluções que rodem no cliente (no caso o navegador) podem ser adotadas.

Vamos dividiar a solução em três etapas:

• Criação do serviço com a regra de negócio e publicação do mesmo no Windows Azure;
• Criação do aplicativo Silverlight para interagir com o usuário e consumir o serviço publicado no Windows Azure;
• Publicação do aplicativo Sliverlight no SharePoint.

Criando o Serviço para o Windows Azure

A primeira etapa é criar um projeto de Azure no Visual Studio 2010, o artigo Criando um Serviço para o Windows Azure no Visual Studio 2010 explica como fazer isso. Depois do projeto criado, siga as intruções abaixo.

A primeira atividade a ser feita é a criação da interface do serviço. A listagem 1 mostra a implementação dela.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;

namespace ServicoCalculoWRoleSL
{
    [ServiceContract]
    public interface IServicoCalculo
    {
        [OperationContract]
        double ReajustarSalario(double salarioAtual, double percentualDeAumento);
    }
}

Listagem 1: Implementação da interface IServicoCalculo

O próximo passo é criar a classe de negócio ServicoCalculo, que deverá implementar a interface IServicoCalculo, como na listagem 2.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;
using System.ServiceModel.Activation;

namespace ServicoCalculoWRoleSL
{
    [ServiceBehavior(AddressFilterMode = AddressFilterMode.Any)]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class ServicoCalculo : IServicoCalculo
    {
        public double ReajustarSalario(double salarioAtual, double percentualDeAumento)
        {
            return salarioAtual * (1 + percentualDeAumento / 100);
        }
    }
}

Listagem 2: Implementação da classe ServicoCalculoWebRole

Agora vamos realizar as configurações no web.config do serviço, é importante que a seção system.serviceModel esteja igual ao conteúdo da listagem 3.

  <system.serviceModel>
    <serviceHostingEnvironment aspNetCompatibilityEnabled=”true”/>
    <services>
      <service behaviorConfiguration=”ServicoCalculoWRole.ServicoCalculBehavior”
                     name=”ServicoCalculoWRoleSL.ServicoCalculo”>
        <endpoint address=”" binding=”basicHttpBinding”
                          contract=”ServicoCalculoWRoleSL.IServicoCalculo” />
        <endpoint address=”mex” binding=”mexHttpBinding”
                          contract=”IMetadataExchange” />
      </service>
    </services>
    <behaviors>
      <serviceBehaviors>
        <behavior name=”ServicoCalculoWRole.ServicoCalculBehavior”>
          <!–The useRequestHeadersForMetadataAddress behavior is contained in the KB981002- WCF: Hotfix rollup upodate. This behavior is required for WCF to correctly serve metadata when behind a load balancer (which is the case in Windows Azure)–>
          <useRequestHeadersForMetadataAddress>
            <defaultPorts>
              <add scheme=”http” port=”81″/>
              <add scheme=”https” port=”444″/>
            </defaultPorts>
          </useRequestHeadersForMetadataAddress>
          <serviceMetadata httpGetEnabled=”true”/>
          <serviceDebug includeExceptionDetailInFaults=”true”/>
        </behavior>
      </serviceBehaviors>
    </behaviors>
  </system.serviceModel>

Listagem 3: Alteração no web.config do serviço

Para permitir que o serviço seja acessado a partir do Silverlight é necessário criar um arquivo chamado ClientAccessPolicy.xml, este arquivo serve para permitir que o Silverlight consiga chamar o serviço a partir de outro domínio, porque por motivos de segurança ele não consegue chamar serviços de outro domínio sem que o serviço estejam previamente configurado. A listagem 04 mostra o conteúdo do arquivo.

<?xml version=”1.0″ encoding=”utf-8″ ?>
<access-policy>
  <cross-domain-access>
    <policy>
      <allow-from http-request-headers=”SOAPAction”>
        <domain uri=”*”/>
      </allow-from>
      <grant-to>
        <resource path=”/” include-subpaths=”true”/>
      </grant-to>
    </policy>
  </cross-domain-access>
</access-policy>

Listagem 04: Conteúdo do arquivo clientaccesspolicy.xml

Uma etapa necessária é a publicação no Windows Azure do serviço que acabamos de criar. No artigo Publicando um Serviço no Windows Azure utilizando o Portal de Gerenciamento tem a explicação detalhada de como fazer esta publicação. Depois que a publicação tiver terminado o serviço já pode ser acessado ou consumido por outros aplicativos através da url: http://IntegracaoSharePointEAzure.cloudapp.net/ServicoCalculo.svc ou a url definida na publicação do serviço.

Criando o Aplicativo em Silverlight

Agora vamos criar um aplicativo em Silverlight para consumir o serviço no Azure. Crie um projeto Silverlight e e adicione a referência ao serviço do Azure, informando o endereço http://IntegracaoSharePointEAzure.cloudapp.net/ServicoCalculo.svc o qual acabamos de criar (ou informe outro que tenha sido utilizado durante a publicação) e nomeado como ServicoCalculo.

Edite o arquivo MainPage.xaml, colocando nele dois TextBox para o preenchimento do salário e percentual de aumento, insira também um botão para executar a regra de negócio. A listagem 5 mostra o XAML gerado após a criação dos componentes. A tela ficar idêntica à imagem 01.

<UserControl x:Class=”SilverlightExibicaoCalculos.MainPage”
    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
    xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″
    xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″
    mc:Ignorable=”d”
    d:DesignHeight=”224″ d:DesignWidth=”400″ xmlns:sdk=”http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk”>

    <Grid x:Name=”LayoutRoot” Background=”White” Height=”215″>
        <sdk:Label Height=”28″  HorizontalAlignment=”Left” Margin=”92,59,0,0″ Content=”Salário Atual:” Name=”label1″ VerticalAlignment=”Top” FontSize=”14″ />
        <TextBox Height=”23″ HorizontalAlignment=”Left” Margin=”195,58,0,0″ Name=”txtSalarioAtual” VerticalAlignment=”Top” Width=”120″ />
        <sdk:Label Height=”28″ HorizontalAlignment=”Left” Margin=”99,101,0,0″ Content=”% Aumento:” Name=”label2″ VerticalAlignment=”Top” FontSize=”14″ />
        <TextBox Height=”23″ HorizontalAlignment=”Left” Margin=”195,100,0,0″ Name=”txtPercentualAumento” VerticalAlignment=”Top” Width=”120″ />
        <Button Content=”Calcular” Height=”23″ HorizontalAlignment=”Left” Margin=”195,179,0,0″ Name=”button1″ VerticalAlignment=”Top” Width=”75″ Click=”button1_Click” />
        <TextBlock Height=”31″ HorizontalAlignment=”Left” TextAlignment=”Center”  Margin=”193,137,0,0″ Name=”txbResultado” Text=”" VerticalAlignment=”Top” Width=”120″ FontSize=”20″ />
        <sdk:Label Content=”Cálculo de Reajuste Salarial” FontSize=”22″ Height=”28″ HorizontalAlignment=”Left” Margin=”44,12,0,0″ Name=”label3″ VerticalAlignment=”Top” />
    </Grid>
</UserControl>

Listagem 5: Arquivo MainPage.xaml

Imagem 01: Tela de cálculo de reajuste salarial

O próximo passo é implementar a regra de negócio, para isso dê um duplo clique no botão Calcular para ele registrar o evento do clique. Após isso faremos a chamada do serviço e execução do método ReajustarSalarioAsync passando como parâmetro os valores do campo salário e o percentual de aumento. Lembrando que Silverlight exige que o código seja assíncrono, sendo assim é necessário criar o método de callback. A listagem 6 mostra em detalhes essa implementação.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightExibicaoCalculos
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            ServicoCalculo.ServicoCalculoClient servicoCalculo = new ServicoCalculo.ServicoCalculoClient();
            servicoCalculo.ReajustarSalarioCompleted += new EventHandler<ServicoCalculo.ReajustarSalarioCompletedEventArgs>(servicoCalculo_ReajustarSalarioCompleted);
            servicoCalculo.ReajustarSalarioAsync(double.Parse(txtSalarioAtual.Text), double.Parse(txtPercentualAumento.Text));
        }

        void servicoCalculo_ReajustarSalarioCompleted(object sender, ServicoCalculo.ReajustarSalarioCompletedEventArgs e)
        {
            if (e.Error == null)
            {
                this.txbResultado.Text = string.Format(“{0:C}”, e.Result);
            }
            else
            {
                MessageBox.Show(“Ocorreu um erro: \r\n\r\n” + e.Error.Message);
            }
        }
    }
}

Listagem 6: Chamada do serviço na classe MainPage (MainPage.xaml.cs)

Abra o arquivo ServiceReferences.ClientConfig e veja se está parecido com o da listagem 6, ele possui a configuração para acessar o serviço do Azure.

<configuration>
    <system.serviceModel>
        <bindings>
            <basicHttpBinding>
                <binding name=”BasicHttpBinding_IServicoCalculo” maxBufferSize=”2147483647″
                    maxReceivedMessageSize=”2147483647″>
                    <security mode=”None” />
                </binding>
            </basicHttpBinding>
        </bindings>
        <client>
            <endpoint address=”http://IntegracaoSharePointEAzure.cloudapp.net/ServicoCalculo.svc”
                binding=”basicHttpBinding” bindingConfiguration=”BasicHttpBinding_IServicoCalculo”
                contract=”ServicoCalculo.IServicoCalculo” name=”BasicHttpBinding_IServicoCalculo” />
        </client>
    </system.serviceModel>
</configuration>

Listagem 6. Arquivo ServiceReferences.ClientConfig

Publicando o Aplicativo Silverlight no SharePoint

Depois do serviço do Windows Azure e do aplicativo Silverlight prontos, vamos publicar o aplicativo Silverlight no SharePoint e ver a integração funcionando. Os passos abaixo podem ser feitos tanto no SharePoint OnPremise (local) quanto no SharePoint Online (Office 365), ou seja, o mesmo aplicativo serve para as duas plataformas.

O primeiro passo é publicar o aplicativo Sliverlight no SharePoint, isso é feito carregando o arquivo com extensão XAP do diretório de compilação do projeto para uma biblioteca de documentos qualquer do SharePoint. A imagem 02 e 03 mostram como carregar o arquivo para o SharePoint.

Imagem 02: Publicando o aplicativo Silverlight no SharePoint

Imagem 03: Publicando o aplicativo Silverlight no SharePoint

Um passo importante é sabermos a URL em que o aplicativo Silverlight está disponível após a sua publicação no SharePoint, uma opção para fazer isso é clicando com o botão direito do mouse sobre o nome do arquivo e copiando o seu atalho, conforme a imagem 04.

Imagem 04: Obtendo o endereço do aplicativo Silverlight

Com o aplicativo Silverlight devidamente publicado temos que preparar a interface do usuário para que ele possa ser exibido. Para isso acesse alguma página ou crie uma página nova, qualquer página que aceite web parts, depois coloque a página em modo de edição, como mostra a imagem 05.

Imagem 05: Colocando a página do SharePoint em modo de edição

Ao entrar em modo de edição a página exibe novas opções na ribbon. Acesse a opcão Inserir e depois Web Part, como na imagem 06.

Imagem 06: Inserindo web part na página

O SharePoint 2010 veio com uma web part para exibição de aplicativos Silverlight, ela se encontra na categoria Mídia e Conteúdo e chama-se Web Part Silverlight, depois clique em Adicionar para adicioná-la à página, conforme a imagem 07.

Imagem 07: Adicionando a web part de Silverlight à página

A web part de Silverlight questiona automaticamente o endereço do aplicativo que irá exibir, como mostra a imagem 08. Como copiamos a URL na imagem 04, coloque o curso dentro do campo e cole o caminho armazenado na área de transferência (CTRL + V). Ao pressionar o botão OK um erro informando que a web part não está configurada corretamente será exibido, que pode ser ignorado. Salva a página para ela sair do modo de edição e salvar as alterações realizadas.

Imagem 08: Informando o caminho do aplicativo Silverlight para a web part

A partir deste ponto o aplicativo Silverlight conectando no Windows Azure está pronto para ser utilizado. Informe valores numéricos para os campos salário atual e % aumento e clique em calcular. O resultado será o cálculo feito lá no serviço do Windows Azure.

Imagem 09: Utilização do aplicativo Silverlight conectando no serviço do Windows Azure para calcular o valor do reajuste salarial

Referências

• Código fonte do projeto

• SharePoint and Windows Azure Development Kit