WCM

TREINAMENTO DE DESENVOLVIMENTO
WCM

O Web Content Management (WCM) uma

ferramenta que promove gesto de contedo,
colaborao e recursos de administrao de
portais na Web
1 ESTRUTURA DE PGINAS
 PGINA PRIVADA

Na criao de uma pgina, selecionar a opo Authenticated no campo Autorizao

determina que a pgina estar visvel apenas para os usurios autenticados
PGINA PRIVADA - URL

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

Considerando os dados acima, por exemplo, a URL da pgina seria

http://meuserver.com.br:8080/portal/p/001/analytics, onde:
Elemento Descrio
/portal Valor fixo da plataforma
/p Indicativo de pgina privada
analytics Campo Identificador nico no cadastro da pgina
 PGINA PBLICA

Na criao de uma pgina, selecionar a opo Public no campo Autorizao determina que
a pgina estar visvel para usurios autenticados e visitantes externos
PGINA PBLICA - URL

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

Considerando os dados acima, por exemplo, a URL da pgina seria

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

A ausncia do elemento /p na URL indica que o acesso a essa pgina ser

pblico, sem necessidade de autenticao
FREEMARKER

O desenvolvimento de layouts e widgets baseado no framework de

templates FreeMarker (.ftl)

O FreeMarker responsvel pela camada de visualizao: sobre ele escrito

todo o HTML do componente, enquanto a lgica tratada separadamente

Comandos FreeMarker no fluig Studio:

LAYOUTS

Toda pgina do fluig constituda 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 configurao do layout onde so armazenadas informaes, como
2
2 o cdigo do layout, ttulo e desenvolvedor

3 3 Contm a configurao dos slots

4
4 Arquivo de strings traduzveis utilizadas pelo layout

5 Descritor padro de uma aplicao 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 prprio cdigo do layout

6
7 Folhas de estilo do layout (caso seja necessrio)

5 8 cone que representa o layout

APPLICATION.INFO

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

definio da propriedade application.type = layout no arquivo descritor
application.info

atravs dele que a aplicao tem conhecimento das propriedades do

layout, identificao do desenvolvedor, arquivos necessrios para sua
renderizao, 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 marcao HTML e Freemarker, a

quantidade e disposio dos slots

Para facilitar o desenvolvimento, foram disponibilizados alguns mtodos

e variveis da camada de negcio:
Variveis: sintaxe ${nome-da-varivel} em qualquer lugar do FTL

Mtodos: objeto pageRender

LAYOUT.FTL
DESENVOLVIMENTO DE LAYOUTS

A biblioteca wcm.ftl contm elementos bsicos que podem ser inseridos na

montagem de um layout, tais como menu, cabealho e rodap da pgina:

Como retirar os elementos bsicos de um layout personalizado?

Mesmo em pginas pblicas, o usurio est sujeito aplicao de permisses.

Portanto, caso algum componente ou widget utilizado no seja pblico, o
usurio pode no visualizar o elemento ou ser direcionado para a tela de login
SLOTS

So reas pr-definidas dentro do layout onde os widgets podem ser

distribudos na ordem desejada para atender a cada necessidade
 ESTRUTURA BSICA 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: Identificao nica do container. No pode haver outro com o mesmo cdigo
3 Slot001: Identificao nica do slot. No pode haver outro elemento com esse mesmo cdigo
4 true/false: As widgets posicionadas neste slot exibem (true) ou no exibem (false) seus ttulos
true: Torna possvel inserir e retirar widgets dentro do slot bem como mudar o posicionamento delas
5 false: No permite qualquer edio no contedo do Slot. Slots de cabealho, rodap e login geralmente
possuem este valor
SLOTS

Algumas classes so obrigatrias 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 so componentes de tela que

oferecem recursos especficos para o
acompanhamento de Tarefas, Processos ou
Documentos, entre muitos outros

A organizao de cada widget nas pginas

