WCM

TREINAMENTO DE DESENVOLVIMENTO
WCM

O Web Content Management (WCM) é uma

ferramenta que promove gestão de conteúdo,
colaboração e recursos de administração de
portais na Web
1 ESTRUTURA DE PÁGINAS
 PÁGINA PRIVADA

Na criação de uma página, selecionar a opção Authenticated no campo Autorização

determina que a página estará visível apenas para os usuários autenticados
PÁGINA PRIVADA - URL

Elemento Valor
Nome do servidor meuserver.com.br
Porta utilizada pelo servidor fluig 8080
Código da empresa corrente 001

Considerando os dados acima, por exemplo, a URL da página seria

http://meuserver.com.br:8080/portal/p/001/analytics, onde:
Elemento Descrição
/portal Valor fixo da plataforma
/p Indicativo de página privada
analytics Campo “Identificador único” no cadastro da página
 PÁGINA PÚBLICA

Na criação de uma página, selecionar a opção Public no campo Autorização determina que
a página estará visível para usuários autenticados e visitantes externos
PÁGINA PÚBLICA - URL

Elemento Valor
Nome do servidor meuserver.com.br
Porta utilizada pelo servidor fluig 8080
Código da empresa corrente 001

Considerando os dados acima, por exemplo, a URL da página seria

http://meuserver.com.br:8080/portal/001/campanha_agasalho

A ausência do elemento /p na URL indica que o acesso a essa página será

público, sem necessidade de autenticação
FREEMARKER

• O desenvolvimento de layouts e widgets é baseado no framework de

templates FreeMarker (.ftl)

• O FreeMarker é responsável pela camada de visualização: sobre ele é escrito

todo o HTML do componente, enquanto a lógica é tratada separadamente

• Comandos FreeMarker no fluig Studio:

LAYOUTS

• Toda página do fluig é constituída por um layout que define sua

estrutura, ou seja, o posicionamento e tamanho dos slots

• Layouts personalizados podem ser criados utilizando o fluig Studio

• A estrutura de arquivos de um layout é semelhante à de um widget

comum, inclusive o empacotamento em formato WAR
 LAYOUTS

1 Nome/Identificador do layout
1
Arquivo de configuração do layout onde são armazenadas informações, como
2
2 o código do layout, título e desenvolvedor

3 3 Contém a configuração dos slots

4
4 Arquivo de strings traduzíveis utilizadas pelo layout

5 Descritor padrão de uma aplicação Java para web

7 Descritor para Jboss. Deve conter a propriedade context-root, que representa

6
8 o contexto web do layout. Recomendado que seja o próprio código do layout

6
7 Folhas de estilo do layout (caso seja necessário)

5 8 Ícone que representa o layout

APPLICATION.INFO

• Para o sistema, o que diferencia um layout de um widget comum é a

definição da propriedade “application.type = layout” no arquivo descritor
application.info

• É através dele que a aplicação tem conhecimento das propriedades do

layout, identificação do desenvolvedor, arquivos necessários para sua
renderização, arquivos de linguagem e outras propriedades
APPLICATION.INFO
LAYOUT.FTL

• O principal arquivo de um projeto de layout é o “layout.ftl”

• É neste arquivo que será definido, via marcação HTML e Freemarker, a

quantidade e disposição dos slots

• Para facilitar o desenvolvimento, foram disponibilizados alguns métodos

e variáveis da camada de negócio:
– Variáveis: sintaxe ${nome-da-variável} em qualquer lugar do FTL

– Métodos: objeto pageRender

LAYOUT.FTL
DESENVOLVIMENTO DE LAYOUTS

• A biblioteca wcm.ftl contém elementos básicos que podem ser inseridos na

montagem de um layout, tais como menu, cabeçalho e rodapé da página:

• Como retirar os elementos básicos de um layout personalizado?

Mesmo em páginas públicas, o usuário está sujeito à aplicação de permissões.

Portanto, caso algum componente ou widget utilizado não seja público, o
usuário pode não visualizar o elemento ou ser direcionado para a tela de login
SLOTS

São áreas pré-definidas dentro do layout onde os widgets podem ser

distribuídos na ordem desejada para atender a cada necessidade
 ESTRUTURA BÁSICA DE UM SLOT

1 2

3 4 5

editable-slot e slotfull: Usado pelo renderizador para montar o editor individual de slot
1
layout-1-1: Usado para posicionar o slot em um determinado ponto da tela
2 slotContainer001: Identificação única do container. Não pode haver outro com o mesmo código
3 Slot001: Identificação única do slot. Não pode haver outro elemento com esse mesmo código
4 true/false: As widgets posicionadas neste slot exibem (true) ou não exibem (false) seus títulos
true: Torna possível inserir e retirar widgets dentro do slot bem como mudar o posicionamento delas
5 false: Não permite qualquer edição no conteúdo do Slot. Slots de cabeçalho, rodapé e login geralmente
possuem este valor
SLOTS

