O objetivo deste tutorial é mostrar todo o processo de desenvolvimento de uma widget integrada 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:
TODO: Imagem da Widget de Notícias
Projeto: Widget de Notícias (Integrada-se com formulário ou serviço rest)
TODO: Imagem da Widget de Aniversariantes
Projeto: Widget de Aniversariantes (Integrada-se com formulário ou serviço soap do RM)
Vamos desenvolver uma widget que mostre notícias cadastradas no Fluig. Não deixe de conferir o projeto completo.
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.
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:
Faz referência a essa variável:
|
Dispense alguns momentos para entender as diferenças entre o modo de visualização e o modo de edição das widget |
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> |
Abaixo é explicado como salvar as preferências de sua widget da forma como idealizada pela equipe do Fluig. É a forma padrão e é desejável que todas as widgets utilizem apenas essa técnica quando for necessário guardar algum tipo de informação para cada instância. Apesar de existirem outras formas de se guardar as preferências de uma widget, recomendamos fortemente que utilize a forma disponibilizada pelo Fluig pelos seguintes motivos:
Na base do Fluig, as preferências das widget são salvas em uma tabela padrão do sistema dentro de um campo do tipo texto. Apesar de ser usado um tipo de dado com grande capacidade de armazenamento, não se deve usá-lo para outra coisa que não seja armazenar tipos de dados primitivos:
Sendo todos os dados salvos como string, caberá ao desenvolvedor fazer os tratamentos e conversões necessárias conforme a sua necessidade. |
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 ); |
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.
Para aprender a integrar sua widget com fomulários do Fluig, siga este guia.
Para fazer a integração de sua widget com serviços REST, siga este guia.
Para fazer a integração com serviços SOAP, basta seguir este guia.
Para exportar a widget para o servidor Fluig, basta seguir o guia Realizando o deploy do componente.