Evento onClick SVG Executa metodo Java
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
Curtidas 0
Respostas
Carlos Eduardo
23/08/2017
O código esta em um dataTable Perdão XD.
GOSTEI 0
Carlos Eduardo
23/08/2017
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>
GOSTEI 0