Objetivo

O objetivo deste guia é possibilitar ao desenvolvedor criar componentes WCM via plugin do Eclipse ou Fluig para o Studio.

Construção de componentes WCM no Studio

Inicialmente, acesse o TOTVS Studio e crie ou abra um projeto Fluig.

Abra a perspectiva Fluig via menu Window/Open Perspective/Other.../Fluig (Figura 1).

Image RemovedFigura 1 - Perspectiva Fluig

Criação de Widget

Acompanhe os passos a seguir:

...

Selecione a opção Widget.

Preencha os campos obrigatórios do componente Widget (Figura 2): Código, Nome e Descrição.

...

...

O campo Código deve ser preenchido apenas com letras, números e sublinhado (underscore).

...

...

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.

Image Removed

Figura 4 - Estrutura de diretórios de um projeto Widget

Onde:

Exemplo de código JavaScript

...

...

Vídeos How To

Construção de componentes WCM no Eclipse

Para iniciar o desenvolvimento de um componente WCM no Eclipse ou Fluig Studio, é necessário acessar a perspectiva Fluig e criar um novo projeto.

Criação do Widget

Com o ambiente de desenvolvimento preparado, pode ser iniciada a criação do widget no projeto conforme os passos a seguir.

var HelloWorld = SuperWidget.extend({
    message: null,
    init: function () {
        

...

//code
    },
    

...

bindings: 

...

{
    

...

Exemplo de código FreeMarker (view.ftl)

...

...

...

...

...

...

local: {
      

...

...

...

...

...

...

 'show-message': ['click_showMessage']
    

...

    }
    

...

},
    showMessage: function () {
    

...

...

...

  $div = $('#helloMessage_' + this.instanceId);
    

...

...

...

...

...

$message 

...

= $('<div>').addClass('message').append(this.message);
    

...

...

$div.

...

append($message);
    }
});
 

<div id="HelloWorld_${instanceId}" class="super-widget wcm-widget-class fluig-style-guide"
     data-params="HelloWorld.instance({message: 'Hello world'})">
    <!-- efetua a tradução do texto do objeto i18n -->	
    <h1>${i18n.getTranslation('hello.example.hello')}</h1>
    <div>
        <button type="button" class="btn btn-default" data-show-message>${i18n.getTranslation('hello.button.showMessage')}</button>
    </div>
    <div id='helloMessage_${instanceId}'>
    </div>
    
</div>

<div class="fluig-style-guide">
    <div id="wcm_header" class="wcm-header-background wcm-header">
        <!-- Group left -->

Criação de Layout

Acompanhe os passos a seguir:

...

Selecione a opção Layout.

Image Removed

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.

Image Removed

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.

Image Removed

...

Image Removed

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.

Image Removed

...

Image Removed

Nota A estrutura de pastas e arquivos de um componente Layout é praticamente a mesma de um componente Widget. A alteração 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)

...

...

...

<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 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">
            </

...

#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 -->
      

...

...

Exemplo de código JavaScript

// 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

...

<div id="wcm_footer" class="wcm_footer"></div>
            </div>
            </div>
        </div>
    </div>

var HelloWorld = SuperWidget.extend({
    message: null,
    init: function () {
        //code
    },
    bindings: {
        local: {
            'show-message': ['click_showMessage']
        }
    },
    showMessage: function () {
        $div = $('#helloMessage_' + this.instanceId);
        $message = $('<div>').addClass('message').append(this.message);
        $div.append($message);
    }
});

<div id="SlotInstantSearch" slot="true" class="slotint slot-header-actions">
	<#list (pageRender.getInstancesIds("SlotInstantSearch"))! as id>
		${pageRender.renderInstanceNoDecorator(id)}
	</#list>
</div>

<div id="SlotGlobalAlert" slot="true" class="slotint slot-header-actions">
	<#list (pageRender.getInstancesIds("SlotGlobalAlert"))! as id>
		${pageRender.renderInstanceNoDecorator(id)}
	</#list>
</div>

A opção Snippets fornece ao desenvolvedor um pequeno trecho de código-exemplo relacionado a

...

um determinado recurso. O objetivo é

...

fornecer um modo rápido e simples para que o desenvolvedor visualize um exemplo de código e dê início

...

à construção do componente.

...

• Acionar o

...

• menu Window

...

Image RemovedFigura 8 - Janela Show View

• na barra de menu.

• Selecionar Show View → Other...

• Expandir a pasta General, selecionar Snippets e acionar OK.

Image Added

A visão

...

Snippets apresentará as opções para Componentes WCM

...

Image Removed

Figura 9 - Janela Show View

Widget

...

• 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)
  • Apresentar o trecho de código referente a um slot que pode existir dentro do layout.

conforme o tipo de arquivo em foco (JavaScript ou FTL):

Autocompletar para FreeMarker e JavaScript

Os arquivos Freemarker (extensão ".ftl"), quando abertos com o editor Freemarker do Fluig Plataforma, dispõe do recurso autocompletar para as diretivas básicas do FTL (iniciadas em "<#") e para as variáveis de contexto nas interpolações do Freemarker ("${}"). Os nomes contextuais disponíveis para o autocompletar são widgetRender e pageRender.

Os arquivos JavaScript (extensão ".js"), quando abertos em um Projeto Fluig, também dispõe do recurso autocompletar para as APIs nativas do JavaScript e do Fluig Plataforma.