CRIANDO SERVERCONTROL COM JAVA SCRIPT

Uma maneira incrível de programar em asp.net refere-se a criar controles personalizados, embutidos em uma dll que pode ser distribuida, com controle de versão, ofuscada, etc., conforme se faria em qualquer programação windows forms tradicional.

O inconveniente é que ainda na versão 2008 do visual studio, rodando mesmo com .net framework 3.5, não é possível que tais controles sejam desenvolvidos visualmente, ou seja você precisa incluir os objetos, html, funcionalidades manualmente via código (VB.Net, C#, etc.)

Executando tal implementação, acabei parando na seguinte questão: como adicionar java script client-side no controle via programação?

Após uma extensa pesquisa, e vendo diversas maneiras diferentes de fazer isso, algumas das quais davam problemas, encontrei uma que considero bastante simples, fácil de implementar e mantem o código-fonte limpo, para manutenções futuras.

Basta seguir os seguintes passos (em VB.NET):

1. Crie seu projeto ServercontrolLibrary, em seguida o controle ServerControl;

2. A funcionalidade de programação é trivial, mesmo assim, vai uma dica.

O exemplo abaixo adiciona um objeto do tipo INPUT (texto) na página:

        
    'coloque isso no topo, pois será uma variável pública a nível de códigoM
    Protected txtTexto As HtmlControls.HtmlInputText
    
    ''' <summary>
    ''' Cria o objeto, inserindo os componentes
    ''' </summary>
    ''' <remarks></remarks>
    Public Sub New()

        'cria e adiciona o objeto
        txtTexto = New HtmlControls.HtmlInputText
        txtTexto.ID = "txtTexto"
        txtTexto.Name = "txtTexto"
        txtTexto.Size = 10
        txtTexto.MaxLength = 9
        txtTexto.Attributes("onbeforepaste") = "mascara(this,cep)"
        txtTexto.Attributes("onkeypress") = "mascara(this,cep)"
        txtTexto.Style("text-align") = "right"

        Me.Controls.Add(txtTexto)
    End Sub
     

3. Para adicionar o código java script, no caso o conteúdo da função "mascara", primeiro adicione o seguinte código, que irá substituir a função OnPreRender, incluindo o registro do arquivo javascript dentro da página.

    
    Protected Overrides Sub OnPreRender(ByVal e As System.EventArgs)

        'registra o script, caso ainda não esteja registrado
        If (Not Page.ClientScript.IsClientScriptBlockRegistered("FuncoesGerais")) Then
            Page.ClientScript.RegisterClientScriptInclude("FuncoesGerais", _
                         Page.ClientScript.GetWebResourceUrl(Me.GetType(), "LemureFWPortal.FuncoesGerais.js"))

        End If

        MyBase.OnPreRender(e)
    End Sub
    

4. Crie um arquivo java script, no exemplo chamado FuncoesGerais. Em suas propriedades, altere "Build Action" para "Embedded Resource".

Todas as funções que forem adicionadas no arquivo serão disponibilizadas para a página em client size, porém sem aparecer seu conteúdo para o usuário. O navegador mantém apenas algo como:

   
   <script src="/WebResource.axd?d=RC1_CyjYn3GiiYXoYKBNGHz1Mn-MTbjWXEWfbh98XDDNnFWoEeo2BfwnYOMbJP-50&t=633465375026875000" type="text/javascript"></script>
   

Bem mais seguro e conveniente, afinal de contas código java script também dá trabalho e é sempre bom proteger nossas criações, sem falar na segurança.

Dentro do arquiov .js você pode adicionar algo como

function mascara(o,f){ 
    v_obj = o; 
    v_fun = f; 
    setTimeout("execmascara()", 1);
}

function execmascara(){
    v_obj.value = v_fun(v_obj.value);
}

function cep(v){
    v=v.replace(/\D/g,"");                //Remove tudo o que não é dígito
    v=v.replace(/^(\d{5})(\d)/,"$1-$2"); //Esse é tão fácil que não merece explicações
    return v;
}

Como se pode ver, é código java puro e simples.

5. Abra o arquivo AssemblyInfo.vb do seu projeto (é preciso clicar o botão "Show All Files" no "Solution Explorer"). Ele está normalmente dentro da pasta "My Project". Ali adiciona a seguinte linha:

    'Esta linha irá indicar que o arquivo js é um recurso embutido para web, desta forma ele será distribuido/linkado pelo navegador
    'diretamente de dentro da sua DLL
    <Assembly: Web.UI.WebResource("LemureFWPortal.FuncoesGerais.js", "text/javascript")> 

6. Observações:

Esta técnica é simples e traz diversas vantagens:

• - o código java script fica oculto para o cliente, dando mais segurança;
• - o arquivo js por ser um webresource usa recursos de chache do asp e do navegador, portanto ficando mais otimizado do que se estivesse direto na página;
• - no Visual Studio 2008 o conteúdo do arquivo .js faz uso do intellisense, facilitando enormemente o desenvolvimento e manutenção das funções;
• - fica simples de criar bibliotecas internas de código java script;
• - o seu controle server control precisa ser apenas inserido na página e todo o código client e server fica oculto, deixando o código mais claro;
• - seu aplicativo fica em camadas, simplificando em muito a manutenção e a compreesão (lembre-se da Matrix: um sistema sobre o outro);
• - por fim, o simples uso de servercontrols e uma library já garante que se possa programar aplicativos web ou sites de forma organizada e mais parecida com a programação de aplicativos windows tradicionais.

Resumindo:

• - Utilize o Attibutes dos objetos para inserir os eventos e as chamadas javascript (exemplo: txtTexto.Attributes("onbeforepaste") = "mascara(this,cep)");
• - Overrides o OnPreRender do controle para registrar o bloco de script, usando "Page.ClientScript.RegisterClientScriptInclude()";
• - Altere o Assembly do AssemblyInfo.vb para indicar que seu recurso embutido existe, e o seu tipo;
• - Altere o Build Action do arquivo .js para 'Embedded Resource".