Apostila BPM Intermediate - Conteúdo - Fluig Academy

APOSTILA BPM INTERMEDIATE - CONTEÚDO | fluig Academy http://www.academy.fluig.
com/bpm_intermediate_conteudo
APOSTILA BPM INTERMEDIATE -

CONTEÚDO
BPM INTERMEDIATE
Capítulo 1 - PREPARANDO O AMBIENTE
Antes de iniciar o desenvolvimento de processos e formulá rios no ϐluig é fundamental preparar o
ambiente em que você logo criará suas soluçõ es em BPM.
# ϐluig Studio
Todo o desenvolvimento abordado será realizado dentro de uma IDE, ou seja, um ambiente de
desenvolvimento integrado.
As seguintes IDEs sã o homologadas para o desenvolvimento no ϐluig:
1 of 24 09/04/2019 15:25
APOSTILA BPM INTERMEDIATE - CONTEÚDO | fluig Academy http://www.academy.fluig.com/bpm_intermediate_conteudo
Realize a instalaçã o de uma das IDEs homologadas, conforme .
# Plugin ϐluig Designer
Uma vez instalada a sua IDE, é hora de instalar o plugin do ϐluig que permite a criaçã o e desenvolvimento
de recursos sobre a IDE. Para instalá -lo siga os passo:
1. No menu superior, acionar Ajuda.

2. Acionar a opçã o Instalar Novo Software.
3. Adicionar um novo repositó rio informando um nome e o endereço update.ϐluig.com.
4. Selecione a opçã o ϐluig Designer.
5. Prossiga com a instalaçã o e reinicie a IDE.
Se preferir, pode conferir o passo a passo em .
// Criar Servidor
Os desenvolvimentos no ϐluig sã o feitos da seguinte forma: você desenvolve local e faz deploy no
servidor. Entã o o pró ximo passo é cadastrar um servidor na sua IDE para poder fazer deploy no servidor,
da seguinte forma:
1. Na aba ϐluig Servers, clique com o botã o direito e acione Fluig > Fluig Servers.
2. Informe os dados de acesso ao seu servidor e pronto.
# Exercitando
Entã o chegamos ao termino do primeiro capı́tulo, e chegou a hora de treinar um pouco sobre os
conceitos abordados.
1. Qual o endereço do repositó rio para download do plugin ϐluig Designer, no ϐluig Studio?
1. ( ) http://suporte.ϐluig.com
2. ( ) http://update.ϐluig.com
3. ( ) http://download.ϐluig.com
4. ( ) http://designer.ϐluig.com
2. Quais das seguintes IDEs sã o homologadas para o desenvolvimento de componentes para o ϐluig?
1. ( ) TOTVS Developer Studio
2. ( ) Visual Studio Code
2 of 24 09/04/2019 15:25
3. ( ) Eclipse Luna
4. ( ) Eclipse Neon
Capítulo 2 - DESENVOLVIMENTO DE
FORMULÁRIOS
# Criar Formulário
O desenvolvimento de formulá rios é feito atravé s de linguagens web.
Para criar um formulá rio no ϐluig Studio, clique com o botã o direito sobre o seu projeto ϐluig e acione
Novo > Formulá rio.
Um diretó rio com o nome do seu formulá rio será criado em seu projeto ϐluig, sob a pasta forms, nela você
terá o arquivo HTML correspondente à deϐiniçã o do seu formulá rio.
Perceba que o formulá rio criado já possui referê ncias:
CSS do Guia de Estilos do ϐluig.

Biblioteca do jQuery.
Biblioteca do jQuery UI.
Biblioteca do Mustache.
Biblioteca do Guia de Estilos do ϐluig.
Ou seja, você nã o precisa importar as bibliotecas do jQuery, por exemplo, pois o ϐluig já faz isso na
criaçã o do formulá rio.
Repare que uma div com a classe ϐluig-style-guide foi criada. Todos os elementos que estiverem dentro
desta tag obedecerã o o ϐluig Style Guide, de acordo com as classes que forem aplicadas.
Dentro desta div há uma tag form. Sã o os elementos presentes dentro desta tag que deϐinirã o a estrutura
do seu formulá rio.
Para mais detalhes, veja o capı́tulo .
# Criar Campos de Formulário
Um formulá rio é composto por campos. Imagine, por exemplo, um formulá rio de solicitaçã o de fé rias.
3 of 24 09/04/2019 15:25
Alguns campos que podem compor este formulá rio sã o:
Nome do Solicitante
E-mail do Solicitante
Quantidade de Dias
Data de Inı́cio das Fé rias
Nome do Gestor
E-mail do Gestor
Para criar um campo, basta adicionar um campo input no seu formulá rio, como a seguir:
Para que o campo ϐique intuitivo, adicione sempre a label referente ao campo.
O atributo name da tag input é o responsá vel por deϐinir que aquele campo fará parte do formulá rio. O
mesmo vale para outros elementos e tipos do campo input, como select, radio, list, checkbox e textarea.
Como veremos adiante.
Sã o os campos que deϐinirã o a estrutura do formulá rio. Elementos visuais podem ser incluı́dos para
melhor usabilidade, mas nã o afetarã o o comportamento da plataforma.
# Exportar Formulário
Desenvolvido o formulá rio, você precisa exportá -lo para o servidor para começar a usá -lo.
A exportaçã o é bem simples:
1. Clique com o botã o direito sobre o diretó rio do seu formulá rio em seu projeto ϐluig.
2. Acione a opçã o Exportar.
3. Escolha a opçã o Exportar para servidor Fluig.
4. Informe os dados do seu formulá rio, conforme imagem abaixo:
Informe o Servidor para o qual o formulá rio será exportado e marque a opçã o Novo formulá rio, quando
estiver exportando o formulá rio pela primeira vez. Se você alterar o formulá rio, nas pró ximas
exportaçõ es o formulá rio já será reconhecido no momento da exportaçã o.
Você pode informar o Nome Dataset para gerar um Dataset do tipo CardIndex. Mais sobre Datasets nos
capı́tulos seguintes.
Como estamos falando de um documento que terá vá rios registros e será manipulado por vá rias pessoas,
é essencial que este ϐique armazenado no ECM. Assim que a exportaçã o acontecer, será gerado um
4 of 24 09/04/2019 15:25
diretó rio no ECM para armazenar os registros de formulá rio. A Pasta Destino será onde este diretó rio
será gerado.
Assim que informar os dados, clique em Finish, seu formulá rio estará disponı́vel no servidor ϐluig, na
pasta destino informada.
Para cada alteraçã o, você precisa exportar o formulá rio para que as mudanças sejam aplicadas no
formulá rio em seu ϐluig.
Dica: Se você nã o alterar a estrutura do formulá rio, ou seja, adicionar campos, remover campo, alterar o
tipo de campo, você pode usar a opçã o Manter a versã o do seu formulá rio. Isso fará com que todos os
formulá rios ativos adotem as mudanças aplicadas.
Um formulá rio com uma estrutura de subpastas e arquivos pode ser exportado para o ϐluig. Isto é muito
ú til quer complementar o seu formulá rio com scripts personalizados ou imagens, por exemplo. Os
arquivos nas subpastas serã o exportados para a pasta raiz do formulá rio.
# Exercitando
Entã o chegamos ao termino do segundo capı́tulo, e chegou a hora de treinar um pouco sobre os
conceitos abordados.
1. Quais das seguintes bibliotecas sã o referenciadas automaticamente em um formulá rio quando
este é criado pelo ϐluig Studio?
1. ( ) jQuery
2. ( ) jQuery UI
3. ( ) Mustache
4. ( ) vcXMLRPC
2. Qual o atributo dos campos é usado para deϐinı́-lo como campo do formulá rio?
1. ( ) Atributo type
2. ( ) Atributo id
3. ( ) Atributo name
4. ( ) Atributo form
Capítulo 3 - FLUIG STYLE GUIDE

