Arquivo Discussoes de Programacao e Tecnologia Boa tarde pessoal,
Estou desenvolvendo usando JSF com Primefaces e tenho uma dúvida referente à manipulação dos componentes do primefaces com o jquery, por exemplo, para manipular uma tabela, usando html puro, eu utilizo o seguinte código
$("td:odd").addClass("odd");
Quando eu utilizo primefaces, eu consigo fazer essa manipulação? Como o jQuery identifica os componentes do prime?
Desde já obrigada!!!
os componentes do primefaces são todos “derivados” dos componentes do jquery-ui, então vc pode pegar as classes que cada componente correspondente utiliza para obter as referências aos objetos.
Outra forma, é na construção do xhtml, colocar a propriedade styleClass como sendo a propriedade class dos componentes html padrão.
Oi evefuji,
Em primeiro lugar, obrigada por me responder.
Desculpa minha ignorância, mas você pode me dar um exemplo de como fazer com suas sugestões? Pq, na verdade, não entendi mto bem.
Obrigada!
vou pegar como exemplo o p:calendar
Se utilizarmos o p:calendar, o código gerado, por exemplo, para
<h:form id="form1"><p:calendar id="val1"/></h:form>
é
<div id="form1:val1_inline" class="hasDatepicker"><div class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="display: block; "><div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"><a class="ui-datepicker-prev ui-corner-all" onclick="DP_jQuery_1319646491549.datepicker._adjustDate('#form1\\:val1_inline', -1, 'M');" title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a><a class="ui-datepicker-next ui-corner-all" onclick="DP_jQuery_1319646491549.datepicker._adjustDate('#form1\\:val1_inline', +1, 'M');" title="Next"><span class="ui-icon ui-icon-circle-triangle-e">Next</span></a><div class="ui-datepicker-title"><span class="ui-datepicker-month">October</span> <span class="ui-datepicker-year">2011</span></div></div><table class="ui-datepicker-calendar"><thead><tr><th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th><th><span title="Monday">Mo</span></th><th><span title="Tuesday">Tu</span></th><th><span title="Wednesday">We</span></th><th><span title="Thursday">Th</span></th><th><span title="Friday">Fr</span></th><th class="ui-datepicker-week-end"><span title="Saturday">Sa</span></th></tr></thead><tbody><tr><td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1319646491549.datepicker._selectDay('#form1\\:val1_inline',9,2011, this);return false;"><a class="ui-state-default" href="#">1</a></td></tr><tr><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1319646491549.datepicker._selectDay('#form1\\:val1_inline',9,2011, this);return false;"><a class="ui-state-default" href="#">2</a></td><td class=" " onclick="DP_jQuery_1319646491549.datepicker._selectDay('#form1\\:val1_inline',9,2011, this);return false;"><a class="ui-state-default" href="#">3</a></td><td class=" " onclick="DP_jQuery_1319646491549.datepicker._selectDay('#form1\\:val1_inline',9,2011, this);return false;"><a class="ui-state-default" href="#">4</a></td><td class=" " onclick="DP_jQuery_1319646491549.datepicker._selectDay('#form1\\:val1_inline',9,2011, this);return false;"><a class="ui-state-default" href="#">5</a></td><td class=" " onclick="DP_jQuery_1319646491549.datepicker._selectDay('#form1\\:val1_inline',9,2011, this);return false;"><a class="ui-state-default" href="#">6</a></td><td class=" " onclick="DP_jQuery_1319646491549.datepicker._selectDay('#form1\\:val1_inline',9,2011, this);return false;"><a class="ui-state-default" href="#">7</a></td><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1319646491549.datepicker._selectDay('#form1\\:val1_inline',9,2011, this);return false;"><a class="ui-state-default" href="#">8</a></td></tr><tr><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1319646491549.datepicker._selectDay('#form1\\:val1_inline',9,2011, this);return false;"><a class="ui-state-default" href="#">9</a></td><td class=" " onclick="DP_jQuery_1319646491549.datepicker._selectDay('#form1\\:val1_inline',9,2011, this);return false;"><a class="ui-state-default" href="#">10</a></td><td class=" " onclick="DP_jQuery_1319646491549.datepicker._selectDay('#form1\\:val1_inline',9,2011, this);return false;"><a class="ui-state-default" href="#">11</a></td><td class=" " onclick="DP_jQuery_1319646491549.datepicker._selectDay('#form1\\:val1_inline',9,2011, this);return false;"><a class="ui-state-default" href="#">12</a></td><td class=" " onclick="DP_jQuery_1319646491549.datepicker._selectDay('#form1\\:val1_inline',9,2011, this);return false;"><a class="ui-state-default" href="#">13</a></td><td class=" " onclick="DP_jQuery_1319646491549.datepicker._selectDay('#form1\\:val1_inline',9,2011, this);return false;"><a class="ui-state-default" href="#">14</a></td><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1319646491549.datepicker._selectDay('#form1\\:val1_inline',9,2011, this);return false;"><a class="ui-state-default" href="#">15</a></td></tr><tr><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1319646491549.datepicker._selectDay('#form1\\:val1_inline',9,2011, this);return false;"><a class="ui-state-default" href="#">16</a></td><td class=" " onclick="DP_jQuery_1319646491549.datepicker._selectDay('#form1\\:val1_inline',9,2011, this);return false;"><a class="ui-state-default" href="#">17</a></td><td class=" " onclick="DP_jQuery_1319646491549.datepicker._selectDay('#form1\\:val1_inline',9,2011, this);return false;"><a class="ui-state-default" href="#">18</a></td><td class=" " onclick="DP_jQuery_1319646491549.datepicker._selectDay('#form1\\:val1_inline',9,2011, this);return false;"><a class="ui-state-default" href="#">19</a></td><td class=" " onclick="DP_jQuery_1319646491549.datepicker._selectDay('#form1\\:val1_inline',9,2011, this);return false;"><a class="ui-state-default" href="#">20</a></td><td class=" " onclick="DP_jQuery_1319646491549.datepicker._selectDay('#form1\\:val1_inline',9,2011, this);return false;"><a class="ui-state-default" href="#">21</a></td><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1319646491549.datepicker._selectDay('#form1\\:val1_inline',9,2011, this);return false;"><a class="ui-state-default" href="#">22</a></td></tr><tr><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1319646491549.datepicker._selectDay('#form1\\:val1_inline',9,2011, this);return false;"><a class="ui-state-default" href="#">23</a></td><td class=" " onclick="DP_jQuery_1319646491549.datepicker._selectDay('#form1\\:val1_inline',9,2011, this);return false;"><a class="ui-state-default" href="#">24</a></td><td class=" " onclick="DP_jQuery_1319646491549.datepicker._selectDay('#form1\\:val1_inline',9,2011, this);return false;"><a class="ui-state-default" href="#">25</a></td><td class=" ui-datepicker-days-cell-over ui-datepicker-current-day ui-datepicker-today" onclick="DP_jQuery_1319646491549.datepicker._selectDay('#form1\\:val1_inline',9,2011, this);return false;"><a class="ui-state-default ui-state-highlight ui-state-active" href="#">26</a></td><td class=" " onclick="DP_jQuery_1319646491549.datepicker._selectDay('#form1\\:val1_inline',9,2011, this);return false;"><a class="ui-state-default" href="#">27</a></td><td class=" " onclick="DP_jQuery_1319646491549.datepicker._selectDay('#form1\\:val1_inline',9,2011, this);return false;"><a class="ui-state-default" href="#">28</a></td><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1319646491549.datepicker._selectDay('#form1\\:val1_inline',9,2011, this);return false;"><a class="ui-state-default" href="#">29</a></td></tr><tr><td class=" ui-datepicker-week-end " onclick="DP_jQuery_1319646491549.datepicker._selectDay('#form1\\:val1_inline',9,2011, this);return false;"><a class="ui-state-default" href="#">30</a></td><td class=" " onclick="DP_jQuery_1319646491549.datepicker._selectDay('#form1\\:val1_inline',9,2011, this);return false;"><a class="ui-state-default" href="#">31</a></td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td><td class=" ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td><td class=" ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled"> </td></tr></tbody></table></div></div>
Repare no id do objeto, ficou que várias tags pegaram id form1:val1****. Você pode pegar no jquery dessa forma.
Mas pelo que entendi, vc quer mudar as classes do css, o mais prático é fazer algo assim:
<h:form id="form1"><p:calendar id="val1" styleClass="classe1"/></h:form>
O componente que o prime para calendario usa é http://jqueryui.com/demos/datepicker/, com isso vc consegue buscar melhor o que você quer fazer.
Tudo Bem…
Pode usar sim, porém eu sempre seleciono a tabela pela class dela dessa forma:
<p:dataTable var="car" value="#{tableBean.carsSmall}" styleClass="classe">
$(".classe td:odd").addClass("odd");
porém talvez tenha uma forma mais facil de fazer eu uso os componentes do tomahawk e utilizo o rowClasses dessa forma:
<t:dataTable id="TabelaReport" var="lista" style="width: 100%;" rowClasses="row1, row2" value="#{analise.tabela}">
Lembrando que se esta utilizando o primefaces nem precisa importar o jquery ele ja possui nativo como ja foi citado ele é basedo no jQuery ui…
Qualquer duvida sempre olha o html gerado no browser…
Espero ter ajudado, valew!
Abraço!
Meninos,
Obrigada pelas respostas. Ambas deram certas.
Na verdade, na verdade, eu estava ajudando o design, pois como ela não manja de prime, não estava conseguindo alterar…
MUITO obrigada mesmo!!!
Bjs!