• Algumas classes são obrigatórias para o correto funcionamento do slot

• Para percorrer um determinado vetor, é utilizado o comando list
• No exemplo abaixo, será iterado pelo arranjo de widgets
WIDGETS

• Os widgets são componentes de tela que

oferecem recursos específicos para o
acompanhamento de Tarefas, Processos ou
Documentos, entre muitos outros

• A organização de cada widget nas páginas é

personalizável via edição de página
KIT INTRANET

O Kit Intranet oferece widgets,

técnicas e código de referência
para desenvolvedores:

Vídeo Download
2 WIDGETS PERSONALIZADOS
 WIDGETS PERSONALIZADOS

• Widgets personalizados são criados pelo próprio usuário, utilizando ou não

templates de código disponíveis no fluig Studio

• Por intermédio deles, o usuário pode fornecer conteúdo personalizado,

renderizar componentes de ERP ou mesmo de outros sistemas de terceiros

• Como criar um widget que busque conteúdo:

NOVO WIDGET

Snippets:

GIF
 WIDGETS PERSONALIZADOS

1 Nome/Identificador do Widget 1

2 Classes Java, caso exista alguma regra de negócio específica do Widget 2

Arquivo de configuração do Widget, onde é persistida, entre outras
3 3
informações, o código da Widget, título e desenvolvedor
Arquivo de template do Freemarker, que será interpretado durante a 5
4
renderização do Widget
6
Arquivo que será interpretado durante a renderização do Widget em modo de
5 edição. Usado para configurar opções específicas para renderização do 4
Widget, como por exemplo, filtros de data, cotação do dólar, etc.
Arquivo de strings traduzíveis utilizadas pelo Widget. Deve possuir derivações
6
de acordo com o idioma suportado pelo Widget
 WIDGETS PERSONALIZADOS

Ícone que representa a Widget. Será utilizado para representar a Widget no

7 menu lateral da aplicação, ou em qualquer tela que necessite de
representação visual do componente

8 Descritor padrão de uma aplicação Java para web

Descritor para Jboss. Deve conter a propriedade context-root, que representa
9
o contexto web do layout. Recomendado que seja o próprio código do layout 10

10 Folha de estilo da Widget 7

11 Arquivo JavaScript da Widget (caso seja necessário) 11

9
12 Pasta específica para a construção de testes unitários
8
12
MÃOS À OBRA!
EXERCÍCIOS DE FIXAÇÃO - WCM

1. Importar o Kit Intranet para um projeto no Studio

2. Criar um widget que diga “Olá Mundo” sem a utilização de template

3. Criar um layout que utilize variáveis FTL e métodos do objeto pageRender

4. Neste layout, substitua o menu lateral por um menu superior

3 SUPER WIDGET
SUPER WIDGET

• O Super Widget reúne processos comuns de desenvolvimento com o

objetivo de padronizar e agilizar a criação de widgets

• Funciona como uma super class JavaScript

 EXEMPLO DE IMPLEMENTAÇÃO

No fluig Studio, crie um novo widget utilizando o template Documentos

Favoritos e acesse os arquivos abaixo para verificar a implementação:
– src/main/resources/view.ftl

– src/main/webapp/resources/js/favorites.js
FLUIG STYLE GUIDE

Confira as estruturas CSS, componentes e melhores práticas disponíveis

para agilizar o desenvolvimento de páginas e widgets: http://style.fluig.com

• Reúne elementos de interface para o desenvolvimento responsivo de

páginas, formulários e widgets – inclusive Mobile

• Facilita a reutilização de código-fonte

• Garante a compatibilidade, consistência e uniformidade visual

4 INTERNACIONALIZAÇÃO
INTERNACIONALIZAÇÃO

O conceito de internacionalização (também chamado

de Localização ou i18n) consiste no desenvolvimento
e/ou adaptação de um produto para outros idiomas

No fluig, o i18n é suportado através de arquivos de

propriedades distintos para cada idioma (.properties)
 INTERNACIONALIZAÇÃO

Dentro do arquivo application.info deve

existir uma propriedade chamada
locale.file.base.name

É importante que o valor desta

propriedade seja o mesmo que o prefixo
dos arquivos de internacionalização

Utilização no desenvolvimento:
5 API PÚBLICA
API PÚBLICA

