Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

Índice

 

Índice
outlinetrue
stylenone
exclude.*ndice
stylenone

 

Declaración <!DOCTYPE> HTML

Al publicar una definición de formulario no se recomienda utilizar declaraciones:

...

Deck of Cards
effectDuration0.5
historyfalse
idsampleshistoryfalse
effectTypefade
Card
defaulttrue
id1
labelPaso 1

 

  • Para crear una definición de formulario, en la visión Explorador de paquetes se debe ingresar a la carpeta forms del proyecto Fluig, luego presionar clic con el botón derecho y en el menú ingresar Nuevo> Definición de Formulario

     


Figura 1 - Nueva Definición de Formulario.

 

Card
id2
labelPaso 2

 

  • En la ventana de creación de definición de formulario, basta completar el nombre deseado y luego presionar clic en finalizar

     


Figura 2 - Nueva Definición de Formulario.


Card
id3
labelPaso 3

 

  • Al finalizar, se creará un paquete relacionado a la definición de formulario en la carpeta forms y el editor de formulario quedará disponible para la edición.

     


Figura 3 - Nueva Definición de Formulario.

.


Card
id4
labelPaso 4

 

  • A partir del editor, se desarrolla todo el contenido HTML. En el ejemplo se desarrolló un formulario simple de registro.


Figura 4 - Nueva Definición de Formulario.

 

...

Deck of Cards
effectDuration0.5
historyfalse
idsamples
historyfalse
effectTypefade
Card
defaulttrue
id1
labelPaso 1

 

  • Para crear un script de formulario en Fluig, en la visión Explorador de paquetes se debe ingresar a la carpeta forms del proyecyo Fluig, luego presionar clic con el botón derecho y en el menú ingresar Nuevo > Otros


Figura 5 - Creación de script evento de la definición de formulario.

 

Card
id2
labelPaso 2

 

  • Seleccione la opción Script Evento de definición de formulario y haga clic en el botón Avanzar.


Figura 6 - Creación de script evento de la definición de formulario.


Card
id3
labelPaso 3

 

  • En esta ventana informe los espacios pertinentes al evento que desea agregar y luego haga clic en el botón Finalizar.


Figura 7 - Creación de script evento de la definición de formulario.

 


Card
id4
labelPaso 4

 

  • En el ejemplo seleccionamos el evento displayFields, y relacionamos la definición de formulario form_exemplo_fluig.


Figura 8 - Creación de script evento de la definición de formulario.

 

 

Card
id5
labelPaso 5

 

  • Al finalizar estará disponible la estructura principal del método en el editor.


Figura 9 - Creación de script evento de la definición de formulario.

 

 

Card
id6
labelPaso 6

 

  • El evento utilizado como ejemplo - validateForm, valida el procedimiento de completos los espacios de solicitud y de usuario.El objeto formController, ha sido utilizado para verificar el valor de los espacios, a través de la sintaxis ‘form.getValue(“fieldname”)’. Al exportar la definición de formularios también se exportarán, los eventos relacionados, al servidor Fluig.

     


Figura 10 - Creación de script evento de la definición de formulario.

 

 

...

  • ADD: indicando modo de inclusión.
  • MOD: indicando modo de edición.
  • VIEW: indicando modo de visualización.
  • NONE: indicando que no hay comunicación con el formulario, por ejemplo, ocurre al momento de validar los espacios del formularios donde no está siendo presentado.

A continuación se detallarán los eventos disponibles para la personalización de una definición de formulario en Fluig.

 

AfterProcessing

Es el último evento a realizar para el fichero. El evento recibe como parámetro una referencia al formulario de la definición de formulario.

Ejemplo:

Bloco de código
languagejavascript
function afterProcessing(form){
}

En el marco de este evento la variable form solo se puede utilizar para consultas a los espacios de la definición de formularios, sus valores y estado de presentación.

 

AfterSaveNew

Este evento se realiza después de crear un nuevo formulario. El evento recibe como parámetro una referencia al formulario de la definición de formulario.

Para obtener el valor de un determinado espacio del formulario:

Bloco de código
languagejavascript
 form.getValue("nome-do-campo")

Ejemplo:

Bloco de código
languagejavascript
 function afterSaveNew(form) {
  log.info("Colaborador de abertura: " + form.getValue("RNC_colab_abertura"));
}

La consulta a los espacios del formulario es case insensitve. En el ejemplo anterior, podríamos obtener el valor del espacio utilizando rnc_colab_abertura.

 

BeforeProcessing

Este evento es el primero a realizarse. Se produce antes de cualquier otro evento de la definición de formulario. El evento recibe como parámetro una referencia al formulario de la definición de formulario.

