import.css=/download/attachments/5263564/framework.css

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.

Agrupadores de:

  • conteúdo → fw-model

  • grupos → fw-box

  • campos → fw-fields

  • abas → fw-folder

Agrupadores

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

 

 

<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>
    <div class="fw-box">
      <h3>Grupo (.fw-box)</h3>
      <div class="fw-input">
        <h4>.fw-input</h4>
      </div>
    </div>
  </div>
</form>

Agrupa em um elemento div os elementos de uma determinada tabela ou seção (um agrupamento para mestre e outro para detalhe por exemplo). 

<form method="post">
	<!-- INICIO DO CONTEUDO DO FORMULARIO -->
 
	<div class="fw-model ui-widget-content">
		<div id="MESTRE" class="fw-box" style="height: 60%; width: 100%;">
			<!-- Elementos do formulário HTML, campos, seletores, grupos, etc. -->
		</div>

		<div id="DETALHE" class="fw-box" style="height: 40%; width: 100%;">
			<!-- Tabelas ou grades com informações em listas -->
		</div>
	</div>
 
	<!-- FIM DO CONTEUDO DO FORMULARIO -->
</form>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Anexos