Evento onClick SVG Executa metodo Java
23/08/2017
0
Bom pessoal,
Sou novo em desenvolvimento web com java ee,
porem estou com dificuldades de chamar meu metodo java atraves do evento de Click em componente svg.
o Codigo esta dentro de um DataGrid(JSF)
codigo HTML
preciso atribuir o evento de click ao componente "<g>" e passar como parametro a face que foi clicada no caso "#{ClasseBean.metodo{item.face1}}"
IDE: Eclipse
SERVIDO: TomCat 8.5
Java: 1.8
Framework: PrimeFaces 6.1
Sou novo em desenvolvimento web com java ee,
porem estou com dificuldades de chamar meu metodo java atraves do evento de Click em componente svg.
o Codigo esta dentro de um DataGrid(JSF)
codigo HTML
<svg style="width:35px; height: 35px;" class="dente-face">
<g id="sel-regiao-faces" data-pos="#{item.idDente}" transform="translate(-7, 0)">
<g id="face1" class="face #{item.face1 eq true ? 'check':''}">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.053,12.001h14c0.446,0,0.854,0.151,1.187,0.398l3.899-3.456 c-3.008-2.766-7.292-4.508-12.062-4.508c-4.833,0-9.165,1.787-12.178,4.616l3.891,3.41C16.135,12.178,16.571,12.001,17.053,12.001 z"> </path>
</g>
<g id="face2" class="face #{item.face2 eq true ? 'check':''}">
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.136,8.939l-3.919,3.44c0.505,0.363,0.836,0.952,0.836,1.621v9 c0,0.589-0.259,1.113-0.664,1.479l3.81,3.386l0.136-0.012c2.61-2.487,4.211-5.762,4.211-9.363 C40.547,14.797,38.865,11.448,36.136,8.939z"></path>
</g>
<g id="face3" class="face #{item.face3 eq true ? 'check':''}">
<path fill-rule="evenodd" clip-rule="evenodd" d="M32.38,24.487c-0.354,0.316-0.815,0.514-1.327,0.514h-14 c-0.494,0-0.941-0.186-1.29-0.483l-3.856,3.419c3.013,2.825,7.342,4.609,12.17,4.609c4.846,0,9.189-1.797,12.203-4.64 L32.38,24.487z"></path>
</g>
<g id="face4" class="face #{item.face4 eq true ? 'check':''}">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.053,23.001v-9c0-0.647,0.312-1.216,0.788-1.581l-3.795-3.297l-0.404,0.169 c-2.507,2.466-4.036,5.677-4.036,9.198c0,3.604,1.603,6.881,4.217,9.369l0.139,0.097l3.802-3.436 C15.333,24.153,15.053,23.612,15.053,23.001z"></path>
</g>
<g id="face5" class="face #{item.face5 eq true ? 'check':''}">
<path fill-rule="evenodd" clip-rule="evenodd" d="M31.053,12.001h-14c-1.105,0-2,0.895-2,2v9c0,1.105,0.895,2,2,2h14 c1.105,0,2-0.895,2-2v-9C33.053,12.896,32.158,12.001,31.053,12.001z"></path>
</g>
</g>
</svg>
preciso atribuir o evento de click ao componente "<g>" e passar como parametro a face que foi clicada no caso "#{ClasseBean.metodo{item.face1}}"
IDE: Eclipse
SERVIDO: TomCat 8.5
Java: 1.8
Framework: PrimeFaces 6.1
Carlos Eduardo
Curtir tópico
+ 0
Responder
Posts
28/08/2017
Carlos Eduardo
A forma que eu consegui resolver foi.
...
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:jsf="http://xmlns.jcp.org/jsf">
...
<svg class="face-container">
<g id="sel-regiao-faces" transform="translate(-3.5, 0)" method="get" type="submit">
<g jsf:id="face1" class="face #{dente.face1 eq true ? ''check'':''''}">
<f:ajax event="click" render="@form" listener="#{userBean.message(''Teste'')}"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.053,12.001h14c0.446,0,0.854,0.151,1.187,0.398l3.899-3.456 c-3.008-2.766-7.292-4.508-12.062-4.508c-4.833,0-9.165,1.787-12.178,4.616l3.891,3.41C16.135,12.178,16.571,12.001,17.053,12.001 z"> </path>
</g>
<g jsf:id="face2" class="face #{dente.face2 eq true ? ''check'':''''}">
<f:ajax event="click" render="@form" listener="#{userBean.message(''Teste'')}"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M36.136,8.939l-3.919,3.44c0.505,0.363,0.836,0.952,0.836,1.621v9 c0,0.589-0.259,1.113-0.664,1.479l3.81,3.386l0.136-0.012c2.61-2.487,4.211-5.762,4.211-9.363 C40.547,14.797,38.865,11.448,36.136,8.939z"></path>
</g>
<g jsf:id="face3" class="face #{dente.face3 eq true ? ''check'':''''}">
<f:ajax event="click" render="@form" listener="#{userBean.message(''Teste'')}"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M32.38,24.487c-0.354,0.316-0.815,0.514-1.327,0.514h-14 c-0.494,0-0.941-0.186-1.29-0.483l-3.856,3.419c3.013,2.825,7.342,4.609,12.17,4.609c4.846,0,9.189-1.797,12.203-4.64 L32.38,24.487z"></path>
</g>
<g jsf:id="face4" class="face #{dente.face4 eq true ? ''check'':''''}">
<f:ajax event="click" render="@form" listener="#{userBean.message(''Teste'')}"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.053,23.001v-9c0-0.647,0.312-1.216,0.788-1.581l-3.795-3.297l-0.404,0.169 c-2.507,2.466-4.036,5.677-4.036,9.198c0,3.604,1.603,6.881,4.217,9.369l0.139,0.097l3.802-3.436 C15.333,24.153,15.053,23.612,15.053,23.001z"></path>
</g>
<g jsf:id="face5" class="face #{dente.face5 eq true ? ''check'':''''}" >
<f:ajax event="click" render="@form" listener="#{userBean.message(''Teste'')}"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M31.053,12.001h-14c-1.105,0-2,0.895-2,2v9c0,1.105,0.895,2,2,2h14 c1.105,0,2-0.895,2-2v-9C33.053,12.896,32.158,12.001,31.053,12.001z"></path>
</g>
</g>
</svg>
Responder
Clique aqui para fazer login e interagir na Comunidade :)