How can a hyperlink in a table load an image in a new page?

Question

Hello,
I�m using Java Studion Creator 2 Update 1 an I have following problem:
In my jsp-page (main.jsp) I have a table component with an image hyperlink (showOriginal) in the first column and a hyperlink to another page in the second. On this page is also a hyperlink, which refreshes the table.
The hyperlink "showOriginal"should open an new browser window and display an image depending on the selected table row. I set the property "target" for the hyperlink to "new Window" and specified an event_method (showOriginal_action() ), which gets the image for the selected table row and returns a new jsp-page (originalView.jsp).
OriginalView.jsp has only one image component. The url for this image is set by the event_method of the image-hyperlink of main.jsp. Everything works fine but if I press the refresh link on the main.jsp to refresh the table (after opening the new window with the image), the image is also loaded in the main.jsp and every other link causes the same problem. Even when I close the window with the image, the same happens. It seems to my like I`m still on the main.jsp and not on the originalView.jsp (after I included a </redirect> tag in navigation.xml, I can see in the browser address line that the OriginalView.jsp is loaded) and the main.jsp "thinks" that the current content of itself is the image?
I changed the return value of showOriginal_action() to null (because of the target property I always get the originalView-page) and then I included an onClick-method for the imagehyperlink to open a new window with the image via javascript but this didn`t work because the onclick is performed first and at this time I don`t have the image url yet (because first I must know, which row was selected in the table).
Am I doing something wrong or is this not the correct way to do this? I just want to click the link in the table and a new window/page should be opened, which displays the image, independent from anything else. and all the links in the main-page must still work properly.
I appreciate any help & suggestions.
thanks
Message was edited by:
dan_k

Answer 1

hi,
here the code of main.jsp (with your suggestions):
<?xml version="1.0" encoding="UTF-8"?>
<jsp:root version="1.2" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:ui="http://www.sun.com/web/ui">
<jsp:directive.page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"/>
<f:view>
<ui:page binding="#{main.page1}" id="page1">
<ui:html binding="#{main.html1}" id="html1">
<ui:head binding="#{main.head1}" id="head1" title="SEWM">
<ui:link binding="#{main.link1}" id="link1" url="/resources/stylesheet.css"/>
<ui:script binding="#{main.script1}" id="script1" url="/resources/global.js"/>
</ui:head>
<ui:body binding="#{main.body1}" id="body1" style="background-color: rgb(255, 255, 255); -rave-layout: grid">
<ui:form binding="#{main.formMain}" id="formMain" target="_self">
<div id="main">
<h:panelGrid binding="#{main.header}" id="header" styleClass="abc_header_bar">
<ui:image binding="#{main.image1}" id="image1" styleClass="abc_header_logo" url="/resources/abc_logo.gif"/>
<ui:image binding="#{main.imageLine1}" id="imageLine1" styleClass="abc_header_logoLine" url="/resources/amb_leiste.gif"/>
<ui:staticText binding="#{main.staticText2}" id="staticText2" styleClass="abc_page_title" text="IWM Control"/>
</h:panelGrid>
<h:panelGrid binding="#{main.menu}" columns="1" id="menu" styleClass="abc_menu_wrapper">
<ui:image align="middle" binding="#{main.imageLeon1}" height="81" id="imageLeon1" url="/resources/leon.gif"/>
<h:panelGrid binding="#{main.gridPanel1}" id="gridPanel1" styleClass="abc_menu_box">
<ui:hyperlink action="#{main.changePssw_action}" binding="#{main.hyperlinkChangePassword}" id="hyperlinkChangePassword"
style="color:#990000" text="#{main.propertyResourceProvider1.value['changePassword']}"/>
<ui:hyperlink action="#{main.refresh_action}" binding="#{main.hyperlinkRefresh}" id="hyperlinkRefresh"
onClick="function test() {&#xa; this.formMain.target='_self';&#xa;}" style="color:#990000" text="#{main.propertyResourceProvider1.value['refresh']}"/>
<ui:hyperlink binding="#{main.customerHelp1}" id="customerHelp1" immediate="true" style="color:#990000" styleClass=""
target="_blank" text="Hilfe" url="/main.html"/>
<ui:label binding="#{main.label2}" id="label2" styleClass="abc_lbplaceholder" text="_______________________"/>
<ui:staticText binding="#{main.staticText108}" id="staticText108" styleClass="abc_tinfo" text="TEST Info" toolTip="#{SessionBean1.testSystemInfo}"/>
</h:panelGrid>
</h:panelGrid>
<h:panelGrid binding="#{main.gridPanelUserInfo1}" columns="3" id="gridPanelUserInfo1" styleClass="abc_userinfo">
<ui:staticText binding="#{main.staticText1}" id="staticText1" text="Sie sind angemeldet als "/>
<ui:staticText binding="#{main.registeredUser1}" id="registeredUser1" text="#{SessionBean1.webFacade.user.uname}"/>
<ui:hyperlink action="#{main.logout_action}" binding="#{main.logout1}" id="logout1" style="color: #ffffff" text="#{main.propertyResourceProvider1.value['logout']}"/>
</h:panelGrid>
<h:panelGrid binding="#{main.gridPanel86}" id="gridPanel86" styleClass="abc_page_content">
<ui:label binding="#{main.label3}" id="label3" text="#{main.propertyResourceProvider1.value['sysmessages']}"/>
<ui:messageGroup binding="#{main.outlineTableMessageGroup}" id="outlineTableMessageGroup" styleClass="abc_messagebox"/>
<ui:tabSet binding="#{main.tabSet1}" id="tabSet1" lite="true" mini="true" selected="tab2">
<ui:tab action="#{main.tab2_action}" binding="#{main.tab2}" id="tab2" text="#{main.propertyResourceProvider1.value['openProcesses']}">
<ui:panelLayout binding="#{main.layoutPanel2}" id="layoutPanel2">
<ui:table binding="#{main.table3}" id="table3" paginateButton="true" paginationControls="true"
styleClass="abc_main_fulltable" title="Offene Vorg�nge" width="600">
<script><![CDATA[
/* ----- Functions for Table Preferences Panel ----- */
* Toggle the table preferences panel open or closed
function togglePreferencesPanel1() {
var table = document.getElementById("form1:tabSet1:tab2:table3");
table.toggleTblePreferencesPanel();
/* ----- Functions for Filter Panel ----- */
* Return true if the filter menu has actually changed,
* so the corresponding event should be allowed to continue.
function filterMenuChanged1() {
var table = document.getElementById("form1:tabSet1:tab2:table3");
return table.filterMenuChanged();
* Toggle the custom filter panel (if any) open or closed.
function toggleFilterPanel1() {
var table = document.getElementById("form1:tabSet1:tab2:table3");
return table.toggleTableFilterPanel();
/* ----- Functions for Table Actions ----- */
* Initialize all rows of the table when the state
* of selected rows changes.
function initAllRows1() {
var table = document.getElementById("form1:tabSet1:tab2:table3");
table.initAllRows();
* Set the selected state for the given row groups
* displayed in the table. This functionality requires
* the 'selectId' of the tableColumn to be set.
* @param rowGroupId HTML element id of the tableRowGroup component
* @param selected Flag indicating whether components should be selected
function selectGroupRows1(rowGroupId, selected) {
var table = document.getElementById("form1:tabSet1:tab2:table3");
table.selectGroupRows(rowGroupId, selected);
* Disable all table actions if no rows have been selected.
function disableActions1() {
// Determine whether any rows are currently selected
var table = document.getElementById("form1:tabSet1:tab2:table3");
var disabled = (table.getAllSelectedRowsCount() > 0) ? false : true;
// Set disabled state for top actions
document.getElementById("form1:tabSet1:tab2:table3:tableActionsTop:deleteTop").setDisabled(disabled);
// Set disabled state for bottom actions
document.getElementById("form1:tabSet1:tab2:table3:tableActionsBottom:deleteBottom").setDisabled(disabled);
}]]></script>
<ui:tableRowGroup binding="#{main.tableRowGroup4}" emptyDataMsg="Keine Vorg�nge gefunden." id="tableRowGroup4"
rows="20" sourceData="#{SessionBean1.openProcesses}" sourceVar="currentRowTable">
<ui:tableColumn binding="#{main.tableColumn23}" embeddedActions="true" id="tableColumn23" noWrap="true">
<ui:panelGroup binding="#{main.groupPanel13}" id="groupPanel13">
<ui:imageHyperlink action="#{main.showOriginal_action}"
alt="#{main.propertyResourceProvider1.value['ttShowOriginals']}"
binding="#{main.imageHyperlink64}" id="imageHyperlink64"
imageURL="/resources/original_small.gif" immediate="true" target="_blank" toolTip="#{main.propertyResourceProvider1.value['ttShowOriginals']}"/>
</ui:panelGroup>
</ui:tableColumn>
<ui:tableColumn binding="#{main.tableColumn15}" headerText="Kreditor" id="tableColumn15" sort="vendorName">
<ui:hyperlink action="#{main.edit_action}" binding="#{main.hyperlink1}" id="hyperlink1" text="#{currentRowTable.value['vendorName']}"/>
</ui:tableColumn>
<ui:tableColumn binding="#{main.tableColumn17}" headerText="Rechnungsnummer" id="tableColumn17" sort="refDocNo">
<ui:staticText binding="#{main.staticText101}" id="staticText101" styleClass="abc_table_celltext" text="#{currentRowTable.value['refDocNo']}"/>
</ui:tableColumn>
<ui:tableColumn binding="#{main.tableColumn18}" headerText="Rechnungsdatum" id="tableColumn18" sort="docDate">
<ui:staticText binding="#{main.staticText102}" converter="#{main.dateTimeConverter1}" id="staticText102"
styleClass="abc_table_celltext" text="#{currentRowTable.value['docDate']}"/>
</ui:tableColumn>
<ui:tableColumn binding="#{main.tableColumn19}" headerText="F�lligkeit" id="tableColumn19" noWrap="true" sort="dueDate">
<ui:staticText binding="#{main.staticText103}" converter="#{main.dateTimeConverter1}" id="staticText103"
styleClass="abc_table_celltext" text="#{currentRowTable.value['dueDate']}"/>
</ui:tableColumn>
<ui:tableColumn binding="#{main.tableColumn21}" headerText="Zuordnung" id="tableColumn21" sort="stapleName">
<ui:staticText binding="#{main.staticText105}" id="staticText105" styleClass="abc_table_celltext" text="#{currentRowTable.value['stapleName']}"/>
</ui:tableColumn>
</ui:tableRowGroup>
<f:facet name="actionsBottom"/>
</ui:table>
</ui:panelLayout>
</ui:tab>
</ui:tabSet>
</h:panelGrid>
</div>
<div id="wait" style="visibility: hidden;">
<h:panelGrid binding="#{main.gridPanel8}" id="gridPanel8" styleClass="abc_wait_div">
<ui:label binding="#{main.label1}" id="label1" styleClass="abc_labelwait_align" text="#{main.propertyResourceProvider1.value['loaddata']}"/>
<ui:image binding="#{main.image15}" id="image15" url="/resources/loading.gif"/>
</h:panelGrid>
</div>
</ui:form>
</ui:body>
</ui:html>
</ui:page>
</f:view>
</jsp:root>
originalView.jsp:
<?xml version="1.0" encoding="UTF-8"?>
<jsp:root version="1.2" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:ui="http://www.sun.com/web/ui">
<jsp:directive.page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"/>
<f:view>
<ui:page binding="#{originalView.page1}" id="page1">
<ui:html binding="#{originalView.html1}" id="html1">
<ui:head binding="#{originalView.head1}" id="head1">
<ui:link binding="#{originalView.link1}" id="link1" url="/resources/stylesheet.css"/>
</ui:head>
<ui:body binding="#{originalView.body1}" id="body1" style="-rave-layout: grid">
<ui:form binding="#{originalView.form1}" id="form1">
<ui:image binding="#{originalView.image1}" height="#{SessionBean1.archiveObjectsFileDataProvider.value['height']}" id="image1"
style="left: 120px; top: 48px; position: absolute" url="#{SessionBean1.archiveObjectsFileDataProvider.value['url']}" width="#{SessionBean1.archiveObjectsFileDataProvider.value['width']}"/>
</ui:form>
</ui:body>
</ui:html>
</ui:page>
</f:view>
</jsp:root>
and java-methods:
public String showOriginal_action() {
getSelectedRowFromMainTable();
     setSelectedImage(); // the image url ist then available via session bean
return "originalView"; // displays the image using the url in the session bean
public String refresh_action() {
try {
getSessionBean1().getOpenProcessTable();
//hier I tried
//getHyperlinkRefresh().setTarget("_self");
//or getFormMain().setTarget("_self");
catch(Exception ex) {
error(ex.getMessage());
return null;
}