Javascript no SAPO e libsapojs

transcript

Lib.SAPO.JS

Codebits 2007 – 14/11/20079 da manhã??!! -_-

Cláudio Gamboa <gamboa@co.sapo.pt>

Lib.SAPO.JS

● JavaScript● AJAX● JSON● Script tag hack

● Lib.SAPO.JS● O que é● Vantagens● Estrutura

● Exemplos

JavaScript

”The World's Most Misunderstood Programming

Language”

JavaScript The World's Most Misunderstood Programming Language

Douglas Crockford http://www.crockford.com/

Não é um ”brinquedo” para a web...

● É uma linguagem de programação● Pequena mas sofisticada● Não tem ”class-oriented inheritance”, mas tem ”prototype-oriented inheritance”

● Objects as self containers● Não se chama AJAX.

Permite criar aplicações completas

Um bom manual de JavaScript

JavaScript.AJAX

Não é esconder e mostrar divs com JavaScript

JavaScript.AJAX

Asynchronous JavaScript and XML

● Criar aplicações web sem ser necessário fazer reload ao browser

● É assíncrono● Usa o objecto XMLHttpRequest● Recebe o conteúdo formatado em XML* ● É host restricted

JavaScript.AJAX

Exemplo dum AJAX request

JavaScript.AJAX

Exemplo dum AJAX request<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd"> <html>

<head><title>AJAX Request</title> <script type="text/javascript" src="http://js.sapo.pt/Prototype/"></script><script type="text/javascript">function myRequest(){var url = document.getElementById('url').value;new Ajax.Request(url, { method:'get', onSuccess: function(req){ var xml = req.responseXML; var aItems = xml.retElementsByTagName('item'); var totalItems = aItems.length; document.getElementById('output').innerHTML = totalItems;

}, onException: function(r, e){ throw e; }});}</script></head><body><input type="text" id="url" size="40" value="" /><input type="button" name="b" value="Request It" onclick="myRequest();" /><hr /><div><span id="output"></span> items no XML</div></body></html>

JavaScript.AJAX

AJAX request – host restriction

JavaScript.AJAX

AJAX request – host restriction

JavaScript.AJAX

AJAX request – host restrictionSOLUÇÕES

Apache Proxy

RewriteEngine OnRewriteRule ^/req.xml http://videos.sapo.pt/gamboa/rss [P]

Request -> http://localhost/req.xml

JavaScript.AJAX

AJAX request – host restrictionSOLUÇÕESPHP Proxy

cat req.php<?php$content = file_get_contents('http://videos.sapo.pt/gamboa/rss');header(”Content-type: text/xml”);echo $content;?>

Request -> http://localhost/req.php

JavaScript.JSON

JavaScript Object Notation(”jeison/jotason/jota esse on/...”)

● Formato duma estrutura de dados/ array associativo (JS Object)

● É text-based● RFC 4627 ● Content type: application/json ● Pode encapsular funções (Class)

JavaScript.JSON

● String● Number● Boolean ● Object● Array ● null

{ "nome": "Claudio Gamboa", "idade": 26, "solteiro": true, "gosta": { "musica": ["Emperor", "Moonspell", "Borknagar"], "cinema": ["LOTR", "Matrix", "Se7en", "Snatch"], "series": ["House MD", "Seinfeld"], "livros": ["Perfume", ”Aparição”] }, "filhos": null}

JavaScript.JSON

JSON como resposta dum AJAX Request

function callBack(obj){ var req = obj.responseText;

var myObj = eval('(' + req + ')');

alert(myObj.nome);}

JavaScript.JSON

JSON como Classe

JavaScript['Script'].Tag(Hack)

SCRIPT TAG HACK

O que é:

● Adicionar dinamicamente uma SCRIPT tag na página (ficheiro js/json)

● Esperar que seja carregado ● Usar/Executar o conteúdo.

O que é: <script type=”text/javascript”

src=”http://services.sapo.pt/Photos/JSON/gamboa?jsonTag=foo”></script>”>

// RSS em formato JSON var foo = {”rss”:{”channel”: ....}}

alert(foo.rss.channel.item[0].title);

Vamos mudar de assunto

