Tag it com JSF 2

Olá pessoa!

Antes de mais nada gostaria de agradecer a DEUS por permitir mais um ano que passou e pedi a Ele mais um ano de graças e bênçãos. Um feliz 2016 a todos!

Hoje, neste primeiro post do ano, vou falar sobre uma integração do plugin TagiT do Jquery que você pode encontrar neste site.

No ano passado, precisei fazer um cadastro de Tags e claro que essa ferramenta veio para ajudar, e vou compartilhar essa experiência.

Primeiro tenho que falar que neste exemplo não uso o primefaces ou qualquer outra implementação do JSF, mas sim ele puro.

Então mãos a obra.

1º Passo:

Tenho que inserir três arquivos externos, duas css e um arquivo js que são:

<h:outputStylesheet library="css" name="jquery.tagit.css"></h:outputStylesheet>
<h:outputStylesheet library="css" name="tagit.ui-zendesk.css"></h:outputStylesheet>
<h:outputScript library="js" name="tag-it.min.js"></h:outputScript>

Lembro que esses arquivos deverão está contidos na pasta resources. e acima nada mais é que a aplicação do exemplo do site que citei anteriormente bem como o código abaixo;

2º Passo

Criar dentro do <h:head> a tag <script></script> e adicionar o código abaixo:

 $(document).ready(function() {
var $tags = $("#myTags");
$tags.tagit({
availableTags: "tags[]",
            // This will make Tag-it submit a single form value, as a comma-delimited field.
            singleField: true,
            singleFieldNode: $('.test')
            });
    });

Então começamos a adaptar o código do exemplo do site, primeiro temos o valor tag[], pelo simples fato que não temos inicialmente um valor, pois será incrementando a partir do momento em que a aplicação dar um request no beans para trazer a list com os valores, ou simplesmente não trazer nenhum valor sem a necessidade da requisição no banco de dados.

E por último:

3º Passo:

Criar a div para armazenar o componente h:inputText, como abaixo:

<div>
   <label for="tag" class="control-label">Tag</label>
   <ul id="myTags"></ul>
<p class="help-block">Enter, vírgula ou espaço para criar uma
nova tag, Backspace or Delete para remover a última.</p>
<h:inputText id="test" styleClass="test"
                   value="#{bean.tagsinseridas}"></h:inputText>
</div>

Então, nesse código teve algumas alterações para a necessidade que eu tive mas, basicamente, permaneceu o que tinha no exemplo do plugin, eu atribuir o styleClass pelo fato de que o id no jsf é adicionado o j_id.... então por isso o singleFieldNode é a classe atribuída no styleClass.

Espero ter ajudado com mais essa dica. Nos veremos nos próximos post, até lá!