Vamos desenvolver uma widget que mostre notícias cadastradas no Fluig.

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.

Abaixo temos o arquivo edit.ftl que define a interface da widget.

<#if !newsSource??>
    <#assign newsSource = "dataset">
</#if>
<#if !numberOfArticles??>
    <#assign numberOfArticles = 5>
</#if>
<#if url??>
    <#assign parameters = '{"newsSource": "${newsSource}", "url": "${url?url}", "numberOfArticles": "${numberOfArticles}"}'?html>
<#else>
    <#assign parameters = '{"newsSource": "${newsSource}", "numberOfArticles": "${numberOfArticles}"}'?html>
</#if>
<div id="KitIntranetNews_${instanceId}"
	class="wcm-widget-class super-widget fluig-style-guide"
	data-params="KitIntranetNews.instance(${parameters})">
    <form role="form">
        <div id="newsSource_${instanceId}" class="form-group">
            <label for="formNewsSource_${instanceId}">${i18n.getTranslation('kitintranet.news.label.source')}</label>
            <select id="formNewsSource_${instanceId}" class="form-control" value="${newsSource!}" data-change-news-source>
                <option value="dataset" <#if newsSource == 'dataset'>selected</#if>>
                    ${i18n.getTranslation('kitintranet.news.data.dataset')}
                </option>
                <option value="rssfeed" <#if newsSource == 'rssfeed'>selected</#if>>
                    ${i18n.getTranslation('kitintranet.news.data.rssfeed')}
                </option>
            </select>
        </div>
        <div id="rssFeed_${instanceId}" class="form-group">
            <label for="feedUrl_${instanceId}">${i18n.getTranslation('kitintranet.news.label.rssfeed')}</label>
            <input class="form-control" id="feedUrl_${instanceId}" value="${url!}"
                   placeholder="${i18n.getTranslation('kitintranet.news.label.rssfeed.placeholder')}" />
        </div>
        <div id="dataSet_${instanceId}" class="form-group">
            <label for="dataSetLink_${instanceId}">${i18n.getTranslation('kitintranet.news.label.datasetlink')}</label>
            <a id="dataSetLink_${instanceId}" href="#"></a>
        </div>
        <div id="articles_${instanceId}" class="form-group">
            <label for="feedUrl_${instanceId}">${i18n.getTranslation('kitintranet.news.label.numberofarticles')}</label>
            <input class="form-control" id="numberOfArticles_${instanceId}" value="${numberOfArticles!}" />
        </div>
        <button type="submit" class="btn btn-default"
                data-save-preferences>${i18n.getTranslation('kitintranet.news.label.save')}</button>
    </form>
</div>

Interface aplicada com Fluig Style Guide

ESCREVER AQUI SOBRE INTERFACE STYLE GUIDE

 

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, o id da instância da widget e as preferências a serem salvas.

var preferences = {
    newsSource: $("#formNewsSource_" + this.instanceId).val(),
    url: $("#feedUrl_" + this.instanceId).val(),
    numberOfArticles: $("#numberOfArticles_" + this.instanceId).val()
};
 
WCMSpaceAPI.PageService.UPDATEPREFERENCES(
            {
                async: true,
                success: function (data) {
                    FLUIGC.toast({title: data.message, message: '', type: 'success'});
                },
                fail: function (xhr, message, errorData) {
                    FLUIGC.toast({
                        title: '${i18n.getTranslation("kitintranet.news.preferences.error")}',
                        message: errorData.message,
                        type: 'warning'
                    });
                }
            }, 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",
 
...

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

 

 

Exportar a widget no servidor Fluig

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