Imagine você precisar desenvolver um formulá rio e precisar escrever todas as classes de estilo do zero.
Um trabalho enorme. E se você precisar usar alguns elementos visuais para incrementar no formulá rio,
5 of 24 09/04/2019 15:25
vai ter que construir esses elementos na mã o.
Para facilitar a vida do desenvolvedor e nã o fazer você ter esse trabalho todo, temos o ϐluig Style Guide, o
nosso guia de estilos oϐicial.
Na tela de conϐiguraçã o, é importante ressaltar que todas as conϐiguraçõ es permitidas no processo, estã o
localizadas na opçã o propriedades da nossa paleta elementos.
Notem que nossa á rea de propriedades separa as conϐiguraçõ es do processo por guias, onde temos a
seguinte estrutura:
Você pode acessá -lo em
O ϐluig Style Guide é o nosso framework para desenvolvimento sobre o ϐluig com componentes de
interface e front-end em HTML, CSS e JavaScript. Ele é baseado em Bootstrap, um framework de
desenvolvido na versã o 3.
No ϐluig, usamos seus recursos para que os formulá rios, widgets e outros componentes desenvolvidos
sobre a plataforma possuam um padrã o visual.
No guia de estilos, para todos os recursos você terá uma breve descriçã o, o modo como eles ϐicam em sua
execuçã o e có digos-fonte de exemplos de implementaçã o. Veja, por exemplo, o recurso de botã o:
Atualmente, o ϐluig Style Guide está disponı́vel apenas em inglê s.
# Grid System
O Guia de Estilo do ϐluig segue um sistema de grade ϐluido e responsivo que dimensiona os componentes
na pá gina em até 12 colunas de acordo com o tamanho do dispositivo em que está sendo visualizada.
Para isso, você faz uso das classes predeϐinidas para facilitar as deϐiniçõ es de layout.
Veja uma imagem conceitual:
O có digo deste exemplo:
Use a classe row para criar uma linha, ou seja, um grupo horizontal de colunas. O conteú do do seu
formulá rio deve estar dentro das colunas.
As colunas sã o criadas especiϐicando o nú mero dentro das doze colunas disponı́veis que você deseja
abranger. No exemplo, na segunda linha temos uma div que ocupa oito colunas com a classe .col-md-4.
6 of 24 09/04/2019 15:25
No exemplo, usamos apenas classes col-md-x, que é especı́ϐica para dispositivos de tamanho mé dio. Você
pode usar as seguintes opçõ es de classes nas colunas:
Dica: Em uma tela grande, o conteú do pode parecer melhor organizado em trê s colunas, mas em uma
tela pequena seria melhor se os elementos de conteú do fossem empilhados, ocupando toda a largura da
tela.
Você també m pode combinar as classes deϐinindo o visual para cada tamanho de dispositivo.
Lembre-se de que as colunas da grade devem adicionar até doze para uma linha. Mais do que isso, as
colunas serã o empilhadas, independentemente da janela de visualizaçã o.
Se as classes nã o forem deϐinidas, por padrã o os elementos abrigarã o 12 colunas.
# Aplicando no Formulário
Para que seus campos de formulá rio sigam o Guia de Estilos, use a classe form-control neles. També m é
importante agrupar o campo e sua label em um elemento com a classe form-group, como uma div. Veja
um exemplo:
Repare que os campos de texto, como o nome do solicitante, por exemplo, possuem o atributo type com o
valor text. Já os campos de tipo e-mail possuem o atributo type com o valor mail. A seguir exemplos de
campos de outros tipos.
# Exercitando
Entã o chegamos ao termino do terceiro capı́tulo, e chegou a hora de treinar um pouco sobre os conceitos
abordados.
1. Sobre o Grid System é correto aϐirmar:

1. ( ) Dimensiona os componentes da pá gina de forma responsiva.
2. ( ) EƵ obrigató rio usar o Grid System para criar formulá rios.
3. ( ) Dimensiona os componentes da pá gina em 12 colunas.
4. ( ) Possui classes para deϐinir o tamanho dos elementos de acordo com o tamanho do
dispositivo em que estã o sendo exibidos.
Capítulo 4 - INCREMENTANDO O FORMULÁRIO
7 of 24 09/04/2019 15:25
Em muitas situaçõ es precisamos informar valores numé ricos em um formulá rio, como a quantidade de
dias de fé rias, um campo number. Veja abaixo o exemplo para criaçã o deste campo:
Outro tipo de informaçã o comum sã o campos de mú ltipla escolha, um campo do tipo checkbox. Veja um
exemplo para quando o usuá rio informar seus assuntos de interesse:
EƵ possı́vel que você precise de uma informaçã o de ú nica escolha, um campo do tipo radio. Você pode
seguir o exemplo abaixo, ainda sobre assuntos de interesse:
Os campos radio que correspondem a mesma escolha devem ter o atributo name igual.
Outro tipo de informaçã o comum é a de escolha a partir de uma lista, um campo select. Abaixo um
exemplo de escolha de ϐilial:
# Máscaras de Campos
Imagine o cená rio em que o usuá rio precisa informar seu celular. Para impedir que o usuá rio informe
dados diferentes de um nú mero de celular vá lido, você pode usar uma má scara para o seu campo.
Basta adicionar o atributo mask com o modelo desejado, como o seguinte exemplo:
Para deϐinir as restriçõ es dos caracteres você pode seguir esta tabela:
# Técnica Pai Filho
Imagine o seguinte cená rio: uma solicitaçã o de compras em que o solicitante possa informar vá rios
produtos. Para cada produto ele vai precisar informar qual é o produto, quantidade e fornecedor. Ou seja,
o solicitante precisará informar mú ltiplos registros de um mesmo tipo de informaçã o que é dinâ mica, em
uma solicitaçã o podem ser requisitados cinco produtos, em outra apenas um.
Para solucionar estes cená rios, você pode fazer uso da té cnica pai x ϐilho. Ela consiste na deϐiniçã o do
modelo de registro atravé s de uma tabela.
Para que sua tabela seja reconhecida como uma estrutura pai x ϐilho você precisa informar o atributo
tablename na tag table, com o valor sendo o nome da sua tabela.
A estrutura dos campos será deϐinida dentro da tag tbody onde cada campo ϐicará dentro de uma tag td.
A tag thead é usada para os tı́tulos dos campos.
Veja o exemplo:
8 of 24 09/04/2019 15:25
A partir disso o ϐluig cria uma estrutura dinâ mica onde o usuá rio interage na criaçã o e remoçã o dos
registros.
# Exercitando
Entã o chegamos ao termino do terceiro capı́tulo, e chegou a hora de treinar um pouco sobre os conceitos
abordados.
1. Qual o atributo responsá vel por deϐinir que uma tabela terá a estrutura Pai x Filho?
1. ( ) Atributo name
2. ( ) Atributo tablename
3. ( ) Atributo tableid
4. ( ) Atributo table
2. Qual das má scaras abaixo pode ser usada em um campo vá lido para nú mero de telefone ou celular,
com DDD?
1. ( ) mask="(99) 99999-9999"
2. ( ) mask="(00) 90000-0000
3. ( ) mask="(99) 00000-0000
4. ( ) mask="(00) 00000-0000
Capítulo 5 - EVENTOS DE FORMULÁRIO

Os eventos de formulá rios sã o um conjunto de scripts carregados pela API de Formulá rios, os quais sã o
desenvolvidos utilizando Javascript e sã o chamados durante a execuçã o de açã o em formulá rios ou em
momentos especı́ϐicos de interaçã o em formulá rios.
# Form Controller
Antes de conhecer os Eventos de Formulá rio do ϐluig é importante conhecer o formController, o objeto
que realiza a comunicaçã o entre o formulá rio e o desenvolvimento dos eventos. Esse objeto está
disponı́vel em cada um dos eventos de formulá rios atravé s da variá vel form.
O formController permite manipular as informaçõ es e valores de um formulá rio, por exemplo: se o

usuá rio está acessando o registro de formulá rio em modo de visualizaçã o ou modo de ediçã o.
Veja a seguir alguns dos mé todos disponı́veis para a variá vel form:
9 of 24 09/04/2019 15:25
# Eventos de Formulário
Como dito, os eventos de formulá rios sã o um conjunto de scripts que permitem a manipulaçã o dos
formulá rios em momentos especı́ϐicos usando a linguagem JavaScript.
Os Eventos de Formulá rio sã o grandes facilitadores para o desenvolvimento. Um cená rio bem comum é o
de validaçã o de preenchimento de campos de formulá rio. Você nã o precisa criar um script para isso, você
pode usar o evento validateForm, que é executado no servidor e garante maior segurança e performance.
Este evento é disparado assim que o formulá rio é salvo ou antes da solicitaçã o ser salva, caso o
formulá rio esteja aberto em um processo.
Veja abaixo o exemplo de uma implementaçã o do validateForm:
O validateForm recebe como argumento a variá vel form, o formController.
Logo em seguida usamos o mé todo getValue para obter o valor do campo CNPJ e no caso do valor ser
nulo mostrar uma mensagem informando o usuá rio, com o throw.
// Criando Evento de Formulário
Para criar um Evento de Formulá rio, siga os passos abaixo:
1. Clique com o botã o direito sobre o seu projeto ϐluig.

