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>
<script type="text/javascript">$(function(){initLogixHtml();});</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.
AgrupadoresUtilize as classes de agrupadores para organizar os elementos do 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: 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>
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> |
|
DescriçõesAs 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 textoPara 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éricosPara 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 DataPara 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çãoPara 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_acao" 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_acao" class="fw-input-select">
<option value="M">Masculino</option>
<option value="F">Feminino</option>
</select>
</div>
|
|
|
|
Anexos