Histórico da Página
...
Abra a perspectiva Fluig via menu Window/Open Perspective/Other.../Fluig (Figura 1).
...
- No Package Explorer, clique com o botão direito e escolha New...
Selecione a opção Widget.
Preencha os campos obrigatórios do componente Widget (Figura 2): Código (campo chave), Nome e Descrição.
Figura 2 - Criando uma nova Widget (campos obrigatórios)
Observação O campo Código deve ser preenchido apenas com letras, números e sublinhado (underscore).
- Escolha um Template para sua widget a partir do botão combo-box ou marque Nenhum caso não queira um modelo.
- Pressione Next para continuar (Figura 3) o preenchimento dos campos ou Finish para concluir.
Figura 3 - Criando uma nova Widget (campos opcionais)
Nota Os campos Código do desenvolvedor, Nome do desenvolvedor, URL do desenvolvedor e Categoria são opcionais. Já o campo Renderizador fornece apenas uma opção: Freemarker. |
Ao concluir a construção da Widget, a estrutura de diretório deverá ficar como na Figura 4 abaixo.
Figura 4 - Estrutura de diretórios de um projeto Widget
Onde:
Arquivo/Pasta | Descrição |
---|---|
<código-da-widget> | Nome/Identificador da Widget. |
src/main/java | Localização das classes Java, caso exista alguma regra de negócio específica da Widget. |
src/main/resources/application.info | Arquivo de configuração da Widget, onde é persistida, entre outras informações, o código da Widget, título e desenvolvedor. Este arquivo será mais detalhado nas próximas páginas deste documento. |
src/main/resources/view.ftl | Arquivo de template do freemarker que será interpretado durante a renderização da Widget. |
src/main/resources/edit.ftl | Arquivo que será interpretado durante a renderização da Widget em modo de edição. Usado para configurar opções específicas para renderização da Widget, como por exemplo, filtros de data, cotação do dólar, etc. Este arquivo é opcional, caso não exista, será considerado que a Widget não possui modo de edição, somente visualização. |
src/main/resources/<código-da-widget>.properties | Arquivo de strings traduzíveis utilizadas pela Widget. Deve possuir derivações de acordo com o idioma suportado pela Widget. O padrão será sempre o código da Widget seguido do sufixo referente à sua linguagem, um arquivo de tradução para o idioma inglês ficaria: “código-da-widget_EN_US.properties”. |
src/main/webapp/icon.png | Ícone que representa a Widget. Será utilizado para representar a Widget no menu lateral da aplicação, ou em qualquer tela que necessite de uma representação visual do componente. Devem possuir a dimensão 55 x 30. |
src/main/webapp/WEB-INF/web.xml | Descritor padrão de uma aplicação Java para web. |
src/main/webapp/WEB-INF/jboss-web.xml | Descritor específico para o JBoss. Deve conter pelo menos a propriedade “context-root”. O context-root representa o contexto Web da Widget e é recomendado que seja o próprio código da Widget. |
src/main/webapp/resources/css/<código-da-widget>.css | Folha de estilo da Widget. |
src/main/webapp/resources/js/<código-da-widget>.js | Arquivo Javascript da Widget (caso seja necessário). |
src/main/webapp/resources/images | Pasta específica de imagens da Widget, caso necessário. |
src/test/java | Pasta específica para a construção de testes unitários. |
Exemplo de código JavaScript
Bloco de código | ||
---|---|---|
| ||
var applicationCodeObj = SuperWidget.extend({ instanceId: null, sociableId: null, init: function() { //code }, bindings: { local: { 'someFunc': ['click_someFunc'] } }, someFunc: function() { } }); |
Exemplo de código HTML com FreeMarker (view.ftl)
Bloco de código | ||
---|---|---|
| ||
<#-- cria uma div para a widget --> <div class="wcm-widget-class super-widget" <#-- pega o id do objeto applicationCodeObj --> id="applicationCodeObj_${instanceId}" <#-- parâmetros de dados para a lista --> data-params="applicationCodeObj.instance({param1: 'teste', param2: 'ok'})"> <#-- cria a internacionalização da widget --> <h1>${i18n.getTranslation('hellow.example.hello')}</h1> </div> |
Criação de Layout
Acompanhe os passos a seguir:
- No Package Explorer, clique com o botão direito e escolha New...
Selecione a opção Layout.
Figura 5 - Criando um novo Layout (campos obrigatórios)
Preencha os campos obrigatórios do componente Layout (Figura 5): Código, Nome e Descrição.
Escolha um Template para seu layout a partir do botão combo-box ou marque Nenhum caso não queira um modelo.
Observação O campo Código deve ser preenchido apenas com letras, números e sublinhado (underscore).
Pressione Next para continuar (Figura 6) o preenchimento dos campos ou Finish para concluir.
Figura 6 - Criando um novo Layout (campos opcionais)
Nota Os campos: Código do desenvolvedor, Nome do desenvolvedor, URL do desenvolvedor e Categoria são campos opcionais. Já o campo Renderizador fornece apenas uma opção: Freemarker. |
Ao concluir a construção do Layout, a estrutura de diretório deverá ficar como na Figura 7.
Figura 7 - Estrutura de diretórios de um projeto Layout
Nota A estrutura de pastas e arquivos de um componente Layout é praticamente a mesma de um componente Widget. A alteração normalmente encontra-se no caminho src/main/resources/ onde os arquivos view.ftl e edit.ftl são substituídos pelo arquivo layout.ftl. |
Exemplo de código FreeMarker (layout.ftl)
Bloco de código | ||
---|---|---|
| ||
<!-- Layout com 3 slots verticais --> <!-- Header --> <div id="wcm_header" class="wcm-header-background wcm-header"> <!-- Group left --> <div class="header-grouper-left"> <a href="home" class="wcm_logo" title="${i18n.getTranslation('layout.label.pagetitle')}"> <#if '${imageLogo}'=='true'> <img src="${serverContextURL}/resources/images/${pageRender.user.tenantId}/logo_image.png"></img> <#else> <img src="${serverContextURL}/resources/images/logo.png"></img> </#if> </a> </div> <!-- Group right --> <div class="header-grouper-right"> <!-- Container login --> <div id="SlotLogin" slot="true" class="slot-header-actions"> <#list (pageRender.getInstancesIds("SlotLogin"))! as id> ${pageRender.renderInstanceNoDecorator(id)} </#list> </div> </div> </div> <!-- WCM Wrapper content --> <div class="wcm-wrapper-content"> <!-- Menu esquerdo --> <nav class="wcm-navigation wcm-menu-background"> <div id="SlotMenu" slot="true"> <#list (pageRender.getInstancesIds("SlotMenu"))! as id> ${pageRender.renderInstanceNoDecorator(id)} </#list> </div> </nav> <!-- Wrapper --> <div class="wcm-all-content"> <div id="wcm-content" class="clearfix wcm-background"> <!--WIDGETS DO LAYOUT --> <link type="text/css" rel="stylesheet" href="${contextPath}/resources/css/wcm_layout.css"/> <!-- Onde deverá estar a barra de formatação --> <#if widgetRender.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"> </#if> <!-- Titulo da página --> <div class="slotfull layout-1-1"> <span class="titleArea">${i18n.getTranslation('wcm.layoutdefault.title')}</span> <h2 class="pageTitle">${pageTitle}</h2> </div> <!-- Slot 1 --> <div class="editable-slot slotfull layout-1-1" id="slotFull1"> <div id="SlotC" slot="true" class="slotint" decorator="false" editableSlot="true"> <#list (pageRender.getInstancesIds("SlotC"))! as id> ${pageRender.renderInstanceNoDecorator(id)} </#list> </div> </div> <!-- Slot 2 --> <div class="editable-slot slotfull layout-1-1" id="slotFull2"> <div id="SlotB" slot="true" class="slotint" decorator="false" editableSlot="true"> <#list (pageRender.getInstancesIds("SlotB"))! as id> ${pageRender.renderInstanceNoDecorator(id)} </#list> </div> </div> <!-- Slot 3 --> <div class="editable-slot slotfull layout-1-1" id="slotFull3"> <!-- Widget --> <div id="SlotA" slot="true" class="slotint" decorator="true" editableSlot="true"> <#list (pageRender.getInstancesIds("SlotA"))! as id> ${pageRender.renderInstance(id)} </#list> </div> </div> </div> <!-- FIM DAS WIDGETS DO LAYOUT --> <div id="wcm_footer" class="wcm_footer"></div> </div> </div> </div> |
Exemplo de código JavaScript
Bloco de código | ||
---|---|---|
| ||
// JavaScript Document $(document).ready(function() { /*$(".wcm_config_widgets").click(function() { $(this).parent('li').children('ul').toggle(); });*/ //Utilizado o 'live' para que o event handler não se perca na atualização de widgets. $(".wcm_config_widgets").live("click", function(){ $(this).parent('li').children('ul').toggle(); }); $(document).bind('click', function(e) { var $clicked = $(e.target); if (! $clicked.parents().hasClass("wcm_controles_widgets")) $(".wcm_controles_widgets ul li ul").hide(); }); }); |
Snippets
A opção Snippet fornece ao desenvolvedor um pequeno trecho de código-exemplo relacionado a uma determinada funcionalidade. O objetivo é prover um modo rápido e simples para que o desenvolvedor visualize um exemplo de código e dê início a construção do componente.
Acesse o Studio, abra o menu Window e escolha a opção Show View/Other... ou pressione Shift + Alt + Q Q. Abra a pasta General e escolha a opção Snippets (Figura 8).
Figura 8 - Janela Show View
A aba/guia Snippets apresentará as opções para Componentes WCM, conforme visto na Figura 9.
Figura 9 - Janela Show View
Widget
- Salvar parâmetros de uma widget
- Uma função JavaScript que demonstra como salvar campos de tela de edição da widget via atributos de argumentos.
- Uma função JavaScript que demonstra como salvar campos de tela de edição da widget via atributos de argumentos.
- Mensagem na tela
- Trecho de código para criar uma janela e exibir uma mensagem.
- Trecho de código para criar uma janela e exibir uma mensagem.
- Abrir janela
- Uma função JavaScript que demonstra como abrir uma janela.
- Uma função JavaScript que demonstra como abrir uma janela.
- Chamada Ajax/Rest Genérica
- Uma função em JavaScript que demonstra uma chamada AJAX a um serviço REST.
- Chamada Ajax/Rest (JavaScript)
- Uma função em JavaScript que demonstra uma chamada AJAX a um serviço REST de consulta ao usuário, tratando o JSON recebido e apresentando uma mensagem do tipo “Olá usuário X”, onde deve ser apresentado nome do usuário retornado na chamada.
Layout
- Slot de um Layout (FTL)
- Apresenta o trecho de código referente a um slot que pode existir dentro do layout.
Realizando o deploy do componente
A partir deste momento é possível gerar o pacote e instalar o componente no servidor (fazer o deploy). Para iniciar o procedimento, selecione o projeto e clique no menu File e selecione a opção Export... (ou clique com o botão direito em cima do projeto Widget ou Layout).
Nota Selecione o projeto (Widget ou Layout) a ser exportado e clique com o botão direito em cima da pasta do projeto para fazer corretamente a instalação. |
Um novo Wizard será iniciado para guiá-lo (Figura 10).
Figura 10 - Wizard de exportação de componente Fluig WCM (1)
Siga os procedimentos abaixo (Figura 11):
- Selecione Exportar para servidor Fluig e clique em Next.
- Selecione o servidor para onde o serviço será exportado.
- Clique em Finsish.
Figura 11 - Wizard de exportação de componente Fluig WCM (2)
Pronto! Esta etapa facilita todo o processo. Ao término, o servidor terá feito a instalação do componente e este estará pronto para ser utilizado.
Third Party Trademarks
...