feed twitter facebook LinkedIn facebook

XForms » Botones con imagenes en XForms

Enero 7, 2007 por Víctor Cuervo . 14089 visitas 8 Comentarios Imprimir Imprimir

Si echamos la vista atrás podemos recordar que con los formularios HTML podíamos tener campos de texto de tipo "image". Estos campos de texto no eran más que una imagen sobre la que se podía pinchar. Luego aparecio la etiqueta button que ya permitía anidar otros elementos. Mediante CSS se daba un nuevo salto y las propiedades permitían jugar con el color e imagen de fondo del botón. Con XForms vamos un paso más allá y aquí se pueden construir botones con imágenes, mediante la etiqueta IMG de HTML. Algo parecido al elemento button de HTML. Y todo de una forma muy sencilla.

Lo primero que tenemos que ver es cómo construir un botón. Para ello nos valemos de la etiqueta trigger. La verdad es que esto ha sido un cambio bastante sustancial con respecto a los button del HTML

Anidada a la etiqueta trigger utilizaremos label para indicar el texto que va sobre el botón. Teniendo un código similar al siguiente:

  1.  
  2. <trigger>
  3.    <label>Mi boton</label>
  4. </trigger>

Incrustar una imagen como elemento del botón será un procedimiento muy sencillo, ya que bastará con utilizar la etiqueta IMG, referenciando a la imagen que queramos usar, como valor del label del botón

  1.  
  2. <trigger>
  3.    <label><h:img src="documento.gif"/></label>
  4. </trigger>

Como se puede observar, algo muy sencillo de codificar y muy útil en cuanto al diseño. Toda una novedad de XForms.

Veamos como sería el código completo:

  1. <h:html xmlns:h="http://www.w3.org/1999/xhtml"
  2.    xmlns="http://www.w3.org/2002/xforms">
  3. <h:head>
  4.  <h:title>Mi primer formulario XForms</h:title>
  5. </h:head>
  6. <h:body>
  7.  
  8.  <h:p>
  9. <trigger>
  10.    <label><h:img src="documento.gif"/></label>
  11.   </trigger>
  12. <trigger>
  13.    <label>Mi boton</label>
  14.   </trigger>
  15.  
  16.  </h:p>
  17. </h:body>
  18. </h:html>

FireFox ya da soporte a la especificación de XForms, aunque, que yo sepa incompleto. Puedes encontrar otros interpretes de XForms en http://www.w3.org/MarkUp/Forms/#implementations

Visualizar el Codigo
Visualiza el artículo		Descargar el Codigo
Descargar el código		Error en el Codigo
Error en el código		Foro sobre XForms
Foro sobre XForms
tags: , , ,

Artículos relacionados:

8 comentarios »

Redifusión RSS de los comentarios de la entrada. TrackBack URI

  1. goosfancito
    Enero 8, 2007 #

    Estaría bueno que venga con un demo o muestra del tema.

  2. lineadecodigo
    Enero 8, 2007 #

    Tienes razón. Era una cosa que estaba pensando que estaría bien para todos los ejemplos. Empezaré con este e intentaré anexarselo a los ejemplos que ya están. De ahora en adelante lo intentaré pegar en todos aquellos que se pueda.

  3. Sentido Web
    Enero 9, 2007 #

    links for 2007-01-09…

    Videotutoriales para The Gimp | Informática para principiantes | Vía Fresqui Recopilación de multitud de videotutoriales para el programa The Gimp. Una muy buena forma de aprender a usar esta aplicación (tags: gimp tutorial graphics video) Linea d…

  4. spider
    Enero 10, 2007 #

    Si veo la ventaja de los botones en xforms, pero es un name space, y no sirve de mucho pues debes tener varios xlmns, y eso limita el parseo.

    Ademas que los navegadores todavia tienen errores

  5. lineadecodigo
    Enero 10, 2007 #

    Podríamos decir que los botones en XForms no es su punta de lanza. Tiene muchas más cosas interesantes, las cuales intenataré ir plasmando en Linea de Codigo.

    El tema de los namespaces debería de ser un mal menor.

    Lo peor de todo es que, a día de hoy, ningún navegador da un soporte de XForms. :-(

  6. Jenny
    Marzo 8, 2007 #

    Necesito informacion acerca de como crear la accion de los botones adelante y atras en java, alguien que me colabore y me de luz para seguir…. gracias

  7. espinosa
    Octubre 30, 2007 #

    Hola estoy utilizando dos frameworks donde estoy programando en xhtml con xforms y estoy investigando como integrar xmlschema, el objetivo que quiero lograr es hacer un generador de pantallas de captura a partir de un archivo xml.
    Necesito ayuda para lograrlo
    Saludos.

  8. crescenciana
    Diciembre 4, 2009 #

    me gustaria saber si me puede ayudar a ahcer un codigo en java utilizando actionListener en multimedia

Deje un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Imagen CAPTCHA
*