Strange behaviour of Tomahawk tree

20 views

Skip to first unread message

Gan...@j4fry.org

unread,

Feb 3, 2009, 2:56:52 AM2/3/09

to j4fry

This thread was moved from our old sourceforge forum:

Hello,

using Tomahawk with JSF 1.1, Facelets and J4Fry, I have noticed a very
strange problem:
If I load the tree -- see part of the code below - and click a link
within t:popup, everythink works correctly - the correct preview
thumbnail of the file is shown AND the correct file is opened in a
Popup (ajs greybox)

When I return to the tree (without reloading of course) and click
another item, everything seems to work correctly (correct preview file
on mouseover) but it opens the wrong file! For example, if i want to
open the third item, the second is opened, that means the file BEFORE
the one i want is opened.

When reloading the page, the whole thing starts again as described...

The problem appears in all browsers ***EXCEPT IE7***!

Would be glad if anybody knows a solution...

Thanks in advance,

Alina

*************** CODE *********************

<t:tree2 value="#{fileBrowserPageBean.treemodel}"
id="imagetree"
showRootNode="true"
binding="#{fileBrowserPageBean.htmltree}"
var="file"
showLines="false">

<f:facet name="file">
<t:popup>
<h:outputText value="#{file.name}" />
<f:facet name="popup">
<h:panelGrid columns="1">
<h:graphicImage url="#{fileBrowserPageBean.displayBase}/#{file.path}"
alt="#{file.name}" />
<t:commandLink>
<h:outputText value="View #{file.name}" />
<fry:ajax event="onclick" action="#{viewImagePageBean.loadSingleFile}"
postJSFunction="showCustomPopup('../../../faces/popup/viewimage.jsf','#
{msg.viewimage_view_image}', 700, 550);">
<t:updateActionListener value="#{file.name}" property="#
{viewImagePageBean.filename}"></t:updateActionListener>
<t:updateActionListener value="#{file.path}" property="#
{viewImagePageBean.filepath}"></t:updateActionListener>
</fry:ajax>
</t:commandLink>
<h:outputLink value="#">
<h:outputText value="Edit #{file.name}" />
<fry:ajax event="onclick" action="#{exchangeBean.initImagingTool}"
postJSFunction="window.open('../../imaging/page/
imaging.jsp','_blank');" />
</h:outputLink>
</h:panelGrid>
</f:facet>
</t:popup>
</f:facet>
</t:tree2>

RE: Strange behaviour of Tomahawk tree
By: ganesh (ganeshpuriProject Admin) - 2008-11-18 20:40
Hi Alinanila,
You are probaly running into a known issue with
t:updateActionListener. It's described in
http://sourceforge.net/tracker/index.php?func=detail&aid=1948760&group_id=165177&atid=834608.
If you provide a complete working example (including beans and config)
I'll be glad to show you how to avoid t:updateActionListener.
Regards,
Ganesh

RE: Strange behaviour of Tomahawk tree
By: Alina Nila (alinanila) - 2008-11-18 20:58
Hi Ganesh,
thanks a lot for your reply...

Unfortunately I can say that it's NOT a problem of the
t:updateActionListener. I removed them all, but the behaviour still
remains... besides, i know how to avoid them if necessary, but they're
just so comfortable... - thanks ;)

Regards, Alina

RE: Strange behaviour of Tomahawk tree
By: ganesh (ganeshpuriProject Admin) - 2008-11-19 06:43
Hi Alinanila,
Please post your complete test case without
t:updateActionListener, so I can reproduce your bug and find the fix.
Regards,
Ganesh

RE: Strange behaviour of Tomahawk tree
By: Alina Nila (alinanila) - 2008-11-19 12:43
Hi Ganesh,

here you are... if you need anything else, feel free
to ask =)
The t:updateActionListener-Workaround is getHtmlTree
().getNode(); in the Backing Bean.
The whole thing reads a filestructure, shows popups
with thumbnails correctly but does trigger the wrong node...

//
**************filebrowser.jspx*****************************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:t="http://myfaces.apache.org/tomahawk"
xmlns:fry="http://j4fry.org/jsf">