• Application Programming Interface (Interface de Programação de

Aplicativos)

• É um conjunto de rotinas e padrões estabelecidos pela plataforma para

que aplicações externas possam utilizar seus recursos

• Documentação fluig API + exemplo

• api.fluig.com
SERVIÇOS REST

• A opção Serviços REST do Painel de Controle permite acessar com segurança

recursos e serviços externos à plataforma, utilizando os protocolos de
autenticação OAuth1, OAuth2 e Basic Authentication

• É possível cadastrar, configurar e testar esses serviços

• Os métodos HTTP disponíveis são: PUT, POST, GET, DELETE e PATCH

– PATCH não está disponível para autenticação via OAuth1

• A escolha do protocolo, obtenção de tokens e demais informações

necessárias para o cadastro do client ficam a cargo do desenvolvedor
CADASTRAR CLIENT DE SERVIÇO REST

GIF
TESTAR SERVIÇO

GIF
CLIENTE REST

GIF

Instalação da extensão Advanced Client Rest para Google Chrome

CLIENTE REST

• A extensão Advanced Client REST é utilizada para realizar testes com os

métodos disponíveis na API Pública

• Utilize a opção GET ou POST, conforme o tipo de chamada do método

– GET: utilizado para solicitar um retorno do servidor

– POST: utilizado para envio de dados ao servidor através de código JSON (no
campos Raw) ou Form
CLIENTE REST

GIF
GET: /public/ecm/document/{documentId}/{versionId}
CLIENTE REST

GIF
POST: /public/2.0/communities/create
 INTEGRAÇÃO COM SERVIÇOS REST

• Para obter dados de uma fonte externa à plataforma, a forma mais

aconselhável é via chamada REST

• Configuração das chamadas REST no widget:

– Criação da classe ApplicationConfig, que estende a classe Application

– Criação da classe REST

– Configuração dos arquivos jboss-web.xml, web.xml e pom.xml

• Integração de widget com serviços REST:

INTEGRAÇÃO COM DATASETS DE FORMULÁRIOS

• Os dados preenchidos pelos usuários em campos de formulários podem ser

armazenados em datasets e posteriormente consultados em widgets, por
exemplo

• O fluig também dispõe de datasets internos que podem ser utilizados no

desenvolvimento sobre a plataforma

• Integrando widget com formulários/datasets do fluig:

• Exemplo de implementação Javascript no widget Aniversariantes

6 COMPONENTES
WIDGET SLIDESHOW COM INSTAGRAM

• Widget SlideShow com

integração ao Instagram:

• Exemplo de implementação no
Kit Intranet:
 DATATABLE

• O Datatable auxilia na criação de tabelas

com paginação e recurso de busca:

• Os dados da tabela podem ser obtidos por

array de objetos ou via URL REST

• Exemplo de implementação no widget de

Notícias do Kit Intranet
CONSUMO DE WS SOAP EM WIDGET

• Consumo de um WS SOAP de um Widget:

• Exemplo de implementação SOAP no Kit Intranet (integração RM)

– Widget Aniversariantes

– Widget Organograma
COMPONENTE COM CHAMADA SOAP DE ERP (PROTHEUS)

Essa widget faz consulta a tabela SA2 do Microsiga Protheus

 CHAMADA PARA SERVIÇOS SOAP