2. Acione Novo > Script ϐluig
3. Escolha o tipo Script Evento da Deϐiniçã o de Formulá rio
4. Escolha o Evento e o formulá rio ao qual será vinculado.
Conϐira abaixo alguns eventos de formulá rio, as suas respectivas funcionalidades e o momento em que
sã o executados:
Veja todos os eventos de formulá rio disponı́veis .
// Log
No ϐluig é possı́vel utilizar log de execuçã o nos eventos de formulá rios e processos. Isto é muito ú til para
desenvolvedores e administradores quando precisam acompanhar a execuçã o dos eventos e obter
informaçõ es disso.
10 of 24 09/04/2019 15:25
Você pode obter feedback da execuçã o de cada evento atravé s da variá vel global log.
Por exemplo, quando um novo registro de formulá rio for criado, você pode mostrar no log do servidor
uma mensagem personalizada, da seguinte forma:
Existem cinco tipos de log, sendo eles:
info: apresentaçã o de mensagens

error: apresentaçã o de erros
warn: informar possı́vel problema de execuçã o
debug: depurar a execuçã o
dir: Imprime no log como info, todos atributos de um objeto
# Exercitando
Entã o chegamos ao termino do quinto capı́tulo, e chegou a hora de treinar um pouco sobre os conceitos
abordados.
1. Quais dos có digos abaixo obté m o valor do campo codFornecedor de um formulá rio dentro de um
evento de formulá rio?
1. ( ) getValue("Fornecedor")
2. ( ) formController.getValue("codFornecedor")
3. ( ) form.getValue("codFornecedor")
4. ( ) form.getValue(codFornecedor)
2. Quais dos có digos abaixo podem ocultar o campo codFornecedor de um formulá rio dentro de um
evento de formulá rio?
1. ( ) setVisibleById("codFornecedor", true)
2. ( ) form.setVisibleById("codFornecedor", true)
3. ( ) form.setVisibleById("codFornecedor", false)
4. ( ) form.setVisible("codFornecedor")
Capítulo 6 - DATASETS
O ϐluig é uma plataforma que permite disponibilizar informaçõ es provenientes de vá rias fontes de dados.
EƵ comum a necessidade de apresentar ou manipular informaçõ es da pró pria plataforma como usuá rios,
papé is, comunidades, assim como apresentar ou manipular informaçõ es geradas por formulá rios, ou
ainda dados de entidades de um ERP ou ainda valores ϐixos, como estados ou unidades de medida.
11 of 24 09/04/2019 15:25
O Dataset é um componente do ϐluig que permite a padronizaçã o do acesso à s informaçõ es,

independente da origem dos dados. Ou seja, é possı́vel acessar informaçõ es de aplicativos externos,
bancos de dados ou dos pró prios recursos do ϐluig usando um mesmo componente.
A imagem abaixo apresenta um modelo conceitual sobre os Datasets:
Um Dataset disponibiliza operaçõ es que permitem visualizar o seu conteú do. Por exemplo, no Dataset de
colaboradores do ϐluig, você pode consultar os usuá rios ativos da plataforma, suas respectivas
matrı́culas, se sã o usuá rios administradores ou nã o e muito mais.
Uma vez que o Dataset esteja no servidor ϐluig, ele poderá ser invocado de qualquer parte do sistema, de
forma consistente.
# Tipos de Datasets
Atualmente existem trê s tipos de Datasets gerenciados pela plataforma:
1. Built-in Datasets: Sã o os Datasets internos do ϐluig. Atravé s dele você pode consultar as entidades
do pró prio ϐluig, como usuá rios, grupos, ou tarefas, por exemplo.
2. CardIndex Datasets: Sã o os Datasets gerados pelos formulá rios. Com ele você pode consultar
dados de cada registro de formulá rio, como os valores dos campos.
3. Customized Dataset: Datasets customizados podem ser utilizados em uma grande gama de
situaçõ es, como para deϐinir uma lista de valores ϐixos, como unidades de medida, por exemplo, ou
para consulta de dados de um serviço externo, como consultar clientes em um CRM, por exemplo.
A estrutura dos Built-In Datasets nã o pode ser alterada.
Para gerar o CardIndex Dataset é necessá rio preencher o campo Nome Dataset na exportaçã o do
formulá rio para gerar o Dataset.
Você pode conferir a lista completa de Datasets Internos .
O uso do Dataset nã o leva em conta o seu tipo. Se ele foi pré -construı́do, baseado em deϐiniçã o de
formulá rio ou customizado, a consulta ao Dataset se dará da mesma forma.
# Visualização de Datasets
Pelo ϐluig Studio, atravé s da visã o Visualizaçã o de Dataset, você pode consultar os Datasets disponı́veis
no seu servidor ϐluig e o seu conteú do. Este é um recurso muito ú til para agilizar na consulta de
12 of 24 09/04/2019 15:25
informaçõ es e fazer testes de Datasets customizados.
Para consultar um Dataset:
1. Acione a opçã o Consultar dataset na visã o Visualizaçã o de Dataset.

2. Informe o servidor e o Dataset que deseja consultar e clique em Finish.
Você pode deϐinir a quantidade de registros que deseja retornar na busca.
O retorno da consulta mostrará os registros e colunas que compõ em este Dataset.
Para que um usuá rio que nã o é administrador da empresa possa criar, importar, editar e remover
datasets é necessá rio que ele possua a permissã o "Conϐigurar Datasets". Esta permissã o pode ser
concedida em "Permissõ es" no Painel de Controle do ϐluig.
// Filtros
Você pode usar ϐiltros para limitar a consulta ao Dataset e buscar apenas as informaçõ es que sã o
relevantes para você em determinado momento.
Você pode deϐinir as colunas que serã o exibidas e ϐiltrar os registros. Para isso, acione a opçã o Conϐigurar
ϐiltro.
Você pode ϐiltrar as colunas que serã o exibidas no Dataset. Basta selecionar as colunas e acionar o botã o
>>.
Você pode fazer ϐiltros especı́ϐicos sobre os registros do Dataset de acordo com um valor buscado em
uma coluna. Da seguinte forma:
1. Informe a coluna que deseja ϐiltrar.

