Sumário
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:
- “~\lib\net40\Ext.Net.dll“, ou a versão do Framework que você estiver utilizando;
- Ext.Net.Utilities.dll (dentro da pasta bin release/debug que foi compilado o projeto);
- 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
<!--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
<!--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