import com.fluig.proxy.ws.colleague.ColleagueDtoArray; public String setCreateColleague(String username, String

import com.fluig.proxy.ws.colleague.ColleagueService; password, int companyId, ColleagueDtoArray colleagues) throws
import com.fluig.proxy.ws.colleague.ECMColleagueServiceService; Exception {
return service.createColleague(username, password,
public class ColleagueWSClient { companyId, colleagues);
protected ECMColleagueServiceService locator; //criação do objeto }
protected static ColleagueService service; //criação do objeto
public String getRemoveColleague(String username, String
@SuppressWarnings("static-access") password, int companyId, String colleagueId) throws Exception {
public ColleagueWSClient() { return service.removeColleague(username, password,
this.locator = new ECMColleagueServiceService(); companyId, colleagueId);
this.service = locator.getColleagueServicePort(); }
} }
 COMPONENTE COM CHAMADA SOAP DE ERP
(PROTHEUS)

@Path("/execute") try {
public class ProtheusRest extends WCMRest { TABLEVIEWtableView =
private static Logger log = executarConsulta(pars.tabela,pars.codigo,pars.descricao);
LoggerFactory.getLogger(ProtheusRest.class); ARRAYOFFIELDVIEW arrayOfFieldView = tableView.getTABLEDATA();
JSONArray arr = new JSONArray();
@POST ARRAYOFFIELDSTRUCT arrayOfFieldStruct =
@Produces(MediaType.APPLICATION_JSON) tableView.getTABLESTRUCT();
@Consumes(MediaType.APPLICATION_JSON)
@Path("/query") for (int i = 0; i < arrayOfFieldView.getFIELDVIEW().length; i++) {
FIELDVIEW fieldView = arrayOfFieldView.getFIELDVIEW(i);
@TransactionAttribute(TransactionAttributeType.NOT_SUPPORTED) JSONObject o = new JSONObject();
public Response realizarConsulta(ParamsVO pars) { for (int i2 = 0; i2 < arrayOfFieldStruct.getFIELDSTRUCT().length;
i2++) {
FIELDSTRUCT fieldStruct = arrayOfFieldStruct.getFIELDSTRUCT(i2);
7 MOBILE
SUPORTE A PÁGINAS E WIDGETS MOBILE

• Deve ser adicionada a propriedade

application.mobileapp no arquivo
application.info com o valor true

• Boas Práticas para o desenvolvimento de

widgets com exibição no fluig Mobile:
SUPORTE A PÁGINAS E WIDGETS MOBILE

• A renderização das páginas no aplicativo

mobile apresentará apenas o conteúdo das
widgets habilitadas sequencialmente

• O widget precisa ser habilitado para exibição

mobile na tela de edição da página

• Suporte à páginas e widgets Mobile:

SUPORTE A PÁGINAS E WIDGETS MOBILE

A variável booleana mobileAppMode no template do FreeMarker determina se

a widget está sendo renderizada através do aplicativo mobile:

if (WCMAPI.isMobileAppMode()) {

this.DOM.find('a').attr('href', '#');

}
MÃOS À OBRA!
EXERCÍCIOS DE FIXAÇÃO

Chamadas ao serviços da API Pública por meio de um cliente REST

• O objetivo do exercício é fazer chamadas dos serviços da API Pública

• Fazer chamada ao serviço que retorne os documentos de uma

determinada pasta. A pasta deve ser configurada na própria widget

• Utilize http://<host>:<porta>/public/ecm/document/listDocument/{folderId}
EXERCÍCIOS DE FIXAÇÃO

Construção de widget baseada na API

• O objetivo do exercício é desenvolver um widget baseada na API

Pública

• Criar uma widget que exiba os documentos de uma pasta, a ser

configurada através da interface da widget
EXERCÍCIOS DE FIXAÇÃO

Utilização de Dataset baseado no formulário para estruturação e

exibição do widget

• O objetivo do exercício é utilizar um dataset para consultar as

informações inseridas em um formulário

• Criar um formulário de Cadastro de Aniversariantes. Em seguida utilizar

um dataset para consultar as informações contidas nesse formulário
EXERCÍCIOS DE FIXAÇÃO

Construção de componente com chamada a um serviço SOAP do ERP

(Microsiga Protheus )

• O objetivo do exercício é desenvolver um widget com chamada a um

serviço SOAP do ERP (Microsiga Protheus)

• Criar uma widget que permite consultar as informações de uma

determinada tabela do Protheus. Essa tabela deve ser configurada na
tela de edição da widget, junto aos campos que deverão ser buscados
EXERCÍCIOS DE FIXAÇÃO

Utilização de um componente Chart do fluig Style Guide

• O objetivo do exercício é desenvolver uma widget que inclua um

gráfico de barras do Style Guide

• Crie uma enquete em uma comunidade e exiba os resultados em uma

widget utilizando um gráfico de barras
EXERCÍCIOS DE FIXAÇÃO

Utilização de um componente Miscellaneous do fluig Style Guide

• O objetivo do exercício é desenvolver uma widget que inclua o

componente Carousel do Style Guide

• Crie uma pasta no ECM do fluig e inclua imagens. Em seguida, exiba

estas imagens em uma widget com o Carousel
 CANAIS DE COMUNICAÇÃO FLUIG

• Site: fluig.com • Blog: fluig.com/blog

• Documentação: dev.fluig.com • YouTube: youtube.com/fluigplatform

• Guia de Relacionamento: • SlideShare: pt.slideshare.net/fluig

• Suporte: suporte.fluig.com • Scribd: scribd.com/fluigplatform

• Comunidade DEV fluig:

Acompanhe os canais sociais de fluig: OBRIGADO!
/fluigplatform pt.scribd.com/fluigplatform /fluigplatform FLUIG EDUCATION CENTER
E-mail: [email protected]
/company/fluig pt.slideshare.net/fluig /fluig.com/blog Fone: (11) 2099-7337

www.fluig.com
0800 882 9191