Para um melhor entendimento deste Artigo veja o Índice (Rich Internet Applications com Ext.Net)

Instalando o Ext.Net manualmente.

Neste tópico eu vou falar da instalação do Ext.Net, mas da forma trabalhosa, manualmente.

Ao final do artigo, tem o link para o vídeo do Geoffrey McGill, que demonstra como instalar utilizando o NuGet Package. (Mas ai não tem graça)

Então, mãos à obra.

Primeiramente, baixe a versão 2.5 WebForms do Ext.Net em Ext.NET.WebForms.Pro.2.5.1.zip.

Ao final do download descompacte o arquivo baixado, será criado alguns diretórios e arquivos, mas iremos nos ater apenas ao diretório “lib“.

Neste diretório existem 4 diretórios, onde cada diretório representa a versão do Framework que será utilizado para o desenvolvimento da sua aplicação, no nosso caso será o 4.0.

Dentro do diretório “~\lib\net40\” existe o arquivo “Ext.Net.dll“, é este que iremos referenciar mais logo a seguir.

Baixar as versões públicas do “Ext.Net.Utilities” e do “Transformer.NET” em https://github.com/extnet/

Compilar as versões baixadas.

Agora vamos ao Visual Studio, crie uma nova aplicação web vazia, pois iremos começar do zero.

Faça referência aos arquivos:

1. “~\lib\net40\Ext.Net.dll“, ou a versão do Framework que você estiver utilizando;
2. Ext.Net.Utilities.dll (dentro da pasta bin release/debug que foi compilado o projeto);
3. Transformer.NET.dll (dentro da pasta bin release/debug que foi compilado o projeto);

Configurando o Web.Config

Abra o Web.Config no editor e vamos colocar a mão na massa:

Apague todo o conteúdo criado no web.config e vamos fazer uma sessão de cada vez:

• Neste ponto definimos que a sessão de configuração do Ext.NET não necessita de nenhuma configuração especial no quesito segurança, para que possa sera acessada pela aplicação:

<configSections>
 <!--
 Para um melhor entendimento do atributo requirePermission:
 http://msdn.microsoft.com/en-us/library/system.configuration.sectioninformation.requirepermission.aspx
 -->
 <section name="extnet" type="Ext.Net.GlobalConfig" requirePermission="false" />
 </configSections>

• Definir o padrão de tema. O tema padrão pode ser um dos valores:
  • Default;
  • Gray;
  • Neptune;
  • Acess

<!--Define o tema padrão do ext.net-->
 <extnet theme="Gray" />

• Definir os handlers, manipuladores, do Ext.Net

O que são handlers (manipuladores)? Os handlers, ou manipuladores, normalmente processam as requisições e não têm interatividade com o usuário, como páginas ou controles, e normalmente são responsáveis por camadas lógicas dentro da aplicação. Podemos utilizar um handler quando precisamos executar algo no servidor sem a necessidade de intervenção do usuário final. Os handlers implementam a interface IHttpHandler, o HttpHandler é responsável por atender as requisições do browser e a interface IHttpHandler possui as assinaturas necessárias para que estas requisições sejam atendidas.

<!--Define os módulos do ext.net-->
 <httpModules>
 <add name="DirectRequestModule" type="Ext.Net.DirectRequestModule, Ext.Net" />
 </httpModules>

• Definir a marcação “ext” para toda página ou componente que for criado para o “ext”;

<pages>
 <controls>
 <!--Indica que toda página criada irá ter a diretiva "ext" como padrão para ser usada como marcação na criação.-->
 <add assembly="Ext.Net" namespace="Ext.Net" tagPrefix="ext" />
 </controls>
 </pages>

• Se estiver executando o IIS 7 como servidor, devemos utilizar a seguinte configuração no Web.Config;

<!-- Configurações para o IIS7 -->

 <system.webServer>
 <validation validateIntegratedModeConfiguration="false" />

