jsf - Primefaces ring items are superposed on each other when placed into a tabView -
i have xhtml page have set 1 <p:tabview> containing 3 <p:tab>.
in each <p:tab> have 1 <p:ring>. this:
<p:tabview> <p:tab id="tab1"> <p:ring/> </p:tab> <p:tab id="tab2"> <p:ring/> </p:tab> <p:tab id="tab3"> <p:ring/> </p:tab> </p:tabview> the ring of first tab (tab1) displaying normally.. 2 others (rings of tab2 , tab3), the ring items displayed 1 on other. , it's when click on of items original disposition retrieved.
he screenshot of abnormal display:
and normal 1 (obtained when click on item):
is there problem in ring combined tabview or missing something?
**edit: ** here code of xhtml page (the code of 1 tab actually):
<p:tab id="tabexec" title="exécutable"> <p:growl id="displaye" showdetail="true" /> <h:form id="formdev"> <h:panelgrid columns="2"> <h:outputtext value="nom de l'exécutable: *" /> <p:inputtext value="#{developercontroller.nomlivrable}" label="nom du livrable" required="true" /> <h:outputtext value="exécutable: *" /> <h:panelgroup layout="block"> <p:fileupload fileuploadlistener="#{ftpfileupload.upload}" description="sélectionnez united nations fichier" update=":bigtabview:displaye :bigtabview:formdev:outfilenamee" style="margin-right: 20px;" required="true" label="exécutable" /> <h:outputtext id="outfilenamee" value="#{ftpfileupload.getfilename()}" /> </h:panelgroup> <h:panelgroup layout="block"> <p:commandbutton value="valider" actionlistener="#{developercontroller.storefile(developercontroller.nomlivrable)}" update=":bigtabview:displaye :bigtabview:formdevs:historiquedevsring" style="margin-right: 5px;" /> <p:commandbutton value="annuler" type="reset" /> </h:panelgroup> </h:panelgrid> </h:form> <h:form id="formdevs"> <p:ring id="historiquedevsring" value="#{developercontroller.executablelist}" var="exec"> <p:graphicimage value="#{resource['images/exe.png']}" height="100px" /> <p:commandlink value="#{exec.nomlivrable}" actionlistener="#{developercontroller.connecttoftpserver()}" oncomplete="window.open('ftp://#{exec.emplacementlivrable}'); homecoming false;" update=":bigtabview:displaye"> </p:commandlink> </p:ring> </h:form> </p:tab>
the problem resides on fact p:ring uses absolute position. in order prevent behavior (not positioning, "stacked" ring), need implement tabchange event handler follows, after adding forms:
<body> <p:tabview> <p:ajax event="tabchange" listener="#{bean.ontabchange}"/> <p:tab id="tab1"> <h:form> <p:ring value="#{bean.list}" var="st"> <p:outputlabel value="1#{st}"/> </p:ring> </h:form> </p:tab> <p:tab id="tab2"> <h:form> <p:ring value="#{bean.list}" var="st"> <p:outputlabel value="2#{st}"/> </p:ring> </h:form> </p:tab> <p:tab id="tab3"> <h:form> <p:ring value="#{bean.list}" var="st"> <p:outputlabel value="3#{st}"/> </p:ring> </h:form> </p:tab> </p:tabview> </body> in managedbean:
@managedbean(name="bean") public class beanview implements serializable { private static final long serialversionuid = 1775631010811130942l; private list<string> list; @postconstruct public void init() { list = new arraylist<string>(); list.add("a"); list.add("b"); list.add("c"); list.add("d"); list.add("e"); } public void ontabchange(tabchangeevent event){ tab selected = event.gettab(); (uicomponent comp : selected.getchildren()) if (comp instanceof htmlform) (uicomponent comp2 : comp.getchildren()) if (comp2 instanceof ring){ //first solution, primefaces update requestcontext.getcurrentinstance().update(comp2.getclientid()); //second solution, jquery click facescontext faces = facescontext.getcurrentinstance(); string separator = uinamingcontainer.getseparatorchar(faces) + ""; string usingid = comp2.getclientid().replaceall(separator, "\\\\\\\\" + separator); requestcontext.getcurrentinstance().execute("$('#" + usingid + " li').last().click();"); } } public list<string> getlist() { homecoming list; } this illustration works , rings updated on every tab change, reply based on comment op made.
this however, bring p:ring default state. example, if ring contains 5 values as:
data0 data1 data2 data3 data4 the first item displayed on ring data0. if select data3, alter tabs, reopen same tab ring within data0 displayed. prevent behavior, need implement selection managedbean (f:setpropertyactionlistener best bet).
jsf primefaces xhtml tabview
No comments:
Post a Comment