Zoom com popup [RESOLVIDO]

Front-end
#1

Fala pessoal…

Meu problema, é, acho eu, relativamente simples, mas não to conseguindo fazer:

Veja só, estou usando NetBeans 5.5 Com Visual WebPack, e criei toda a estrutura do programa com ele ( o Visual)…

Agora esbarrei num problema… tenho umas imagens, que estão em determinada pasta no servidor, com seu valor gauardados em uma String.
Assim:

private ImageComponent image1 = new  ImageComponent();
private String IMAGE_URL = "/resources/imagem.jpg";
private String realImageFilePath = theApplicationsServletContext.getRealPath(IMAGE_URL);

image1 = image1.setUrl(IMAGE_URL);

O que eu estou precisando agora, é simplesmente que quando o usuário clicar sobre esse componente image1, abra um popup, ou qualquer outra coisa, com a imagem ampliada. No caso, minha duvida é somente sobre como abrir o popup, ou esse outra “coisa”…

Alguma sugestão?

#2

Cheguei na seguinte solução, mas ainda estou esbarrando em dificuldades. A Lógica é a seguinte, tenho uma classe Java BuscaProduto.java, que é a classe de negócio, ela localiza a imagem no disco e exibe no BuscaProduto.jsp em tamanho pequeno, tipo uma lista de imagens.
No BuscaProduto.jsp eu coloquei um javascript no onClick da imagem que quero mostrar no popup ampliada,então quero que ao clicar, o endereço da imagem seja passado para o Javascript, e o mesmo abra uma nova janela com a imagem(popup), e é justamente aí que não to conseguindo, vejam os códigos e me ajudem por favor, lembrando que apesar de alguns conhecimentos em Java, meus conhecimentos em JSP são ZERO, só consegui fazer até aí pq o NetBeans vai criando o JSP pra gente.

Trecho do BuscaProduto.java

String IMAGE_URL = "/resources/" + prod.getReferencia() + ".jpg"; private ImageComponent image1 = new ImageComponent(); this.realImageFilePath = theApplicationsServletContext.getRealPath(IMAGE_URL); image1.setUrl(IMAGE_URL);

