Abrir paleta de cores
27/08/2009 00:00
0
Boa noite a todos!

Pessoal, existe algum plugin para que seja aberta uma paleta de cores para que o usuário escolha e o nome (ou código exadecimal) da cor selecionada seja gravado em uma string?

O meu caso real é o seguinte: Eu tenho 2 classes que estão listadas a seguir:

Tarefa
{
string descricao
Status status
}

Status
{
string descricao
string cor
}

Ao listar todas as minhas tarefas, eu estou alterando a cor de fonte da descrição de cada tarefa para que a mesma fique com a cor que está cadastrada no status que está vinculado à tarefa.

Hoje o usuário tem que digitar o nome da cor: ex.: blue, red, etc.... no cadastro de status.

Nesse momento eu queria abrir uma paleta de cores para que facilitasse a escolha.

Se alguém puder me ajudar, ficarei muito grato.

Att,
Clayton Almeida
Tags: Grails


0
O JQuery possui um plugin que é justamente uma palesta de cores (não me lembro do nome exato deste plugin neste momento).

Mas no site do JQuery (<!-- w --><a class="postlink" href="http://www.jquery.com">www.jquery.com</a><!-- w -->) tem uma listagem de plugins aonde você poderá encontrá-lo (acho que é o próprio JQuery UI)


0
[quote=&quot;kicolobo&quot;]O JQuery possui um plugin que é justamente uma palesta de cores (não me lembro do nome exato deste plugin neste momento).