2. Informe as condiçõ es do ϐiltro.
3. Adicione o ϐiltro.
Você pode usar as condiçõ es de valor inicial e valor ϐinal para ϐiltrar entre datas, por exemplo. Se estiver
buscando por algum valor exato, informe o mesmo valor nos dois campos, conforme imagem.
Os tipos de ϐiltro sã o:
MUST: Retorna os registros que atendem a condiçã o estabelecida.

MUST_NOT: Retorna os registros que nã o atendem a condiçã o estabelecida.
SHOULD: Retorna os registros atendem uma das condiçõ es estabelecidas.
13 of 24 09/04/2019 15:25
O ϐiltro buscará os registros cujos valores sejam iguais aos das condiçõ es do ϐiltro. Para retornar os
registros que conté m os valores deϐinidos, mas nã o sendo o valor exato, você pode usar a opçã o LIKE.
O ϐiltro “sqlLimit-100-100-MUST” apresentado refere-se a quantidade de registros deϐinida para

consulta anteriormente.
Você també m pode conϐigurar os ϐiltros na opçã o Consultar Dataset. Em vez de acionar a opçã o Finish,
acione Next e você terá as mesmas opçõ es de ϐiltros que abordamos acima.
As opçõ es de ϐiltro sã o vá lidas apenas para Built-In Datasets.
# Criando Datasets
Um Dataset é construı́do a partir de um có digo JavaScript. Uma vez que o pró prio Dataset é criado a
partir de um có digo JavaScript, é possı́vel fazer chamadas a outros Datasets, chamadas à serviços
externos ou apenas criar o Dataset a partir de valores codiϐicados.
Para criar um Dataset, em seu ϐluig Studio:
1. Clique com o botã o direito sobre o seu projeto.

2. Acione Novo > Dataset Customizado ϐluig.
3. Informe Nome e Descriçã o do Dataset.
Será criado um arquivo .js correspondente ao seu Dataset com as seguintes funçõ es padrã o:
createDataset: Responsá vel pela criaçã o do Dataset e populaçã o dos registros.
deϐineStructure: Deϐine a estrutura do Dataset para as sincronizaçõ es.
onSync: Responsá vel pela populaçã o incremental dos registros nas sincronizaçõ es.
onMobileSync: Responsá vel pela populaçã o dos registros nas sincronizaçõ es durante
a atualizaçã o de um dataset ofϐline já existente.
Neste momento vamos nos ater ao createDataset. Os mé todos usados nas sincronizaçõ es serã o
abordados no treinamento BPM Advanced.
Para criar um novo Dataset, use o mé todo DatasetBuilder.newDataset(). A partir do Dataset criado você
poderá deϐinir as colunas que deseja no seu Dataset, usando o mé todo addColumn do objeto criado, para
entã o adicionar os registros, usando o mé todo addRow.
Veja o exemplo com o Estados do Brasil:
14 of 24 09/04/2019 15:25
EƵ muito importante retornar o objeto do Dataset no ϐinal de sua execuçã o.
// Exportar Dataset
Uma vez implementado, basta exportar o Dataset para o servidor para começar a usá -lo, da seguinte
forma:
Clique com o botã o direito sobre o arquivo do seu Dataset.
Acione Exportar.
Escolar Exportar para o servidor Fluig.
Informe o servidor para o qual deseja exportar.
Marque a opçã o Novo Dataset.
Informe Nome e Descriçã o.
O Dataset já estará disponı́vel para uso.
# Datasets em Pontos de Customização
Os Datasets do ϐluig podem ser acessados de vá rios pontos da plataforma: em eventos de formulá rio,
eventos de processo, até mesmo em outros Datasets. Isto é feito atravé s de chamadas JavaScript que sã o
executadas no lado do servidor.
No exemplo acima, o có digo JavaScript acessa o Dataset group, um Dataset interno da plataforma, e
retorna Dataset.
O objeto DatasetFactory é a porta de entrada para qualquer Dataset. Alé m de permitir o carregamento de
um Dataset, ele també m permite navegar entre todos os Datasets disponı́veis na plataforma.
O acesso a um Dataset é feito atravé s do mé todo getDataset do objeto DatasetFactory, onde seus
parâ metros sã o:
Nome do Dataset: Nome do Dataset a ser buscado.

Colunas: Array com as colunas do Dataset que serã o exibidas.
Constraints: Array com os condiçõ es de busca do Dataset, ou seja, os ϐiltros.
Ordem: Array com os campos para ordenaçã o dos registros do Dataset.
Apenas o nome do Dataset é um parâ metro obrigató rio.
15 of 24 09/04/2019 15:25
Você pode informar null em colunas para retornar todos as colunas do Dataset, assim como você pode
informar null em constraints para retornar todos os registros do Dataset, sem ϐiltrar, e null em ordem
para retornar com a ordenaçã o padrã o, conforme exemplo acima.
# Constraints
As constraints sã o as condiçõ es de busca nos Datasets, ou seja, sã o os ϐiltros deϐinidos para limitar os
resultados obtidos na consulta.
Para criar uma constraint você vai usar o mé todo createConstraint do objeto DatasetFactory. Os
parâ metros deste mé todo sã o equivalentes aos usados na conϐiguraçã o de ϐiltro na visualizaçã o de um
Dataset, como vimos antes:
Coluna: Nome da coluna que será ϐiltrada.

