Composition Setup
import.css=/download/attachments/108660318/wfLogixStyles.css

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
 
<script type="text/javascript" src="/download/attachments/108660318/wfLogixScripts.js"></script>
<script type="text/javascript">
$(function () {
    $("p").filter(function() {
        return $.trim($(this).text()) === '' || $.trim($(this).text()) === '&nbsp;';
    }).remove();
    
    initLogixHtml();
});
</script>

Índice

No Fluig é possível utilizar processos que efetuam integração com o Logix. Estes processos são criados utilizando o Fluig Studio, para saber mais sobre esta ferramenta consulta a documentação em: Fluig Studio. Abaixo pode ser encontrado a documentação para a criação de um processo utilizando estilos e eventos padrões disponíveis para o Logix caso desejável.

Índice

maxLevel	2
outline	true

...

exclude	1

Script padrão Logix

Para os workflows que necessitem execução de zoom Logix é necessário incluir ao final do HTML o script wfLogixUtil.js e exportar o arquivo Javascript junto ao formulário

Para utilizar os estilos e eventos padrões disponíveis é necessário primeiramente que no formulário HTML do processo sejam referenciadas as bibliotecas JavaScript jQuery na versão 1.8.3 e jQueryUI na versão 1.9.2 (para mais informações visite http://jquery.com/ e http://jqueryui.com/).

Além das citadas anteriormente, é necessário referenciar a biblioteca wfLogixUtil (disponível para baixar na lista de anexos no fim desta página), responsável por carregar os estilos e eventos padrões, alterar o estilo do formulário e carregar os zooms atribuídos para os campos.

Bloco de código

theme	Eclipse
language	html/xml

<head><body>
    <!-- Código HTML -->

    <script <!-- Biblioteca JavaScript do Fluig/ECM -->
    <script type="text/javascript" src="../vcXMLRPC.js"></script>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="wfLogixUtil.js"></script>

    <!-- Código HTML -->
</head>

...

Atualmente existem uma séries de classes CSS que podem ser utilizadas através do arquivo de estilos padrão para estilizar e agrupar os elementos do formulário HTML.

...

Float

side	left
width	20%

Componentes

Agrupadores
Toggle Cloak
exclusive true
id agrupadores
Abas
Toggle Cloak
exclusive true
id abas
Descrições
Toggle Cloak
exclusive true
id labels
Campos de texto
Toggle Cloak
exclusive true
id texto
Campos numérico
Toggle Cloak
exclusive true
id numericos
Campos de data
Toggle Cloak
exclusive true
id datas
Campos de seleção
Toggle Cloak
exclusive true
id selects

...

side	right
width	70%

src="wfLogixUtil.js"></script>
</body>

Estilo padrão

Os estilos dos formulários HTML devem seguir o padrão do guia de estilo do Fluig encontrado no link http://style.fluig.com.

Zooms

Para atribuir zooms aos campos é necessário incluir no elemento o atributo data com as informações do zoom no formato JSON string.

Bloco de código

theme	Eclipse
language	javascript

{
    "zoom": {
        "name": "zoom_item",
        "selection": [
            ["cod_item_compon","cod_item"],
            ["den_item","den_item_reduz"]
        ],
        "whereclause": {
            "fn": "setWhereClause",
            "args": ["item"]
        }
    }
}

As informações que devem ser atribuídas para o correto funcionamento do zoom são:

name: nome do zoom cadastrado no metadado Logix.
selection:
- lista com os campos que serão carregados ao selecionar o registro no zoom, o primeiro item é o nome do campo do formulário e o segundo é o nome do campo no zoom do qual o primeiro item receberá o valor.
whereclause:
- fn: função JavaScript que será executada quando o zoom for acionado para retornar o filtro SQL a ser considerado na apresentação dos registros do zoom.
- args: lista com valores que serão passados como parâmetros para a função definida no atributo fn.

Nota
Além das informações do zoom acima é necessário incluir nos elementos o atributo data-input-zoom para que seja possível identificar quais campos possuirão zoom.

Exemplo

Bloco de código

theme	Eclipse
language	html/xml

<div>
    <label for="cod_item_compon">Componente atual

...

visible	true
id	agrupadores

Agrupadores

Utilize agrupadores para organizar o formulário HTML e manter os processos padronizados e responsíveis.

...

id	abas

Abas

As abas organizam os elementos de forma simples e objetiva otimizando a utilização da área de trabalho.

...

id	labels

Descrições

As descrições são desenvolvidas utilizando elementos label com a classe .fw-descr-top ou .fw-descr-top-obrigat para destacar campos obrigatórios.

...

id	texto

Campos de texto

Para campos de texto, utilizar no elemento input a classe .fw-input-char.

...

id	numericos

Campos Numéricos

Para campos numéricos, utilizar no elemento input a classe .fw-input-number.

...

id	datas

Campos de Data

Para campos de datas, utilizar no elemento input a classe .fw-input-date.

...

id	selects

Campos de Seleção

Para campos de seleção, utilizar no elemento select a classe .fw-input-select.

...

Máscaras

Para atribuir máscaras para os elementos, utilizar o atributo data. As máscaras seguem o mesmo formato do AdvPL e pode ser consultado aqui: Tabela de Pictures de Formatação.

HTML

<div class="fw-model fw-input">
    <label class="fw-descr-top-obrigat">Nome:</label>
    <input type="text" classname="fw-input-char" maxlength="30" cod_item_compon" data='{"picturezoom":{"@!"}'/>
</div>
 
<div class="fw-model fw-input">
    <label class="fw-descr-top">Idade:</label>
    <input type="text" class="fw-input-number" data='{"picture":"9999999999"}'/>
</div>

name":"zoom_item","selection":[["cod_item_compon","cod_item"],["den_item","den_item_reduz"]],"whereclause":{"fn":"setWhereClause","args":["item"]}}}' data-input-zoom>
</div>

Zoom em formulários Pai x Filho

Em formulários Pai Filho os campos filhos são criados dinamicamente e consequentemente o comportamento destes campos não segue o mesmo padrão dos outros campos do formulário. Para solucionar este problema é recomendável seguir os passos abaixo:

1. Criar o botão e evento de inclusão de campos filhos manualmente

- Para isto deve-se incluir no elemento de tabela do formulário o atributo noaddbutton com o valor true;
- Na ação do botão, informar o evento addItem enviando por parâmetro o nome da tabela filha.

Exemplo

Bloco de código

theme	Eclipse
language	html/xml

<div>
    <input type="button" onclick="addItem('itens');" value="Adicionar item"/>
</div>

<table noaddbutton="true" tablename="itens">
    <!-- Código HTML -->
</table>

2. Criar o evento JavaScript para incluir e alterar o estilos dos campos filhos

- Para incluir novos itens filhos, utilizar a função padrão wdkAddChild passando por parâmetro o nome definido no atributo tablename;
- O evento wdkAddChild irá criar os itens filhos e retornar o número da linha criada;
- Após, executar a função initLogixHtml passando um objeto com o número da linha e o nome da tabela definido no atributo tablename.

Exemplo

Bloco de código

theme	Eclipse
language	javascript

function addItem(tablename) {
    var row = wdkAddChild(tablename);
    initLogixHtml({ "tablename": tablename, "row": row });
}

Seguindo os passos acima, os itens filhos irão se comportar normalmente assim como o restante dos campos do formulário.

Defindo o código da empresa

Para utilizar as rotinas do Logix a partir do workflow é necessário que haja o código da empresa que será utilizada na rotina. Para isso, deve criar um campo no formulário onde será informado o código da empresa e incluir para este campo o atributo data-cod-empresa. O valor informado no campo que possuir este atributo será considerado o código da empresa na rotina durante a execução.

Exemplo

Bloco de código

theme	Eclipse
language	html/xml

<div><div class="fw-model fw-input">
    <label class="fw-descr-top-obrigat">Nome:</label>
    <input type="text" class="fw-input-char" maxlength="30" data='{"picture":"@!"}'/>
</div>
 
<div class="fw-model fw-input">
    <label classfor="fw-descr-top">Idadecod_empresa">Empresa:</label>
    	<input type="text" classname="fw-input-numbercod_empresa" data='{"picture":"9999999999"}'/>zoom":{"name":"zoom_empresa","selection":[["cod_empresa","cod_empresa"],["den_empresa","den_empresa"]]}}' data-cod-empresa data-input-zoom>
</div>

Anexos

Biblioteca JavaScript Script padrão wfLogixUtil.js.

Páginas filhas

Versões comparadas

Versão antiga 172

Nova versão Atual

Chave

Índice

Script padrão Logix

Componentes

Estilo padrão

Zooms

Exemplo

Agrupadores

Abas

Descrições

Campos de texto

Campos Numéricos

Campos de Data

Campos de Seleção

Máscaras

Zoom em formulários Pai x Filho

Exemplo

Exemplo

Defindo o código da empresa

Exemplo

Anexos

Páginas filhas

Histórico da Página

Versões comparadas

Versão antiga 172

Nova versão Atual

Chave

Índice

Script padrão Logix

Componentes

Estilo padrão

Zooms

Exemplo

Agrupadores

Abas

Descrições

Campos de texto

Campos Numéricos

Campos de Data

Campos de Seleção

Máscaras

Zoom em formulários Pai x Filho

Exemplo

Exemplo

Defindo o código da empresa

Exemplo

Anexos