Skip to main content

hipervinculos en una tabla

PASO A:

Descripción:

Se creara una pagina que contenga todos los registros de usuarios mostrándolos en un table, se mostrara la foto de cada propiedad, el usuario al dar clic sobre la foto le mostrara una pagina con el detalle.



PASO B:

Descripción:

Pagina que muestra los detalles de esa propiedad, muestra las fotos, utiliza el evento onMouseOver para que cada vez que se pase el cursor sobre una foto esta se amplie en la misma pagina, ademas al dar clic sobre la foto ampliada , la muestra sola un otra pagina, también incorpora la opción de imprimir a un amigo. Se usara java scritp.



PASO C:

Descripción:

Muestra la foto ampliada.

PASO A:

Descripción:

Se creara una pagina que contenga todos los registros de usuarios mostrándolos en un table, se mostrara la foto de cada propiedad, el usuario al dar clic sobre la foto le mostrara una pagina con el detalle.

Asumimos que tenemos un table en un un formulario jsp, le damos click derecho, y seleccionamos Diseño de tabla -> en la opción de columnas damos clics en nuevo para añadir una nueva columna le quitamos el Texto de encabezado, escogemos tipo de componente Hipervinculo de imagen,y le asociamos con el campo de la tabla que contenga el url de la foto. Cerramos el diseño de tabla.

En el diseñador de jsc2, seleccionamos jsp, buscamos la linea

observamos que el establece el sourceVar como currentRow, este componente nos permite desplazarnos por los registros de la tabla. Asumimos que nuestra tabla se llama propiedades y tenemos un campo llamado foto1, que contiene el url de las fotos, necesitamos añadir al componente. Debemos cambiar el código que genera en el JSP para que el muestre la foto del registro actual, de otro modo repetiría la primera.

imageURL="#{currentRow.value['propiedades.foto1']}"

Ejemplo del código completo.

binding="#{Page1_1.imageHyperlink2}" height="80"

id="imageHyperlink2" imageURL="#{currentRow.value['propiedades.foto1']}"

text="" width="96"/>



Ahora tenemos que añadir el comportamiento, nos vamos al diseñador visual y damos doble click sobre el Hipervinculo de imagen.



PASO D:

Descripción:

Imprimir a un amigo.

PASO A:

Descripción:

Se creara una pagina que contenga todos los registros de usuarios mostrándolos en un table, se mostrara la foto de cada propiedad, el usuario al dar clic sobre la foto le mostrara una pagina con el detalle.

Asumimos que tenemos un table en un un formulario jsp, le damos click derecho, y seleccionamos Diseño de tabla -> en la opción de columnas damos clics en nuevo para añadir una nueva columna le quitamos el Texto de encabezado, escogemos tipo de componente Hipervinculo de imagen,y le asociamos con el campo de la tabla que contenga el url de la foto. Cerramos el diseño de tabla.

En el diseñador de jsc2, seleccionamos jsp, buscamos la linea

observamos que el establece el sourceVar como currentRow, este componente nos permite desplazarnos por los registros de la tabla. Asumimos que nuestra tabla se llama propiedades y tenemos un campo llamado foto1, que contiene el url de las fotos, necesitamos añadir al componente. Debemos cambiar el código que genera en el JSP para que el muestre la foto del registro actual, de otro modo repetiría la primera.

imageURL="#{currentRow.value['propiedades.foto1']}"

Ejemplo del código completo.

binding="#{Page1_1.imageHyperlink2}" height="80"

id="imageHyperlink2" imageURL="#{currentRow.value['propiedades.foto1']}"

text="" width="96"/>



Ahora tenemos que añadir el comportamiento, nos vamos al diseñador visual y damos doble click sobre el Hipervinculo de imagen.

Y obtenemos el campo índice de la fila actual , lo guardamos en el bean de sesión, y retornamos el valor que usamos en las paginas de navegación para ir a la pagina de detalle.

public String imageHyperlink2_action() {

// TODO: Reemplazar con código del usuario

RowKey rowKey = tableRowGroup1.getRowKey();

String idPropiedad = (String) propiedadesDataProvider.getValue("propiedades.idpropiedad", rowKey);

getSessionBean1().setIdPropiedad(idPropiedad);

return "propiedades";

}

