Histórico da Página
...
Índice | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
|
Objetivo
O objetivo deste guia é apresentar todo o processo de desenvolvimento de um widget integrado a vários possíveis tipos de fonte de dados. Cada sessão contém apenas o código necessário para o entendimento de cada assunto específico abordado. Para ver o resultado final do desenvolvimento, baixe os projetos abaixo:
...
Abaixo o arquivo application.info detalhado:
Bloco de código | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
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 |
...
Precisamos adicionar a classe css super widget na div que instancia o widget, tanto no arquivo de edição (edit.ftl) como no arquivo de visualização (view.ftl).
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
<div id="KitIntranetNews_${instanceId}" class="wcm-widget-class super-widget fluig-style-guide" data-params="KitIntranetNews.instance(${parameters})"> <!-- código --> </div> |
...
Para salvar as preferências do widget, utilizamos o método WCMSpaceAPI.PageService.UPDATEPREFERENCES passando um método para callback (tratamento de retorno), o id da instância do widget e as preferências a serem salvas.
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
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 ); |
...
No código abaixo podemos observar que o widget tem algumas variáveis chamadas news, newsSource, url e numberOfArticles.
Bloco de código | ||||||
---|---|---|---|---|---|---|
| ||||||
var KitIntranetNews = SuperWidget.extend({ news: null, newsSource: null, url: null, numberOfArticles: null, DATASET: "dataset", FEED: "rssfeed", KIT_NEWS: "kit_news", // código }); |
...
Para saber como evitar conflito de dependência entre widgets desenvolvidos sobre a plataforma e o fluig, acesse este guia.
Zoom / Filter de Dataset
Para utilizar zoom de datasets em sua widget pode-se fazer da mesma forma como o style guide indica para fazer o filter/zoom de um serviço externo. Apenas é necessário tomar atenção a alguns detalhes que não são tão óbvios quando falamos especificamente de dataset. Veja o exemplo abaixo, utilizando o dataset "colleague" como base. (Desde que se obedeçam os demais itens do tutorial sobre filter, pode-se copiar e colar esse código diretamente em sua widget que ele irá funcionar do jeito que está).
Bloco de código | ||||
---|---|---|---|---|
| ||||
var settings = {
source: {
url: '/api/public/ecm/dataset/search?datasetId=colleague&searchField=colleagueName&',
/* poderia ser a url completa também ('http://{host}:{port}/api/public/ecm/dataset/search?datasetId=colleague&searchField=colleagueName&')
É importante deixar o "&" no final da url, pois os outros parâmetros são montados
sem levar em consideração que já possa haver algo parametrizado no próprio link */
contentType: 'application/json',
root: 'content',
pattern: '',
limit: 10,
offset: 0,
patternKey: 'searchValue',
/*Para que a consulta funcione, é importante que o valor do 'patternKey'
seja sempre 'searchValue' para o caso de zoom de dataset */
limitkey: 'limit',
offsetKey: 'offset'
},
displayKey: 'colleagueName',
/* Para o dataset de colleague optamos por mostrar o nome completo.
É aconselhavel escolher o campo que, sozinho, represente melhor o registro*/
multiSelect: true,
style: {
autocompleteTagClass: 'tag-gray',
tableSelectedLineClass: 'info'
}
}; |