Mas no site do JQuery (<!-- m --><a class="postlink" href="http://www.jquery.com">http://www.jquery.com</a><!-- m -->) tem uma listagem de plugins aonde você poderá encontrá-lo (acho que é o próprio JQuery UI)[/quote]

Kicolobo,

Eu entre no site do jquery e encontrei a paleta de cores que eu precisava. É esta aqui: <!-- m --><a class="postlink" href="http://www.supersite.me/website-building/jquery-free-color-picker/">http://www.supersite.me/website-buildin ... or-picker/</a><!-- m -->

Como eu sou iniciante, estou com problemas para utilizar este plugin.

Fiz o download dos scripts, copiei os mesmos para a pasta &quot;scripts&quot; e tentei aplicar esta paleta na minha view conforme apresentado abaixo, porém não consegui fazer com que a paleta aparecesse.

Como faço para utilizar este plugin no grails? Eu tenho que copiar os scripts deste plugin para a pasta scripts msm?


<html>
<script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;></script>
<script type=&quot;text/javascript&quot; src=&quot;iColorPicker.js&quot;></script>
....

<td valign=&quot;top&quot; class=&quot;value ${hasErrors(bean:statusTarefaInstance,field:'corExibicao','errors')}&quot;>
<input type=&quot;text&quot; value=&quot;${fieldValue(bean:statusTarefaInstance,field:'corExibicao')}&quot;class=&quot;iColorPicker&quot;
name=&quot;corExibicao&quot; id=&quot;corExibicao1&quot; />
</td>
....

</html>


Att,
Clayton Almeida
03/09/2009 00:00


0
[quote=&quot;claytonguimaraes&quot;][quote=&quot;kicolobo&quot;]O JQuery possui um plugin que é justamente uma palesta de cores (não me lembro do nome exato deste plugin neste momento).

Mas no site do JQuery (<!-- m --><a class="postlink" href="http://www.jquery.com">http://www.jquery.com</a><!-- m -->) tem uma listagem de plugins aonde você poderá encontrá-lo (acho que é o próprio JQuery UI)[/quote]

Kicolobo,

Eu entre no site do jquery e encontrei a paleta de cores que eu precisava. É esta aqui: <!-- m --><a class="postlink" href="http://www.supersite.me/website-building/jquery-free-color-picker/">http://www.supersite.me/website-buildin ... or-picker/</a><!-- m -->

Como eu sou iniciante, estou com problemas para utilizar este plugin.

Fiz o download dos scripts, copiei os mesmos para a pasta &quot;scripts&quot; e tentei aplicar esta paleta na minha view conforme apresentado abaixo, porém não consegui fazer com que a paleta aparecesse.

Como faço para utilizar este plugin no grails? Eu tenho que copiar os scripts deste plugin para a pasta scripts msm?


<html>
<script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;></script>
<script type=&quot;text/javascript&quot; src=&quot;iColorPicker.js&quot;></script>
....

<td valign=&quot;top&quot; class=&quot;value ${hasErrors(bean:statusTarefaInstance,field:'corExibicao','errors')}&quot;>
<input type=&quot;text&quot; value=&quot;${fieldValue(bean:statusTarefaInstance,field:'corExibicao')}&quot;class=&quot;iColorPicker&quot;
name=&quot;corExibicao&quot; id=&quot;corExibicao1&quot; />
</td>
....

</html>


Att,
Clayton Almeida[/quote]

Clayton,

vamos por partes: com relação à inclusão do plugin do JQuery, o que você pode fazer é o seguinte: ao invés de declará-lo como

<script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;></script>
<script type=&quot;text/javascript&quot; src=&quot;iColorPicker.js&quot;></script>


Declare-o como

<script type=&quot;text/javascript&quot; src=&quot;${resource(dir&#58;'javascript', file&#58;'jquery.js')}&quot;></script>
<script type=&quot;text/javascript&quot; src=&quot;${resource(dir&#58;'javascript', file&#58;'iColorPicker.js')}&quot;></script>


Como você estava declarando anteriormente, o seu browser iria buscar o arquivo query.js no mesmo diretório que a sua view, consequentemente, não o encontrando.

Ao usar a função resource, você estará gerando a url correta para o arquivo Javascript em questão.


0
pode fazer assim também :
<g&#58;javascript src=&quot;iColorPicker.js&quot;/>

não esquecendo de colocar o .js dentro do diretorio web-app/js .


Voce pode instalar o jquery pelo plugin(grails install-plugin jquery) que já existe e referencia-lo dessa forma :
<g&#58;javascript library=&quot;jquery&quot;/>
03/09/2009 00:00


0

Clayton,

vamos por partes: com relação à inclusão do plugin do JQuery, o que você pode fazer é o seguinte: ao invés de declará-lo como

<script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;></script>
<script type=&quot;text/javascript&quot; src=&quot;iColorPicker.js&quot;></script>


Declare-o como

<script type=&quot;text/javascript&quot; src=&quot;${resource(dir&#58;'javascript', file&#58;'jquery.js')}&quot;></script>
<script type=&quot;text/javascript&quot; src=&quot;${resource(dir&#58;'javascript', file&#58;'iColorPicker.js')}&quot;></script>


Como você estava declarando anteriormente, o seu browser iria buscar o arquivo query.js no mesmo diretório que a sua view, consequentemente, não o encontrando.

Ao usar a função resource, você estará gerando a url correta para o arquivo Javascript em questão.


Kikolobo,

Segui suas instruções, colocando os arquivos .js na pasta web-app/js e declarando os mesmos dentro da minha view usando o resource, só que não obtive êxito.

Não estou conseguindo fazer este plugin funcionar (<!-- m --><a class="postlink" href="http://www.supersite.me/website-building/jquery-free-color-picker/">http://www.supersite.me/website-buildin ... or-picker/</a><!-- m -->), e não sei onde estou errando.

Minha declaração ficou assim:

<script type=&quot;text/javascript&quot; src=&quot;${resource(dir&#58;'javascript', file&#58;'jquery.js')}&quot;></script>
<script type=&quot;text/javascript&quot; src=&quot;${resource(dir&#58;'javascript', file&#58;'iColorPicker.js')}&quot;></script>


e a criação da caixa de texto com a utilização do plugin ficou dessa forma:


<input type=&quot;text&quot; value=&quot;${fieldValue(bean&#58;statusTarefaInstance,field&#58;'corExibicao')}&quot; class=&quot;iColorPicker&quot; name=&quot;corExibicao&quot; id=&quot;corExibicao1&quot; />


Esta declaração está correta? Onde pode estar o erro?

Att,
Clayton Almeida
07/09/2009 00:00


0
[quote=&quot;Herrera&quot;]pode fazer assim também :
<g&#58;javascript src=&quot;iColorPicker.js&quot;/>

não esquecendo de colocar o .js dentro do diretorio web-app/js .


Voce pode instalar o jquery pelo plugin(grails install-plugin jquery) que já existe e referencia-lo dessa forma :
<g&#58;javascript library=&quot;jquery&quot;/>
[/quote]


Herrera,

Também fiz das 2 formas que vc me disse e ainda assim não consegui fazer este plugin funcionar. Mesmo instalando o jquery e fazendo a chamada acima descrita, o plugin não funcionou.

Eu usei a declaração


<input type=&quot;text&quot; value=&quot;${fieldValue(bean&#58;statusTarefaInstance,field&#58;'corExibicao')}&quot; class=&quot;iColorPicker&quot; name=&quot;corExibicao&quot; id=&quot;corExibicao1&quot; />


Porém só aparece uma caixa de texto comum.

Esta declaração que eu fiz está errada?
O plugin que estou tentando utilizar é este: <!-- m --><a class="postlink" href="http://www.supersite.me/website-building/jquery-free-color-picker/">http://www.supersite.me/website-buildin ... or-picker/</a><!-- m -->

Att,
Clayton Almeida
07/09/2009 00:00


0
[quote=&quot;claytonguimaraes&quot;]

Clayton,

vamos por partes: com relação à inclusão do plugin do JQuery, o que você pode fazer é o seguinte: ao invés de declará-lo como

<script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;></script>
<script type=&quot;text/javascript&quot; src=&quot;iColorPicker.js&quot;></script>


Declare-o como

<script type=&quot;text/javascript&quot; src=&quot;${resource(dir&#58;'javascript', file&#58;'jquery.js')}&quot;></script>
<script type=&quot;text/javascript&quot; src=&quot;${resource(dir&#58;'javascript', file&#58;'iColorPicker.js')}&quot;></script>


Como você estava declarando anteriormente, o seu browser iria buscar o arquivo query.js no mesmo diretório que a sua view, consequentemente, não o encontrando.

Ao usar a função resource, você estará gerando a url correta para o arquivo Javascript em questão.


Kikolobo,

Segui suas instruções, colocando os arquivos .js na pasta web-app/js e declarando os mesmos dentro da minha view usando o resource, só que não obtive êxito.

Não estou conseguindo fazer este plugin funcionar (<!-- m --><a class="postlink" href="http://www.supersite.me/website-building/jquery-free-color-picker/">http://www.supersite.me/website-buildin ... or-picker/</a><!-- m -->), e não sei onde estou errando.

Minha declaração ficou assim:

<script type=&quot;text/javascript&quot; src=&quot;${resource(dir&#58;'javascript', file&#58;'jquery.js')}&quot;></script>
<script type=&quot;text/javascript&quot; src=&quot;${resource(dir&#58;'javascript', file&#58;'iColorPicker.js')}&quot;></script>


e a criação da caixa de texto com a utilização do plugin ficou dessa forma:


<input type=&quot;text&quot; value=&quot;${fieldValue(bean&#58;statusTarefaInstance,field&#58;'corExibicao')}&quot; class=&quot;iColorPicker&quot; name=&quot;corExibicao&quot; id=&quot;corExibicao1&quot; />


Esta declaração está correta? Onde pode estar o erro?

Att,
Clayton Almeida[/quote]

Clayton, há dois testes que você pode fazer para verificar se está carregando os arquivos js corretos.

Teste número 1: veja o código fonte da página gerada pelo gsp e enviada ao seu navegador. Veja se está referenciando o arquivo no caminho correto. Se não estiver, é sinal de que você não está referenciando os arquivos de forma correta.

Teste número 2: abra qualquer um dos arquivos .js que está tentando usar e coloque uma instrução como

alert(&quot;Olá, eu fui carregado com sucesso!&quot;)

Se aparecer a caixa de diálogo com a mensagem, é sinal de que você está referenciando os arquivos corretamente. Caso contrário, é sinal de que não está.

Agora, com relação ao plguin da palesta de cores: cabe algumas dicas. Lembre-se de não contar 100% com o scaffolding do Grails. Ele é útil, parece lindo no primeiro momento, mas como todo scaffolding, ele é apenas um ANDAIME, ou seja, ele apenas faz a maior parte do trabalho para você. O restando da customização deverá ser feita.

No seu caso, como está usando um plugin do jQuery (estou falando da paleta de cores, não do jQuery em si que possui um plugin para Grails), você provávelmente terá de customizar o seu código para que ao ser selecionada uma cor, o valor de um atributo no seu formulário também seja alterado (normalmente, o valor presente dentro de um input do tipo hidden).

Em seguida, certifique-se de que no seu controlador, você acesse este parametro (usando a variável params do controlador) e a transforme para que seja compatível com o seu modelo.



Ainda não faz parte da comunidade???

Para se registrar, clique aqui.


Aprenda Groovy e Grails com a Formação itexto!

Newsletter Semana Groovy

Assinar

Envie seu link!


Livro de Grails


/dev/All

Os melhores blogs de TI (e em português) em um único lugar!

 
Creative Commons
RSS Grails Brasil é mantido por itexto Consultoria.
Em caso de problemas contacte Henrique Lobo Weissmann (Kico) por e-mail: kico@itexto.com.br
Todo o conteúdo presente neste site adota o Creative Commons como licença padrão.
Ver: 4.14.0
itexto