XForms/Editar contenido con xf:input
Ventana Basica de entrada
editarUno de los controles de interfaz de usuario mas comunes es un web form es un simple campo de texto de una linea. en este ejemplo tenemos una ventana bastante simple con dos campos de entrada. Cada entrada tiene su propia etiqueta a la izquierda del campo de entrada.
Enlace a la aplicacion XForms
editarNota: no soy el autor original de este ejemplo solamente lo tomo con fines ilustrativos.
Campos de entrada
Estructura del programa ejemplo
editarEl ejemplo tiene dos partes, un modelo y una vista; el modelo tiene datos de instancia que son para almacenar los datos que el usuario ingresa en los campos. La vista es la presentacion que se encuentra en el Body del documento HTML.
Codigo del ejemplo
editar<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms">
<head>
<title>XForms inputs with labels</title>
<xf:model>
<xf:instance xmlns="">
<data>
<PersonGivenName/>
<PersonSurName/>
</data>
</xf:instance>
</xf:model>
</head>
<body>
<p>Enter your first name, and last name.</p>
<xf:input ref="PersonGivenName" incremental="true">
<xf:label>Input First-Name:</xf:label>
<xf:hint>Also known as given name.</xf:hint>
</xf:input>
<br />
<xf:input ref="PersonSurName" incremental="true">
<xf:label>Input Last Name:</xf:label>
<xf:hint>Also known as sur name or family name.</xf:hint>
</xf:input>
<br />
<br />
Output First Name: '''<xf:output ref="PersonGivenName"/>'''
<br />
Output Last Name: '''<xf:output ref="PersonSurName"/>'''
<p>Note that as you type the model output will be updated.</p>
</body>
</html>
Hints o ToolTips
editarTambien se pueden colocar "pistas" para el usuario usando el elemento <xf:hint> que sera esa pequeña burbuja que sale al poner el puntero sobre el campo