Páginas filhas
  • 4.1. Criação de processos

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.
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
outlinetrue

Âncora
estilos_e_eventos
estilos_e_eventos
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.


Bloco de código
themeEclipse
languagehtml/xml
<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>

Âncora
CLASSES_CSS
CLASSES_CSS
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.

Painel
Float
sideleft
width20%

Componentes

  • Agrupadores

    Toggle Cloak
    exclusivetrue
    idagrupadores

  • Abas
    Toggle Cloak
    exclusivetrue
    idabas
  • Descrições
    Toggle Cloak
    exclusivetrue
    idlabels
  • Campos de texto 
    Toggle Cloak
    exclusivetrue
    idtexto
  • Campos numérico
    Toggle Cloak
    exclusivetrue
    idnumericos
  • Campos de data
    Toggle Cloak
    exclusivetrue
    iddatas
  • Campos de seleção
    Toggle Cloak
    exclusivetrue
    idselects
  • Máscaras
    Toggle Cloak
    exclusivetrue
    idpicts
Float
sideright
width70%
Cloak
visibletrue
idagrupadores

Agrupadores

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


 

Eclipsehtml/xml
Cloak
idabas

Abas

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


 

Eclipsehtml/xml
Cloak
idlabels

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.


 


Eclipsehtml/xml


Cloak
idtexto

Campos de texto

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


 


Eclipsehtml/xml


Cloak
idnumericos

Campos Numéricos

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


 


Eclipsehtml/xml


Cloak
iddatas

Campos de Data

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


 


Eclipsehtml/xml


Cloak
idselects

Campos de Seleção

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


 

Eclipsehtml/xml

 

pictstrue

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


 

Eclipsehtml/xml



Anexos