<modules>
 <add name="DirectRequestModule" preCondition="managedHandler" type="Ext.Net.DirectRequestModule, Ext.Net" />
 </modules>

<handlers>
 <add name="DirectRequestHandler" verb="*" path="*/ext.axd" preCondition="integratedMode" type="Ext.Net.ResourceHandler" />
 </handlers>
 </system.webServer>

• E por fim, informe os runtimes adicionais que serão utilizados no projeto;

 <runtime>
 <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
 <dependentAssembly>
 <assemblyIdentity name="Newtonsoft.Json" publicKeyToken="30ad4fe6b2a6aeed" />
 <bindingRedirect oldVersion="1.0.0.0-5.0.8" newVersion="6.0.0" />
 </dependentAssembly>
 <dependentAssembly>
 <assemblyIdentity name="Ext.Net.Utilities" publicKeyToken="2c34ac34702a3c23" />
 <bindingRedirect oldVersion="0.0.0.0-2.3.0" newVersion="2.4.0" />
 </dependentAssembly>
 <dependentAssembly>
 <assemblyIdentity name="Transformer.NET" publicKeyToken="e274d618e7c603a7" />
 <bindingRedirect oldVersion="0.0.0.0-2.1.0" newVersion="2.1.1" />
 </dependentAssembly>
 </assemblyBinding>
 </runtime>

Ao final seu arquivo Web.Config deverá estar como abaixo, ou semelhante.

<?xml version="1.0"?>
<configuration>
 <configSections>
 <!--
 Para um melhor entendimento do atributo requirePermission:
 http://msdn.microsoft.com/en-us/library/system.configuration.sectioninformation.requirepermission.aspx
 -->
 <section name="extnet" type="Ext.Net.GlobalConfig" requirePermission="false"/>
 </configSections>
 <!--Define o tema padrão do ext.net-->
 <extnet theme="Gray"/>
 <system.web>
 <!--Define os handlers (manipuladores) do ext.net-->
 <httpHandlers>
 <add path="*/ext.axd" verb="*" type="Ext.Net.ResourceHandler" validate="false"/>
 </httpHandlers>
 <!--Define os módulos do ext.net-->
 <httpModules>
 <add name="DirectRequestModule" type="Ext.Net.DirectRequestModule, Ext.Net"/>
 </httpModules>
 <pages>
 <controls>
 <!--Indica que toda página criada irá ter a diretiva "ext" como padrão para ser usada como marcação na criação.-->
 <add assembly="Ext.Net" namespace="Ext.Net" tagPrefix="ext"/>
 </controls>
 </pages>
 <compilation debug="true"/>
 </system.web>
 <!-- Configurações para o IIS7 -->
 <system.webServer>
 <validation validateIntegratedModeConfiguration="false"/>
 <modules>
 <add name="DirectRequestModule" preCondition="managedHandler" type="Ext.Net.DirectRequestModule, Ext.Net"/>
 </modules>
 <handlers>
 <add name="DirectRequestHandler" verb="*" path="*/ext.axd" preCondition="integratedMode" type="Ext.Net.ResourceHandler"/>
 </handlers>
 </system.webServer>
 <runtime>
 <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
 <dependentAssembly>
 <assemblyIdentity name="Newtonsoft.Json" publicKeyToken="30ad4fe6b2a6aeed"/>
 <bindingRedirect oldVersion="1.0.0.0-5.0.8" newVersion="6.0.0"/>
 </dependentAssembly>
 <dependentAssembly>
 <assemblyIdentity name="Ext.Net.Utilities" publicKeyToken="2c34ac34702a3c23"/>
 <bindingRedirect oldVersion="0.0.0.0-2.3.0" newVersion="2.4.0"/>
 </dependentAssembly>
 <dependentAssembly>
 <assemblyIdentity name="Transformer.NET" publicKeyToken="e274d618e7c603a7"/>
 <bindingRedirect oldVersion="0.0.0.0-2.1.0" newVersion="2.1.1"/>
 </dependentAssembly>
 </assemblyBinding>
 </runtime>
