Exibir origem

Vamos desenvolver uma widget que mostre notícias cadastradas no Fluig. Não deixe de conferir o projeto completo.

Criar projeto Fluig

Em primeiro lugar devemos ter disponível um projeto Fluig onde desenvolveremos nossa widget utilizando o Fluig Studio. Para isso podemos seguir os passos para criação de um projeto Fluig.

Criar Widget

Em seguida criaremos uma widget. Para isso podemos seguir os passos para criação de uma widget.

Desenvolvendo a widget

Agora que temos a estrutura básica, podemos começar a desenvolver o código customizado e inserir as propriedades que desejamos para essa widget.

Para isso podemos começar com o arquivo de configurações application.info. É nele que ficam registrados informações como título, descrição, arquivos de visualização, componentes a serem utilizados e etc.

Arquivo application.info

Abaixo o arquivo application.info detalhado:

application.type=widget
application.code=news
application.title=Not\u00EDcias da Semana
application.description=Exibe uma lista com as \u00FAltimas not\u00EDcias da semana
application.category=KitIntranet	
application.renderer=freemarker
application.icon=icon.png
developer.code=developer
developer.name=TOTVS S.A.
developer.url=http://www.fluig.com
view.file=view.ftl
edit.file=edit.ftl
application.uiwidget=true
application.resource.js.1=/resources/js/news.js
application.resource.css.2=/resources/css/news.css
simple.deploy=false

Para saber mais, acesse a documentação Arquivo application.info.

Uso do Conceito Super Widget

Iremos utilizar o conceito de Super Widget na construção de nossa widget. Para saber mais sobre, acesse o guia da Super Widget.

Precisamos adicionar a classe css super widget na div que instancia a widget, tanto no arquivo de edição (edit.ftl) como no arquivo de visualização (view.ftl).

<div id="KitIntranetNews_${instanceId}" class="wcm-widget-class super-widget fluig-style-guide"
	data-params="KitIntranetNews.instance(${parameters})">
	<!--
		código
	 -->
</div>

No arquivo javascript devemos contruir o código fonte com a seguinte estrutura.

var KitIntranetNews = SuperWidget.extend({
	// código
});

Note que é essencial referenciar corretamente o nome da variavel javascript no "data-params" do arquivo .ftl, ou seja:

Esse código:

KitIntranetNews.instance(${parameters})

Faz referência a essa variável:

var KitIntranetNews

Interface aplicada com Fluig Style Guide

Para construir a interface de nossa widget, vamos utilizar o Fluig Style Guide, que nos facilita a construção dos componentes visuais. O guia pode ser acessado em Fluig Style Guide.

Para essa widget de notícias por exemplo, precisamos utilizar um form para cadastro de alguns dados, para utiliza o padrão visual do Fluig Style Guide, basta adicionar a classe .form-group. Assim todos os elementos textuais como <input>, <textarea>, e <select> terão seus tamanhos ajustados para 100%.

<form role="form">
	<div id="newsSource_${instanceId}" class="form-group">
		<!-- código -->
    </div>
</form>

Para criar um botão no padrão, basta adicionar as classes 'btn btn-default'.

<button type="submit" class="btn btn-default" data-save-preferences> Salvar </button>

Como salvar as preferências da widget

Para salvar as preferências da widget, utilizamos o método WCMSpaceAPI.PageService.UPDATEPREFERENCES passando um método para callback (tratamento de retorno), o id da instância da widget e as preferências a serem salvas.

var preferences = {
    newsSource: "fonte",
    url: "/news/feed/url",
    numberOfArticles: 10
};
 
WCMSpaceAPI.PageService.UPDATEPREFERENCES({
    async: true,
    success: function (data) {
			// código
    },
    fail: function (xhr, message, errorData) {
		// código
    }
}, this.instanceId, preferences
);

Como recuperar preferências da widget

No código abaixo, podemos observar que a widget tem algumas variáveis chamadas news, newsSource, ulr e numberOfArticles.

var KitIntranetNews = SuperWidget.extend({
    news: null,
    newsSource: null,
    url: null,
    numberOfArticles: null,
    DATASET: "dataset",
    FEED: "rssfeed",
    KIT_NEWS: "kit_news",
	// código
});

As preferências da widget são recuperadas automaticamente. Basta salvar as preferências com os nomes das variáveis da widget, como no tópico Como salvar as preferências da widget.