personalizvel via edio de pgina
KIT INTRANET

O Kit Intranet oferece widgets,

tcnicas e cdigo de referncia
para desenvolvedores:

Vdeo Download
2 WIDGETS PERSONALIZADOS
 WIDGETS PERSONALIZADOS

Widgets personalizados so criados pelo prprio usurio, utilizando ou no

templates de cdigo disponveis no fluig Studio

Por intermdio deles, o usurio pode fornecer contedo personalizado,

renderizar componentes de ERP ou mesmo de outros sistemas de terceiros

Como criar um widget que busque contedo:

NOVO WIDGET

Snippets:

GIF
 WIDGETS PERSONALIZADOS

1 Nome/Identificador do Widget 1

2 Classes Java, caso exista alguma regra de negcio especfica do Widget 2

Arquivo de configurao do Widget, onde persistida, entre outras
3 3
informaes, o cdigo da Widget, ttulo e desenvolvedor
Arquivo de template do Freemarker, que ser interpretado durante a 5
4
renderizao do Widget
6
Arquivo que ser interpretado durante a renderizao do Widget em modo de
5 edio. Usado para configurar opes especficas para renderizao do 4
Widget, como por exemplo, filtros de data, cotao do dlar, etc.
Arquivo de strings traduzveis utilizadas pelo Widget. Deve possuir derivaes
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 aplicao, ou em qualquer tela que necessite de
representao visual do componente

8 Descritor padro de uma aplicao Java para web

Descritor para Jboss. Deve conter a propriedade context-root, que representa
9
o contexto web do layout. Recomendado que seja o prprio cdigo do layout 10

10 Folha de estilo da Widget 7

11 Arquivo JavaScript da Widget (caso seja necessrio) 11

9
12 Pasta especfica para a construo de testes unitrios
8
12
MOS OBRA!
EXERCCIOS DE FIXAO - WCM

1. Importar o Kit Intranet para um projeto no Studio

2. Criar um widget que diga Ol Mundo sem a utilizao de template

3. Criar um layout que utilize variveis FTL e mtodos do objeto pageRender

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

3 SUPER WIDGET
SUPER WIDGET

O Super Widget rene processos comuns de desenvolvimento com o

objetivo de padronizar e agilizar a criao de widgets

Funciona como uma super class JavaScript

 EXEMPLO DE IMPLEMENTAO

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

Favoritos e acesse os arquivos abaixo para verificar a implementao:
src/main/resources/view.ftl

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

Confira as estruturas CSS, componentes e melhores prticas disponveis

para agilizar o desenvolvimento de pginas e widgets: http://style.fluig.com

Rene elementos de interface para o desenvolvimento responsivo de

pginas, formulrios e widgets inclusive Mobile

Facilita a reutilizao de cdigo-fonte

Garante a compatibilidade, consistncia e uniformidade visual

4 INTERNACIONALIZAO
INTERNACIONALIZAO

O conceito de internacionalizao (tambm chamado

de Localizao ou i18n) consiste no desenvolvimento
e/ou adaptao de um produto para outros idiomas

No fluig, o i18n suportado atravs de arquivos de

propriedades distintos para cada idioma (.properties)
 INTERNACIONALIZAO

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 internacionalizao

Utilizao no desenvolvimento:
5 API PBLICA
API PBLICA

Application Programming Interface (Interface de Programao de

Aplicativos)

um conjunto de rotinas e padres estabelecidos pela plataforma para

que aplicaes externas possam utilizar seus recursos

Documentao fluig API + exemplo

api.fluig.com
CLIENTE REST

GIF

Instalao da extenso Advanced Client Rest para Google Chrome

CLIENTE REST

A extenso Advanced Client REST utilizada para realizar testes com os

mtodos disponveis na API Pblica

Utilize a opo GET ou POST, conforme o tipo de chamada do mtodo

GET: utilizado para solicitar um retorno do servidor