</configuration>

Testando a instalação

Adicione um novo webform ao projeto chamado “Default.aspx”.

Neste form, como de praxe :), Iremos criar um “Olá Ext.Net”.

Não se preocupe com o código em questão, pois será discutido nos próximos artigos.

Em Code Design adicione o seguinte código:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Ext.Net.Tutorial.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <ext:ResourceManager runat="server">
    </ext:ResourceManager>
    <form id="form1" runat="server">
    <ext:Button runat="server" ID="btnOla" Text="Olá Ext.Net">
        <DirectEvents>
            <Click OnEvent="btnOla_Click">
            </Click>
        </DirectEvents>
    </ext:Button>
    </form>
</body>
</html>

Em Code Behind adicione o seguinte código:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Ext.Net.Tutorial
{
    public partial class Default: System.Web.UI.Page
    {
        protected void btnOla_Click(object sender, DirectEventArgs e)
        {
            X.Msg.Show(new MessageBoxConfig
            {
                Title = "Ext.NET",
                Buttons = MessageBox.Button.OK,
                Icon = MessageBox.Icon.INFO,
                Message = "Olá Ext.NET"
            });
        }
    }
}

Execute a aplicação e clique no botão. A mensagem “Olá Ext.NET” deverá ser exibida em uma caixa de mensagem do navegador.

Se isto acontecer, o Ext.NET foi configurado corretamente e podemos continuar com nosso aprendizado.

Se foi lançado algum erro, verifique se é um dos listados abaixo, caso não for, verifique a solução no fórum:

Fórum Oficial: http://forums.ext.net/

Nosso Fórum: forum/ext-net/

Resolvendo erros

The ResourceManager Control is missing from this Page.

Adicione a marcação

<ext:ResourceManager runat="server">
</ext:ResourceManager>

logo após a tag <body>.

Marca de servidor desconhecida: ‘ext:<name>’.

Verifique se no Web.Config se a diretiva <add assembly> foi informada.

 <pages>
<controls>
<!--Indica que toda página criada irá ter a diretiva "ext" como padrão para ser usada como marcação na criação.-->
<add assembly="Ext.Net" namespace="Ext.Net" tagPrefix="ext"/>
</controls>
</pages>

CS1061: ‘ASP.default_aspx’ não contém uma definição para ‘btnOla_Click’ e nenhum método de extensão ‘btnOla_Click’ aceita que um primeiro argumento de tipo ‘ASP.default_aspx’ seja encontrado (você não está usando uma diretriz ou referência de assembly?)

Quando definimos um “DirectMethod” pelo Code Design é necessário que o método que irá tratar o evento seja definido como “protected” ou “public” no Code Behind.

The web.config file for this project is missing the required DirectRequestModule.

Inserir a diretiva

<httpModules>
<add name="DirectRequestModule" type="Ext.Net.DirectRequestModule, Ext.Net"/>
</httpModules>

pois o Ext.NET depende do módulo “DirectRequest” para construir o lado cliente.

Instalando usando o NuGet Package

E como prometido, segue o vídeo da instalação pelo NuGet.

[tubepress video=”X6InyAkPFIs”]

Conhecendo os arquivos.

• Ext.Net.dll: Assembly principal do Ext.NET;
• Ext.Net.xml: Arquivo de IntelliSense para ajudá-lo enquanto você codifica;
• Ext.Net.Utilities.dll: Utilitários do Ext.NET framework (Muito úteis);
• Ext.Net.Utilities.xml: IntelliSense para o utilitário;
• NewtonSoft.Json.dll:  Json.NET framework utilizado pelo Ext.NET;
• NewtonSoft.Json.xml: O  IntelliSense do Json.NET;
• Transformer.NET.dll: Um biblioteca  .NET para análise e transformação de dados;
• Transformer.NET.xml:  IntelliSense do Transformer.NET;

---

É isso ai pessoal 🙂
Até o próximo
♦ Marcelo