SlideShare a Scribd company logo
1 of 14
Download to read offline
UWA
          desenvolvimento de widgets baseadas em uwa




Thursday, March 5, 2009
Formatos
           ____________________________________________________________________________



            XML/XHTML strict

            UTF8

            Namespaces
            Tem de incluir o Netvibes Widget Namespace




Thursday, March 5, 2009
Metodologia
           ____________________________________________________________________________




                   - Ficheiro XHTML sem qualquer código server-side -
                         - Não utilizar ficheiros css ou js externos -




Thursday, March 5, 2009
Desenvolvimento standalone
           ____________________________________________________________________________




                            Existe uma necessidade de emular o ambiente do Netvibes.




                              Adicionar estas duas linhas no header do ficheiro html.




Thursday, March 5, 2009
Preferences
           ____________________________________________________________________________


            A tag <preferences> é uma tag específica do UWA, e permite especificar as propriedades do menu de edição da
            widget.




            As preferences podem ser do tipo:   - text
                                                - range
                                                - list
                                                - boolean
                                                - hidden
                                                - password



            ATENÇÃO - neste momento, as preferences do tipo list não funcionam no modo standalone!


Thursday, March 5, 2009
O que falta?
           _____________________________________________________________________________




Thursday, March 5, 2009
Widget events
           ____________________________________________________________________________


            Os seguintes eventos devem ser implementados e declarados apenas uma única vez, sendo-lhes atribuido o código
            que definirá o comportamento da widget.



            widget.onLoad() - é a função chamada quando a widget é lançada.
            widget.onRefresh() - esta função é chamada quando é efectuado o refresh à widget, seja manual ou
            automaticamente.




            widget.onResize() - evocada quando a widget sofre um resize na plataforma. (De momento funciona apenas na
            plataforma Netvibes)
            widget.onSearch() - esta função é evocada quando é efectuado um search na plataforma Netvibes. (De momento
            funciona apenas na plataforma Netvibes)
            widget.onResetSearch() - esta função é evocada quando é feito um reset ao search do Netvibes. (De momento
            funciona apenas na plataforma Netvibes)
            widget.onKeyboardAction() - esta função é chamada quando é pressionada uma tecla. (De momento funciona
            apenas na plataforma Netvibes)




Thursday, March 5, 2009
Widget events
           ____________________________________________________________________________




            Como tratar os elementos pertencentes ao body da widget?


            widget.body - esta é a referência para o body da widget. Equivale ao document.body, mas é limitado à
            widget.




            widget.createElement(tagName) - cria um novo elemento e equivale ao document.createElement().




            widget.setBody(code) - define conteúdo para o body da widget e o seu argumento deve ser constituido por
            uma string de XHTML. Atenção que o conteúdo anterior do body é apagado e substituido pelo inserido por
            este método.




Thursday, March 5, 2009
Conteúdo dinâmico
           ____________________________________________________________________________




            Todo o conteúdo de código server-side deve encontrar-se num ficheiro externo.

            A página da widget vai aceder à informação gerada pela página dinâmica através de
            chamadas em ajax:

                          -   UWA.Data.getJson(url, callback)
                          -   UWA.Data.getXML(url, callback)
                          -   UWA.Data.getText(url, callback)
                          -   UWA.Data.getFeed(url, callback)


            A página com código server-side pode enviar dados de resposta em formato json, xml,
            feed ou texto.

Thursday, March 5, 2009
Conteúdo dinâmico
           ____________________________________________________________________________


            Os métodos descritos atrás são, no fundo, atalhos do seguinte método:

                          - UWA.Data.request(url, request object)

            Este método pode ser utilizado para consultas mais complexas, pois permite passar parâmetros, método, etc...


            Ex:




            Parâmetros a definir:
                  'method': 'get' ou 'post'. (default é 'post')
                  'proxy': 'ajax' ou 'feed'. (default é 'ajax')
                  'type': 'text', 'xml', 'html' ou 'json'. (default é 'text')
                  'cache': seconds of server caching. (default é undefined)
                  'onComplete': nome da função de callback. (default é undefined)
                  'parameters': se o 'method' fôr do tipo 'post', aqui são inseridos os parâmetros. (default é undefined)


