| 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()) === ' ';
}).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 |
|---|
| maxLevel | 2 |
|---|
| outline | true |
|---|
| exclude | 1 |
|---|
|
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 |
|---|
| theme | Eclipse |
|---|
| language | html/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> |
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 |
|---|
| ComponentesAgrupadores | Toggle Cloak |
|---|
| exclusive | true |
|---|
| id | agrupadores |
|---|
|
- Abas
- Descrições
- Campos de texto
- Campos numérico
- Campos de data
- Campos de seleção
|
| Float |
|---|
| | Cloak |
|---|
| AgrupadoresUtilize agrupadores para organizar o formulário HTML e manter os processos padronizados e responsíveis.
Eclipsehtml/xml |
| Cloak |
|---|
| AbasAs abas organizam os elementos de forma simples e objetiva otimizando a utilização da área de trabalho.
Eclipsehtml/xml |
| Cloak |
|---|
| 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.
Eclipsehtml/xml
|
| Cloak |
|---|
| Campos de textoPara campos de texto, utilizar no elemento input a classe .fw-input-char.
Eclipsehtml/xml
|
| Cloak |
|---|
| Campos NuméricosPara campos numéricos, utilizar no elemento input a classe .fw-input-number.
Eclipsehtml/xml
|
| Cloak |
|---|
| Campos de DataPara campos de datas, utilizar no elemento input a classe .fw-input-date.
Eclipsehtml/xml
|
| Cloak |
|---|
| Campos de SeleçãoPara campos de seleção, utilizar no elemento select a classe .fw-input-select.
Eclipsehtml/xml |
|
|
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.
| Bloco de código |
|---|
| theme | Eclipse |
|---|
| language | javascript |
|---|
|
{
"picture": "@!"
} |
Exemplo
| Bloco de código |
|---|
| theme | Eclipse |
|---|
| language | html/xml |
|---|
|
<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.
| Bloco de código |
|---|
| theme | Eclipse |
|---|
| language | javascript |
|---|
|
{
"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:
- name: nome do zoom cadastrado no metadado Logix.
- selection:
- lista com os campos que serão carregados ao selecionar o registro no zoom, o primeiro item é o nome do campo do formulário e o segundo é o nome do campo no zoom do qual o primeiro item receberá o valor.
- whereclause:
- fn: função JavaScript que será executada quando o zoom for acionado para retornar o filtro SQL a ser considerado na apresentação dos registros do zoom.
- args: lista com valores que serão passados como parâmetros para a função definida no atributo fn.
| Nota |
|---|
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
| Bloco de código |
|---|
| theme | Eclipse |
|---|
| language | html/xml |
|---|
|
<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
| Bloco de código |
|---|
| theme | Eclipse |
|---|
| language | html/xml |
|---|
|
<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
