Profissionais TI - Pra quem respira informação

Resolvi escrever esse artigo, devido a dificuldade que encontrei em achar informações sobre este tipo de desenvolvimento.

Recebi uma demanda que consistia em integrar o MS-Project com um módulo SAP de Gestão da Manutenção (SAP-PM) onde fosse possível baixar as ordens de serviço, gerar um cronograma no Project, realizar as alterações e depois enviar novamente essas informações para o SAP.

O intuito do artigo não é mostrar essa integração, mas sim mostrar os passos e elementos básicos para iniciar um desenvolvimento deste tipo e tentar amenizar um pouco a dificuldade que eu senti. Mostrarei como utilizar os controles abaixo:

• Ribbon (será nossa barra de tarefas)
• UserControl (CustomTaskPanel – conhecido como painel lateral)
• Form (famoso formulário do Windows Desktop)

Em resumo, nesse artigo iremos criar uma barra de tarefas com uma tela de login lateral e após efetuar o login iremos mostrar um formulário com as informações do usuário logado, utilizaremos para demonstrar o Visual Studio 2012 e o MS-Project 2013. Mãos a obra meus camaradas !

Passo 1 – Configurando o ambiente: 

• A primeira tarefa antes de iniciar o nosso desenvolvimento é instalar o OfficeToolsForVS2012RTW.exe, clique no link, realize o download e instale antes de iniciar o VS2012.
• Após instalar o Office Tools, vamos criar um novo projeto conforme a figura abaixo:

Passo 2 – Iniciando o desenvolvimento do Add-in Ms-Project 

Com o novo projeto criado, o VS2012 irá abrir uma classe chamada ThisAddIn, por default ele atribui este nome e eu geralmente mantenho da mesma forma, mas fiquem a vontade para alterar o nome.

Nesta classe temos dois eventos, ThisAddIn_Startup e ThisAddIn_Shutdown que serão executados quando o Ms-Project abrir e quando o Ms-Project fechar. Mais tarde voltaremos nesses eventos.

Para criarmos uma barra de tarefas com as ações que desejamos, usaremos um controle chamado Ribbon que deverá ser adicionado ao projeto clicando com o botão direto no projeto dentro da Solution Explorer e em seguida ADD => New Item.

Existem dois tipos de Ribbon, um com Visual Designer, que é bem mais fácil de manipular, e outro que é o XML sem modo designer. Irei demonstrar usando a primeira opção, então escolha o que vem escrito (Visual Designer). 

Abaixo a tela para adição desse controle. Eu coloquei o nome do meu Ribbon de ToolBarRibbon: 

Após criar o Ribbon no projeto, o mesmo exibirá uma aba onde será possível inserir as funcionalidades que desejamos. Nesta parte irei utilizar os ícones da própria suite do Office. Existe um site onde é possível consultar o nome MSO das imagens, utilizei ele como referência – segue o link  Images MSO Names. Vou mostrar no próximo tópico onde que iremos configurar esses nomes.

Passo 3 – Criando a funcionalidade de Login no Ribbon

Bom, depois de criar o Ribbon, vamos adicionar um botão dentro do agrupamento que aparece após a criação do mesmo. É possível dividir a barra de tarefas em quantos grupos quiser. Esse agrupamento é importante para separarmos as atividades, mas no nosso caso, como teremos somente um botão, então será exibido somente um grupo. Vamos configurar nossa barra de tarefas:

• Primeiro, clique na aba TabAddIns e altere o label da mesma para “PTI Ribbon”. Dessa forma, quando o MS-Project for iniciado essa aba irá aparecer com o nome que alteramos.
• Vamos alterar também o label do nosso grupo, então clique em cima do grupo e altere a descrição para “Configurações”.
• Agora vamos adicionar um novo botão no nosso grupo, para isso abra a ToolBox do VS2012 e selecione o controle “Button” que se encontra no grupo “Office Ribbon Controls”. Arraste e solte dentro do grupo Configurações.
• Será criado o botão “button1”, altere o label para “Login” e vamos inserir a imagem deste botão. Pois é, lembra daquele site com os MSO Names, ele entra nesse instante. Nas propriedades desse botão existe um campo chamado “OfficeImageId”, neste campo basta colocar o nome da imagem que você preferir, sem as apas. Eu usei a o nome “AccessTableContacts”, mas fique a vontade para usar a que você preferir. 
• Após informar o nome da imagem, altere também o tamanho da imagem para ficar com uma aparência melhor. Para isso altere a propriedade “ControlSize” para “RibbonControlSizeLarge. A figura abaixo irá mostrar como ficou a barra de tarefas após as configurações: 

•  Agora que o Ribbon está configurado, vamos criar o evento no botão. Para isso, selecione o botão de Login que criamos e dê dois cliques em cima do mesmo, ou se preferir vá em propriedades e selecione a guia de eventos.

Passo 4 – Criando o UserControl de Login no Add-In

Criado o botão e seu evento, vamos agora criar o UserControl que irá mostrar a janela lateral quando clicarmos no botão de Login. Para isso vá no projeto e adicione um novo UserControl da mesma forma que adicionamos o Ribbon, botão direito Add => New Item => UserControl e dê a ele o nome de UserControlLogin.

Vamos configurar a tela de login:

• Aumente a janela, para isso altere a propriedade Size (Width=295 / Heigth=465).
• Insira na tela 2 (dois) campos do tipo TextBox e 2 (dois) do tipo Label e altere as propriedades da forma que preferir. Estes controles estão localizados na toolbox do VS2012, no grupo Common Controls.
• Adicione também uma PictureBox com a image que você desejar e um botão com o label “Entrar”. A tela deverá ficar como o exemplo abaixo: 

Passo 5 – Criando o formulário com as informações do usuário

Este é o ultimo passo em termos de layout, após esse ponto iremos interligar todos esses controles para assim podermos visualizar o resultado final.

Novamente vá na Solution Explorer do projeto e adicione um novo Formulário (Windows Form), botão direito Add => New Item => Windows Form e dê a ele o nome de FormUser.

Após criar o formulário, insira os controles que desejar, eu coloquei dois labels, dois textbox sem a margem e uma picturebox com uma imagem fixa. As informações são básicas, pois o objetivo e somente demonstrar o funcionamento. A tela ficou conforme a imagem abaixo:

Passo 6 – Interligando todos os controles e executando a aplicação

Agora que temos todos os layouts criados, vamos interligar todos eles e assim mostrar um fluxo básico do que poderia ser uma funcionalidade customizada no Ms-Project.

ToolbarRibbon

Abra o code-behind do ribbon que criamos e insira as propriedades dentro da classe ToolBarRibbon 

No evento ToolBarRibbon_Load, insira o trecho de código para criar a janela lateral a partir do UserControl que criamos anteriormente, transformando-o em um CustomTaskPanel.  

No evento click do botão login altere a visibilidade do panel. Quando o add-in iniciar a janela lateral estará oculta, a mesma será exibida quando o botão login for acionado na toolbar.

Form User

No formulário que criamos, crie um novo construtor que irá receber como parâmetro uma string. Existem outras formas de passar parâmetros entre os controles, esta e a maneira mais fácil. Não esqueça de copiar o método InitializeComponent() para seu novo construtor.

UserControlLogin

No usercontrol que criamos, insira o evento de click no botão e em seguida copie o código para o evento. Esse trecho de código irá criar um novo formulário do tipo que criamos e passar o usuário que está sendo logado para o mesmo.

Compile o código e execute, lembrando que é necessário ter o MS-Project instalado na maquina. Após executar a solução, o project irá abrir automaticamente, selecione um arquivo em branco e veja como ficou seu Add-In. 

Bom pessoal, é isso. No próximo artigo irei mostrar como se cria um cronograma com tarefas geradas a partir de um JSON ou WebService. Esperam que tenha sido útil.

Abraços e até o próximo!