Thursday, March 5, 2009
Conteúdo dinâmico
           ____________________________________________________________________________




            Que formato utilizar?

                                                        JSON
                                                  (Javascript Object Notation)




            Porquê?
            - o parsing dos dados é mais rápido

            - converte-se facilmente a informação JSON para um objecto de javascript




Thursday, March 5, 2009
E que tal uns exemplos?
           ____________________________________________________________________________




                          Vamos meter as mãos na massa :)




Thursday, March 5, 2009
Links de interesse
           ____________________________________________________________________________




            http://netvibes.org/

            http://dev.netvibes.com/

            http://dev.netvibes.com/doc/uwa_specification/using_javascript_and_ajax

            http://dev.netvibes.com/doc/uwa/documentation/uwa_monopage

            http://dev.netvibes.com/doc/howto/use_events

            http://www.netvibes.org/specs/uwa/current-work/

            http://dev.netvibes.com/doc/uwa/howto/using_uwa_events

            http://dev.netvibes.com/doc/uwa/documentation/cheatsheet




Thursday, March 5, 2009
Rodolfo Costa
            Labs.SAPO UA
            http://labs.sapo.pt/ua   março/2009

Thursday, March 5, 2009

More Related Content

Similar to Formação Uwa Netvibes - Labs Sapo UA

Criando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zeroCriando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zeroEduardo Shiota Yasuda
 
Apostilade vb.net
Apostilade vb.netApostilade vb.net
Apostilade vb.netRafael Ora
 
Apostila de vb.net
Apostila de vb.netApostila de vb.net
Apostila de vb.netlricx
 
Evento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de FrontEvento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de FrontMichel Ribeiro
 
Apostila de vb.net
Apostila de vb.netApostila de vb.net
Apostila de vb.netHugo Silva
 
Apostila de sql basico
Apostila de sql basicoApostila de sql basico
Apostila de sql basicoFernando Palma
 
Enterprise services com .net
Enterprise services com .netEnterprise services com .net
Enterprise services com .netFernando Palma
 
Implementação de PCs, parte 2 de 4: Migração dos dados e configurações dos us...
Implementação de PCs, parte 2 de 4: Migração dos dados e configurações dos us...Implementação de PCs, parte 2 de 4: Migração dos dados e configurações dos us...
Implementação de PCs, parte 2 de 4: Migração dos dados e configurações dos us...Marcelo Matias
 
JasperReports Tecnicas de geracao_de_relatorios1
JasperReports  Tecnicas de geracao_de_relatorios1JasperReports  Tecnicas de geracao_de_relatorios1
JasperReports Tecnicas de geracao_de_relatorios1Sliedesharessbarbosa
 
Odi tutorial configuração repositórios mestre e trabalho
Odi tutorial   configuração repositórios mestre e trabalhoOdi tutorial   configuração repositórios mestre e trabalho
Odi tutorial configuração repositórios mestre e trabalhoCaio Lima
 
Como criar módulos para magento 2
Como criar módulos para magento 2Como criar módulos para magento 2
Como criar módulos para magento 2Rafael Corrêa Gomes
 
Construindo Sistemas Com Django
Construindo Sistemas Com DjangoConstruindo Sistemas Com Django
Construindo Sistemas Com DjangoMarinho Brandão
 
Como escolher o Framework Java para web?
Como escolher o Framework Java para web?Como escolher o Framework Java para web?
Como escolher o Framework Java para web?Anderson Araújo
 
Desenvolvendo para magento - primeiros passos
Desenvolvendo para magento - primeiros passosDesenvolvendo para magento - primeiros passos
Desenvolvendo para magento - primeiros passosRicardo Martins
 

