Índice

Declaración <!DOCTYPE> HTML

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

<!DOCTYPE>, Ex: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

La utilización de las mismas puede impactar en algunas funcionalidades de la definición de formulario, o en el Workflow utilizando el navegador Microsoft® Internet Explorer ®.

FormController

O formController es el objeto que realiza la comunicación entre el formulario y la personalización de los eventos. Este objeto está disponible en cada uno de los eventos de personalización de
formularios a través de la variable form. La variable permite modificar los valores de los espacios de un registro de formulario y también obtener el estado de su edición, por ejemplo: si el
está visualizando o editando el registro del formulario. Vea a continuación los métodos disponibles para la variable form:

Método	Descripción
long getCompanyId()	Devuelve el ID de la empresa
int getDocumentId()	Devuelve el ID del documento (registro del formulario)
int getVersion()	Devuelve la versión del documento (registro del formulario)
int getCardIndex()	Devuelve el ID del formulario
String getValue(String fieldName)	Obtiene el valor de espacio del formulario
void setValue(String fieldName, String fieldValue)	Define el valor de un espacio del formulario
boolean getEnabled(String fieldName)	Verifica si un espacio está habilitado
void setEnabled(String fieldName, boolean enabled)	Define si un espacio debe estar habilitado o no
String getFormMode()	Obtiene el modo de edición del formulario con probabilidad de devolver los siguientes valores: ADD: Creación del formulario MOD: Formulario en edición VIEW: Visualización del formulario NONE: No existe comunicación con el formulario, por ejemplo, ocurre al momento de la validación de los espacios del formulario donde no esté siendo presentado.
void setHidePrintLink(boolean hide)	Cuando se define con el valor true, deshabilita el botón de imprimir del formulario.
boolean isHidePrintLink()	Verifica si el botón para imprimir está deshabilitado.
Map<String, String> getChildrenFromTable(String tableName)	Devuelve un mapa que contiene los nombres y valores de los espacios hijos de una tabla padre.
void setHideDeleteButton(boolean hide)	Cuando se define con el valor true, deshabilita el botón de excluir registros hijos en un formulario con padre-hijo.
boolean isHideDeleteButton()	Verifica si la exclusión de registros hijos está deshabilitada.
boolean getMobile()	Verifica si se está ingresando al registro de formulario a través de un dispositivo mobile.

Personalización de Formularios:

La personalización de definición de formularios se realiza a través de la creación de scripts en el lenguaje JavaScript. El código de implementación de cada script se almacena en un banco de datos y dispensa el uso de otros archivos, como por ejemplo, “plugin.p”.

Los eventos de personalización para definir formularios son creados a partir del Fluig Studio. Para publicar un formulario siga los pasos según el ejemplo a continuación:

Customização de Formulários

La personalización de definición de formularios se realiza a través de la creación de scripts en el lenguaje JavaScript. El código de implementación de cada script se almacena en un banco de datos y dispensa el uso de otros archivos, como por ejemplo, “plugin.p”.

Los eventos de personalización para definir formularios son creados a partir del Fluig Studio. Para publicar un formulario siga los pasos según el ejemplo a continuación:

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.

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.

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.

.

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.

Después de crear una definición de formulario es posible crear scripts personalizados. Los eventos para formularios se deben crear según los pasos a continuación:

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.

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.

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.

.

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.

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.

.

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.

.

Todos los eventos de la definición de formularios reciben la referencia al formulario. A través de esta referencia es posible ingresar a los espacios del formulario, ingresar/definir el valor de un espacio e ingresar/definir el estado de presentación del espacio. Los detalles de cada evento se presentarán en las próximas secciones de este documento.

El Fluig puede utilizar el log de ejecución en los eventos de personalización. A través de la variable log es posible obtener un feedback respecto a la ejecución de cada evento. Existen cuatro niveles de log:

error: presentación de errores.
debug: depurar la ejecución.
warn: informar posible problema de ejecución.
info: presentación de mensajes.

La presentación de cada uno de los tipos de log está sujeta a la configuración del servidor de la aplicación. Por ejemplo, en JBoss ®, por patrón, los mensajes de tipo info y warn se presentan en la consola del servidor y las del tipo debug, error se presentan en el archivo de log. A continuación se indica un ejemplo respecto al uso del log en script:

log.info(“Testando o log info”);

Tendríamos en la consola del servidor el mensaje “Probando el log info”.

Es posible saber el estado de edición de un formulario mediante la variable form informada como parámetro para los eventos de la definición formulario. Para ingresar al estado de edición:

form.getFormMode()

La llamada a la función form.getFormMode() devolverá una string con el modo de edición del formulario. Existen los siguientes valores para el modo de edición del 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:

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:

 form.getValue("nome-do-campo")

Ejemplo:

 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:

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:

form.setValue(“nome-do-campo”, “valor”);

Ejemplo:

 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.

Figura 11 - Ejemplo sin utilizar los métodos .

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

function displayFields(form, customHTML) { 
   form.setShowDisabledFields(true);
   form.setHidePrintLink(true);
}

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

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

Figura 13 - Ejemplo sin utilizar el método.

Ejemplo utilizando el método setHideDeleteButton:

function displayFields(form, customHTML) { 
   form.setHideDeleteButton(false);
}

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:

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:

 form.setEnabled("nome-do-campo",true/false)

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

Ejemplo:

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:

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:

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:

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:

function validateForm(form) {
   if (form.getValue('RNC_colab_abertura') == null){
     throw "O colaborador de abertura não foi informado";
   }   
}

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.

Exemplo de utilização de máscaras

<input name="cep" type="text" mask="00000-000">

Para elaborar la máscara es posible utilizar:

Código	Descrição
0	Somente Números.
9	Somente números mais opcional.
#	Somente números mais recursivo.
A	Números ou letras.
S	Somente letras entre A-Z e a-z.

Outros exemplos de utilização de máscaras

                     
                     Data: "00/00/0000"
                  Horário: "00:00:00"
              Data e Hora: "00/00/0000 00:00:00"
                      CEP: "00000-000"
                 Telefone: "0000-0000"
            Telefone(ddd): "(00) 0000-0000"
Telefone(ddd + 9ºdígitos): "(00) 90000-0000"
           Placa de carro: "SSS 0000"
                      CPF: "000.000.000-00"
                     CNPJ: "00.000.000/0000-00"
                       IP: "099.099.099.099"
              porcentagem: "#00.000,00%"
				    Valor: "#00.000.000.000.000,00"

Caso a importação da biblioteca jQuery esteja desabilitada através da variável fluigjQuery, a funcionalidade de máscaras também estará desabilitada.

ComboBox

Geralmente é necessário popular um ComboBox de um formulário com um determinado grupo de valores.

No Fluig isto é possível através da utilização de Datasets. Os Datasets são serviços de dados padrão disponibilizados pelo Fluig, como por exemplo, o serviço de “Volumes” do produto.

Para habilitar o Dataset no ComboBox basta usar a seguinte construção:

<select name="RNC_volume" id="RNC_volume" dataset="nome-dataset" datasetkey="chave" datasetvalue="valor" addBlankLine=”false”></select>

Onde:

dataset é o nome do Dataset.
datasetkey é a chave do registro.
datasetvalue é o valor de um determinado campo do registro.
addBlankLine é o que define se a primeira linha do combo será um valor em branco.

Exemplo:

<select name="RNC_volume" id="RNC_volume" dataset="destinationVolume" datasetkey="volumeID" datasetvalue="volumeDescription"></select>

No exemplo acima estamos listando em um ComboBox todas os Volumes cadastradas no Fluig.

Caso seja necessária a ordenação dos dados provindos de um dataset interno, indicamos a criação de um dataset customizado que execute o interno e ordene os dados, antes de alimentar o componente combobox.

Para utilizar um ComboBox com somente uma opção não deve ser utilizado caracteres especiais e espaço no value da tag option.

Exemplos:

Forma correta

<select>
  <option value="te">Teste</option>
</select>

Forma Incorreta

<select>
  <option value="te te te">Teste</option>
</select>

Zoom

Permite a consulta de entidades e outros formulário criados no Fluig para seleção de dados pelo usuário.

O acesso a este componente é realizado a partir de uma chamada Javascript no HTML da definição de formulário.

"/webdesk/zoom.jsp?datasetId="+dataset+"&dataFields="+campos+"&resultFields="+resultFields+"$type="+"&title="+titulo

Onde:

title: é o título para a janela de zoom.
datasetId: é o nome do dataset (Built-in, CardIndex ou Customized).
dataFields: são os nomes dos campos a serem apresentados.
resultFields: são os campos que devem ser retornados para o registro selecionado pelo usuário.
likeField: o nome do campo para filtro de dados (se necessário).
likeValue: o valor a ser usado no filtro de dados (se necessário).

ATENÇÃO: Este parâmetro só é válido para datasets internos. Datasets customizados não permitem a utilização de filtros.

Para obter o registro selecionado pelo usuário devemos adicionar a seguinte função JavaScript ao formulário do processo:

function setSelectedZoomItem(selectedItem) {               
}

Onde selectItem é o registro selecionado pelo usuário na tela de zoom.

Importante

A mesma função “setSelectZoomItem” será usada para receber o resultado de todas as chamadas ao zoom. Assim, para diferenciar cada chamada foi criado o parâmetro type. Esse parâmetro é retornado em selectedItem e pode ser usado para diferenciar as chamadas ao zoom.

Para acessar um campo do registro selecionado:

selectedItem["fieldName"]

Onde fieldName é o nome do campo de retorno que foi definido na chamada de zoom.Para obter o registroo componente de Zoom do Fluig foi desenvolvido para permitir que o recurso de zoom fosse utilizado em definições de formulários.

Para que seja possível visualizar e resgatar informações dos campos “metadatas” do formulário, é necessário utilizar a seguinte nomenclatura:

metadata_id	Retorna o código da ficha
medatata_version	Retorna a versão da ficha
metadata_parent_id	Retorna o código da pasta Pai
metadata_card_index_id	Retorna o código do fichário
metadata_card_index_version	Retorna a versão do fichário
metadata_active	Versão ativa

Abaixo um exemplo de código utilizado para visualização e resgate destes valores:

function zoomFormulario(titulo, dataset, campos, resultFields, type){
	window.open("/webdesk/zoom.jsp?datasetId="+dataset+"&dataFields="+campos+
	"&resultFields="+resultFields+"&type="+type+"&title="+titulo, "zoom", "status , scrollbars=no ,width=600, height=350 , top=0 , left=0");
}

A utilização da PK nos filtros ao utilizar dataset de Grupo, Papel ou Colaborador é opcional, porém o mesmo valor utilizado na URL do zoom deve ser utilizado para a obtenção do valor selecionado, conforme exemplo abaixo.

function setSelectedZoomItem(selectedItem) {
	alert("Grupo: " + selectedItem['groupId'] + " Colaborador: "+ selectedItem['colleagueGroupPK.colleagueId']);
}
 
<input type="button" class="btZoom" onclick="zoomFormulario('title', 'colleagueGroup', 'groupId,Codigo,colleagueGroupPK.colleagueId,Matricula','groupId,colleagueGroupPK.colleagueId', 'nofield');">

Para utilizar filtros a chamada é similar ao de dataFields.

Segue exemplo abaixo:

window.open("/webdesk/zoom.jsp?datasetId=preCad&dataFields=codigo, Código, descricao, Descrição&resultFields=descricao&type=precad&filterValues=metadata_active, false","zoom" , "status, scrollbars=no, width=600, height=350, top=0, left=0");

Neste exemplo, o zoom irá retornar somente as fichas inativas.

Zoom Externo

Em situações aonde os dados dos elementos externos ao Fluig são muito volumosos é recomendada a construção de uma aplicação externa ao Fluig que fará o papel de zoom para o usuário. Abaixo será descrita uma técnica JavaScript aonde será possível chamar uma aplicação externa e a mesma poderá devolver o dado solicitado pelo usuário para um campo do formulário do Fluig.

O primeiro passo para implementação dessa técnica é criar uma lógica em JavaScript que irá abrir uma nova janela chamando a aplicação externa que irá se comportar como zoom para o formulário. Vamos utilizar e explanar o comando window.open neste exemplo:

Window.open(URL Aplicação Externa, Nome da Janela que será aberta, comandos adicionais)

Onde:

