import.css=/download/attachments/108660318/wfLogixStyles.css
<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.


Estilos e eventos padrões

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.


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

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

Classes CSS

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.

Componentes

  • Agrupadores

  • Abas
  • Descrições
  • Campos de texto 
  • Campos numérico
  • Campos de data
  • Campos de seleção

Agrupadores

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

 

<div style="background-color: #F8CB9C; border: 1px dashed #0000FF; font-size: 14px; padding: 10px; width: 97.5%">
    <pre>form</pre>
    <div style="background-color: #FCDB9A; border: 1px dashed #0000FF; font-size: 13px; padding: 10px; width: 96%">
        <pre>.fw-model</pre>
        <div style="background-color: #C1CD89; border: 1px dashed #0000FF; font-size: 12px; margin: 10px; width: 94%">
            <pre>.fw-box</pre>
            <div style="background-color: #8AB3BF; border: 1px dashed #0000FF; font-size: 11px; margin: 10px; width: 92%">
                <pre>.fw-input</pre>
            </div>
            <div style="background-color: #8AB3BF; border: 1px dashed #0000FF; font-size: 11px; margin: 10px; width: 92%">
                <pre>.fw-input</pre>
            </div>
        </div>
    </div>
</div>
<form>
    form
    <div class="fw-model">
        .fw-model
        <div class="fw-box">
            .fw-box
            <div class="fw-input">.fw-input</div>
            <div class="fw-input">.fw-input</div>
        </div>
    </div>
</form>

Abas

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

 

<div class="fw-model ui-widget-content">
    <div class="fw-box" style="height: 99%; width: 100%;">
        <div class="fw-fields">
            <div class="fw-folder">
                <ul>
                    <li><a href="#FOLDER_1">Aba 1</a></li>
                    <li><a href="#FOLDER_2">Aba 2</a></li>
                    <li><a href="#FOLDER_3">Aba 3</a></li>
                </ul>
                <div class="fw-sheet" id="FOLDER_1">
                    <div class="ui-widget-content ui-corner-all">
                        <fieldset>
                            Conteúdo do Aba 1
                        </fieldset>
                    </div>
                </div>
                <div class="fw-sheet" id="FOLDER_2">
                    <div class="ui-widget-content ui-corner-all">
                        <fieldset>
                            Conteúdo do Aba 2
                        </fieldset>
                    </div>
                </div>
                <div class="fw-sheet" id="FOLDER_3">
                    <div class="ui-widget-content ui-corner-all">
                        <fieldset>
                            Conteúdo do Aba 3
                        </fieldset>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="fw-model ui-widget-content">
    <div class="fw-box" style="height: 99%; width: 100%;">
        <div class="fw-fields">
            <div class="fw-folder">
                <ul>
                    <li><a href="#FOLDER_1">Aba 1</a></li>
                    <li><a href="#FOLDER_2">Aba 2</a></li>
                    <li><a href="#FOLDER_3">Aba 3</a></li>
                </ul>
                <div class="fw-sheet" id="FOLDER_1">
                    <div class="ui-widget-content ui-corner-all">
                        <fieldset>
                            Conteúdo do Aba 1
                        </fieldset>
                    </div>
                </div>
                <div class="fw-sheet" id="FOLDER_2">
                    <div class="ui-widget-content ui-corner-all">
                        <fieldset>
                            Conteúdo do Aba 2
                        </fieldset>
                    </div>
                </div>
                <div class="fw-sheet" id="FOLDER_3">
                    <div class="ui-widget-content ui-corner-all">
                        <fieldset>
                            Conteúdo do Aba 3
                        </fieldset>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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.

 

<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 class="fw-descr-top">Idade:</label>
    <input type="text" class="fw-input-number" data='{"picture":"9999999999"}'/>
</div>
 
<div class="fw-model fw-input">
    <label class="fw-descr-top">Aniversário:</label>
    <input type="text" class="fw-input-date"/>
</div>


<div class="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-input">
    <label class="fw-descr-top">Idade:</label>
    <input type="text" class="fw-input-number" data='{"picture":"9999999999"}'/>
</div>
 
<div class="fw-input">
    <label class="fw-descr-top">Aniversário:</label>
    <input type="text" class="fw-input-date"/>
</div>


Campos de texto

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

 

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



<div class="fw-input">
    <label class="fw-descr-top">Nome:</label>
    <input type="text" class="fw-input-char" maxlength="30" data='{"picture":"@!"}'/>
</div>


Campos Numéricos

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

 

<div class="fw-model fw-input">
    <label class="fw-descr-top">Idade:</label>
    <input type="text" class="fw-input-number" data='{"picture":"9999999999"}'/>
</div>


<div class="fw-input">
    <label class="fw-descr-top">Idade:</label>
    <input type="text" class="fw-input-number" data='{"picture":"9999999999"}'/>
</div>


Campos de Data

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

 

<div class="fw-model fw-input">
    <label class="fw-descr-top">Aniversário:</label>
    <input type="text" class="fw-input-date"/>
</div>


<div class="fw-input">
    <label class="fw-descr-top">Aniversário:</label>
    <input type="text" class="fw-input-date"/>
</div>


Campos de Seleção

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

 

<div class="fw-model fw-input">
    <label class="fw-descr-top">Sexo:</label>
    <select name="slct_sexo" class="fw-input-select">
      <option value="M">Masculino</option>
      <option value="F">Feminino</option>
    </select>
</div>
<div class="fw-input">
    <label class="fw-descr-top">Sexo:</label>
    <select name="slct_sexo" class="fw-input-select">
      <option value="M">Masculino</option>
      <option value="F">Feminino</option>
    </select>
</div>

Máscaras

Para atribuir máscaras aos campos é necessário incluir no elemento o atributo data com as informações da máscara no formato JSON string.

{
    "picture": "@!"
}
Exemplo
<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 class="fw-descr-top">Idade:</label>
    <input type="text" class="fw-input-number" data='{"picture":"9999999999"}'/>
</div>

As máscaras seguem o mesmo formato do AdvPL e pode ser consultado aqui: Tabela de Pictures de Formatação.

Zooms

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

 

{
    "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:

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
<div class="fw-input">
    <label class="fw-descr-top-obrigat">Componente atual:</label>
    <input type="text" name="cod_item_compon" class="fw-input-char" maxlength="15" data='{"picture":"@!","zoom":{"name":"zoom_item","selection":[["cod_item_compon","cod_item"],["den_item","den_item_reduz"]],"whereclause":{"fn":"setWhereClause","args":["item"]}}}' data-input-zoom>
</div>

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

 

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

Anexos