Lib.SAPO.JS

● O que é● Vantagens ● Estrutura

Lib.SAPO.JS('O que é?')

● Repositório central de libs de JavaScript e widgets do SAPO

● É Open Source ● Tem classes utilitárias para simplificar o JavaScript e a vida dos programadores (SAPO.Utility.*)

Lib.SAPO.JS('Vantagens')

● Ter classes de JavaScript centralizadas (http://js.sapo.pt)

● Ter Widgets baseados nas classes● Ter controlo de versões● Ter o código organizado/separado ● Reutilizar código

● Não ter de reinventar a roda cada vez que se quer validar um endereço de email

● Farm estática e conteúdo ”jslinted”, ”jsmined” e ”gziped”

● Criar ”packages” estáticos (Bundles) de vários ficheiros JavaScript e servir apenas um ficheiro para a aplicação.

● Torna o load da aplicação mais rapido ● Não corre o risco de ”partir” por um ficheiro não ter sido carregado

● Garante que todo o código necessário existe

http://js.sapo.pt/Bundles/WebmessengerCliente.js

645 Kb -> 322 Kb -> 75 Kb

● Criar ”scripts” (Snippets) em que as opções são passadas na query string.

● Disponibilizar apenas um ficheiro para ser reutilizado incluindo apenas uma script tag.

● Dar a possibilidade de o utilizador alterar as opções alterando apenas os parametros da query string.

Lisbon Weatherhttp://js.sapo.pt/Snippets/Meteo.js?c=LPLG

Lib.SAPO.JS('Estrutura')

● /SAPO/● /Prototype/● /YUI/● /Bundles/● /Snippets/

http://js.sapo.pt/(.*)

● Prototype (Versão 1.8)– Dragdrop– Effects– Builder– Controls– Slider

http://js.sapo.pt/Prototype/http://js.sapo.pt/Prototype/Dragdrop/http://js.sapo.pt/Prototype/..../

● YUI (Versão 2.2)– Dom– Event– Connection– Dragdrop– Calendar – ...

http://js.sapo.pt/YUI/http://js.sapo.pt/YUI/Dom/http://js.sapo.pt/YUI/.../

● SAPO– Utility– Communication– Widget– Geo– Exception

● SAPO.Utility● Array (inArray, keyValue)● Cookie (set, remove, get)● Crypto (md5, sha1, sha256)● Dumper (alertDump, returnDump, windowDump)● CSS (set)● String (trim, stripTags, htmlEntities(En|De)code, utf8(En|De)code ...)● Url (getURl, getQueryString, base64(En|De)code ...)● Validator (mail, isPortuguesePhone)● Variable (isArray, isObject, isString, isNumber)

http://js.sapo.pt/SAPO/Utility/(.*)

● SAPO.Communication– Syndication (push, run, runAll)

(Class para a ”Script Tag Hack”)

http://js.sapo.pt/SAPO/Communication/Syndication/http://js.sapo.pt/SAPO/Communication/Syndication/sample/

● SAPO.Widget● Contextmenu● Dialog● Tooltip● Rating● Maps● Thumbs● (Blogthis, Meteo, Photos, Search, Tags...)

http://js.sapo.pt/SAPO/Widget/(.*) http://js.sapo.pt/SAPO/Widget/([^\/]+)/sample/

● SAPO.Geo● Map

Ver apresentação de Joaquim Muchaxo e António Cruz no PP às 11:45

”SAPO Mapas & GIS”

http://js.sapo.pt/SAPO/Geo/Map/

Exemplos

● SAPO.Utility.Dumper● SAPO.Utility.String● SAPO.Utility.Url

● SAPO.Widget.Contextmenu● SAPO.Widget.Tooltip

● SAPO.Communication.Syndication

Prototype● Ajax.Request

Perguntas??

Mais informação

● http://js.sapo.pt/● http://developer.sapo.pt/● http://prototypejs.org● http://developer.yahoo.com/yui/

● SAPO: http://www.sapo.pt/ ● Download: http://pdvel.com/● Meu blog: http://blog.pdvel.com/ (sucks)

Javascript no SAPO e libsapojs

Technology