Ejemplo:

Bloco de código
languagejavascript
function beforeProcessing(form){
}

En el marco de este evento la variable form solo se puede utilizar para consultar a los espacios de la definición de formularios, sus valores y estado de presentación.

 

DisplayFields

Este evento se realiza en el momento en que se presentan los objetos del formulario. El evento recibe como parámetro una referencia al formulario de la definición de formulario y la referencia para salida de presentación del formulario.

En este evento es posible modificar los valores a presentar en el espacio del formulario. Para esto basta utilizar el siguiente procedimiento:

Bloco de código
languagejavascript
form.setValue(“nome-do-campo”, “valor”);

Ejemplo:

Bloco de código
languagejavascript
 function displayFields(form, customHTML) {
   if ( form.getFormMode() == “MOD” ) {
     form.setValue('RNC_colab_abertura', new java.lang.Integer(1));
   }
}

 

Aún en el evento DisplayFields es posible utilizar tres métodos de forma independiente o conjunta para modificar la forma en qué se presenta la renderización del formulario, eliminar renglones de un fichero hijo y ocultar los botones “Imprimir” e “Imprimir en nueva Ventana”.

Para visualizar el formulario en el formato original con los espacios deshabilitados, se debe utilizar el método  setShowDisabledFields.

Para habilitar o deshabilitar el botón de excluir en los renglones del fichero hijo, que por patrón está habilitado, se debe utilizar el método setHideDeleteButton.

Para ocultar los botones  Imprimir  e Imprimir en nueva Ventana, se debe utilizar el método setHidePrintLink.

 

 

Ejemplo de visualización sin utilizar los métodos.

Image Removed

Figura 11 - Ejemplo sin utilizar los métodos .

Ejemplo de utilización de los métodos setShowDisabledFields y setHidePrintLink:

Bloco de código
languagejavascript
function displayFields(form, customHTML) { 
   form.setShowDisabledFields(true);
   form.setHidePrintLink(true);
}

Image Removed

Figura 12 - Ejemplo de utilización de los métodos.

 

 

Ejemplo de visualización sin utilizar el método setHideDeleteButton:

Image Removed

Figura 13 - Ejemplo sin utilizar el método.

 

Ejemplo utilizando el método setHideDeleteButton:

Bloco de código
languagejavascript
function displayFields(form, customHTML) { 
   form.setHideDeleteButton(false);
}

Image Removed

Figura 14 - Ejemplo de utilización de los métodos.

Es importante destacar que este evento es el único que permite la modificación de los valores a presentar en los espacios formulario antes de su renderización.

A continuación un ejemplo para utilizar la salida de presentación del formulario:

Bloco de código
languagejavascript
if(form.getFormMode() != "VIEW")  {
    customHTML.append("<script>");
    customHTML.append("function MostraEscondeBtn_zoom()");
    customHTML.append("{");
    customHTML.append("document.getElementById(\'zoomUsuario\').className = \'show\';"); 
    customHTML.append("document.getElementById(\'zoomModulo\').className = \'show\';");
    customHTML.append("}"); 
    customHTML.append("</script>");
}

EnableFields

Este evento se realiza en el momento que se habilitan los objetos del formulario, permitiendo deshabilitar algunos espacios, en caso sea necesario. El evento recibe como parámetro una referencia al formulario de la definición de formulario.

Para habilitar o deshabilitar un espacio del formulario se debe ejecutar el siguiente procedimiento:

Bloco de código
languagejavascript
 form.setEnabled("nome-do-campo",true/false)

Donde “true” habilita el espacio y “falso” deshabilita el campo.

Ejemplo:

Bloco de código
languagejavascript
function enableFields(form) { 
    if ( form.getFormMode() != 'ADD' ){    
		form.setEnabled("rnc_area",false);
        form. setEnabled("rnc_tipo_ocorrencia",false);
    }
}

Cabe destacar que el evento ocurre al momento de la renderización del formulario y es el único que permite modificar el estado de presentación de los espacios del formulario.

Otra forma de deshabilitar los espacios es utilizando comandos JavaScript implementados directamente en funciones del formulario. Sin embargo, en este caso, no se permite utilizar la propiedad disabled, ya que los espacios no se grabarán al guardar la ficha. Para esta situación, se debe utilizar la propiedadreadonly según el ejemplo a continuación:

Bloco de código
languagejavascript
document.forms['nomeForm'].nomeCampo.setAttribute('readonly',true);

 

InputFields

Este evento se realiza en el momento en que se informan los datos del formulario al BO responsable del formulario del Fluig. El evento recibe como parámetro una referencia al formulario de la definición de formulario. Ejemplo:

Bloco de código
languagejavascript
function inputFields(form){
}

 

SetEnable

Este evento se puede ejecutar en diferentes eventos de las definiciones de formulario. Este evento no se implementa automáticamente en la personalización de la definición de formulario.

Ejemplo:

Bloco de código
languagejavascript
function setEnable() {
  log.info(“Teste de chamada de função”);
}
 
function displayFields(form, customHTML) {
  setEnable();
}

 

ValidateForm

Este evento se ejecuta antes de guardar los datos del formulario en el banco de datos. El evento recibe como parámetro una referencia al formulario de la definición de formulario. En caso de errores de validación de los datos del formulario ese evento responderá un mensaje de error.

Ejemplo:

...

languagejavascript

...

  • formularios donde no está siendo presentado.

A continuación se detallarán los eventos disponibles para la personalización de una definición de formulario en Fluig.

 

Controles visuales

En este capítulo demostraremos como interactuar con algunos tipos de controles de formularios que poseen características especiales, como por ejemplo, completar el contenido de un ComboBox utilizando Datasets.

 

El Fluig, por patrón realiza la importación de la biblioteca JavaScript en todos los formularios, excepto en los casos donde el formulario ya lo realice. En estos casos el Fluig identificará que el jQueri ya está definido y no realizará la importación nuevamente. En caso el formulario utilice otra biblioteca que pueda entrar en conflicto con el jQuery, será necesario definir en el formulario la variable javascript fluigjQuery, con valor false, que el Fluig dejará de realizar dicha importación, sin embargo algunas otras funcionalidades como la máscara de espacios del Fluig, también se deshabilitarán.

 

Máscara de Espacios

Muchos espacios en un formulario poseen un formato específico para su contenido, como datos, CEP, CPF entre otros. 

Para ayudar a los desarrolladores de formularios, el Fluig permite habilitar máscaras por espacio, basta informar el atributo "mask" y la máscara deseada a los objetos input del tipo text.

...

Eventos de Formulario Padre Hijo

Para facilitar la manipular de los datos en una personalización de formularios que utilizan la técnica Padre Hijo, están disponibles los siguientes métodos: Ambos son llamados a partir del objeto  form que se pasa como parámetro en las funciones de personalización de formularios.

 

getChildrenFromTable

Este evento devuelve un mapa con todos espacios hijos de un Padre Hijo a partir de su  form

 

getChildrenIndexes

Este evento devuelve los índices de los registros (renglones) contenidos en un Padre Hijo a partir de su tablename.

 

Ejemplo:

 

Bloco de código
languagejava
themeEclipse
languagejava
function validateForm(form){
    var indexes = form.getChildrenIndexes("tabledetailname");
    var total = 0;
    for (var i = 0; i < indexes.length; i++) {
        var fieldValue = parseInt(form.getValue("valor___" + indexes[i]));
        if (isNaN(fieldValue)){
            fieldValue = 0;
        } 
        total = total + fieldValue;
        log.info(total);
    }
    log.info(total);
    if (total < 100) {
        throw "Valor Total da requisição não pode ser inferior a 100";
    }
}

 

 

Formularios para dispositivos móviles

Incluyendo la definición de formularios que soporten la visualización en dispositivos móviles, es posible ejecutar solicitudes Workflow a través de estos dispositivos y completar la información de la definición de formularios HTML, garantizando mayor movilidad y agilidad para realizar ejecuciones de solicitudes workflow.

Para incluir un nuevo fichero con soporte de dispositivos móviles, realice el procedimiento patrón para exportar la definición de formulario y seleccione los espacios que estarán en el formulario mobile en la ventana antes que termine la exportación. Después de realizar la exportación se incluirá, también, otro archivo HTML y señalizado como "mobile" en la carpeta forms del proyecto Fluig. 

Vea la imagen a continuación en la ventana de selección mobile en la exportación de una definición de formulario.

...

Deck of Cards
effectDuration0.5
historyfalse
idsampleshistoryfalse
effectTypefade
Card
defaulttrue
id1
labelPaso 1

 

  • Para generar los archivos de propiedades en la visión Explorador de Paquetes, se debe ingresar el archivo HTML del formulario a traducir, presionar clic con el botón derecho e ingresar a la opción Externalizar Strings.


Figura 1 - Menú Contextual Externalizar Strings.

 

Card
id2
labelPaso 2

 

  • Los archivos que contienen las literales son creados en la carpeta del formulario.


Figura 2 - Archivos Properties en la Carpeta del Formulario.


Card
id3
labelPaso 3

 

  • Informe los valores correspondientes a las literales para el idioma de cada archivo.


Figura 3 - Edición de un Archivo Properties.


...