URL Aplicação Externa: É a url da aplicação externa que funcionará como zoom para o Fluig. Ex: http://servidor/applications/forneczoom.asp.
Nome da Janela: Nome da janela que será utilizado pelo navegador do usuário como identificador. Para evitar a sobreposição de conteúdo em janela é recomendado que para cada zoom chamado por um mesmo formulário seja adicionado um nome diferente. Ex: “ZoomFormec”.
Comandos Adicionais: Comandos adicionais utilizados para a criação da janela que irá conter a aplicação zoom. Ex: “width=230, height=230”.

Nota

Devido a uma restrição dos navegadores a url do programa de zoom externo ao Fluig deverá estar no mesmo domínio em que o Fluig se encontra. Caso contrário não será possível atribuir ao campo do formulário o valor escolhido para o zoom. Este problema ocorrerá por que os navegadores proíbem a pratica de codificação JavaScript cross-domain.

O código abaixo irá programar um formulário do Fluig contendo um campo e um botão lateral que irá invocar a janela da aplicação externa.

<form name=”FornecedorForm”>
  Código do Fornecedor:
  <input name=”cod_fornec” size=’10” value=”” type=”text”>
  <input value=”lista” onClick=”mostraLista()” type=”button”>
</form>

<script language=”JavaScript”>
   Function mostraLista() {
     Window.open(“fornecedores.html”, “list”,”width=230,height=230”);
   }
</script>

O segundo passo é programar dentro da aplicação externa uma função JavaScript que devolva para o campo do formulário o valor escolhido para o usuário na aplicação externa. Essa aplicação externa poderá ser desenvolvida em qualquer tecnologia de desenvolvimento web existente no mercado de que a mesma possa realizar a execução de scripts JavaScript no lado do cliente. Segue exemplo de uma função JavaScript que passa o valor para o campo do formulário:

<script language=”JavaScript”>
   function escolha(valor) {
       // A linha abaixo testa se a janela do formulário do fluig que abriu a janela de zoom ainda está aberta
       if (window.opener && !window.opener.close) {
              // seta o valor passando para o campo
              window.opener.document.(id do form no formulário fluig).(nome do campo).value = valor;
       }
       // Fecha a janela da aplicação zoom
       window.close();
   }
</script>

Onde:

Id do form no formuário Fluig: Caso algum id tenha sido definido para a tag <form> no formulário do Fluig é interessante referenciar neste comando. Pode ser utilizada também a referência de coleção forms dentro do comando (forms[posição]).
Ex: FornecedorForm, forms[0].

Nome do Campo: Nome do campo que irá receber o valor passado para a função.
Ex: cod_fornec.
Valor: Dado que será passado para o campo do formulário do Fluig.

O exemplo a seguir irá programar um exemplo de zoom externo feito inteiramente em HTML com dados estáticos apenas para ilustração. Os dados de zoom podem provir de qualquer fonte seja ela interna ou externa ao Fluig.

<html>
  <head>
  <title>Lista de fornecedores</title> 


<script language="JavaScript"> 
function escolha(valor) { 
  // Teste de validade do Opener 
  if (window.opener && !window.opener.closed) { 
      // gravando o valor do campo cod_fornec 
      window.opener.document.forms[0].cod_fornec.value = valor; 
  } 
   window.close(); 
} 
</script>
 
  </head>
  <body>   

  <!-- Os dados abaixo estão fixos mas poderiam ser montados a partir de qualquer origem. --> 

  <table border="1" cellpadding="5" cellspacing="0"> 
  <tbody><tr bgcolor="#cccccc"><td colspan="2"><b>Exemplo aplicacao ECM</b></td></tr> 
  <tr bgcolor="#cccccc"><td><b>Codigo</b></td><td><b>NASDAQ</b></td></tr> 
  <tr><td><a href="javascript:escolha('TOTVSv3')">TOTVS</a></td> 
  <td><a href="javascript:escolha('TOTVSv3')">TOTVSv3</a></td></tr> 
  <tr><td><a href="javascript:escolha('RM1')">RM</a></td> 
  <td><a href="javascript:escolha('RM1')">RM1</a></td></tr> 
  <tr><td><a href="javascript:escolha('DTS3')">Datasul</a></td> 
  <td><a href="javascript:escolha('dts3')">Dts3</a></td></tr> 
  <tr><td><a href="javascript:escolha('Lgx2')">Logix</a></td> 
  <td><a href="javascript:escolha('Lgx2')">Lgx2</a></td></tr> 
  </tbody>
  </table> 

  <!-- Fim dos dados --> 

  </body>
