Botones con imagenes en XForms

07/Ene/2007 XForms , , , 8 Comentarios

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. <trigger>
  2. <label>Mi boton</label>
  3. </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. <trigger>
  2. <label><h:img src="documento.gif"/></label>
  3. </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.  
  10. <trigger>
  11. <label><h:img src="documento.gif"/></label>
  12. </trigger>
  13.  
  14. <trigger>
  15. <label>Mi boton</label>
  16. </trigger>
  17.  
  18. </h:p>
  19. </h:body>
  20. </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

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

8 comentarios en “Botones con imagenes en XForms”

Víctor Cuervo

crescenciana

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

Víctor Cuervo

espinosa

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.

Víctor Cuervo

Jenny

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

Víctor Cuervo

lineadecodigo

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. 🙁

Víctor Cuervo

spider

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

Víctor Cuervo

lineadecodigo

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.

Víctor Cuervo

goosfancito

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

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*