VW JSF :: Visualizar componente Button correctamente con IE7

Registrar a un usuario en un sitio Web con Visual Web JSF
Paso 3: Operativa

Vista - RegistroUsuario.jsp - Renderizar componente Button correctamente con IE7

Cuando ejecutamos la aplicación Web con el navegador IE7 ( Internet Explorer Versión 7) vemos que la renderización del componente Button no es correcta. El botón es demasiado ancho.

IE7 - Renderización del componente Button no correcta

Este es el extracto de la página JSP RegistroUsuario.jsp donde se declara el componente Button

     <webuijsf:form id="form1">
      <webuijsf:button id="btnEnviar"
                      style="position: absolute; left: 96px; top: 168px"                       text="#{mensajes.literal_enviar}"
      />
     </webuijsf:form>

style="position: absolute; left: 96px; top: 168px"
- el navegador IE7 tiene problemas al mostrar el botón porque no encuentra la propiedad width en el atributo style del componente

En esta imagen podemos ver que el botón se muestra correctamente con IE7.

IE7 - Renderización del componente Button correcta

Este problema se puede solventar de dos formas distintas.

1. Añadir la propiedad width al atributo style

La propiedad width del atributo style del componente Button se puede crear automáticamente seleccioanando el botón en cuestión con el botón derecho del raton y seguidamente arrastrando hacia la derecha para hacer que el botón sea un poco más ancho.

NetBeans 6 - Añadir propiedad width al atributo style.

Este es el extracto de la página JSP RegistroUsuario.jsp después de haber realizado esta operación

     <webuijsf:form id="form1">
      <webuijsf:button id="btnEnviar"
                      style="position: absolute; left: 96px; top: 168px; width: 72px"                       text="#{mensajes.literal_enviar}"
      />
     </webuijsf:form>

También podemos cambiar el estilo del componente Button haciendo clic sobre el botón con puntos supensivos que se encuentra a la derecha de la propiedad style de este componente.

En el cuadro de diálogo btnEnviar - style seleccionamos Position y le damos el valor 72 al campo de texto Witdh.

NetBeans 6 - Añadir propiedad width al atributo style - style | Position | width:72

Para salir de este cuadro de diálogo hacemos clic sobre el botón

2. Insertar un componente Button dentro de un Componente Group Panel

Para realizar esta segunda forma, primeramente vamos a eliminar el botón del lienzo.

Entonces arrastramos un componente Group Panel al lienzo.

NetBeans 6 - Agregar componente PanelGroup al lienzo - Palette | Woodstock Basic | Group Panel

Y seguidamente arrastramos un componente Button dentro del Group Panel.

NetBeans 6 - Insertar un componente Button dentro de un Componente Group Panel

Para que el texto del componente siga trabajando con internacionalización (I18N), en la propiedad Text de la ventana Properties del componente Button, escribimos el valor de expresión (value expresssion) #{mensajes.literal_enviar} tal y como hicimos en el apartado Utilizar expresiones de valor (value expressions) para traducir las llaves del Resource Bundle.

Este es el aspecto del lienzo y las propiedades del IDE NetBeans.

NetBeans 6 - Insertar un componente Button dentro de un Componente Group Panel - Properties

Y este es el extracto de la página JSP RegistroUsuario.jsp después de haber realizado estos últimos cambios.

     <webuijsf:form id="form1">
      <webuijsf:panelGroup id="pnlgEnviar"
                           style="left: 240px; top: 168px; position: absolute">
       <webuijsf:button id="btnEnviar" text="#{mensajes.literal_enviar}"/>
      </webuijsf:panelGroup>
     </webuijsf:form>

Nota: Si se está creando un sitio Web con internacionalización (I18N), es recomendable utilizar la segunda forma porque el botón se agranda dinámicamente si el texto traducido del botón tiene más caracteres que el texto por defecto que se utilizó en el proceso de desarrollo.

Ignasi Pérez Valls
Infosintesis Solutions Group

Junio 2009

Fundamentos Spring

JavaDabbaDoo.org
Tu comunidad Java parlante. Cursos abiertos, tutoriales y mucho mucho más ...


	Implementar MVC - VW JSF
Inicio \| Cursos infosintesis.net liberados \| Java EE \| Registrar a un usuario en un sitio Web con Visual Web JSF