import.css=/download/attachments/5263564/framework.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>

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

  • Descrições de campos
  • Campos de Texto 
  • Campos Numérico
  • Campos de data
  • Campos de seleção de valores

Agrupadores

Utilize as classes de agrupadores para organizar os elementos do formulário HTML e manter os processos padronizados e responsíveis.

Exemplo

<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: 98%">
        <pre>.fw-model</pre>
        <div style="background-color: #C1CD89; border: 1px dashed #0000FF; font-size: 12px; margin: 10px; width: 98%">
            <pre>.fw-box</pre>
            <div style="background-color: #8AB3BF; border: 1px dashed #0000FF; font-size: 11px; margin: 10px; width: 98%">
                <pre>.fw-input</pre>
            </div>
            <div style="background-color: #8AB3BF; border: 1px dashed #0000FF; font-size: 11px; margin: 10px; width: 98%">
                <pre>.fw-input</pre>
            </div>
        </div>
    </div>
</div>
<form>
    <h1>Formulário HTML (form)</h1>
    <div class="fw-model">
        <h2>Conteúdo (.fw-model)</h2>
        <div class="fw-box">
            <h3>Grupo (.fw-box)</h3>
            
            <div class="fw-input">
                <h4>.fw-input</h4>
            </div>
 
            <div class="fw-input">
                <h4>.fw-input</h4>
            </div>
        </div>
    </div>
</form>

Campos de Texto

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

Exemplo

<div class="fw-input">
    <label class="fw-descr-top">Campo texto:</label>
	<input type="text" name="campo_texto" title="Exemplo de um campo texto" class="fw-input-char" maxlength="50" size="50">
</div>


<div class="fw-input">
    <label class="fw-descr-top">Campo de texto:</label>
	<input type="text" name="campo_texto" title="Exemplo de um campo texto" class="fw-input-char" maxlength="50" size="50">
</div>


Campos Numéricos

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

Exemplo

<div class="fw-input">
    <label class="fw-descr-top">Campo numérico:</label>
	<input type="text" name="campo_numerico" title="Exemplo de um campo numérico" class="fw-input-number" maxlength="50" size="50" data='{"picture":"@E 9999999999999"}'>
</div>
<script type="text/javascript">
$('[name="campo_numerico"]').fwPicture({type:"N"});
</script>


<div class="fw-input">
    <label class="fw-descr-top">Campo numérico:</label>
	<input type="text" name="campo_numerico" title="Exemplo de um campo numérico" class="fw-input-number" maxlength="50" size="50" data='{"picture":"@E 9999999999999"}'>
</div>


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Anexos