Orbeon community‎ > ‎Contributions‎ > ‎

The Orbeon micro-guide for the puzzled web designer

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




How is supposed a web designer to change form controls aesthetics?


The web designer is allowed to use all html tags he or she knows in order to layout the items in a page. He or she can, of course, use css styles refered in class attribute of the html tags.

One can specifically change the aesthetics of the control by using any of this complementary ways:

  • Apply custom style defined in one's css stylesheet by referring that style name in class attribute of the xforms control tag.
This xforms declarations:
<xforms:trigger id="value" class="numeric_button" appearance="minimal">
<!-- Text for the trigger: 0, 1, 2,... -->
<xforms:label>0</xforms:label>
</xforms:trigger>
will produce once transformed by orbeon xforms engine something like this:
<a href="#" class="numeric_button xforms-control xforms-trigger xforms-trigger-appearance-minimal" id="value">0</a>
  • Redefine orbeon css styles that orbeon uses to produce the html rendered in the web browser (look for example the styles used by orbeon in the example above: xforms-control, xforms-trigger,xforms-trigger-appearance-minimal). One only have to:
    • Inspect in the page rendered by the web browser client in order to know the styles applied by orbeon to the control of interest. You can install the mozilla firebug extension for this.
    • Declare an style with the same name of that you are trying to redefine in your own css stylesheet.


¿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>


How is supposed a web designer to apply a theme and common content to the aplication?

> We would like to alter the way, the orbeon page is styled. Where can I
> find the themes, the epilogue.xpl that is used in all examples and how
> can I apply an certain, altered theme and epilogue to my own 
> application? 

What about these properties:

http://www.orbeon.com/ops/doc/reference-properties#epilogue

Standard XSLT themes are under:

   RESOURCES/config/

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