Usuário Yahoo! interface Blog (YUIBlog)

Acoplamento YUI e YQL para construir widgets dinâmicos

YUI tem uma lista maravilhosamente rico de manipulação de dados e utilitários UI em sua biblioteca, mas esbarra com dados igualmente rica e interessante é geralmente sua responsabilidade como um implementador. Da mesma forma, YQL tem busca de dados ricos e habilidades de interação, mas que carece de ferramentas de visualização YUI. Tomando a visualização e recursos de controle de YUI e acoplá-las com o tubo de dados brutos de YQL, podemos construir incrivelmente rica, widgets interativos sem a necessidade de criar qualquer uma das visualizações ou mecanismos de armazenamento de dados a nós mesmos.

Vou te dar uma excursão de dois widgets construídos com YUI e YQL neste post. Uma exibe o conteúdo publicamente disponível e as compilações outros sobre aquela widget original com um componente do lado do servidor PHP para mostrar dados particulares do usuário por meio da autenticação com OAuth.

Acessando dados Pública

Usando o YUI Get Utility , somos capazes de fazer pedidos ao público YQL URL consulta sem ter a dor de lidar com a mesma origem, questão política que normalmente nos impede de fazer XHR baseado em solicitações para um servidor que não estiver na mesmo domínio que o pedido originário. Abaixo está um exemplo de código pequeno que mostra como você chamaria YQL usando o YUI Get Utility :

 <script type="text/javascript">
 var getYQLData = function (query) {
     / / Prepara a URL do YUI GET:
     var yqlPublicQueryURL = "http://query.yahooapis.com/v1/yql?";
     var sURL = yqlPublicQueryURL + "q =" + consulta
         + "& Format = json & callback = yqlWidget.getYQLDataCallback";

     / / Fazer pedido GET para YQL com consulta fornecida
     transactionObj var = YAHOO.util.Get.script (sURL, {
         onSuccess: onYQLReqSuccess,
         onFailure: onYQLReqFailure,
         scope: this
     });

     retorno transactionObj;
 }
 </ Script>

A URL de consulta ( sURL ) é composto de várias partes diferentes de fazer o pedido. O yqlPublicQueryURL variável contém o URI público para fazer pedidos de YQL. Há também três parâmetros de consulta que estamos passando junto a esta URI. O q parâmetro é a consulta YQL que usamos em nosso pedido (por exemplo select * from flickr.photos.search where text="YDN" ), format é o formato que queremos retornado (JSON ou XML) a partir da solicitação, e se nós quero quebrar o JSON retornado de dados em uma função (a la JSONP ) podemos definir uma função de callback usando o callback parâmetro. Quando esta função é executado, o utilitário Get fará um pedido para query.yahooapis.com com a consulta especificada. Em caso de sucesso, uma mensagem de depuração será exibido na onSuccess callback para o Utilitário Get então o callback definida na consulta YQL serão chamados para analisar os resultados retornados JSON.

Configurar este widget em seu site ou blog é tão simples como baixar o código do js-yql-display pasta no github em http://github.com/jonleblanc/yql-utilities/tree/master e instanciar o widget como o seguinte:

 <-! Arquivo widget incluem: ->
 <script type="text/javascript" src="yql_js_widget.js"> </ script>

 <-! Estilos widget ->
 <style>
 div.imgCnt {border: 1px solid rgb (96, 96, 96);
     margin: 5px 5px 5px 0px; float: left;
	 background-color: rgb (241, 241, 241); width: 100px;
	 height: 140px;}
 div.imgCnt img {border: 0; margin: 5px;}
 div.imgCnt div.imgTitle {padding: 5px; tamanho da fonte: 11px;
     text-align: center;}
 </ Style>

 <script type="text/javascript">
 var config = {'debug': true};
 var format = '<div class="imgCnt" align="center">'
     + '<A href = "http://www.flickr.com/photos/ {proprietário} / {id} /"'
     + "Target =" _blank "> <img src =" http://farm3.static.
     + 'Flickr.com / {server} / {id} _ {secret}. Jpg? V = 0 "'
     + 'Width = height "80" = "80" /> </ a>'
     + '<div Class="imgTitle">'
     + '<A href = "http://www.flickr.com/photos/ {proprietário} /'
     + '{Id título }/">{} </ a>'
     + '</ Div> </ div>';
 var yqlQuery =
     'Select * from flickr.photos.search onde text = "YDN"';
 var insertEl = 'widgetContainer';
 yqlWidget.push (yqlQuery, configuração, formato, insertEl);
 </ Script>

