APOSTILA DESENVOLVIMENTO DE PORTAIS COM WCM - CONTEUDO


DESENVOLVIMENTO DE PORTAIS - WCM

local_printshop

Capítulo 1 - DIGITAL WORKPLACE

Com o cenário da transformação digital, podemos visualizar diversos aspectos que estão se modificando, como por exemplo a forma como as empresas se posicionam, se comunicam para com seus clientes, colaboradores e fornecedores. O conceito de Digital Workplace tem ganhado cada vez mais importância e valor para estas organizações. O fluig viabiliza a construção de um digital Workplace, proporcionando ao desenvolvedor maior facilidade e flexibilidade durante seu desenvolvimento, pois a plataforma foi desenvolvida sob a arquitetura orientada a serviços (SOAP), ou seja podemos acessar os recursos da plataforma por meio de webservices e APIS. Além disso, não podemos esquecer também da tecnologia de datasets, que facilita ainda mais a manipulação dos dados na plataforma. Tais aspectos técnicos otimizam a vida do desenvolvedor, partindo sob a ótica de um desenvolvimento de alto nível, onde é possível construir soluções que potencialize os recursos da plataforma, em tempo hábil exigindo menos esforços de codificação. Esta é uma característica que faz o WCM se diferenciar das outras soluções disponíveis no mercado e que tornam o fluig uma solução completa não apenas para os usuários como também para os desenvolvedores.

# EXERCITANDO

Então chegamos ao termino do primeiro capitulo, e chegou a hora de treinar um pouco sobre os conceitos abordados.

  1. Sabemos que atualmente não basta apenas possuirmos um website para garantir um bom posicionamento e uma boa comunicação com nossos clientes, precisamos ir muito mais afundo para acompanharmos as transformações digitais do mercado e assim agregar novas experiências para nossos usuários. Sabendo disto podemos afirmar que o digital Workplace :
    1. O Digital Workplace é um dos resultados da transformação digital, não se caracterizando apenas por uma tecnologia específica e sim por um conjunto de tecnologias juntamente com a cultura digital da organização.
    2. O Digital Workplace, deixou de ser um cenário utópico, visto as transformações que as organizações vêm sofrendo nos últimos anos com a tecnologias orientada a negócio apoiada há metodologias que buscam trazer maior produtividade, agilidade e crescimento exponencial.
    3. O Digital Workplace é apenas uma metodologia de trabalho que foca na produtividade e agilidade independente do seu ambiente de trabalho.
    1. (    ) apenas I está correta
    2. (    ) apenas I e III estão corretas
    3. (    ) apenas I e II estão corretas
    4. (    ) todas estão corretas

Capítulo 2 - POR ONDE DEVO COMEÇAR ?

Para iniciarmos o desenvolvimento de WCM sob a plataforma fluig devemos possuir algumas habilidades que são imprescindíveis, tais como conhecimento de web e suas linguagens como HTML , CSS , JavaScript e bibliotecas e framewokrs como Jquery e BootStrap.

Percebam que todas essas habilidades são de um desenvolvedor front-end, não necessitando de habilidade de back-end, pois quando estamos desenvolvendo no fluig, estamos atuando sob uma camada superior e abstraída do seu core.

A imagem a seguir esboça esse conceito:

Veja Mais add

É importante ressaltar que caso você não conheça sobre desenvolvimento web, ou deseja aprimorar seus conhecimentos, possuímos o treinamento dev start que visa ensinar essas habilidades para que você consiga explorar os recursos do fluig e construir soluções incríveis para seus clientes sob a plataforma.

É possível localizar mais informações diretamente no link

Saiba Mais add

# TRABALHANDO COM O FLUIG STUDIO

Agora que já sabemos quais habilidades são necessárias para iniciarmos nosso desenvolvimento, precisamos saber quais ferramentas devemos usar.

Para qualquer desenvolvimento sob a plataforma fluig, precisamos do uso de uma IDE, neste caso o Eclipse. O Eclipse é uma ferramenta de mercado open source, que permite não apenas codificar em várias linguagens, como também possui o recurso de plug-ins. Os plug-ins no eclipse auxiliam o desenvolvedor no desenvolvimento de suas aplicações, oferecendo recursos exclusivos e específicos.

No caso do fluig, possuímos o plug-in fluig Studio, responsável por customizar e adicionar ferramentas à IDE do eclipse que são específicas para o desenvolvimento no fluig. Dentre seus recursos podemos destacar funcionalidades como:

  • Manipulação de Datasets
  • Configuração de fluig Servers para deployer
  • Assistente para modelagem BPMN 2.0
  • Recursos de Snipptes de código
  • Manipulação de serviços
  • Criação de Projetos fluig

É importante lembra-los que existem versões homologadas do eclipse para instalação e uso do plug-in fluig Studio. Atualmente as versões homologadas são:

