...

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

Neste capítulo será demonstrado como interagir com alguns tipos de controles do formulário que possuem características especiais, como por exemplo, o preenchimento do conteúdo de um ComboBox através da utilização de Datasets.

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.

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.

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

"/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.

function setSelectedZoomItem(selectedItenom) {               
}

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

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:

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

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

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:

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

Neste capítulo será demonstrado como interagir com alguns tipos de controles do formulário que possuem características especiais, como por exemplo, o preenchimento do conteúdo de um ComboBox através da utilização de Datasets.

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.

"/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.

function setSelectedZoomItem(selectedItenom) {               
}

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

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:

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

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

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

...

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

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:

Image Removed

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

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

Image Removed

...

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

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:

Image Added

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

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

Image Added

Figura 16 - Resultado formulário mobile.

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

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 conforme os passos a seguir:

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.

...