Qualquer número de consultas públicas YQL podem ser feitas usando o exemplo acima - toda a documentação para saber como funciona o script de configuração pode ser encontrado no github . Se executar o código acima, podemos visualizar facilmente nossas fotos mais recentes flickr:

Então, por que todo o alarido sobre o uso de YQL e YUI juntos assim? Bem, para mim esses utilitários trazer-me bem perto de um tradicional MVC tipo (Model View Controller) do padrão de design. YQL é uma agregação de dados e maravilhosa ferramenta de manipulação, mas ao final do dia é apenas de dados. Vamos inserir a funcionalidade do controlador usando os utilitários YUI, como o utilitário Get ou Connection Manager , então podemos construir a nossa camada de apresentação em cima do que widgets utilizando como DataTable e gráficos .

Acessando dados particulares do usuário

Vamos explorar o emparelhamento de YUI e YQL um pouco mais longe, tendo a base construída no widget consulta pública JavaScript e anexar um componente do lado do servidor para autenticar e armazenar uma sessão OAuth. Usando o Y! OS PHP SDK , somos capazes de estender o widget JavaScript para mostrar o fluxo de atualização e detalhes crachá pessoal do usuário que originalmente autenticada do widget. Como estamos utilizando o SDK PHP no mesmo domínio como o nosso widget para tornar a nossa chama autenticado para YQL, já não precisa se preocupar com a mesma origem, questões de política. Isto significa que podemos trocar o uso do utilitário YUI Get com o Connection Manager YUI . A vantagem de usar o Gerenciador de conexão aqui é que podemos usar uma solicitação ajax padrão e os manipuladores de eventos do utilitário em vez de um callback dentro da consulta YQL. Nossa função novo pedido seria algo parecido com isto:

 <script type="text/javascript">
 var getYQLData = function (query) {
     / / URL preparar e enviar dados para YUI POST Connection Manager:
     var sURL = "private_data_fetch.php";
     var postData = "q =" + consulta;

     / / Define callbacks Connection evento do Gerenciador
     var callback = {
         sucesso: parseYQLResults,
         falha: onYQLReqFailure
     };

     / / Fazer solicitação POST para YQL com consulta fornecida
     var transactionObj YAHOO.util.Connect.asyncRequest = ('POST',
	     sURL, callback, postData);

     retorno transactionObj;
 }
 </ Script>

O Connection Manager é usado para fazer requisições AJAX para o SDK PHP (cujas referências estão alojados em private_data_fetch.php dentro do código acima) com a consulta como um parâmetro POST. O SDK, por sua vez faz uma solicitação autenticada dos dados pessoais do usuário e despeja uma string JSON como o retorno do pedido. Então tudo que você precisa fazer é analisar a cadeia de JSON usando o YUI Utility JSON ; depois de você ter chamado YAHOO.util.JSON.parse() nos resultados da transação, seus dados podem ser tratados da mesma maneira como os dados no primeiro exemplo.

Desde YQL gera resultados quando a solicitação é chamado, não há necessidade para abrigar esses dados por si mesmo. YQL pode extrair dados de qualquer fonte disponível para que você possa criar widgets como estas para mostrar resultados dinâmicos a cada atualização.

Ambos os widgets apresentou neste post estão disponíveis gratuitamente para download no github e contribuição na
http://github.com/jonleblanc/yql-utilities/tree/master . Estes elementos são:

• js-yql-display : JavaScript widget para mostrar dados públicos YQL
• php-yql-display : JavaScript / PHP widget para mostrar dados privados YQL

Encontrar conversas: bloglines | technorati

Compartilhar e ampliar: Bookmark com del.icio.us | digg it! | reddit!