BuscaPruduto.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="#{BuscaProduto.page1}" id="page1">
            <ui:html binding="#{BuscaProduto.html1}" id="html1">
                <ui:head binding="#{BuscaProduto.head1}" id="head1" title="Grupo LN - Busca Produto">
                    <ui:link binding="#{BuscaProduto.link1}" id="link1" url="/resources/stylesheet.css"/>
                </ui:head>
                <ui:body binding="#{BuscaProduto.body1}" id="body1" style="background-color: rgb(255, 236, 255); -rave-layout: grid">
                    <ui:form binding="#{BuscaProduto.form1}" id="form1">
                        <ui:label binding="#{BuscaProduto.label7}" id="label7" style="height: 24px; left: 0px; top: 1416px; position: absolute; width: 48px" text="Rótulo"/>
                        <ui:panelLayout binding="#{BuscaProduto.grpProduto}" id="grpProduto" style="border-style: outset; background-color: rgb(41, 28, 90); height: 286px; left: 220px; top: 10px; position: absolute; width: 786px; -rave-layout: grid">
                            <ui:label binding="#{BuscaProduto.label1}" id="label1"
                                style="color: rgb(255, 255, 255); height: 21px; left: 0px; top: 0px; position: absolute; text-align: right; width: 93px" text="Código:"/>
                            <ui:staticText binding="#{BuscaProduto.edCod}" id="edCod" style="color: rgb(255, 255, 255); height: 21px; left: 120px; top: 0px; position: absolute; width: 96px"/>
                            <ui:label binding="#{BuscaProduto.label2}" id="label2"
                                style="color: rgb(255, 255, 255); height: 21px; left: 0px; top: 24px; position: absolute; text-align: right; width: 93px" text="Descrição:"/>
                            <ui:staticText binding="#{BuscaProduto.edDesc}" id="edDesc" style="color: rgb(255, 255, 255); height: 21px; left: 120px; top: 24px; position: absolute; width: 307px"/>
                            <ui:label binding="#{BuscaProduto.label3}" id="label3"
                                style="color: rgb(255, 255, 255); height: 21px; left: 0px; top: 48px; position: absolute; text-align: right; width: 93px" text="Tamanho:"/>
                            <ui:staticText binding="#{BuscaProduto.edTam}" id="edTam" style="color: rgb(255, 255, 255); height: 21px; left: 120px; top: 48px; position: absolute; width: 96px"/>
                            <ui:label binding="#{BuscaProduto.label4}" id="label4"
                                style="color: rgb(255, 255, 255); height: 21px; left: 0px; top: 72px; position: absolute; text-align: right; width: 93px" text="Observações:"/>
                            <ui:textArea binding="#{BuscaProduto.txtObs}" id="txtObs" readOnly="true" rows="5" style="color: white; height: 114px; left: 120px; top: 72px; position: absolute; width: 309px"/>
                            <ui:label binding="#{BuscaProduto.label5}" id="label5"
                                style="color: rgb(255, 255, 255); height: 21px; left: 0px; top: 192px; position: absolute; text-align: right; width: 93px" text="Valor Unitário:"/>
                            <ui:staticText binding="#{BuscaProduto.edValor}" id="edValor" style="color: rgb(255, 255, 255); height: 21px; left: 120px; top: 192px; position: absolute; width: 96px"/>
                            <ui:label binding="#{BuscaProduto.label6}" id="label6"
                                style="color: rgb(255, 255, 255); height: 21px; left: 0px; top: 240px; position: absolute; text-align: right; width: 93px" text="Quantidade:"/>
                            <ui:textField binding="#{BuscaProduto.edQtd}" id="edQtd" style="height: 19px; left: 120px; top: 240px; position: absolute; width: 96px"/>
                            <ui:image align="middle" binding="#{BuscaProduto.image1}" border="2" height="236" id="image1"
                                onClick="window.open(&quot;FrmExibir.jsp?param1=cod_item&quot;,&quot;&quot;,&quot;dialogWidth:500px;dialogHeight:500px&quot;)"
                                style="border-width: 2px; border-style: groove; left: 460px; top: 20px; position: absolute" url="/resources/images/Logo640.JPG"/>
                            <ui:button binding="#{BuscaProduto.button5}" id="button5"
                                style="height: 24px; left: 240px; top: 240px; position: absolute; width: 164px" text="Adcionar ao Pedido"/>
                        </ui:panelLayout>
                        <ui:panelLayout binding="#{BuscaProduto.grpProduto1}" id="grpProduto1" style="border-style: outset; background-color: rgb(41, 28, 90); height: 287px; left: 220px; top: 310px; position: absolute; width: 786px; -rave-layout: grid">
                            <ui:label binding="#{BuscaProduto.label8}" id="label8"
                                style="color: rgb(255, 255, 255); height: 21px; left: 0px; top: 0px; position: absolute; text-align: right; width: 93px" text="Código:"/>
                            <ui:staticText binding="#{BuscaProduto.edCod1}" id="edCod1" style="color: rgb(255, 255, 255); height: 21px; left: 120px; top: 0px; position: absolute; width: 96px"/>
                            <ui:label binding="#{BuscaProduto.label9}" id="label9"
                                style="color: rgb(255, 255, 255); height: 21px; left: 0px; top: 24px; position: absolute; text-align: right; width: 93px" text="Descrição:"/>
                            <ui:staticText binding="#{BuscaProduto.edDesc1}" id="edDesc1" style="color: rgb(255, 255, 255); height: 21px; left: 120px; top: 24px; position: absolute; width: 307px"/>
                            <ui:label binding="#{BuscaProduto.label10}" id="label10"
                                style="color: rgb(255, 255, 255); height: 21px; left: 0px; top: 48px; position: absolute; text-align: right; width: 93px" text="Tamanho:"/>
                            <ui:staticText binding="#{BuscaProduto.edTam1}" id="edTam1" style="color: rgb(255, 255, 255); height: 21px; left: 120px; top: 48px; position: absolute; width: 96px"/>
                            <ui:label binding="#{BuscaProduto.label11}" id="label11"
                                style="color: rgb(255, 255, 255); height: 21px; left: 0px; top: 72px; position: absolute; text-align: right; width: 93px" text="Observações:"/>
                            <ui:textArea binding="#{BuscaProduto.txtObs1}" id="txtObs1" readOnly="true" rows="5" style="color: white; height: 114px; left: 120px; top: 72px; position: absolute; width: 309px"/>
                            <ui:label binding="#{BuscaProduto.label12}" id="label12"
                                style="color: rgb(255, 255, 255); height: 21px; left: 0px; top: 192px; position: absolute; text-align: right; width: 93px" text="Valor Unitário:"/>
                            <ui:staticText binding="#{BuscaProduto.edValor1}" id="edValor1" style="color: rgb(255, 255, 255); height: 21px; left: 120px; top: 192px; position: absolute; width: 96px"/>
                            <ui:label binding="#{BuscaProduto.label13}" id="label13"
                                style="color: rgb(255, 255, 255); height: 21px; left: 0px; top: 240px; position: absolute; text-align: right; width: 93px" text="Quantidade:"/>
                            <ui:textField binding="#{BuscaProduto.edQtd1}" id="edQtd1" style="height: 19px; left: 120px; top: 240px; position: absolute; width: 96px"/>
                            <ui:image align="middle" binding="#{BuscaProduto.image2}" border="2" height="236" id="image2"
                                style="border-width: 2px; border-style: groove; left: 460px; top: 20px; position: absolute" url="/resources/images/Logo640.JPG"/>
                            <ui:button binding="#{BuscaProduto.button6}" id="button6"
                                style="height: 24px; left: 240px; top: 240px; position: absolute; width: 164px" text="Adcionar ao Pedido"/>
                        </ui:panelLayout>
                        <ui:panelLayout binding="#{BuscaProduto.layoutPanel3}" id="layoutPanel3" panelLayout="flow" style="border-style: ridge; border-color: white; background-color: rgb(41, 28, 90); height: 58px; left: 0px; top: 10px; position: absolute; width: 200px; -rave-layout: grid">
                            <ui:staticText binding="#{BuscaProduto.staticText1}" id="staticText1"
                                style="border-style: groove; color: rgb(255, 255, 255); left: 0px; top: 24px; position: absolute; width: 190px" text="VISITANTE"/>
                            <ui:label binding="#{BuscaProduto.label15}" id="label15"
                                style="background-color: rgb(0, 0, 255); color: white; height: 18px; left: 0px; top: 0px; position: absolute; text-align: center; width: 192px" text="Usuário"/>
                        </ui:panelLayout>
                        <ui:panelLayout binding="#{BuscaProduto.grpProduto2}" id="grpProduto2" style="border-style: outset; background-color: rgb(41, 28, 90); height: 287px; left: 220px; top: 610px; position: absolute; width: 786px; -rave-layout: grid">
                            <ui:label binding="#{BuscaProduto.label17}" id="label17"
                                style="color: rgb(255, 255, 255); height: 21px; left: 0px; top: 0px; position: absolute; text-align: right; width: 93px" text="Código:"/>
                            <ui:staticText binding="#{BuscaProduto.edCod2}" id="edCod2" style="color: rgb(255, 255, 255); height: 21px; left: 120px; top: 0px; position: absolute; width: 96px"/>
                            <ui:label binding="#{BuscaProduto.label18}" id="label18"
                                style="color: rgb(255, 255, 255); height: 21px; left: 0px; top: 24px; position: absolute; text-align: right; width: 93px" text="Descrição:"/>
                            <ui:staticText binding="#{BuscaProduto.edDesc2}" id="edDesc2" style="color: rgb(255, 255, 255); height: 21px; left: 120px; top: 24px; position: absolute; width: 307px"/>
                            <ui:label binding="#{BuscaProduto.label19}" id="label19"
                                style="color: rgb(255, 255, 255); height: 21px; left: 0px; top: 48px; position: absolute; text-align: right; width: 93px" text="Tamanho:"/>
                            <ui:staticText binding="#{BuscaProduto.edTam2}" id="edTam2" style="color: rgb(255, 255, 255); height: 21px; left: 120px; top: 48px; position: absolute; width: 96px"/>
                            <ui:label binding="#{BuscaProduto.label20}" id="label20"
                                style="color: rgb(255, 255, 255); height: 21px; left: 0px; top: 72px; position: absolute; text-align: right; width: 93px" text="Observações:"/>
                            <ui:textArea binding="#{BuscaProduto.txtObs2}" id="txtObs2" readOnly="true" rows="5" style="color: white; height: 114px; left: 120px; top: 72px; position: absolute; width: 309px"/>
                            <ui:label binding="#{BuscaProduto.label21}" id="label21"
                                style="color: rgb(255, 255, 255); height: 21px; left: 0px; top: 192px; position: absolute; text-align: right; width: 93px" text="Valor Unitário:"/>
                            <ui:staticText binding="#{BuscaProduto.edValor2}" id="edValor2" style="color: rgb(255, 255, 255); height: 21px; left: 120px; top: 192px; position: absolute; width: 96px"/>
                            <ui:label binding="#{BuscaProduto.label22}" id="label22"
                                style="color: rgb(255, 255, 255); height: 21px; left: 0px; top: 240px; position: absolute; text-align: right; width: 93px" text="Quantidade:"/>
                            <ui:textField binding="#{BuscaProduto.edQtd2}" id="edQtd2" style="height: 19px; left: 120px; top: 240px; position: absolute; width: 96px"/>
                            <ui:image binding="#{BuscaProduto.image3}" height="236" id="image3"
                                style="border-width: 2px; border-style: groove; left: 460px; top: 20px; position: absolute" url="/resources/images/Logo640.JPG"/>
                            <ui:button binding="#{BuscaProduto.button1}" id="button1"
                                style="height: 24px; left: 240px; top: 240px; position: absolute; width: 164px" text="Adcionar ao Pedido"/>
                        </ui:panelLayout>
                        <ui:panelLayout binding="#{BuscaProduto.grpProduto3}" id="grpProduto3" style="border-style: outset; background-color: rgb(41, 28, 90); height: 287px; left: 220px; top: 910px; position: absolute; width: 786px; -rave-layout: grid">
                            <ui:label binding="#{BuscaProduto.label23}" id="label23"
                                style="color: rgb(255, 255, 255); height: 21px; left: 0px; top: 0px; position: absolute; text-align: right; width: 93px" text="Código:"/>
                            <ui:staticText binding="#{BuscaProduto.edCod3}" id="edCod3" style="color: rgb(255, 255, 255); height: 21px; left: 120px; top: 0px; position: absolute; width: 96px"/>
                            <ui:label binding="#{BuscaProduto.label24}" id="label24"
                                style="color: rgb(255, 255, 255); height: 21px; left: 0px; top: 24px; position: absolute; text-align: right; width: 93px" text="Descrição:"/>
                            <ui:staticText binding="#{BuscaProduto.edDesc3}" id="edDesc3" style="color: rgb(255, 255, 255); height: 21px; left: 120px; top: 24px; position: absolute; width: 307px"/>
                            <ui:label binding="#{BuscaProduto.label25}" id="label25"
                                style="color: rgb(255, 255, 255); height: 21px; left: 0px; top: 48px; position: absolute; text-align: right; width: 93px" text="Tamanho:"/>
                            <ui:staticText binding="#{BuscaProduto.edTam3}" id="edTam3" style="color: rgb(255, 255, 255); height: 21px; left: 120px; top: 48px; position: absolute; width: 96px"/>
                            <ui:label binding="#{BuscaProduto.label26}" id="label26"
                                style="color: rgb(255, 255, 255); height: 21px; left: 0px; top: 72px; position: absolute; text-align: right; width: 93px" text="Observações:"/>
                            <ui:textArea binding="#{BuscaProduto.txtObs3}" id="txtObs3" readOnly="true" rows="5" style="color: white; height: 114px; left: 120px; top: 72px; position: absolute; width: 309px"/>
                            <ui:label binding="#{BuscaProduto.label27}" id="label27"
                                style="color: rgb(255, 255, 255); height: 21px; left: 0px; top: 192px; position: absolute; text-align: right; width: 93px" text="Valor Unitário:"/>
                            <ui:staticText binding="#{BuscaProduto.edValor3}" id="edValor3" style="color: rgb(255, 255, 255); height: 21px; left: 120px; top: 192px; position: absolute; width: 96px"/>
                            <ui:label binding="#{BuscaProduto.label28}" id="label28"
                                style="color: rgb(255, 255, 255); height: 21px; left: 0px; top: 240px; position: absolute; text-align: right; width: 93px" text="Quantidade:"/>
                            <ui:textField binding="#{BuscaProduto.edQtd3}" id="edQtd3" style="height: 19px; left: 120px; top: 240px; position: absolute; width: 96px"/>
                            <ui:image binding="#{BuscaProduto.image4}" height="236" id="image4"
                                style="border-width: 2px; border-style: groove; left: 460px; top: 20px; position: absolute" url="/resources/images/Logo640.JPG"/>
                            <ui:button binding="#{BuscaProduto.button2}" id="button2"
                                style="height: 24px; left: 240px; top: 240px; position: absolute; width: 164px" text="Adcionar ao Pedido"/>
                        </ui:panelLayout>
                        <ui:panelLayout binding="#{BuscaProduto.pnNavegacao}" id="pnNavegacao" panelLayout="flow" style="border-style: ridge; border-color: white; background-color: rgb(41, 28, 90); height: 330px; left: 0px; top: 80px; position: absolute; width: 200px; -rave-layout: grid">
                            <ui:button binding="#{BuscaProduto.btnPrim}" id="btnPrim"
                                style="left: 10px; top: 298px; position: absolute; text-align: center; width: 40px" text="&lt;&lt;"/>
                            <ui:button action="#{BuscaProduto.btnAnt_action}" binding="#{BuscaProduto.btnAnt}" id="btnAnt"
                                style="left: 50px; top: 298px; position: absolute; text-align: center; width: 30px" text="&lt;"/>
                            <ui:button binding="#{BuscaProduto.btnUlt}" id="btnUlt"
                                style="left: 120px; top: 298px; position: absolute; text-align: center; width: 46px" text="&gt;&gt;"/>
                            <ui:button action="#{BuscaProduto.btnProx_action}" binding="#{BuscaProduto.btnProx}" id="btnProx"
                                style="left: 90px; top: 298px; position: absolute; text-align: center; width: 30px" text="&gt;"/>
                            <ui:label binding="#{BuscaProduto.label14}" id="label14"
                                style="background-color: rgb(0, 0, 255); color: white; height: 19px; left: 0px; top: 0px; position: absolute; text-align: center; width: 192px" text="Navegação"/>
                            <ui:textField binding="#{BuscaProduto.edPag}" disabled="true" id="edPag" style="height: 24px; left: 75px; top: 262px; position: absolute; width: 101px"/>
                            <ui:label binding="#{BuscaProduto.label30}" id="label30"
                                style="color: white; height: 24px; left: 11px; top: 262px; position: absolute; width: 43px" text="Página"/>
                            <ui:dropDown binding="#{BuscaProduto.cmbLoja}" id="cmbLoja" items="#{BuscaProduto.cmbLojaDefaultOptions.options}" style="height: 24px; left: 6px; top: 55px; position: absolute; width: 180px"/>
                            <ui:dropDown binding="#{BuscaProduto.cmbTipo}" id="cmbTipo" items="#{BuscaProduto.cmbTipoDefaultOptions.options}" style="height: 24px; left: 6px; top: 103px; position: absolute; width: 180px"/>
                            <ui:label binding="#{BuscaProduto.label31}" id="label31"
                                style="color: white; height: 16px; left: 6px; top: 38px; position: absolute; width: 169px" text="Adulto / Infantil"/>
                            <ui:label binding="#{BuscaProduto.label32}" id="label32"
                                style="color: white; height: 16px; left: 6px; top: 88px; position: absolute; width: 72px" text="Tipo"/>
                            <ui:button action="#{BuscaProduto.button8_action}" binding="#{BuscaProduto.button8}" id="button8"
                                style="height: 24px; left: 6px; top: 147px; position: absolute; width: 180px" text="Pesquisar"/>
                        </ui:panelLayout>
                        <ui:panelLayout binding="#{BuscaProduto.layoutPanel7}" id="layoutPanel7" style="border-style: ridge; background-color: rgb(41, 28, 90); height: 400px; left: 0px; top: 430px; position: absolute; width: 202px; -rave-layout: grid">
                            <ui:label binding="#{BuscaProduto.label29}" id="label29"
                                style="color: white; height: 24px; left: 24px; top: 264px; position: absolute; width: 48px" text="Total:"/>
                            <ui:textField binding="#{BuscaProduto.edTotal}" disabled="true" id="edTotal" style="position: absolute; left: 96px; top: 264px; width: 96px; height: 24px"/>
                            <ui:button binding="#{BuscaProduto.button3}" id="button3"
                                style="height: 24px; left: 23px; top: 360px; position: absolute; width: 69px" text="Fechar"/>
                            <ui:button binding="#{BuscaProduto.button4}" id="button4"
                                style="height: 24px; left: 119px; top: 360px; position: absolute; width: 72px" text="Cancelar"/>
                            <ui:listbox binding="#{BuscaProduto.listbox1}" id="listbox1" items="#{BuscaProduto.listbox1DefaultOptions.options}" style="height: 216px; left: 15px; top: 24px; position: absolute; width: 180px"/>
                            <ui:button binding="#{BuscaProduto.button7}" id="button7"
                                style="position: absolute; left: 24px; top: 312px; width: 168px; height: 24px" text="Excluir"/>
                            <ui:label binding="#{BuscaProduto.label16}" id="label16"
                                style="background-color: rgb(0, 0, 255); color: white; height: 19px; left: 0px; top: 0px; position: absolute; text-align: center; width: 192px" text="Pedido"/>
                        </ui:panelLayout>
                        <ui:messageGroup binding="#{BuscaProduto.messageGroup1}" id="messageGroup1" style="height: 156px; left: 10px; top: 850px; position: absolute; width: 182px"/>
                    </ui:form>
                </ui:body>
            </ui:html>
        </ui:page>
    </f:view>