</html>

Para colocar o exemplo em prática no produto, basta publicar a definição de formulário a seguir informando o arquivo do zoom externo como anexo da definição de formulário.

Exemplo de Zoom.zip

Ao clicar em um dos itens da tela de zoom será chamada a função JavaScript escolha que ira enviar o valor para o campo cod_fornec no formulário do Fluig.

Serviços de Dados

O Fluig possui integração com dois tipos de serviços de dados, são eles: Dataset e Serviços Externos. Ambos podem ser usados em todos os eventos disponíveis para customização de definição de formulário.

Dataset

É um serviço de dados que fornece acesso às informações, independente da origem dos dados. O Fluig fornece Datasets internos que permitem acesso as entidades, como Usuários, Grupos de Usuários, entre outros. Consulte o cadastro de Datasets do Fluig para obter a relação completa dos Datasets disponíveis e seus respectivos campos.

Nota

Os exemplos abaixo utilizam a função getDatasetValues, disponível somente para os Datasets de entidade e definição de formulário(quando informado o número da definição de formulário). Para a utilização de Datasets customizados consulte o Guia de Referência Customização de Datasets.

Na função getDatasetValues, NÃO são retornados os valores de todos os campos por questões de segurança. Para obter todos os dados é utilizado o DatasetFactory, exemplificado em Desenvolvimento de Datasets.

Por exemplo, para acessar o Dataset de usuários do Fluigno evento displayFields de uma definição de formulário:

function displayFields(form,customHTML) {
     // Obtendo o usuario via dataset
     filter = new java.util.HashMap();
     filter.put("colleaguePK.colleagueId","adm");
     usuario = getDatasetValues('colleague',filter);
     form.setValue('RNC_colab_abertura',usuario.get(0).get("colleagueId"));
}

Também é possível fazer uma chamada aos Datasets dentro da definição de formulário através de funções JavaScript.

O acesso aos Datasets também pode ser realizado diretamente no formulário da definição de formulário. Por exemplo, para acessar o Dataset de usuário e inserir os valores nos campos do HTML:

 <html>
    <head>
        <title>
            Teste XMLRPC
        </title>
        <script language="javascript">      
            function init(){                            
                var filter = new Object();
                filter["colleaguePK.colleagueId"] = "adm";  
                var colleagues = getDatasetValues("colleague", filter);
                if(colleagues.length > 0){        
					document.getElementById("colleagueName").value = colleagues[0].colleagueName;
                	document.getElementById("colleagueId").value = colleagues[0].colleagueId;
               	 	document.getElementById("login").value = colleagues[0].login;
               	 	document.getElementById("extensionNr").value = colleagues[0].extensionNr;                
					document.getElementById("groupId").value = colleagues[0].groupId;
					document.getElementById("mail").value = colleagues[0].mail;
                }else{
                    alert("Nenhum Usuário Encontrado");
				}
            }
        </script>
    </head>
    <script src="../vcXMLRPC.js"></script>
    <body onload="init()">
    <form id="form1">
        <b> Nome do Usuário: </b>
        <input type="text" name="colleagueName" id="colleagueName" />
	    <br><br>    
		<b> Matricula do Usuário: </b>
        <input type="text" name="colleagueId" id="colleagueId" />
		<br><br>
		<b>Login do Usuário:</b>
        <input type="text" name="login" id="login" />
        <br><br>            
		<b> Ramal do Usuário: </b>
        <input type="text" name="extensionNr" id="extensionNr" />
        <br><br>
        <b> Grupo do Usuário: </b>
        <input type="text" name="groupId" id="groupId" />
        <br><br>
        <b> E-mail do Usuário: </b>
        <input type="text" name="mail" id="mail" />
        <br><br>
    </form>
    </body>
</html>

O Dataset para definição de formulário utiliza a mesma chamada do Dataset de entidades, como no caso do usuário. Entretanto ao invés de passarmos como parâmetro o nome do Dataset passaremos o número da definição de formulário, por exemplo:

function displayFields(form,customHTML) {
     // Obtendo o usuario via dataset
     filter = new java.util.HashMap();
     filter.put("RNC_nr_solicitacao",new java.lang.Integer(20));
     fichas = getDatasetValues(Number(676),filter);
	 log.info("Usuário de Abertura: "+ fichas.get(0).get("RNC_colab_abertura"));
}