Como fazer uma chamada REST para obter dados

Vamos criar um rest dentro da própria widget, para isso devemos seguir alguns passos.

Primeiro devemos criar uma classe chamada ApplicationConfig que extende a classe Application.

package com.fluig.kitintranet.news.proxy.rest.config;
import javax.ws.rs.ApplicationPath;
import javax.ws.rs.core.Application;
@ApplicationPath("api/rest")
public class ApplicationConfig extends Application{
	//não é necessário código, precisamos apenas para o @ApplicationPath
}

Em seguida devemos criar a classe REST que desejamos acessar.

package com.fluig.kitintranet.news.proxy.rest;

import com.totvs.technology.wcm.sdk.rest.WCMRest;
import javax.ws.rs.Consumes;
import javax.ws.rs.POST;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;
import javax.ws.rs.core.Response;
 
@Path("/news")
public class NewsRest extends WCMRest {

    @POST
    @Path("feed")
    @Produces(MediaType.APPLICATION_JSON)
    @Consumes(MediaType.APPLICATION_JSON)
    public Response getRSSFeedTest(String requestParams) {
		//código
	}
}

Em seguida temos de alterar os arquivos jboss-web.xml

<?xml version="1.0" encoding="UTF-8"?>
<jboss-web>
    <context-root>/news</context-root>
    <disable-cross-context>false</disable-cross-context>
    <security-domain>TOTVSTech</security-domain>
    <security-role>
        <role-name>user</role-name>
        <principal-name>totvstech</principal-name>
    </security-role>
    <security-role>
        <role-name>totvstech</role-name>
        <principal-name>totvstech</principal-name>
    </security-role>
    <security-role>
        <role-name>sysadmin</role-name>
        <principal-name>wcmadmin</principal-name>
    </security-role>
    <security-role>
        <role-name>admin</role-name>
        <principal-name>wcmadmin</principal-name>
    </security-role>
    <valve>
        <class-name>com.totvs.technology.auth.saml.TOTVSAuthenticatorValve</class-name>
    </valve>
</jboss-web>

Também temos de alterar o arquivo web.xml para que possamos acessar esse REST.

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
	 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
	 version="3.0">
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <!-- REST -->
    <security-constraint>
        <display-name>REST</display-name>
        <web-resource-collection>
            <web-resource-name>REST</web-resource-name>
            <description>REST</description>
            <url-pattern>/api/rest/*</url-pattern>
        </web-resource-collection>
        <auth-constraint>
            <description>REST</description>
            <role-name>user</role-name>
        </auth-constraint>
    </security-constraint>
    <login-config>
        <auth-method>FORM</auth-method>
        <realm-name>TOTVSTech</realm-name>
        <form-login-config>
            <form-login-page>/login.jsp</form-login-page>
            <form-error-page>/loginfail.jsp</form-error-page>
        </form-login-config>
    </login-config>
    <security-role>
        <role-name>totvstech</role-name>
    </security-role>
    <security-role>
        <role-name>user</role-name>
    </security-role>
    <security-role>
        <role-name>sysadmin</role-name>
    </security-role>
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
</web-app>

Após isso estamos capazes de utilizar o REST que se encontra dentro da widget utilizando um método chamado WCMAPI.Read que iremos utilizá-lo para fazer chamadas REST.

var that = this;
 
WCMAPI.Read({
    type: "POST",
    url: WCMAPI.getServerURL() + '/news/api/rest/news/feed',
    async: true,
    data: feed,
    success: function funcao(data) {
        that.appendNews(data.content.channel.items);
    },
    error: function () {
        that.showLoadingError();
    }
});

O método WCMAPI.getServerURL() traz a url do server que utilizaremos para montar a url da chamada rest. Em seguida concatenamos o caminho do REST que pretendemos chamar, neste caso utilizamos o seguinte caminho '/news/api/rest/news/feed'. Sendo:

'/news' o código da widget.

'/api/rest' é o @Path da classe ApplicationConfig.java.

'/news' é o @Path da classe NewsRest.java.

'/feed' é o @Path do método que desejamos chamar da classe NewsRest.java.

Exportar a widget no servidor Fluig

Para exportar a widget para o servidor Fluig, basta seguir o guia Realizando o deploy do componente.