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á!