POST: utilizado para envio de dados ao servidor atravs de cdigo JSON (no
campos Raw) ou Form
CLIENTE REST

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

GIF
POST: /public/2.0/communities/create
 INTEGRAO COM SERVIOS REST

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

aconselhvel via chamada REST

Configurao das chamadas REST no widget:

Criao da classe ApplicationConfig, que estende a classe Application

Criao da classe REST

Configurao dos arquivos jboss-web.xml, web.xml e pom.xml

Integrao de widget com servios REST:

INTEGRAO COM DATASETS DE FORMULRIOS

Os dados preenchidos pelos usurios em campos de formulrios podem ser

armazenados em datasets e posteriormente consultados em widgets, por
exemplo

O fluig tambm dispe de datasets internos que podem ser utilizados no

desenvolvimento sobre a plataforma

Integrando widget com formulrios/datasets do fluig:

Exemplo de implementao Javascript no widget Aniversariantes

6 COMPONENTES
WIDGET SLIDESHOW COM INSTAGRAM

Widget SlideShow com

integrao ao Instagram:

Exemplo de implementao no
Kit Intranet:
 DATATABLE

O Datatable auxilia na criao de tabelas

com paginao e recurso de busca:

Os dados da tabela podem ser obtidos por

array de objetos ou via URL REST

Exemplo de implementao no widget de

Notcias do Kit Intranet
CONSUMO DE WS SOAP EM WIDGET

Consumo de um WS SOAP de um Widget:

Exemplo de implementao SOAP no Kit Intranet (integrao RM)

Widget Aniversariantes

Widget Organograma
7 MOBILE
SUPORTE A PGINAS E WIDGETS MOBILE

Deve ser adicionada a propriedade

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

Boas Prticas para o desenvolvimento de

widgets com exibio no fluig Mobile:
SUPORTE A PGINAS E WIDGETS MOBILE

A renderizao das pginas no aplicativo

mobile apresentar apenas o contedo das
widgets habilitadas sequencialmente

O widget precisa ser habilitado para exibio

mobile na tela de edio da pgina

Suporte pginas e widgets Mobile:

SUPORTE A PGINAS E WIDGETS MOBILE

A varivel booleana mobileAppMode no template do FreeMarker determina se

a widget est sendo renderizada atravs do aplicativo mobile:

if (WCMAPI.isMobileAppMode()) {

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

}
MOS OBRA!
EXERCCIOS DE FIXAO

Chamadas ao servios da API Pblica por meio de um cliente REST

O objetivo do exerccio fazer chamadas dos servios da API Pblica

Fazer chamada ao servio que retorne os documentos de uma

determinada pasta. A pasta deve ser configurada na prpria widget

Utilize http://<host>:<porta>/public/ecm/document/listDocument/{folderId}
EXERCCIOS DE FIXAO

Construo de widget baseada na API

O objetivo do exerccio desenvolver um widget baseada na API

Pblica

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

configurada atravs da interface da widget
EXERCCIOS DE FIXAO

Utilizao de Dataset baseado no formulrio para estruturao e

exibio do widget

O objetivo do exerccio utilizar um dataset para consultar as

informaes inseridas em um formulrio

Criar um formulrio de Cadastro de Aniversariantes. Em seguida utilizar

um dataset para consultar as informaes contidas nesse formulrio
EXERCCIOS DE FIXAO

Utilizao de um componente Chart do fluig Style Guide

O objetivo do exerccio desenvolver uma widget que inclua um

grfico de barras do Style Guide

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

widget utilizando um grfico de barras
EXERCCIOS DE FIXAO

Utilizao de um componente Miscellaneous do fluig Style Guide

O objetivo do exerccio 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 COMUNICAO FLUIG

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

Documentao: 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: fluig.education.center@fluig.com
/company/fluig pt.slideshare.net/fluig /fluig.com/blog Fone: (11) 2099-7337

www.fluig.com
0800 882 9191