Valor Inicial: Valor inicial da condiçã o.
Valor Final: Valor ϐinal da condiçã o
Tipo: Tipo da condiçã o (MUST, MUST_NOT, SHOULD)
Veja o exemplo de implementaçã o de criaçã o de constraints abaixo:
Foi criado uma constraint para ϐiltrar os registros cuja versã o esteja ativa. Em seguida esta constraint foi
informada como um elemento de uma Array que em seguida foi usada como parâ metro na chamada ao
mé todo getDataset.
// Evoluindo nas Constraints
Apó s criar a constraint, você pode informar que ela será usada na consulta em formato de LIKE,
retornando qualquer registro com uma sequê ncia de letras no lugar do sı́mbolo %, atravé s do mé todo
setLikeSearch(true).
No exemplo abaixo, a constraint busca todos os registros que nã o possuam a palavra “teste” na descriçã o
do documento.
Para ordenar os registros retornados você pode criar uma Array informando a coluna de ordenaçã o.
Por exemplo, você pode buscar os documentos ordenando pela matrı́cula do publicador:
# Dataset via JS
16 of 24 09/04/2019 15:25
Você pode acessar os Datasets via JavaScript no HTML do formulá rio. Para isto você precisa incluir a
biblioteca vcXMLRPC.js no seu formulá rio, conforme abaixo.
Este modelo de acesso transporta o Dataset para o cliente, ou seja, o navegador do usuá rio. Portanto é
muito importante se atentar a quantidade de informaçõ es que será trafegada, caso contrá rio pode
ocorrer problemas de consumo excessivo de banda ou performance.
A invocaçã o do Dataset é feita do mesmo que nos pontos de customizaçã o, ou seja, atravé s do
DatasetFactory:
A criaçã o de Constraints em Datasets via JavaScript é igual aos exemplos mostrados anteriormente.
Com o Dataset carregado em seu JavaScript você pode manipular os seus registros e suas colunas atravé s
dos atributos values e columns, respectivamente, conforme exemplo:
No exemplo acima, consultamos o Dataset de colaboradores e criamos uma tabela no HTML

correspondente ao Dataset, com as colunas e registros retornados na consulta.
// Gerar Código
Outro facilitador de desenvolvimento é o gerador de có digo de consulta ao Dataset.
Este recurso funciona da seguinte forma: Apó s consultar um Dataset pela visã o Visualizaçã o de dataset,
ao acionar a opçã o Gerar có digo na seta ao lado de Conϐigurar ϐiltro.
# Dataset em Campo Select
EƵ comum o uso de Datasets para listar dados em um campo select, como por exemplo, listar centros de
custo, ϐiliais, responsá veis, entre outros. O ϐluig possui um facilitador para estes cená rios. Para isso, basta
adicionar trê s propriedades à tag do campo.
dataset: Dataset a ser consultado.

datasetkey: Coluna do Dataset usada como valor do campo.
datasetvalue: Coluna do Dataset usada para visualizaçã o no campo
Para efeito comparativo, o datasetvalue corresponde ao texto informado em uma option e o datasetkey
corresponde ao valor do atributo value.
A busca ao Dataset retornará todos os registros, sem opçã o de ϐiltro.
17 of 24 09/04/2019 15:25
# Campo Zoom
Outra forma de listar dados a partir de um Dataset em um formulá rio é atravé s do campo Zoom.
Em comparaçã o, este é um campo com uma possibilidade a mais em relaçã o ao campo select, isso porque
com o Zoom o usuá rio pode visualizar mais de uma coluna do Dataset e també m permite a seleçã o de
mais de uma opçã o.
Quando implementado o Zoom tem um resultado como o seguinte:
Veja o có digo correspondente à ϐigura acima:
Para que o seu campo seja reconhecido como Zoom informe o atributo type como zoom.
O parâ metro data-zoom deϐine como será o campo zoom a partir de uma estrutura JSON, onde:
datasetId: Có digo do Dataset para consulta.

displayKey: Coluna do Dataset para ϐiltro e exibiçã o nos campos selecionados
maximumSelectionLength: Limite de registro selecioná veis.
ϐields: Estrutura do ϐiltro.
A estrutura ϐields deϐine os campos que serã o exibidos para seleçã o, ele recebe os seguintes atributos:
ϐield: Coluna do Dataset.

label: Nome para exibiçã o da coluna.
standard: Deϐine que a coluna será usada como ordenaçã o padrã o e valor do registro selecionado.
Customized Datasets nã o permitem o uso de ϐiltros no campo zoom. Neste cená rio recomenda-se o uso
de constraints na implementaçã o do Dataset.
# Exercitando
Entã o chegamos ao termino do sexto capı́tulo, e chegou a hora de treinar um pouco sobre os conceitos
abordados.
1. Quais os tipos de condiçõ es de Constraints?

1. ( ) MUST
2. ( ) SHOULD
3. ( ) MUST_NOT
4. ( ) SHOULD_NOT
18 of 24 09/04/2019 15:25
2. Quais os mé todos usados para deϐiniçã o das colunas e dos registros de um Dataset,
respectivamente?
1. ( ) datasetAddColumn e datasetAddRow
2. ( ) createColumn e createLine
3. ( ) column e row
4. ( ) addColumn e addRow
Capítulo 7 - INTERNACIONALIZAÇÃO
Com este recurso você pode usar o mesmo formulá rio em todos os idiomas suportados pela plataforma.
Deste modo, uma vez desenvolvido o formulá rio seguindo as prá ticas de internacionalizaçã o, caso um
usuá rio esteja usando o ϐluig no idioma espanhol, por exemplo, todo o texto presente no formulá rio será
traduzido para espanhol. O principal uso deste recurso é traduzir as labels dos campos.
# Tradução de Formulários
Para traduzir um texto presente no formulá rio é preciso usar a funçã o

standardi18n.translate(“literal_da_traducao”) nos pontos do arquivo HTML que devem ser traduzidos.
O acrô nimo i18n origina-se do inglê s internacionalization, onde 18 é o nú mero de letras entre o “i” e o
“n”.
As literais e seus respectivos valores sã o informados em arquivos de propriedades, para gerá -los clique
com o botã o direito sobre o formulá rio e acione a opçã o Externalizar Strings. Será criado um para cada
idioma suportado:
Espanhol: nome_do_formulario_es.properties;
Inglê s: nome_do_formulario_en_US.properties;
Portuguê s: nome_do_formulario_pt_BR.properties;
Isto feito, basta informar os valores correspondentes à s literais para o idioma de cada arquivo, conforme
abaixo:
Os arquivos de literais sã o exportados para o ϐluig como anexos do formulá rio.
# Tradução de Eventos de Formulários
19 of 24 09/04/2019 15:25
Da mesma forma que é possı́vel traduzir o texto exibido no formulá rio é possı́vel traduzir as mensagens
retornadas nos eventos de formulá rio.
Basta usar a funçã o i18n.translate() dentro dos eventos passando como argumento uma propriedade
que esteja pré -deϐinida nos arquivos de literais.
# Exercitando
Entã o chegamos ao termino do sé timo capı́tulo, e chegou a hora de treinar um pouco sobre os conceitos
abordados.
1. Quais os idiomas suportados para internacionalizaçã o no ϐluig?

