XForms/Editar contenido con xf:input
Ventana Basica de entrada editar
Uno 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 editar
Nota: no soy el autor original de este ejemplo solamente lo tomo con fines ilustrativos.
Campos de entrada
Estructura del programa ejemplo editar
El 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 editar
Tambien 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