Veja Mais add

Para mais informações sobre a instalação do eclipse você pode encontrar nos seguintes links:

Saiba Mais add Saiba Mais add

É importante ressaltar que o plug-in do fluig Studio trabalha juntamente com as versões da plataforma, ou seja toda nova versão liberada do fluig possui sua respectiva versão no plug-in, por isso é recomendo sempre quando iniciar seu desenvolvimento, valide se seu fluig Studio se encontra respectivamente na mesma versão do ambiente fluig utilizado.

Para mais informações sobre a instalação e configuração do plug-in do fluig Studio, basta acessar o link abaixo:

Saiba Mais add Saiba Mais add

# TRABALHANDO COM OUTROS EDITORES

Como sabemos, para nos desenvolvedores sempre acabamos tendo uma relação de intimidade com um editor de nossas preferências, e possivelmente você queria codar seus projetos fluig, em outro editor certo? Bom a resposta que posso dar é que sim é possível utilizar um editor da sua preferência, porém ainda sim vamos precisar do eclipse com o fluig Studio, pois somente no plug-in possuímos funcionalidades que irão viabilizar o nosso desenvolvimento. A questão aqui é apenas a mudança do editor de código, então o que podemos fazer é abrir o seu projeto fluig em um editor de sua preferência como vscode , notepad++, sublime e editar seu código com mais liberdade.

# EXERCITANDO

Então chegamos ao termino do segundo capitulo, e chegou a hora de treinar um pouco sobre os conceitos abordados.

  1. Sabemos que atualmente não basta apenas possuirmos um website para garantir um bom posicionamento e uma boa comunicação com nossos clientes, precisamos ir muito mais afundo para acompanharmos as transformações digitais do mercado e assim agregar novas experiências para nossos usuários. Sabendo disto podemos afirmar que o digital Workplace :
    1. O Digital Workplace é um dos resultados da transformação digital, não se caracterizando apenas por uma tecnologia específica e sim por um conjunto de tecnologias juntamente com a cultura digital da organização.
    2. O Digital Workplace, deixou de ser um cenário utópico, visto as transformações que as organizações vêm sofrendo nos últimos anos com a tecnologias orientada a negócio apoiada há metodologias que buscam trazer maior produtividade, agilidade e crescimento exponencial.
    3. O Digital Workplace é apenas uma metodologia de trabalho que foca na produtividade e agilidade independente do seu ambiente de trabalho.
    1. (    ) apenas I está correta
    2. (    ) apenas I e III estão corretas
    3. (    ) apenas I e II estão corretas
    4. (    ) todas estão corretas

Capítulo 3 - ENTENDENDO A ESTRUTURA DO WCM

O recurso de WCM fornece liberdade para a construção de portais corporativos, transformando em espaços colaborativos para atender as necessidades de cada área ou assunto em relevante. O WCM utiliza o recurso de construção de páginas utilizando estilos e configurações personalizadas para cada necessidade.

# ESTRUTURA DE PAGINA

As páginas são responsáveis por exibir todos os conteúdos e funcionalidades da plataforma, as páginas por sua vez podem se comportar de 2 modos:

  • Modo Privado
  • As paginas privadas consiste, na exibição de seu conteúdo apenas para os usuários que estão autenticados na plataforma, impossibilitando que qualquer outro usuário acesse o conteúdo.

  • Modo Público
  • Já as páginas públicas, exibem seu conteúdo para qualquer usuário, não necessitando de autenticação para ter acesso às informações. As páginas publicam são muito utilizadas para estabelecer uma comunicação com o público externo, se comportando exatamente como um website.

Por sua vez as páginas agrupam muitos componentes, e exibem de forma organizada seu conteúdo, para isto o fluig estabeleceu uma arquitetura que define a estrutura de uma página.As páginas utilizam o recurso de Slots para organizar seus componentes e seu conteúdo. Ou seja uma página pode conter vários slots, são eles que irão diagramar os elementos, definindo até mesmo o comportamento da responsividade da página. Os slots são responsáveis por agrupar as widgets (componentes), instanciando-as na página.

Desta forma possuímos a segunte arquitetura:

Veja a imagem add

A vantagens de se ter esse tipo de arquitetura é garantir a flexibilidade para os usuários em relação ao conteúdo da página e seus componentes, assim se torna facilmente possível modificar seu conteúdo sem a necessidade de codificar. Esse conceito plug play deve ser utilizado pelo desenvolvedor para que a solução desenvolvida dê essa vantagem e flexibilidade aos usuários da plataforma.

Para mais informações sobre a instalação e configuração do plug-in do fluig Studio

Saiba Mais add

# ESTRUTURA DO PROJETO

Agora que sabemos como iniciar nosso desenvolvimento, já conhecemos a estrutura de páginas do WCM, vamos entender agora um pouco mais sobre como iniciamos nosso projeto no eclipse.