Download de exemplo de Formulário Combobox e Dataset: form.html.

DataService

É um serviço de dados que permite o acesso de aplicações de terceiros através do Fluig. Este serviço de dados suporta dois tipos de conexão, são eles: AppServer do Progress® e Web Services.

Os serviços de dados são cadastrados e configurados a partir da função Visualização de Serviços do Fluig Studio.

Para mais informações sobre o cadastro dos serviços consulte: Integração Com Aplicativos Externos. E para informações de utilização dos serviços nos eventos consulte: Desenvolvimento de Workflow.

Pai Filho

A técnica Pai X Filho foi modificada e agora a posição da tag tablename é feita dentro da tag "table" do código html.

No novo modelo implementado agora o parser do fichário aplicará as mudanças do pai filho da seguinte forma:

<table tablename="teste"> - A propriedade tablename determina que Agora abaixo dessa tabela será implementado um sistema de pai filho dentro da definição de formulário. A tag <table> terá seus parâmetros varridos na busca de outros parâmetros relacionados à técnica que serão explicados mais adiante nesse texto. Será criada uma outra <table> ao redor da tabela principal que conterá um botão que permite adicionar novos filhos. Isso não ocorrerá apenas em casos em que a propriedade noaddbutton também seja informada em conjunto com a propriedade tablename.

<TR> (primeiro abaixo do table) - A primeira tag de <TR> encontrada dentro da tabela é visualizada como uma tag que conterá os labels da tabela pai filho a esta tag será adicionada uma coluna <TD> contendo o ícone e a função de eliminar filhos existentes em tela. Está nova coluna será a primeira coluna a esquerda da tabela.

<TR> (Segundo abaixo do table) - A técnica pai filho irá ocultar a linha <TR> original e transforma lá no seu “template mestre” para criação dos filhos daquela tabela. Cada vez que o botão “novo” for acionado todo o conjunto de campos existentes dentro desse segundo <TR> será replicado em tela com os dados iniciais definidos para estes campos.

</table> - Fim do escopo da técnica.

A técnica também suporta novos atributos que podem ser passados eu usados para customizar a técnica pai e filho. São elas:

noaddbutton - Remove o botão “adicionar” da tela no momento da edição do formulário. Isso permite ao desenvolvedor escolher aonde ele vai colocar a função que criará os filhos em tela podendo amarrar a chamada da função em um link texto ou uma figura ou outro objeto do html.

<table tablename="teste" noaddbutton=true>

nodeletebutton - Remove o botão “lixeira” da tela no momento da edição da ficha. Isso permite ao desenvolvedor impedir a eliminação dos registros ou definir outra forma de executar a função que removerá os filhos da tabela.

 <table tablename="teste" nodeletebutton=true>

addbuttonlabel - Determina que texto será posto no botão de adicionar filhos da técnica. Caso não seja informado o botão virá com o texto padrão (novo).

 <table tablename="teste" addbuttonlabel="Adicionar novo ingrediente">

addbuttonclass - Permite definir qual classe css será utilizada pelo botão. Essa classe css deverá estar disponível no documento html do fichário.

 <table tablename="teste" addbuttonclass="wdkbuttonClass">

deleteicon - Permite determinar qual será a imagem que funcionará como ícone da eliminação de filhos em tela. Essa imagem deverá ser um anexo da definição de formulário e deverá ser informada na classe como uma imagem qualquer utilizada como anexo na definição de formulário.

<table tablename="teste" deleteicon="teste.jpg">

customFnDelete - Permite a customização da função que é chamada ao clicar no botão que elimina um filho da tabela. A função customizada deverá estar disponível no documento html da definição de formulário e, obrigatoriamente, chamar a função padrão.

<table tablename="teste" customFnDelete="fnCustomDelete(this)">
    function fnCustomDelete(oElement){

    //Customização
	alert ("Eliminando filho!");

    // Chamada a funcao padrao, NAO RETIRAR
    fnWdkRemoveChild(oElement);

    //Customização
    alert ("Filho eliminado!");
}