</jsp:root>

FrmExibir.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="#{FrmExibir.page1}" id="page1">
            <ui:html binding="#{FrmExibir.html1}" id="html1">
                <ui:head binding="#{FrmExibir.head1}" id="head1">
                    <ui:link binding="#{FrmExibir.link1}" id="link1" url="/resources/stylesheet.css"/>
                </ui:head>
                <ui:body binding="#{FrmExibir.body1}" id="body1" style="-rave-layout: grid">
                    <ui:form binding="#{FrmExibir.form1}" id="form1">
                        <ui:image binding="#{FrmExibir.image1}" id="image1" style="position: absolute; left: 30px; top: 20px" width="400"/>
                    </ui:form>
                </ui:body>
            </ui:html>
        </ui:page>
    </f:view>
</jsp:root>

Trecho javascript no onclick da imagem

window.open("FrmExibir.jsp?param1=IMAGE_URL ","","dialogWidth:500px;dialogHeight:500px")

Acho que é justamente nesse última linha que postei que tá errado, ou seja, na passagem de parâmetros, que nem imagino como se faça…

Obrigado pela atençao!!!

#3

Seguinte…

1º -
no onclick da figura:

window.open("FrmExibir.jsp?param1=" + this.src + ,"","dialogWidth:500px;dialogHeight:500px")

Depois, o FrmExibir.jsp

[code]<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8”%>

" style="position: absolute; left: 30px; top: 20px" width="400" />[/code]

E voilá, resolvido o problema… Solução conseguida no Javafree.org

#4