Uma vez que já configuramos nossa IDE e já instalamos o fluig Studio, está na hora de construirmos nosso primeiro projeto, para isto vamos acessar a opção new → projeto fluig.

Percebam que ao construímos um novo projeto fluig, o fluig Studio já monta para você a estrutura de pastas seguindo um design pattern para o desenvolvimento padronizado.

Veja a imagem add
  • Datasets
  • Pasta responsável por armazenar todos os scripts de manipulação de dados através de datasets.

  • Events
  • Pasta responsável por armazenar os scripts para manipulação de eventos na plataforma.

  • Forms
  • Pasta responsável por armazenar os formulários desenvolvidos.

  • Mechanisms
  • Pasta responsável por armazenar os scripts de mecanismos de atribuição para os processos workflow.

  • Reports
  • Pasta responsável por armazenar relatórios desenvolvidos sob o Birt.

  • WCM
  • Pasta responsável por armazenar layouts e widgets desenvolvidas. Neste material iremos explorar mais a fundo essa estrutura.

  • workflow
  • Pasta responsável por armazenar os diagramas BPMN desenvolvidos.

É importante lembrar que durante o desenvolvimento é extremamente necessário respeitar essa estrutura do projeto, para manter a integridade das soluções desenvolvidas e evitar quaisquer problemas no momento do deployer.

Para mais informações sobre a construção de projetos fluig por meio do fluig Studio basta

Saiba Mais add

# EXERCITANDO

Capítulo 4 - FREEMARKER

Após entendermos a estrutura de desenvolvimento, suas ferramentas e a estrutura dos projetos fluig. Vamos aprofundar mais nos aspectos técnicos da aplicação do fluig e seu desenvolvimento.

Conforme tínhamos visto, o desenvolvimento sob o fluig trabalhada na camada front-end, evitando assim que o desenvolvedor necessite mexer no core da aplicação. Porém é fundamental entendermos o seu funcionamento e como as coisas funcionado do lado do server ou seja o back-end.

O fluig por sua vez, foi desenvolvido sob a arquitetura da linguagem java (JEE), utilizando o JBoss (WildFly) como servidor de aplicação. Uma das vantagens da sua utilização do JavaEE é justamente o conjunto de especificações e bibliotecas voltadas as aplicações web, tais como Severlets e JSP.

Quando construímos nossos projetos fluig, utilizamos o JavaScript como linguagem de desenvolvimento, por ser uma das linguagens do front-end, porém para o fluig todos os arquivos fontes .js são compilados em classes Java durante o processo de deployer. O rhino é a biblioteca responsável por fazer isso, ou seja podemos escrever fontes que manipulam o back-end com javascript por intermédio desta biblioteca, tornando imperceptível para o desenvolvedor a ação do rhino.

# TEMPLATE ENGINE

Nos desenvolvimentos web é muito comum, utilizamos ferramentas (Template Engine) que otimizam o desenvolvimento, permitindo manipular e organizar o conteúdo HTML de forma dinâmica.

No fluig contamos com o Java template engine, o Freemarker, este framework é muito utilizado para organizar a estrutura MVC no fluig, separando a camada lógica do negócio da camada de design.

# FREEMARKER TEMPLATE LANGUAGE (FTL)

Bom agora que sabemos que existe um template engine, o freemarker, devemos entender o quanto pode ser útil sua utilização

Ao desenvolvermos layouts e widgets no fluig, utilizamos a estrutura do freemarker template language, ou seja nossos arquivos fontes não utilizam a extensão “.html” e sim “.ftl”, pois assim estamos invocando o uso do template engine, permitindo manipular o HTML de forma dinâmica.

Os templates freemarker podem conter basicamente 4 elementos:

  • Pontos de Interpolação (ficam entre ${ })
  • Tags ftl (ficam entre #{})
  • Comentários (ficam entre <#- ->)
  • Conteúdos estáticos

Uma das características principais da utilização do freemarker é a utilização dos pontos de interpolação que permitem que na estrutura do meu html seja possível injetar dados do back-end.

Os pontos de interpolação são variáveis ou valores recebidos de das classes do java que serão substituídos no arquivo de saída. Nos pontos de interpolação podemos realizar operações matemáticas com seus dados, concatenação de string e muito mais.

Outro característica importante são as tags ftl, que são parecidas com as do html porém, a diferença se encontra justamente em podermos manipular seu conteúdo de forma dinâmica, aplicando logica e condições para que tenham comportamentos específicos.

Exemplo:

<#if pageRender.isEditMode()=true>
            <div name="formatBar" id="formatBar"></div>
            <!-- Div geral -->
            <!-- Há CSS distinto para Edição/Visualização -->
            <div id="edicaoPagina" class="clearfix">
        <#else>
            <div id="visualizacaoPagina" class="clearfix">