É possível usar a combinação de um ou mais atributos na mesma tabela pai filho. Contudo se a propriedade noaddbutton for utilizada os valores das propriedades addbuttonlabel e addbuttonclass serão ignoradas. Não será gerada uma mensagem de erro na publicação ou versionamento dessa definição de formulário, porém no momento da edição do formulário a mesma não irá apresentar o botão padrão que permite cadastrar novos filhos na definição de formulário. A propriedade deleteicon não é afetada pela propriedade noaddbutton. Exemplo de uso combinado de parâmetros:

<table tablename="teste" addbuttonlabel="Adicionar novo ingrediente" addbuttonclass="wdkbuttonClass" deleteicon="teste.jpg">

A técnica 2.0 do Pai filho não é retro-compatível com a primeira implementação. Definição de formulários que foram feitas com a primeira técnica deverão ser retrabalhados para utilizar este nova técnica.

A técnica 2.0 do pai Filho não aceita todos os componentes html, mas aceita os principais, sendo os homologados pelo produto os tipos: text, radio button, checkbox, select, select multiple, hidden, textarea, image e button. Download de exemplo de Formulário Pai x Filho: form.htm.
Campos de uma tabela pai e filho não estão disponíveis para serem utilizados como descrição das fichas na configuração do formulário.

Pai Filho Radio Button

Para utilizar campos radio button, além da definição padrão do componente html, é necessário que seja utilizado o atributo ‘value’ para os dados serem salvos corretamente.

<table border="1" tablename="teste" addbuttonlabel="Adicionar Filho"  nodeletebutton="true">
	<thead>
		<tr>
			<td><b>Nome</b></td>
			<td><b>Idade</b></td>
			<td><b><font face =	"arial" size=5 color ="blue">Sim:</b></td>
		 	<td><b><font face = "arial" size=5 color ="blue">Não:</b></td>
	 	</tr>
	</thead>
	<tr>
		<td><input type="text" name="nomefilho"></td>
		<td><input type="text" name="idadefilho"></td>
 		<td><input type="radio" name="nameradiofilho" id = "idsimfilho" value="ant_yes"></td>
	 	<td><input type="radio" name="nameradiofilho" id = "idnaofilho" value="ant_no"></td>
	</tr>
</table>

Eventos de Formulário Pai Filho

Para facilitar a manipulação dos dados em uma customização de formulário que faz uso da técnica Pai Filho, foram disponibilizados os métodos listados a seguir. Ambos são chamados a partir do objeto form que é passado como parâmetro nas funções de customização de formulários.

getChildrenFromTable

Esse evento retorna um mapa com todos os campos filhos de um Pai Filho a partir do seu tablename.

getChildrenIndexes

Esse evento retorna os índices dos registros (linhas) contidos em um Pai Filho a partir do seu tablename.

Exemplo:

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";
    }
}

Formulários para dispositivos móveis

Com a inclusão de definição de formulários que suportem a visualização em dispositivos móveis, é possível movimentar solicitações Workflow através destes dispositivos e realizar o preenchimento das informações da definição de formulários HTML, garantindo maior mobilidade e agilidade para realizar movimentações de solicitações workflow.

Para incluir um novo fichário com suporte de dispositivos móveis, realize o procedimento padrão para exportação da definição de formulário e selecione os campos que irão compor o formulário mobile na tela antes da conclusão da exportação. Após a exportação será incluindo também outro arquivo HTML e marcando-o como "mobile" na pasta forms do projeto Fluig.

Veja na imagem a seguir a tela de seleção mobile na exportação de uma definição de formulário:

Figura 15 - Definição de formulário mobile.

Após exportado o formulário deve ficar conforme a seguir:

Figura 16 - Resultado formulário mobile.

Pai Filho para dispositivos móveis

Os campos que empregam a técnica de pai e filho não são inseridos no formulário gerado automaticamente para dispositivos móveis pelo Fluig. Porem o produto lhe permite desenvolver um formulário customizado para dispositivos móveis consultando estes campos.

A edição de campos pai e filho através de dispositivos mobile não é possível, mesmo em formulários customizados. Somente consulta.

A consulta aos campos pai e filho em dispositivos móveis é realizada por meio de funções javaScript, disponíveis dentro do objeto masterList no momento da exibição do formulário. São elas:

getValue

Retorna uma string com o valor de um campo pai e filho, recebendo como parâmetros o numero de sequencia do filho e o nome do campo.

masterList.getValue(sequence,field);

