Se você acompanha este site, teve a oportunidade de ler o post de algumas semanas atrás onde anunciei no dia 07 de Junho de 2012 o lançamento da versão release candidate (RC) do WebMatrix 2.
Muitas novas features foram adicionadas ao produto, dentre as quais podemos destacar: publicação de aplicações direto no Windows Azure (através do recurso Web Sites), adição de novos templates ao WebMatrix, suporte nativo a Node.js, dentre outros. Todas as novas features você pode encontrar no post mencionado anteriormente.
Um dos novos recursos adicionados a esta release do WebMatrix é a possibilidade de se trabalhar com extensões personalizadas. No post de hoje, apresentarei algumas características sobre este recurso e como é possível criar operações personalizadas para serem executadas através do WebMatrix e como utilizar extensões pré construídas disponíveis na ferramenta.
Extensões?
Extensões são operações específicas que devem ser construídas utilizando Visual Studio 2010 (por enquanto apenas esta versão é suportada) e que podem ser executadas de dentro do WebMatrix, de forma integrada. Para que esta ideia torne-se mais clara, considere o exemplo aparesentado a seguir.
Você gostaria que o WebMatrix oferecesse uma rotina de backup em nuvem para seu projeto de software, entretanto, após vasculhar a ferramenta você chega a conclusão de a mesma não encontra-se disponível. Solução?! Crie a rotina você mesmo!
A ideia que a Microsoft pretende espalhar com o advento do recurso de extensões, é a de que “você pode personalizar a ferramenta o quanto queira”. Seguindo esta ideia, você poderá ter uma ferramenta que atenda em nível mais alto, necessidades específicas.
Galeria de extensões
Ainda no contexto de extensões, é importante mencionar que o WebMatrix traz consigo um recurso chamado “Extensions gallery (galeria de extensões)”. A ideia aqui é que o usuário consiga através do tradicional modelo “next-next-finish“, adicionar quantas extensões pré-construídas (estas são disponibilizadas pela Microsoft) ele queira à ferramenta.
As extensões são exibidas através de uma janela na ferramenta. Para a exibição destas extensões, um serviço disponibilizado pela Microsoft é consultado e o rertono deste, é o “agente fomentador” da galeria. Este modelo é prático, isto porque cada nova extensão publicada pelo time do WebMatrix, torna-se automaticamente visível através da galeria, sem a necessidade de instalar updates, correções, etc.
A Figura 1 apresenta uma visão atual acerca das extensões disponíveis na galeria do WebMatrix 2 RC.
Figura 1. Visão da “galeria de extensões”
Instalando uma extensão pré construída
Para a versão 2 RC, WebMatrix traz um total de 13 extensões pré construídas em sua galeria. Destas, existem três que se destacam enormemente: os emuladores de iPad, iPhone e Windows Phone. O motivo do destaque é evidente: você pode escrever aplicações web com sua tecnologia preferida e testar o comportamento da mesma nos browsers destes ambientes móveis.
Para apresentar o processo de instalação e utilização destas extensões, neste post selecionaremos o emulador de iPad.
Passo a passo do processo de instalação
Execute o WebMatrix, selecione a opção “Templates” e na sequência, a opção “Starter Site” na guia “ASP.NET”. Nomeie o projeto conforme a necessidade, e pressione “OK”.
Com o ambiente em execução, alterne para a guia “Files”. No menu contextualizado apresentado acima, busque a opção “Gallery” no box “extensions”, conforme apresentado pela Figura 2.
Figura 2. Selecionando a opção “Gallery“
Ao selecionar a opção apresentada pela Figura 2, uma tela semelhante aquela apresentada pela Figura 1. Nela, selecione a opção “iPad Simulator” e pressione o botão “Install“. Uma tela com informações sobre a extensão será apresentada. Clique novamente em “Install“. Uma nova tela com os termos de licença para aceitação será apresentada. Basta clicar em “I Accept“. A tela seguinte apresenta o processo de instalação sendo iniciado, conforme apresentado pela Figura 3.
Figura 3. Instalação da extensão em andamento
Se tudo correu conforme o esperado, a extensão já encontra-se disponível junto ao WebMatrix. Agora, para testar seu funcionamento, vá até o menu superior da ferramenta, na opção “Run” (onde você pode testar as aplicações em execução), a expanda e selecione a opção “iPad”. Sim, este é nosso novo complemento devidamente instalado e configurado.
A Figura 4 apresenta o mesmo executando a aplicação à qual estamos trabalhando na ferramenta.
Figura 4. Emulador de iPad (extensão) em funcionamento
Criando sua própria extensão
Outro recurso importante disponibilizado pelo WebMatrix em relação as extensões é a possibilidade de se criar novas e personalizadas, para atender demandas específicas. Para isso, o time do WebMatrix disponibiliza um templatede projeto para Visual Studio 2010 que facilita o processo de criação de novas extensões.
No decorrer deste texto apresentarei algumas características dotemplatemencionado anteriormente e como podemos utilizá-lo para criar operações personalizadas para serem executadas de dentro do WebMatrix.
Sobre o template de extensibilidade
O templatede extensibilidade para WebMatrix possui algumas características importantes. Conforme mencionado anteriormente, sua função é atuar como um framework para ajudar no processo de escrita de extensões específicas para serem executadas dentro do WebMatrix. Algumas informações importantes a serem consideradas sobre o template são apresentadas a seguir:
- O template é gratuíto e atualmente é suportado apenas para Visual Studio 2010. Você pode baixar o pacote contendo todos os arquivos compactados (*.zip) seguindo este link.
- O pacote tem vários arquivos, cada um com uma função específica. A seguir apresento uma breve descrição sobre as funções de cada um deles.
- WebMatrixExtension.cs: este é o arquivo principal do framework. Ele implementa a classe abstrata “Extension”, que possui os métodos e propriedades necessários para a criação das extensões. Nesta classe merecem destaques:
- Initialize(IWebMatrixHost host, ExtensionInitData initData): método abstrato chamado no momento em que o WebMatrix é inicializado. Através de “IWebMatrixHost” e “ExtensionInitData” WebMatrix consegue adicionar e executar o complemento incorporado.
- DelegateCommand.cs: este arquivo hospeda a implementação da classe “DelegateCommand” que herda da interface base “ICommand”. Esta interface é importante por assinar métodos cruciais para o processo de criação das extensões, como: “Execute”, “CanExecute” e “CanExecuteChanged”.
- WebMatrixExtension.cs: este é o arquivo principal do framework. Ele implementa a classe abstrata “Extension”, que possui os métodos e propriedades necessários para a criação das extensões. Nesta classe merecem destaques:
A Listagem 1 apresenta o conteúdo do arquivo “WebMatrixExtension.cs” para apreciação. Já a Listagem 2 apresenta o source do arquivo “DelegateCommand.cs”.
[csharp]
using System;
using System.ComponentModel.Composition;
using System.Diagnostics;
using System.Windows.Media.Imaging;
using Microsoft.WebMatrix.Extensibility;
namespace $safeprojectname$
{
///
/// A sample WebMatrix extension.
///
[Export(typeof(Extension))]
public class $safeprojectname$ : Extension
{
///
/// Stores a reference to the small star image.
///
private readonly BitmapImage _starImageSmall = new BitmapImage(new Uri(“pack://application:,,,/$safeprojectname$;component/Star_16x16.png”, UriKind.Absolute));
///
/// Stores a reference to the large star image.
///
private readonly BitmapImage _starImageLarge = new BitmapImage(new Uri(“pack://application:,,,/$safeprojectname$;component/Star_32x32.png”, UriKind.Absolute));
///
/// Stores a reference to the WebMatrix host interface.
///
private IWebMatrixHost _webMatrixHost;
///
/// Initializes a new instance of the $safeprojectname$ class.
///
public $safeprojectname$()
: base(“$safeprojectname$”)
{
}
///
/// Called to initialize the extension.
///
///WebMatrix host interface. ///Extension initialization data. protected override void Initialize(IWebMatrixHost host, ExtensionInitData initData)
{
_webMatrixHost = host;
// Add a simple button to the Ribbon
initData.RibbonItems.Add(
new RibbonGroup(
“My Group”,
new RibbonItem[]
{
new RibbonButton(
“My Button”,
new DelegateCommand(HandleRibbonButtonInvoke),
null,
_starImageSmall,
_starImageLarge)
}));
}
///
/// Called when the Ribbon button is invoked.
///
///Unused. private void HandleRibbonButtonInvoke(object parameter)
{
if(_webMatrixHost.ShowDialog(this.Name, “Open a browser window for the site?”).GetValueOrDefault())
{
Process.Start(_webMatrixHost.WebSite.Uri.AbsoluteUri);
}
}
}
}
[/csharp]
Listagem 1. Código fonte da classe WebMatrixExtension.cs
[csharp]
using System;
using System.Windows.Input;
using System.Diagnostics;
namespace $safeprojectname$
{
///
/// Simple implementation of the DelegateCommand (aka RelayCommand) pattern.
///
internal class DelegateCommand : ICommand
{
///
/// Stores a reference to the CanExecute Func.
///
private readonly Func_canExecute;
///
/// Stores a reference to the Execute Action.
///
private readonly Action
///
/// Initializes a new instance of the DelegateCommand class.
///
///Action to invoke when Execute is called. public DelegateCommand(Action
///
/// Initializes a new instance of the DelegateCommand class.
///
///Func to invoke when CanExecute is called. ///Action to invoke when Execute is called. public DelegateCommand(Func canExecute, Action
///
/// Determines if the command can execute.
///
///Data used by the command. /// True if the command can execute.
public bool CanExecute(object parameter)
{
return _canExecute(parameter);
}
///
/// Executes the command.
///
///Data used by the command. public void Execute(object parameter)
{
_execute(parameter);
}
///
/// Invoked when changes to the execution state of the command occur.
///
public event EventHandler CanExecuteChanged;
///
/// Invokes the CanExecuteChanged event.
///
public void OnCanExecuteChanged()
{
EventHandler handler = CanExecuteChanged;
if (null != handler)
{
handler(this, EventArgs.Empty);
}
}
}
}
[/csharp]
Listagem 2. O código fonte do arquivo “DelegateCommand.cs”
Criando uma extensão
Para criarmos nossa extensão, teremos que seguir basicamente três etapas. São elas:
-
Adicionar o template no diretório específico do Visual Studio para que este torne-se visível.
-
Criar um novo projeto seguindo as especificações do template.
-
Implentar as ações do template.
Passo 1: Adicionando o template no diretório específico
Vá até o pacote recém baixado, descompacte-o e selecione e copie o subdiretório em formato zip chamado “WebMatrixExtension”. Em seguida, navegue até o diretório padrão de templates para Visual Studio “%USERPROFILE%DocumentsVisual Studio 2010TemplatesProjectTemplates“. Neste diretório, cole o diretório recém copiado. Em seguida, execute o Visual Studio 2010 e clique na opção “C#” à esquerda. Se tudo correu bem, você deverá estar visualizando uma imagem semelhante aquela apresentada pela Figura 5.
Figura 5. O novo template para Visual Studio 2010
Passo 2: Criando a extensão seguindo o padrão solicitado
Como você já deve estar imaginando, para criar uma extensão você deve adicionar um novo projeto. Este projeto deve ser baseado no template recém “instalado” (vide Figura 5). Nomeie o projeto conforme a necessidade (para este post estou chamando de “ExtensaoPost”). Ao fazê-lo, se tudo correu bem, você deverá estar visualizando uma tela semelhante à aquela apresentada pela Figura 6.
Figura 6. A solution e os passos para escrever a extensão
Uma observação importante em relação à escrita das extensões é: o template é pré configurado para funcionar corretamente com pre e pos build. Para que a extensão possa ser adicionada corretamente ao WebMatrix e para que o desenvolvedor possa monitorar o comportamento da mesma em tempo de execução, é preciso que o modo debug (esta informação encontra-se disponível nas propriedades do projeto) do template aponte para o executável do WebMatrix (hospedado em “C:Program Files (x86)Microsoft WebMatrixWebMatrix.exe”).
A parte grifada em amarela na Figura 6 apresenta o procedimento em detalhes.
Implementando uma ação de teste (simples, ok?!)
Para fins didáticos, a ação a ser realizada pela nossa extensão será bem simples. O que faremos é, ao executar a extensão de dentro do WebMatrix, uma janela (com uma mensagem “Olá extensão :). Santástico!”) será executada. Para isso fiz as seguintes operações:
-
Adicionei dois novos ícones ao projeto da extensão (no meu caso, são logotipos do Santos FC).
-
Alterei às linhas 18 e 23 da classe “WebMatrixExtensions”. Nestas linhas apontei os novos ícones recém adicionados ao projeto.
-
Dentro do método Init (da mesma classe), adicionei o trecho de código apresentado pela Listagem 3.
[csharp]
initData.RibbonItems.Add(
new RibbonGroup(
“Post”,
new RibbonItem[]
{
new RibbonButton(
“Santos FC”,
new DelegateCommand(HandleRibbonButtonInvoke),
null,
_starImageSmall,
_starImageLarge)
}));
[/csharp]
Pronto. Basta agora executar o projeto. Se tudo correu conforme o esperado, você deverá estar visualizando um resultado semelhante a aquele apresentado pelas Figuras 7 e 8.
Figura 7. A extensão adicionada com sucesso ao WebMatrix
Figura 8. O resultado exibido no WebMatrix ao clicar na extensão
Era isso. Não se esqueça, deixe seu comentário. Você não perderá 1 minuto sequer e é de fundamental importância para quem escreve.
Abraços e até a próxima!
Facebook
Twitter
Instagram
LinkedIn
RSS