Similar to Formação Uwa Netvibes - Labs Sapo UA (20)

Criando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zeroCriando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zero
 
Apostilade vb.net
Apostilade vb.netApostilade vb.net
Apostilade vb.net
 
Apostila de vb.net
Apostila de vb.netApostila de vb.net
Apostila de vb.net
 
Evento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de FrontEvento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de Front
 
Códigos poo java
Códigos poo javaCódigos poo java
Códigos poo java
 
Agente de backup em nuvem
Agente de backup em nuvemAgente de backup em nuvem
Agente de backup em nuvem
 
Apostila de vb.net
Apostila de vb.netApostila de vb.net
Apostila de vb.net
 
Apostila de sql basico
Apostila de sql basicoApostila de sql basico
Apostila de sql basico
 
Enterprise services com .net
Enterprise services com .netEnterprise services com .net
Enterprise services com .net
 
Implementação de PCs, parte 2 de 4: Migração dos dados e configurações dos us...
Implementação de PCs, parte 2 de 4: Migração dos dados e configurações dos us...Implementação de PCs, parte 2 de 4: Migração dos dados e configurações dos us...
Implementação de PCs, parte 2 de 4: Migração dos dados e configurações dos us...
 
JasperReports Tecnicas de geracao_de_relatorios1
JasperReports  Tecnicas de geracao_de_relatorios1JasperReports  Tecnicas de geracao_de_relatorios1
JasperReports Tecnicas de geracao_de_relatorios1
 
Modulos SNEP
Modulos SNEPModulos SNEP
Modulos SNEP
 
Odi tutorial configuração repositórios mestre e trabalho
Odi tutorial   configuração repositórios mestre e trabalhoOdi tutorial   configuração repositórios mestre e trabalho
Odi tutorial configuração repositórios mestre e trabalho
 
Como criar módulos para magento 2
Como criar módulos para magento 2Como criar módulos para magento 2
Como criar módulos para magento 2
 
Construindo Sistemas Com Django
Construindo Sistemas Com DjangoConstruindo Sistemas Com Django
Construindo Sistemas Com Django
 
Como escolher o Framework Java para web?
Como escolher o Framework Java para web?Como escolher o Framework Java para web?
Como escolher o Framework Java para web?
 
Tutorial struts
Tutorial strutsTutorial struts
Tutorial struts
 
Joomla! CMS
Joomla! CMSJoomla! CMS
Joomla! CMS
 
Desenvolvendo para magento - primeiros passos
Desenvolvendo para magento - primeiros passosDesenvolvendo para magento - primeiros passos
Desenvolvendo para magento - primeiros passos
 
Webinar Magento Commerce
Webinar Magento Commerce Webinar Magento Commerce
Webinar Magento Commerce
 

