Orbeon community‎ > ‎Contributions‎ > ‎

Micro-Guía Orbeon para diseñadores web perplejos.


¿Qué es Orbeon Forms?


En parte se puede considerar un transformador de xhtml+xforms en html y javascript. Esto supone que podemos escribir en páginas alojadas en el servidor xhtml con xforms y cuando el navegador cliente demande estas páginas, las recibirá convertidas en html y javascript que puede interpretar y representar sin necesidad de software instalado (plugins). Admite variaciones de configuración para envíar el resultado en xhtml+xforms si el navegador es capaz de interpretarlo, o en html puro sin javascript.


Orbeon no tiene solamente esa función (Motor XForms), dispone también de un controlador de flujo entre páginas (Page Flow Controller) que traduce urls solicitadas por el navegador en páginas concretas alojadas en el servidor (al modo de Struts). Tiene, además, gran cantidad de utilidades que se pueden acceder por las páginas alojadas en el servidor y por el Page Flow Controller mediante llamadas a rutinas (built-in components) con interfaces de entrada y salida xml bien definidos y que se pueden "conectar" entre sí según el paradigma de tuberías "pipe". El componente encargado de ejecutar este tipo de declaraciones de "tuberías" es el motor XPL.




¿Cómo puede el diseñador web definir el aspecto estético de los controles de formulario?


En el contexto estético en que se presentan -disposición en la pantalla, organización- el diseñador tiene toda la flexibilidad, pues en las páginas creadas para orbeon se puede incluir xhtml, es decir que el diseñador puede usar las etiquetas que usa habitualmente, con todas las opciones de estilo css que desee aplicar.


En el propio control, el diseñador puede incidir en el estilo por dos vías que son, además, complementarias:

  • Aplicar un estilo propio mediante una clase definida en su hoja de estilo a la que se hace referencia desde el atributo 'class' del control xforms.
Estas declaraciones xforms:
<xforms:trigger id="valor" class="boton_escala_numerica" appearance="minimal">
	<!-- Texto de la respuesta 0, 1, 2,... -->
	<xforms:label>0</xforms:label>
</xforms:trigger>
Generarían para el navegador cliente un html como éste:
<a href="/orbeon/neuro/" class="boton_escala_numerica apuntador_respuesta_escala" id="valor">0</a>
  • Redefinir a su conveniencia los estilos css orbeon que se hayan usado en el html generado por orbeon para el control. Para conocer cuáles son estos estilos que aplica Orbeon, lo adecuado es inspeccionar la página con la extensión firebug para Firefox.


¿Cómo se puede cambiar dinámicamente el aspecto estético de los controles de formulario?


Se puede hacer mediante el cambio dinámico de la clase css asociada al elemento. Esto es una tarea del “especialista” en xforms, aunque es conveniente que el diseñador sepa que se puede hacer y que su tarea será construir estilos en forma de clases css para los distintos “estados” que se contemplen para un control o cualquier elemento xhtml.


  • Se puede hacer como respuesta al cambio de cualquiera de los datos del modelo de datos de la página, ya que orbeon permite, a partir de su versión 3.7, parametrizar el valor del atributo “class” de los elementos xhtml:
<xhtml:table class="tabla">
	<xhtml:tbody>
		<xforms:repeat nodeset="*">
			<xhtml:tr class="fila-{if (position() mod 2 = 0) then 'par' else 'impar'}">
				<xhtml:td><xforms:output value="."/></xhtml:td>
			</xhtml:tr>
		</xforms:repeat>
	</xhtml:tbody>
</xhtml:table>


  • O como respuesta a un evento del interfaz de usuario:


	<xforms:trigger id="valor" class="boton_escala_numerica" appearance="minimal">
		<xforms:label><xforms:output value="."/></xforms:label>
		<!--Si recibe el foco, marcamos el valor de respuesta con un recuadro mediante el estilo apuntador_respuesta_escala -->
		<xxforms:script ev:event="DOMFocusIn">
			event.target.className='boton_escala_numerica apuntador_respuesta_escala';
		</xxforms:script>
		<!--Si pierde el foco, restablecemos el aspecto normal de la respuesta -->
		<xxforms:script ev:event="DOMFocusOut">
			event.target.className='boton_escala_numerica';
		</xxforms:script>
	</xforms:trigger>

¿Cómo puede el diseñador web capturar eventos que se produzcan en los controles y asociar acciones a estos eventos?


Si el control es xforms, admite los eventos DOMActivate, DOMFocusIn, DOMFocusOut, xforms-select, xforms-deselect, xforms-enabled, xforms-disabled, xforms-help, xforms-hint, xforms-valid, xforms-invalid, xforms-required, xforms-optional, xforms-readonly, xforms-readwrite, xforms-value-changed y se puede reaccionar a cualquiera de ellos ejecutando acciones que pueden contener etiquetas xforms o scripts javascript.


Si el evento que deseamos capturar no es del modelo de xforms, por ejemplo un evento mouseover, podemos capturarlo a través del elemento xhtml y ejecutar una acción javascript que genere, a su vez, un evento que si pueda ser controlado por xforms:


<!--Si pasamos el ratón por encima de item, queremos que reciba el foco -->
<xhtml:li  OnMouseOver="event.target.focus();">
	<xforms:trigger id="valor" class="boton_escala_numerica" appearance="minimal">
		<!-- Texto de la respuesta 0, 1, 2,... -->
      	<xforms:label><xforms:output value="."/></xforms:label>
      	<!--Si recibe el foco, marcamos el valor de respuesta con un recuadro mediante el estilo apuntador_respuesta_escala -->
		<xforms:action ev:event="DOMFocusIn">
			<xxforms:script>
				event.target.className='boton_escala_numerica apuntador_respuesta_escala';
			</xxforms:script>
		</xforms:action>
	</xforms:trigger>
</xhtml:li>

¿Cómo puede el diseñador web definir unos elementos html comunes para un conjunto de páginas?


Enlaces de estudio “Quick start” para el diseñador web.


Controles disponibles y su declaración en xforms.

http://www.orbeon.com/ops/doc/reference-xforms-ng#xforms-controls


Parametrización de estilos en los elementos xhtml.

http://www.orbeon.com/ops/doc/reference-xforms-2#avts-xhtml


Otros enlaces con cierto interés.


Cambiar valores de controles xforms desde javascript y despachar eventos desde javascript al modelo xforms.

http://www.orbeon.com/ops/doc/reference-xforms-2#xforms-javascript


Comments