| 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> |
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
...
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 camposos workflows que necessitem execução de zoom Logix é necessário incluir ao final do HTML o script wfLogixUtil.js e exportar o arquivo Javascript junto ao formulário.
| Bloco de código | ||||
|---|---|---|---|---|
| ||||
<head><body> <!-- 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> |
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.
...
/body> |
Os estilos dos formulários HTML devem seguir o padrão do guia de estilo do Fluig encontrado no link http://style.fluig.com
| Float | ||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||||||||
Componentes
|
...
| side | right |
|---|---|
| width | 70% |
...
| visible | true |
|---|---|
| id | agrupadores |
Utilize agrupadores para organizar o formulário HTML e manter os processos padronizados e responsíveis.
...
| id | abas |
|---|
As abas organizam os elementos de forma simples e objetiva otimizando a utilização da área de trabalho.
...
| id | labels |
|---|
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.
...
| id | texto |
|---|
Para campos de texto, utilizar no elemento input a classe .fw-input-char.
...
| id | numericos |
|---|
Para campos numéricos, utilizar no elemento input a classe .fw-input-number.
...
| id | datas |
|---|
Para campos de datas, utilizar no elemento input a classe .fw-input-date.
...
| id | selects |
|---|
Para campos de seleção, utilizar no elemento select a classe .fw-input-select.
...
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 | ||||
|---|---|---|---|---|
| ||||
{
"picture": "@!"
} |
| Bloco de código | ||||
|---|---|---|---|---|
| ||||
<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.
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 | ||||
|---|---|---|---|---|
| ||||
{
"zoom": {
"name": "zoom_item",
"selection": [
["cod_item_compon","cod_item"],
["den_item","den_item_reduz"]
],
"whereclause": {
"fn": "setWhereClause",
"args": ["item"]
}
}
} |
...
| Nota |
|---|
Além das informações do zoom acima é necessário incluir nos elementos o atributo data-input-zoom |
| Bloco de código | ||||
|---|---|---|---|---|
| ||||
<div class="fw-input"><div> <label classfor="fw-descr-top-obrigatcod_item_compon">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> |
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.
| Bloco de código | ||||
|---|---|---|---|---|
| ||||
<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> |
...
Em formulários Pai Filho os campos filhos são criados dinamicamente e consequentemente os estilos e comportamentos o comportamento destes campos não seguem segue o mesmo padrão dos outros campos do formulário quando utilizado os estilos e eventos padrões do Logix. Para solucionar este problema é recomendável seguir os passos abaixo:
...
| Bloco de código | ||||
|---|---|---|---|---|
| ||||
<div style="padding: 10px; margin-bottom: 5px;"><div> <input type="button" onclick="addItem('itens');" value="Adicionar item"/> </div> <table noaddbutton="true" tablename="itens"> <!-- Código HTML --> </table> |
...
| Bloco de código | ||||
|---|---|---|---|---|
| ||||
function addItem(tablename) { var tablename = "item_pai"; row = wdkAddChild(tablename); initLogixHtml(initLogixHtml({ "tablename": tablename, "row": row }); } |
Seguindo os passos acima, os itens filhos irão se comportar normalmente assim como o restante dos campos do formulário.
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.
| Bloco de código | ||||
|---|---|---|---|---|
| ||||
<div>
<label for="cod_empresa">Empresa:</label>
<input type="text" name="cod_empresa" data='{"zoom":{"name":"zoom_empresa","selection":[["cod_empresa","cod_empresa"],["den_empresa","den_empresa"]]}}' data-cod-empresa data-input-zoom>
</div> |
