jump to navigation

Botones con imagenes en XForms Enero 7, 2007

Publicado por lineadecodigo en : XForms , trackback

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

Articulos Similares:

|- Visualizar el ejemplo
|- Descargar el código
|- Reportar error en el código
|- Foro sobre XForms

Enviar entrada por email Enviar entrada por email | Imprimir Imprimir | 9905 visitas

1 Star2 Stars3 Stars4 Stars5 Stars (Todavia sin evaluar)
Loading ... Loading ...

Tags:, , ,

Comentarios»

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




Si tienes dudas sobre XForms no dudes en visitar el Foro sobre XForms.
Imagen CAPTCHA CAPTCHA Audio
Refrescar imagen