Você está na página 1de 60

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

Você também pode gostar