Vamos desenvolver uma widget que mostre notícias cadastradas no 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.
Em seguida criaremos uma widget. Para isso podemos seguir os passos para criação de uma 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.
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. |
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
Para salvar as preferências da widget, no modo de edição, utilizamos o método WCMSpaceAPI.PageServiceUPDATEPREFERENCES passando as preferencias a serem salvas.
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
Como fazer uma chamada REST para obter dados
Exportar a widget no servidor Fluig