Si no ha creado la propiedad en el bean de sesion debe hacerlo de esta manera, dar clic derecho en bean de sesion.



PASO B:

Descripción:

Pagina que muestra los detalles de esa propiedad, muestra las fotos, utiliza el evento onMouseOver para que cada vez que se pase el cursor sobre una foto esta se amplie en la misma pagina, ademas al dar clic sobre la foto ampliada , la muestra sola un otra pagina, también incorpora la opción de imprimir a un amigo. Se usara java script.



Hacemos un diseño básico que contendrá el nombre de la propiedad, el precio, un Hipervinculo de regresar, un Hipervinculo para imprimir a un amigo, cuatro imágenes pequeñas (usamos Hipervinculo de imágenes), una ampliada(hipervinculo de imagen, llamada image1).

Agregamos la tabla a la pagina, para esto nos vamos desde el servidor, buscamos nuestra base de datos, seleccionamos la tabla y le damos Agregar a la pagina, con esto podemos ligar nuestros componentes con los registros de la tabla. (Si no sabe como agregar la conexión de la base de datos consulte el tutorial sobre Agregar orígenes de Datos).

Añadimos los componentes desde la paleta de diseño, nos colocamos en cada componente y le damos clic derecho, seleccionamos Enlazar con datos. Luego escogemos el campo de la tabla que deseamos que se realice la liga.



Comments

Popular posts from this blog

Apache NetBeans

Apache NetBeans
https://wiki.apache.org/incubator/NetBeansProposal

Si, algo que se esperaba desde hace muchos años, una liberación de NetBeans, para convertirlo en un IDE más abierto, y que permita mayor contribución de la comunidad y de otras empresas, ya inicio su primera etapa en la incubadora de la Fundación Apache.
Las implicaciones que esto conlleva son múltiples por una parte esta la evolución de NetBeans, al permitir que más contribuyentes puedan aportar a sus mejoras, también garantiza que aquellas instituciones no sientan que es una sola organización la que controla la evolución. A las comunidades les permite sentirse que participan de un proyecto con todas las garantías que ofrece la Fundación Apache.

Muchos pensaran que Oracle esta dejando morir el proyecto, la realidad es diferente, hay muchos ingenieros que están participando del proyecto en la fundación Apache.
Es una noticia excelente para los desarrolladores, instituciones, empresas que utilizan NetBeans , se estima qu…

Un ejemplo sencillo de Refactorización y Genericos

Un ejemplo sencillo de Refactorización y Genericos

public class Refactorizador<K, V> {

    public V copyFromBeans(K k, V v) {
        try {
            Class claseK = k.getClass();
            Class claseV = v.getClass();

            Method[] metodosK = claseK.getMethods();

            for (Method method : metodosK) {
                if (isGetter(method)) {
                    Method metodoGetK = claseK.getDeclaredMethod(method.getName());
                    Method metodoSetV = claseV.getDeclaredMethod(changeGetBySet(method.getName()), method.getReturnType());
                    metodoSetV.invoke(v, metodoGetK.invoke(k));
                }

            }

        } catch (Exception e) {
            System.out.println("refactorizador() " + e.getLocalizedMessage());
        }
        return v;
    }

     public  boolean isGetter(Method method) {

        if (!method.getName().startsWith("get")) {
            return false;
        }
        if (method.getName().startsWith("getCla…

FileUpload con Primefaces

FileUpload con Primefaces

Si queremos subir imagenes a nuestra aplicación usaremos el componente FileUpload Debemos realizar los siguientes pasos:
Agregar al archivo web.xml

   <filter>        <filter-name>PrimeFaces FileUpload Filter</filter-name>        <filter-class>            org.primefaces.webapp.filter.FileUploadFilter        </filter-class>    </filter>    <filter-mapping>        <filter-name>PrimeFaces FileUpload Filter</filter-name>        <servlet-name>Faces Servlet</servlet-name>    </filter-mapping>



Crear dentro de resources el directorio donde deseamos almacenar las imagenes En este ejemplo: resources/fotos/clinicas y agregue una imagen llamada fotos.png que se usará como imagen inicial.



En JSFUtil u otro @Named Beans que usemos agregamos tres métodos uno para obtener el path de la aplicación web , otro para obtener el path relativo a /fotos/clinicas y el otro para copiar los archivos. /*