Formação Uwa Netvibes - Labs Sapo UA

  • 1. UWA desenvolvimento de widgets baseadas em uwa Thursday, March 5, 2009
  • 2. Formatos ____________________________________________________________________________ XML/XHTML strict UTF8 Namespaces Tem de incluir o Netvibes Widget Namespace Thursday, March 5, 2009
  • 3. Metodologia ____________________________________________________________________________ - Ficheiro XHTML sem qualquer código server-side - - Não utilizar ficheiros css ou js externos - Thursday, March 5, 2009
  • 4. Desenvolvimento standalone ____________________________________________________________________________ Existe uma necessidade de emular o ambiente do Netvibes. Adicionar estas duas linhas no header do ficheiro html. Thursday, March 5, 2009
  • 5. Preferences ____________________________________________________________________________ A tag <preferences> é uma tag específica do UWA, e permite especificar as propriedades do menu de edição da widget. As preferences podem ser do tipo: - text - range - list - boolean - hidden - password ATENÇÃO - neste momento, as preferences do tipo list não funcionam no modo standalone! Thursday, March 5, 2009
  • 6. O que falta? _____________________________________________________________________________ Thursday, March 5, 2009
  • 7. Widget events ____________________________________________________________________________ Os seguintes eventos devem ser implementados e declarados apenas uma única vez, sendo-lhes atribuido o código que definirá o comportamento da widget. widget.onLoad() - é a função chamada quando a widget é lançada. widget.onRefresh() - esta função é chamada quando é efectuado o refresh à widget, seja manual ou automaticamente. widget.onResize() - evocada quando a widget sofre um resize na plataforma. (De momento funciona apenas na plataforma Netvibes) widget.onSearch() - esta função é evocada quando é efectuado um search na plataforma Netvibes. (De momento funciona apenas na plataforma Netvibes) widget.onResetSearch() - esta função é evocada quando é feito um reset ao search do Netvibes. (De momento funciona apenas na plataforma Netvibes) widget.onKeyboardAction() - esta função é chamada quando é pressionada uma tecla. (De momento funciona apenas na plataforma Netvibes) Thursday, March 5, 2009
  • 8. Widget events ____________________________________________________________________________ Como tratar os elementos pertencentes ao body da widget? widget.body - esta é a referência para o body da widget. Equivale ao document.body, mas é limitado à widget. widget.createElement(tagName) - cria um novo elemento e equivale ao document.createElement(). widget.setBody(code) - define conteúdo para o body da widget e o seu argumento deve ser constituido por uma string de XHTML. Atenção que o conteúdo anterior do body é apagado e substituido pelo inserido por este método. Thursday, March 5, 2009
  • 9. Conteúdo dinâmico ____________________________________________________________________________ Todo o conteúdo de código server-side deve encontrar-se num ficheiro externo. A página da widget vai aceder à informação gerada pela página dinâmica através de chamadas em ajax: - UWA.Data.getJson(url, callback) - UWA.Data.getXML(url, callback) - UWA.Data.getText(url, callback) - UWA.Data.getFeed(url, callback) A página com código server-side pode enviar dados de resposta em formato json, xml, feed ou texto. Thursday, March 5, 2009
  • 10. Conteúdo dinâmico ____________________________________________________________________________ Os métodos descritos atrás são, no fundo, atalhos do seguinte método: - UWA.Data.request(url, request object) Este método pode ser utilizado para consultas mais complexas, pois permite passar parâmetros, método, etc... Ex: Parâmetros a definir: 'method': 'get' ou 'post'. (default é 'post') 'proxy': 'ajax' ou 'feed'. (default é 'ajax') 'type': 'text', 'xml', 'html' ou 'json'. (default é 'text') 'cache': seconds of server caching. (default é undefined) 'onComplete': nome da função de callback. (default é undefined) 'parameters': se o 'method' fôr do tipo 'post', aqui são inseridos os parâmetros. (default é undefined) Thursday, March 5, 2009
  • 11. Conteúdo dinâmico ____________________________________________________________________________ Que formato utilizar? JSON (Javascript Object Notation) Porquê? - o parsing dos dados é mais rápido - converte-se facilmente a informação JSON para um objecto de javascript Thursday, March 5, 2009
  • 12. E que tal uns exemplos? ____________________________________________________________________________ Vamos meter as mãos na massa :) Thursday, March 5, 2009
  • 13. Links de interesse ____________________________________________________________________________ http://netvibes.org/ http://dev.netvibes.com/ http://dev.netvibes.com/doc/uwa_specification/using_javascript_and_ajax http://dev.netvibes.com/doc/uwa/documentation/uwa_monopage http://dev.netvibes.com/doc/howto/use_events http://www.netvibes.org/specs/uwa/current-work/ http://dev.netvibes.com/doc/uwa/howto/using_uwa_events http://dev.netvibes.com/doc/uwa/documentation/cheatsheet Thursday, March 5, 2009
  • 14. Rodolfo Costa Labs.SAPO UA http://labs.sapo.pt/ua março/2009 Thursday, March 5, 2009

Editor's Notes