1. ( ) Portuguê s
2. ( ) Espanhol
3. ( ) Italiano
4. ( ) Inglê s
2. Quais dos có digos abaixo deve ser interpretado para traduçã o?
1. ( ) i18n.translate("texto")
2. ( ) inter.national("text")
3. ( ) i18n.translate(texto)
4. ( ) i18n.(texto)
Capítulo 8 - DESENVOLVIMENTO DE PROCESSOS

# Criar Processos
Para criar um novo processo pelo ϐluig Studio, siga os passos:
1. Clicar com o botã o direito sobre seu projeto ϐluig.

2. Acionar Novo > Diagrama Fluig
3. Informe o Nome do seu processo e o Servidor ao qual ele será relacionado.
Um arquivo com o nome que você informou com a extensã o .process será gerado sob a pasta workϐlow
do seu projeto ϐluig.
Será aberto o editor de processos com a paleta de componentes ao lado.
O funcionamento deste editor é semelhante ao do editor web. Basta selecionar o elemento que deseja e
20 of 24 09/04/2019 15:25
arrastá -lo para adicioná -lo ao seu processo.
Todos os elementos disponı́veis no editor web també m estã o disponı́veis nesta paleta.
A conϐiguraçã o do processo, assim como a conϐiguraçã o dos elementos, també m é semelhante ao do

editor web. As opçõ es de conϐiguraçã o no ϐluig Studio sã o as mesmas do editor web.
Para mostrar as opçõ es de conϐiguraçã o de um elemento, basta selecioná -lo e acionar a visã o
Propriedades, conforme imagem abaixo:
Quando nenhum elemento está selecionado a visã o Propriedades mostra as conϐiguraçõ es do processo.
# Exportar Processos
Desenvolvido o processo, você precisa exportá -lo para o servidor para começar a usá -lo.
A exportaçã o é bem simples:
1. Clique com o botã o direito sobre o diretó rio do seu processo em seu projeto ϐluig.
2. Acione a opçã o Exportar.
3. Escolha a opçã o Exportar para servidor Fluig.
4. Informe os dados do seu formulá rio, conforme imagem abaixo:
Informe o Servidor para o qual o processo será exportado e marque a opçã o Novo processo, quando
estiver exportando o formulá rio pela primeira vez. Se você alterar o processo, nas pró ximas exportaçõ es
ele já será reconhecido no momento da exportaçã o.
Com a opçã o Liberar Versã o marcada, esta versã o de processo já ϐica disponı́vel para seus usuá rios.
Você pode exportar o formulá rio do seu processo junto se marcar a opçã o Exportar formulá rio. Poré m
formulá rio e processo foram desenvolvidos separados. Para vinculá -los veja o pró ximo tó pico.
# Vinculando Formulário e Processo
Para vincular um formulá rio a um processo pelo ϐluig Studio siga os passos:
1. Na visã o Propriedades do seu processo acione a aba Formulá rio.

2. Escolha o formulá rio a partir do Servidor selecionado.
21 of 24 09/04/2019 15:25
# Exercitando
Entã o chegamos ao termino do oitavo capı́tulo, e chegou a hora de treinar um pouco sobre os conceitos
abordados.
1. Qual a extensã o dos arquivos de diagramas workϐlow gerados pelo ϐluig Studio?
1. ( ) .xml
2. ( ) .process
3. ( ) .html
4. ( ) .wf
Capítulo 9 - MECANISMOS DE ATRIBUIÇÃO

CUSTOMIZADOS
Em algumas situaçõ es é preciso usar ló gicas mais complexas e especı́ϐicas sobre quem será o responsá vel
pela execuçã o da atividade na solicitaçã o de processos workϐlow, para isto, existe o Mecanismo de
Atribuiçã o Personalizado.
Para criar um novo mecanismo de atribuiçã o, siga os passos:
1. Clicar com o botã o direito sobre seu projeto ϐluig.

2. Acessar o menu Arquivo > Novo > Outros…
3. Selecionar a opçã o Mecanismo Customizado ϐluig.
4. Informar Có digo e Descriçã o.
Com isto, será criada uma funçã o simples para ser implementada:
A funçã o deve retornar uma listagem do tipo ArrayList com as matrı́culas dos usuá rios. A matrı́cula
corresponde ao valor existente no campo de mesmo nome no cadastro de usuá rios e à coluna
colleaguePK.colleagueId do Dataset colleague.
# Exercitando
Entã o chegamos ao termino do nono capı́tulo, e chegou a hora de treinar um pouco sobre os conceitos
abordados.
1. O mecanismo de atribuiçã o customizado recebe uma lista para deϐinir os responsá veis pela
22 of 24 09/04/2019 15:25
atividade. Qual dado dos usuá rios deve ser informado nesta lista?
1. ( ) Nome
2. ( ) Có digo da Empresa
3. ( ) Matrı́cula
4. ( ) Login
Capítulo 10 - EVENTOS DE PROCESSOS

Os eventos de processos sã o um conjunto de scripts chamados ao longo da execuçã o do processo em
momentos predeterminados que permitem o desenvolvimento em JavaScript para implementaçã o de
novas regras e validaçõ es.
A implementaçã o destes eventos é feita por processo.
# Criando Evento de Processo
Para criar um Evento de Processo, siga os passos abaixo:
1. Clique com o botã o direito sobre o seu projeto ϐluig.