getValues

Retorna um objeto com todos os valores dos campos pai e filho, agrupados pelo numero de sequencia. Este método não possui parâmetros.

masterList.getValues();

getValuesBySequence

Retorna um objeto com todos os valores do campos de uma determinada sequencia. Recebe como paramento o numero da sequencia.

masterList.getValuesBySequence(sequence);

getValuesByField

Retorna todas as sequencias e valores de um determinado campo. Recebe como parâmetro o nome do campo.

masterList.getValuesByField(field);

Exemplos: Formulários Pai Filho + Eventos.

Tradução de formulários

Para traduzir formulários é necessário utilizar a função i18n.translate(“literal_da_tradução”) nos pontos do arquivo HTML que devem ser traduzidos, conforme exemplo a seguir:

<label>i18n.translate("nm_cliente")</label>
<input name=”nm_cliente”>
<br>
<label>i18n.translate("contato_cliente")</label>
<input name=”contato_cliente”>

As literais e seus respectivos valores são informados em arquivos de propriedades com a extensão .properties para cada um dos idiomas desejados. Os idiomas suportados para a tradução são os mesmos suportados pelo Fluig:

Português (pt_BR);
Inglês (en_US);
Espanhol (es).

Os arquivos contendo as literais têm a seguinte nomenclatura:

Português: nome_do_formulario_pt_BR.properties;
Inglês: nome_do_formulario_en_US.properties;
Espanhol: nome_do_formulario_es.properties.

Os arquivos de propriedades são criados de acordo com os passos apresentados a seguir:

Para gerar os arquivos de propriedades, na visão Explorador de Pacotes, deve-se acessar o arquivo HTML do formulário a ser traduzido, clicar com o botão direito e acessar a opção Externalizar Strings.

Figura 1 - Menu Contextual Externalizar Strings.

Os arquivos contendo as literais são criados na pasta do formulário.

Figura 2 - Arquivos Properties na Pasta do Formulário.

Informe os valores correspondentes às literais para o idioma de cada arquivo.

Figura 3 - Edição de um Arquivo Properties.

Ao exportar um formulário para o Fluig, os arquivos de propriedades contendo as literais são publicados como anexos dele.
O formulário é apresentado no idioma que está configurado para o usuário corrente.

Third Party Trademarks

Adobe, Flash, Flex, Flex Builder, PostScript and Reader are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.

Apache is a trademark of The Apache Software Foundation.

Apple is a trademark of Apple Inc., registered in the U.S. and other countries.

Firefox and Mozilla are registered trademarks of the Mozilla Foundation.

Google, Android and Google Chrome are trademarks of the Google Inc.

IOS is a trademark or registered trademark of Cisco in the U.S. and other countries and is used under license.

JavaScript is a trademark of Oracle Corporation.

Linux® is the registered trademark of Linus Torvalds in the U.S. and other countries.

Microsoft, Active Directory, Excel, Internet Explorer, Outlook, PowerPoint, SQL Server, Windows and Windows Vista are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries.

MySQL is a trademark of Oracle Corporation and/or its affiliates.

Oracle, Java and OpenOffice.org are registered trademarks of Oracle and/or its affiliates. Other names may be trademarks of their respective owners.

Progress and OpenEdge are trademarks or registered trademarks of Progress Software Corporation or one of its subsidiaries or affiliates in the U.S. and other countries.

Red Hat and JBoss are registered trademarks of Red Hat, Inc. in the United States and other countries.

Any other third party trademarks are the property of their respective owners.

Árvore de páginas

Desenvolvimento de Formulários

Índice

Declaración <!DOCTYPE> HTML

FormController

Personalización de Formularios:

Customização de Formulários

AfterProcessing

AfterSaveNew

BeforeProcessing

DisplayFields

EnableFields

InputFields

SetEnable

ValidateForm

Controles visuales

Máscara de Espacios

ComboBox

Zoom

Zoom Externo

Serviços de Dados

Dataset

DataService

Pai Filho

Pai Filho Radio Button

Eventos de Formulário Pai Filho

getChildrenFromTable

getChildrenIndexes

Formulários para dispositivos móveis

Pai Filho para dispositivos móveis

getValue

getValues

getValuesBySequence

getValuesByField

Tradução de formulários

Third Party Trademarks