sábado, 5 de dezembro de 2009

Como Usar JQuery com JBOSS Seam

Uma coisa que parece tão simples, usar o JQuery em um projeto java fica um pouco complicado quando se está usando o JBOSS SEAM.

Para usar JQuery no SEAM sem fazer uso da tag rich:jQuery, que é forma como todo programador usava a biblioteca javascript até então, você precisa contornar alguns problemas: 

Primeiro: não use $( ). user jQuery( ). Aparentemente existe um conflito com o prototype e por isso você não deve usar $. Parece que existe uma forma de usar o $, mas eu não quis saber. 

Segundo: os IDs são um problema, porque o SEAM parece colocar IDs de acordo com elementos no Form. Então, se você tem um form em sua página sem um ID, o framework lixo (JBOSS SEAM) vai colocar um id para você. E pior, ele vai alterar o id de todos os elementos do form.
Exemplo: Você tem um textarea com ID text1 dentro de um form. Se você não colocar o ID no form, o text1 aparecerá no html com um ID mais ou menos assim:  j126:text1
Não faço nem idéia da regra que ele usa para gerar este ID. Também não sei se isso acontece só com o FORM ou se acontece com outros elementos também.
Ai, para resolver o problema, você colocar um ID no seu FORM. No meu caso, form1. Agora o seu elemento textarea vai se chamar form1:text1. E no javascript você vai precisar usar \\ para fazer scape. O seletor ficaria assim: #form1\\:text1. Essa é a solução para você poder buscar elementos pelo ID. O ID, por si só, já deveria ser único, mas esse ai é o JBOSS SEAM, "o melhor framework do universo". 

Terceiro: Você precisa colocar seu javascript dentro de um //<![CDATA[ ] ]> caso coloque ele em sua página. Porque? Bom, ele usa um parser de XHTML ou XML, não sei ao certo, que vai ler o seu javascript e se ele achar if (variavel < 1) ele vai reclamar de um HTML mal formado por causa do < e vai dar erro de compilação. Acreditem.

Abaixo, um exemplo de um pequeno código com um contador de textarea usando JQuery no JBOSS Seam. Eu copiei esse código de outro lugar e só adaptei para a nova sintaxe.

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:s="http://jboss.com/products/seam/taglib"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:m="http://www.ninthavenue.com.au/blog/composing_components"
    template="/layout/template.xhtml">

    <ui:define name="body">
    
    <script type="text/javascript" >
        //<![CDATA[
        jQuery(document).ready(    function() {
               var tarea = jQuery("#form1\\:text1") 
            tarea.keyup(function (event) {
                var msg = jQuery(this).val();
                var maxText = 10;
                var numChar = msg.length;
                jQuery("#MsgCount").text("Total de caracteres: " + numChar);                
    
                if (numChar <= maxText){
                    jQuery("#MsgCount").css("color","#0000ff");
                }else
                     jQuery("#MsgCount").css("color","#ff0000");
                }
            });
        });
        //]]>
    </script >



    <h:form id="form1">
        TextArea <h:inputTextarea id="text1" 
                                  styleClass="textAreaPadrao" 
                                  value="#{blablabla}" ></h:inputTextarea>
        <div id="MsgCount"></div>
    </h:form>            
    </ui:define>
</ui:composition>