<ui:composition template="../templates/
default.jspx">
<ui:param name="title" value="Filebrowser"/>
<ui:define name="body">
<f:view locale="${sessionScope['user'].locale}">
<f:loadBundle var="msg" basename="messages" />


<h:form id="filebrowser">
<h:commandLink value="#{msg.filebrowser_reload}"
action="#{fileBrowserPageBean.refreshTree}"/>

<t:div id="treeloader" forceId="true"
styleClass="margin-vertical">
<t:tree2 value="#{fileBrowserPageBean.treemodel}"
id="imagetree"
showRootNode="true"
binding="#{fileBrowserPageBean.htmltree}"
var="file"
showLines="false"
clientSideToggle="false">

<f:facet name="root">
<t:popup>
<h:outputText value="${sessionScope
['user'].username}" />
<f:facet name="popup">
<h:panelGrid columns="1">
<t:commandLink>
<h:outputText value="Upload file" />
<fry:ajax event="onclick" action="#
{fileUploadPageBean.initFileUpload}" postJSFunction="showPopup
('../../../faces/popup/fileupload.jsf','#
{msg.fileupload_title_file}');" />
</t:commandLink>

<t:commandLink>
<h:outputText value="Create folder" />
<fry:ajax event="onclick" action="#
{fileUploadPageBean.initFolderUpload}" postJSFunction="showPopup
('../../../faces/popup/fileupload.jsf','#
{msg.fileupload_title_folder}');" />
</t:commandLink>

<t:commandLink>
<h:outputText value="View all images in root" />
<fry:ajax event="onclick" action="#
{viewImagePageBean.loadAllFiles}" postJSFunction="showCustomPopup
('../../../faces/popup/viewimage.jsf','#{msg.viewimage_view_folder}',
700, 550);"/>
</t:commandLink>
</h:panelGrid>
</f:facet>
</t:popup>
</f:facet>

<f:facet name="folder">
<t:popup>
<h:outputText value="#{file.name}" />
<f:facet name="popup">
<h:panelGrid columns="1">
<t:commandLink>
<h:outputText value="Upload file" />
<fry:ajax event="onclick" action="#
{fileUploadPageBean.initFileUpload}" postJSFunction="showPopup
('../../../faces/popup/fileupload.jsf','#
{msg.fileupload_title_file}');" />
</t:commandLink>

<t:commandLink>
<h:outputText value="Create folder" />
<fry:ajax event="onclick" action="#
{fileUploadPageBean.initFolderUpload}" postJSFunction="showPopup
('../../../faces/popup/fileupload.jsf','#
{msg.fileupload_title_folder}');" />
</t:commandLink>

<t:commandLink>
<h:outputText value="View all images of #
{file.name}" />
<fry:ajax event="onclick" action="#
{viewImagePageBean.loadAllFiles}" postJSFunction="showCustomPopup
('../../../faces/popup/viewimage.jsf','#{msg.viewimage_view_folder}',
700, 550);"/>
</t:commandLink>

<t:commandLink>
<h:outputText value="Delete #{file.name}" />
<fry:ajax event="onclick" action="#
{fileBrowserPageBean.deleteFolder}" reRender="treeloader"/>
</t:commandLink>
</h:panelGrid>
</f:facet>
</t:popup>
</f:facet>

<f:facet name="file">
<t:popup
closePopupOnExitingElement="false"
closePopupOnExitingPopup="true">
<h:outputText value="#{file.name}" />
<f:facet name="popup">
<h:panelGrid columns="1">
<h:graphicImage url="#
{fileBrowserPageBean.displayBase}/#{file.path}" alt="#{file.name}" /
>
<t:commandLink>
<h:outputText value="View #{file.name}" />
<fry:ajax event="onclick" action="#
{viewImagePageBean.loadSingleFile}" postJSFunction="showCustomPopup
('../../../faces/popup/viewimage.jsf','#{msg.viewimage_view_image}',
700, 550);"/>
</t:commandLink>
<h:outputLink value="#">
<h:outputText value="Edit #{file.name}" />
<fry:ajax event="onclick" action="#
{exchangeBean.initImagingTool}" postJSFunction="window.open('../../
imaging/page/imaging.jsp','_blank');" />
</h:outputLink>
<t:commandLink>
<h:outputText value="Delete #{file.name}" />
<fry:ajax event="onclick" action="#
{fileBrowserPageBean.deleteFile}" reRender="treeloader">
</fry:ajax>
</t:commandLink>
</h:panelGrid>
</f:facet>
</t:popup>
</f:facet>
</t:tree2>

</t:div>

<t:commandLink id="reloadfiletree" forceId="true"
value="#{msg.filebrowser_reload}" action="#
{fileBrowserPageBean.refreshTree}"/>

</h:form>


</f:view>
</ui:define>
</ui:composition>
</html>

//
**************viewimage.jspx*****************************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:t="http://myfaces.apache.org/tomahawk"
xmlns:fry="http://j4fry.org/jsf">
<ui:composition template="../templates/popup.jspx">
<ui:param name="title" value="Gallery"/>
<ui:define name="popup">

<f:view locale="${sessionScope['user'].locale}">
<f:loadBundle var="msg" basename="messages" />

<t:graphicImage value="#
{viewImagePageBean.displaypath}" alt="#{viewImagePageBean.filename}"
id="image" forceId="true"/>
<h:form>
<t:commandLink rendered="#{!empty
viewImagePageBean.images}" value="Previous">
<fry:ajax event="onclick" action="#
{viewImagePageBean.previousImage}" reRender="image" />
</t:commandLink>

<t:commandLink rendered="#{!empty
viewImagePageBean.images}" value="Next">
<fry:ajax event="onclick" action="#
{viewImagePageBean.nextImage}" reRender="image" />
</t:commandLink>
</h:form>

</f:view>

</ui:define>
</ui:composition>
</html>

//
**************default.jspx*****************************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:t="http://myfaces.apache.org/tomahawk">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>#{title}</title>
<script type="text/javascript" src="http://localhost:
8080/PRO1/assets/js/popup.js"></script>

<script type="text/javascript">
var GB_ROOT_DIR = "http://localhost:8080/PRO1/assets/
js/greybox/";
</script>
<script type="text/javascript" src="http://localhost:
8080/PRO1/assets/js/greybox/AJS.js"></script>
<script type="text/javascript" src="http://localhost:
8080/PRO1/assets/js/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="http://localhost:
8080/PRO1/assets/js/greybox/gb_scripts.js"></script>
<link href="http://localhost:8080/PRO1/assets/js/
greybox/gb_styles.css" rel="stylesheet" type="text/css" />
<link href="http://localhost:8080/PRO1/assets/css/
layout.css" rel="stylesheet" type="text/css" />
<link href="http://localhost:8080/PRO1/assets/css/
forms.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="header">
<div id="pixeline">Logo</div>
<ui:insert name="header" />
</div>


<div id="navigation">
<h:form>
<h:commandLink action="#
{loginPageBean.logout}"><h:outputText value="Logout" /></
h:commandLink>
</h:form>
</div>


<div id="content">

<div id="messages">
<h:outputText value="#{errorBean.errormessage}"
rendered="#{errorBean.errormessage != null}" styleClass="error"/>
</div>
<ui:insert name="body" />
</div>
</body>
</html>

//
**************popup.jspx*****************************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>#{title}</title>
</head>
<body>
<div>
<span style="color:#ff0000" >
<h:outputText value="#{errorBean.errormessage}"
rendered="#{errorBean.errormessage != null}" />
</span>
</div>
<p />
<ui:insert name="popup" />
</body>
</html>

//
**************popup.js*****************************************
function showPopup(view, headline){
return GB_showCenter(headline, view, 300, 400);
}

function showCustomPopup(view, headline, width,
height){
return GB_showCenter(headline, view, height,
width);
}

Thanks a lot in advance,
Alina

RE: Strange behaviour of Tomahawk tree
By: ganesh (ganeshpuriProject Admin) -
2008-11-19 20:43
Hi Alinanila,
to reproduce your bug I need to run your app.
For this I'm missing some beans, the configs and some JS that is
included by default.jspx. It would also help a lot if you could try
and reduce the bug to a small but runnable example to make debugging
faster for me.
Regards,
Ganesh

RE: Strange behaviour of Tomahawk tree
By: Alina Nila (alinanila) - 2008-11-21 16:18
you got mail =)

Best wishes, Alina

RE: Strange behaviour of Tomahawk tree
By: ganesh (ganeshpuriProject Admin) - 2008-11-22 08:51
Hi Alinanila,
Thank you for sending your application. I got it running
right away! The solution is extemely simple: As described in
http://www.j4fry.org/jsfAjax.shtml AJAX doesn't work with
h:commandLink. This is valid for t:commandLink too. You need to use
h:outputText, nest fry:ajax and style it to look like a hyperlink.
Here's a corrected version of filebrowser.jspx that works well for
me:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//
EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:t="http://myfaces.apache.org/tomahawk"
xmlns:fry="http://j4fry.org/jsf">

<ui:composition template="../templates/default.jspx">
<ui:param name="title" value="Filebrowser"/>
<ui:define name="body">

<h:form id="filebrowser">
<h:commandLink value="reload" action="#
{fileBrowserPageBean.refreshTree}"/>

<t:div id="treeloader" forceId="true" styleClass="margin-
vertical">
<t:tree2 value="#{fileBrowserPageBean.treemodel}"
id="imagetree"
showRootNode="true"
binding="#{fileBrowserPageBean.htmltree}"
var="file"
showLines="false"
clientSideToggle="false">

<f:facet name="root">
<t:popup>
<h:outputText value="root" />
<f:facet name="popup">
<h:panelGrid columns="1">
<h:outputText value="View all images in root"
style="cursor:pointer"
onmouseover="this.style.textDecoration='underline';"
onmouseout="this.style.textDecoration='none';">
<fry:ajax event="onclick" action="#
{viewImagePageBean.loadAllFiles}" postJSFunction="showCustomPopup
('../../../faces/popup/viewimage.jsf','view files of folder', 700,
550);"/>
</h:outputText>
</h:panelGrid>
</f:facet>
</t:popup>
</f:facet>

<f:facet name="folder">
<t:popup>
<h:outputText value="#{file.name}" />
<f:facet name="popup">
<h:panelGrid columns="1">
<h:outputText value="View all images of #{file.name}"
style="cursor:pointer"
onmouseover="this.style.textDecoration='underline';"
onmouseout="this.style.textDecoration='none';">
<fry:ajax event="onclick" action="#
{viewImagePageBean.loadAllFiles}" postJSFunction="showCustomPopup
('../../../faces/popup/viewimage.jsf','view files of folder', 700,
550);"/>
</h:outputText>
</h:panelGrid>
</f:facet>
</t:popup>
</f:facet>

<f:facet name="file">
<t:popup
closePopupOnExitingElement="false"
closePopupOnExitingPopup="true">
<h:outputText value="#{file.name}" />
<f:facet name="popup">
<h:panelGrid columns="1">
<h:graphicImage url="#{file.path}" alt="#{file.name}" />
<h:outputText value="View #{file.name}"
style="cursor:pointer"
onmouseover="this.style.textDecoration='underline';"
onmouseout="this.style.textDecoration='none';">
<fry:ajax event="onclick" action="#
{viewImagePageBean.loadSingleFile}" postJSFunction="showCustomPopup
('../../../faces/popup/viewimage.jsf','view image', 700, 550);"/>
</h:outputText>
</h:panelGrid>
</f:facet>
</t:popup>
</f:facet>
</t:tree2>

</t:div>

<t:commandLink id="reloadfiletree" forceId="true"
value="reload" action="#{fileBrowserPageBean.refreshTree}"/>

</h:form>

</ui:define>
</ui:composition>
</html>

Regards,
Ganesh

RE: Strange behaviour of Tomahawk tree
By: Alina Nila (alinanila) - 2008-11-22 09:52
Hi Ganesh,

thanks a lot for the immediate solution...

I've already read that commandlinks do not work with
j4fry - after i implemented my example... but i thought that this
meant that it would not work at all and the issue is old...

Anyway, I got it running now, thank you very much
again!

Greets, Alina

Reply all

Reply to author

Forward

0 new messages