2. Acione Novo > Script ϐluig
3. Escolha o tipo Script Evento Workϐlow
4. Escolha o Evento e o diagrama workϐlow ao qual será vinculado.
Abaixo alguns eventos e o momento em que sã o executados durante o processo:
A ordem de execuçã o dos eventos de processo depende do momento em que a solicitaçã o se encontra no
processo.
Você pode conferir todos os eventos de processo disponı́veis .
# hAPI
Em todos os eventos de processo é possı́vel obter informaçõ es do processo atravé s do handle da hAPI.
Exemplo: Você precisa obter o valor de um campo do formulá rio do processo. A seguinte funçã o da hAPI
retorna este valor:
Abaixo algumas funçõ es e suas utilidades:
23 of 24 09/04/2019 15:25
Veja todas as funçõ es disponı́veis .
# Parâmetros
Existem alguns parâ metros que contê m informaçõ es referentes à solicitaçã o que podem ser utilizados no
desenvolvimento dos eventos de processo.
Exemplo: Você precisa obter o có digo do registro de formulá rio do processo. O parâ metro WKCardId
retorna esta informaçã o.
Abaixo alguns parâ metros e suas utilidades:
Veja todas os parâ metros disponı́veis .
# Exercitando
Entã o chegamos ao termino do dé cimo capı́tulo, e chegou a hora de treinar um pouco sobre os conceitos
abordados.
1. Em um evento de processo, como podemos saber se o usuá rio completou a tarefa?

1. ( ) Atravé s do parâ metro WKIsTransfer.
2. ( ) Atravé s do parâ metro WKCompletTask.
3. ( ) Atravé s do parâ metro WKTask.
4. ( ) Atravé s do parâ metro WKIsTransfer.
Versã o Junho/2018 - Autores: Caio Rodrigues
24 of 24 09/04/2019 15:25

Apostila BPM Intermediate - Conteúdo - Fluig Academy

Enviado por

Direitos autorais:

Formatos disponíveis

Apostila BPM Intermediate - Conteúdo - Fluig Academy

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Apostila BPM Intermediate - Conteúdo - Fluig Academy

Enviado por

Direitos autorais:

Formatos disponíveis

APOSTILA BPM INTERMEDIATE - CONTEÚDO | fluig Academy http://www.academy.fluig.

APOSTILA BPM INTERMEDIATE -

As seguintes IDEs sã o homologadas para o desenvolvimento no ϐluig:

Realize a instalaçã o de uma das IDEs homologadas, conforme .

# Plugin ϐluig Designer

1. No menu superior, acionar Ajuda.

Se preferir, pode conferir o passo a passo em .

O desenvolvimento de formulá rios é feito atravé s de linguagens web.

Perceba que o formulá rio criado já possui referê ncias:

CSS do Guia de Estilos do ϐluig.

Para mais detalhes, veja o capı́tulo .

# Criar Campos de Formulário

Alguns campos que podem compor este formulá rio sã o:

A exportaçã o é bem simples:

Capítulo 3 - FLUIG STYLE GUIDE

vai ter que construir esses elementos na mã o.

Você pode acessá -lo em

Atualmente, o ϐluig Style Guide está disponı́vel apenas em inglê s.

Veja uma imagem conceitual:

O có digo deste exemplo:

Se as classes nã o forem deϐinidas, por padrã o os elementos abrigarã o 12 colunas.

1. Sobre o Grid System é correto aϐirmar:

Capítulo 4 - INCREMENTANDO O FORMULÁRIO

# Técnica Pai Filho

Capítulo 5 - EVENTOS DE FORMULÁRIO

O formController permite manipular as informaçõ es e valores de um formulá rio, por exemplo: se o

Veja abaixo o exemplo de uma implementaçã o do validateForm:

O validateForm recebe como argumento a variá vel form, o formController.

// Criando Evento de Formulário

Para criar um Evento de Formulá rio, siga os passos abaixo:

1. Clique com o botã o direito sobre o seu projeto ϐluig.

Veja todos os eventos de formulá rio disponı́veis .

Existem cinco tipos de log, sendo eles:

info: apresentaçã o de mensagens

O Dataset é um componente do ϐluig que permite a padronizaçã o do acesso à s informaçõ es,

A imagem abaixo apresenta um modelo conceitual sobre os Datasets:

Atualmente existem trê s tipos de Datasets gerenciados pela plataforma:

A estrutura dos Built-In Datasets nã o pode ser alterada.

Você pode conferir a lista completa de Datasets Internos .

informaçõ es e fazer testes de Datasets customizados.

Para consultar um Dataset:

1. Acione a opçã o Consultar dataset na visã o Visualizaçã o de Dataset.

Você pode deϐinir a quantidade de registros que deseja retornar na busca.

O retorno da consulta mostrará os registros e colunas que compõ em este Dataset.

1. Informe a coluna que deseja ϐiltrar.

Os tipos de ϐiltro sã o:

MUST: Retorna os registros que atendem a condiçã o estabelecida.

O ϐiltro “sqlLimit-100-100-MUST” apresentado refere-se a quantidade de registros deϐinida para

As opçõ es de ϐiltro sã o vá lidas apenas para Built-In Datasets.

Para criar um Dataset, em seu ϐluig Studio:

1. Clique com o botã o direito sobre o seu projeto.

createDataset: Responsá vel pela criaçã o do Dataset e populaçã o dos registros.

deϐineStructure: Deϐine a estrutura do Dataset para as sincronizaçõ es.

Veja o exemplo com o Estados do Brasil:

EƵ muito importante retornar o objeto do Dataset no ϐinal de sua execuçã o.

Clique com o botã o direito sobre o arquivo do seu Dataset.

Escolar Exportar para o servidor Fluig.

Informe o servidor para o qual deseja exportar.