Yui Blog!

Existem alguns bons editores de códigos para diversas linguagens de programação disponíveis na internet, mas um em especial tem me chamado bastante a atenção nos últimos meses, o E-TextEditor. Este leve editor é baseado no consagrado TextMat (para plataforma Mac). O grande barato do E-TextEditor é dar suporte a edição de códigos em várias linguagens de programação como PHP, JAVA, .NET, C# entre outras; e permitir um controle mais automatizado de tarefas repetitivas de digitação de código, poupando tempo e esforço. O E-TextEditor é poderoso, pois transforma comandos de texto de acordo com suas necessidades. Outro ponto forte do E-TextEditor é o valor da licença para uso, algo em torno de 35 doláres, e você ainda poderá testar o software por 30 dias.

Como o foco principal deste blog é a biblioteca YUI, ensinarei os primeiros passos para utilizar YUI no E-TextEditor, desta forma você irá obter muitas facilidades para editar os seus códigos, pois todos os módulos (Event, Dom…) estão disponíveis para uso de forma fácil e rápida.

Download E-TextEditor e dê um duplo clique para instalar.
Abra o E-TextEditor e acesse o menu Menu Bundle -> Edit Bundles -> Manage Bundles
Aguarde carregar lista e opções, escolha: JavaScript YUI e clique em install
Aguarde instalação, após isso os recursos YUI estarão disponíveis no menu Bundle.

Agora você já pode utilizar o E-TextEditor para editar seus scripts YUI. Espero que tenham gostado.

Versão deste artigo em PDF, clique aqui.

read comments (0)

Neste tutorial, veremos a utilização deste prático elemento chamando TabView. Este componente WEB foi projetado para que desenvolvedores criem abas navegáveis. Ela também pode ser empregada em sites que permitam a personalização de conteúdo. Pensando na utilidade e práticidade do TabView, veremos neste tutorial a possibilidade de personalizar o conteúdo de uma página utilizando o TabView. Note que ao trabalharmos com a parte gráfica em YUI, estaremos trabalhando com os vários recuros CSS que esta oferece. Observe que não iremos manipular cookies, dessa forma o registro da personalização feito pelo usuário não será o foco deste tutorial.

O objetivo deste tutorial é construir uma página com o recurso TabView, sendo que esta página permita ao usuário personalizar o seu conteúdo.

Você poderá testar o exemplo do tutorial clicando aqui!

Você poderá baixar o tutorial em PDF!

Crie uma página .html e inclua na tag HEAD, os seguintes recursos CSS disponíveis no YUI:

Inclua os yahoo-dom-event.js, element-beta-min.js, tabview-min.js, button-min.js. Observe que a terminação –min significa que estamos incluindo uma versão simplificada dos elementos mais utilizados pelo componente. Não esqueça que devemos focar sempre as necessidades dos usuários, e nem todo usuário que navega na WEB tem um computador que atenda a todo e qualquer requisito de uma nova tecnologia.

Ainda no cabeçalho do HTML inclua a estrutura básica para a construção de aplicações utilizando a biblioteca YUI:

YAHOO.example = function () {

}();

</script>

Após isto, feche a tag HEAD e inicie a tag BODY com o atributo class=”yui-navset”

</head>

Para ilustrar o exemplo, crie em div com o id = “buttons”, após isso crie dois botões com os atributos class = “yui-button yui-push-button”. Desta forma, estaremos utilizando um recurso CSS disponível do buttons.css, citado no inicio da página.

<button type=”button”>Remover TabView Selecionado</button>

</span>

<button type=”button”>Adicionar TabView</button>

</span>

</div>

Seguindo o modelo do exemplo acima, crie em div com atributo id = “tabs”e class = “yui-navset”. Crie agora uma lista não ordenada com o atributo class = ‘yui-nav’ e quantos elementos desejar. Cada elemento será uma aba. Em cada elemento <li> inclua um link e neste, atribua ao href um valor precedido de #. Agora, inclua uma div para o conteúdo com o atributo class = “yui-content”, para cada aba crie um elemento id com o nome do valor referenciado anteriormente no href.

<li><a href=”#tab1″><em>TabView 1</em></a></li>

<li class=”selected”><a href=”#tab2″><em>TabView 2</em></a></li>

<li><a href=”#tab3″><em>TabView 3</em></a></li>

</ul>

<div id=”tab1″><p>Conteúdo 01</p></div>

<div id=”tab2″><p>Conteúdo 02</p></div>

<div id=”tab3″><p>Conteúdo 03</p></div>

</div>

Finalmente efetue o fechamento das tags:

</body>

</html>

Volte agora ao script e inclua dentro de return a função tabViewExemplo, dentro da função vamos criar uma instância da classe TabView (“tabs”).

YAHOO.example = function () {

var E = YAHOO.util.Event;

return {

tabViewExemplo : function () {

tabView = new YAHOO.widget.TabView(’tabs’);

}

};

}();

Se você incluir agora o evento onAvailable após }(); você terá uma visão da aba:

YAHOO.util.Event.onAvailable(’tabs’, YAHOO.example.tabViewExemplo);

Agora precisamos dar ação aos botões, ainda dentro da opção return inclua as funções (observe que a função “tabViewExemplo” deverá ter agora o seu fechamento finalizado com uma vírgula):

tabViewExemplo : function () {

tabView = new YAHOO.widget.TabView(’tabs’);

},

removerElemento : function () {

},

adicionarElemento : function () {

}

Dentro da função “remover elemento” inclua:

elemento = tabView.get(’activeTab’);

tabView.removeTab(elemento);

Dessa forma, estaremos sempre removendo o elemento que estiver ativo no momento do clique.

Dentro da função “adicionar elemento” inclua:

tabView.addTab( new YAHOO.widget.Tab({

label: ‘Novo’,

content: ‘Conteúdo a definir…’,

active: true

}));

Desta forma, você estará criando uma nova aba com o nome = “Novo” e com o conteúdo = “Conteúdo a definir..”, além de estar ativando-a no momento da sua criação. Isso significa que o foco no momento da criação será nela mesmo.

Agora, inclua no final do script os seguintes eventos (ambos já vistos nos demais tutoriais):

YAHOO.util.Event.on(’remover’,'click’, YAHOO.example.removerElemento, YAHOO.example, true);

YAHOO.util.Event.on(’adicionar’,'click’, YAHOO.example.adicionarElemento, YAHOO.example, true);

YAHOO.util.Event.onAvailable(’tabs’, YAHOO.example.tabViewExemplo);

Para finalizar você pode incluir conteúdo para cada elemento da aba. Como sugestão, implemente cookies para controlar e gravar as preferências dos usuários.

BIBLIOGRAFIA:

http://developer.yahoo.com/

http://www.dustindiaz.com

AGRADECIMENTOS:

Tatiane Schmidt,

All Yahoo Developers.

read comments (0)

Neste tutorial veremos a implementação de um WebService (utilizando a biblioteca connection) e a sua integração com a linguagem de programação PHP. Sugiro que leiam o primeiro tutorial publicado no blog, pois este poderá ser útil para sanar as dúvidas básicas sobre YUI.

Obviamente, você precisará de um servidor local ou WEB configurada para interpretar a linguagem de programação PHP.

O principal objetivo deste tutorial é fazer uma chamada a um WebService e receber uma resposta no elemento específico da página HTML.

Você poderá testar o exemplo do tutorial clicando aqui!

Para baixar o tutorial em PDF clicando aqui!

Crie uma página chamada webservice.php e inclua os scripts yahoo.js, event.js, dom.js, e connection.js.

<html>

<head>

Agora vamos incluir a nossa estrutura básica YUI (como visto no primeiro tutorial):

YAHOO.example = function () {

return = {

};

}();

</script>

Criamos agora um Alias para acessar os métodos das classes que incluímos no início deste tutorial:

YAHOO.example = function () {

var D = YAHOO.util.Dom; // Para acessar métodos Dom

var E = YAHOO.util.Event; // Para acessar métodos Event

var C = YAHOO.util.Connect; // Para acessar métodos Connect

Dentro da função return, inclua as funções webService, e dentro desta a função enviaRecebe com um parâmetro. A função webService será acessada como um método construtor:

webService : function () {

var enviaRecebe = function (e) {

}

};

Dentro da função enviaRecebe você poderá incluir as váriaveis element e url. A primeira refere-se ao objeto a qual está sendo referenciado na página, e a segunda a url do nosso WebService. Note que estamos passando o conteúdo do objeto no endereço do WebService (elemento).

var element = E.getTarget(e);

var url = ‘webservice.php?elemento=’+element.innerHTML;

Com a url definida, podemos pensar agora nos métodos callback, este poderá ser entendido como um feedback da comunicação com o WebService. Você pode declarar o nome das funções de retorno callback como desejar, mas sugerimos:

var callback = {

success : sucesso,

failure : falha

};

Desta forma, o método callback terá duas funções de retorno: sucesso na comunicação com o WebService (url), ou falha, caso ocorra um problema de comunicação (como por exemplo, o nome do WebService estar inacessível).

Abaixo as funções de retorno do callback:

var sucesso = function (o) {

var resp = o.responseText;

element.innerHTML = resp;

alert (’Comunicação estabelecida’);

};

var falha = function (o) {

alert (’Ocorreu uma falha na comunicação com o WebService!’);

};

Agora você poderá fazer uma chamada ao YAHOO.util.Connect.asyncRequest e através do método GET fazer um pedido ao WebService definido na url. Utilize o Alias “C” para simplificar, como abaixo:

var cObj = C.asyncRequest(’GET’, url, callback);

Efetue o fechamento da função enviaRecebe e em seguida novamente fazendo uso do Alias, declare o evento:

E.on(this, ‘click’, enviaRecebe);

Dessa forma, você estará solicitando que o método enviaRecebe seja executado ao clicar em determinado elemento da página.

Feche a função principal (YAHOO.example) e declare no final do script o evento:

YAHOO.util.Event.onAvailable(’lista’, YAHOO.example.webService);

Assim iremos referenciar os itens do elemento ‘lista’ ao WebService. Você poderá fechar o script e iniciar o corpo da página.

</script>

</head>

<body>

Crie agora uma lista não ordenada com o atributo id = ‘lista’ e finalize a estrutura HTML do nosso script.

<h1>YUI - EXEMPLO 02 - WEBSERVICE</h1>

<li>Tentativa 01</li>

<li>Tentativa 02</li>

<li>Tentativa 03</li>

<li>Tentativa 04</li>

<li>Tentativa 05</li>

<li>Tentativa 06</li>

<li>Tentativa 07</li>

</ul>

</body>

</html>

Como exemplo, criei o seguinte WebService:

<?php

$elemento = urldecode($_GET['elemento']);

if ($elemento <> “”){

$MD5_request = md5($elemento);

echo “Mensagem recebida do Webservice: $MD5_request”;

exit();

}

?>

Note que é muito simples, ele recebe através do método GET o elemento ‘elemento’, transforma-o em um texto único (através da função md5) e retorna um texto simplesmente. Para finalizar você poderá incluir a folha de estilo e formatar o texto da maneira que desejar.

Espero que tenham gostado e até a próxima!

BIBLIOGRAFIA:

http://developer.yahoo.com/

http://www.dustindiaz.com

http://www.yuiblog.com

AGRADECIMENTOS:

Dustin Diaz,

Tatiane Schmidt,

All Yahoo Developers.

read comments (3)

Neste tutorial, veremos que é muito simples iniciar a construção de aplicações WEB dinâmicas com a ajuda da biblioteca YUI. O exemplo feito neste tutorial é muito simples, e tem por finalidade dar um embasamento para a utilização do Event Utility.

A finalidade deste tutorial é chamar um evento ao clicar em um elemento específico da página HTML.

Você poderá testar o exemplo do tutorial clicando aqui!

Baixar em tutorial PDF

Crie uma página .html e inclua os scripts yahoo.js e event.js, respectivamente das bibliotecas yahoo e event.

<html>

<head>

Ainda no cabeçalho do HTML inclua a estrutura básica para a construção de aplicações utilizando a biblioteca YUI. Essa estrutura será utilizada em vários exemplos feitos no Blog, ela até poderia ser ignorada nesta etapa, mas a iremos utilizar deste o inicio, e quando for incluido exemplos mais complexos você estará mais familiarizado.

YAHOO.example = function () {

}();

</script>

E após isto:

</head>

<body>

Para ilustrar o exemplo, crie em div com o id = “meu evento”

<div id = “meu_evento”>Por favor, clique no Texto!</div>

Finalmente efetue o fechamento das tags:

</body>

</html>

Até este ponto, nossa página HTML deverá ter a seguinte estrutura:

<html>

<head>

YAHOO.example = function () {

}();

</script>

</head>

<body>

<div id = “meu_evento”>Por favor, clique no Texto!</div>

</body>

</html>

Agora, incluiremos uma função de retorno dentro do YAHOO.example chamada return, todas as nossas funções que possuam algum tipo de retorno deverão estar na estrutura return:

YAHOO.example = function () {

return {

};

}();

Após isto, poderemos incluir quantas funções sejam necessárias. Para este exemplo inclua a função helloWord e dentro dela o método alert com a mensagem ‘Ola mundo’:

YAHOO.example = function () {

return {

helloWord: function(){

alert (’Ola mundo!’);

}

};

}();

Vamos utilizar agora nosso primeiro evento YUI (on). Desta forma, a função helloWord será executada ao se clicar em algo dentro da div ‘meu_evento’.

YAHOO.util.Event.on(’meu_evento’,'click’, YAHOO.example.helloWord, YAHOO.example, true);

A finalidade deste tutorial é ser realmente simples, e demonstrar uma das formas mais simples de interação que a biblioteca YUI ofereçe. Espero que tenham gostado e até a próxima!

BIBLIOGRAFIA:

http://developer.yahoo.com/

http://www.dustindiaz.com

http://www.yuiblog.com

AGRADECIMENTOS:

Dustin Diaz,

Tatiane Schmidt,

All Yahoo Developers.

read comments (0)

O QUE É YUI?
Segundo o próprio desenvolvedor, o Yahoo! User Interface (YUI) é um conjunto de componentes e comandos escritos em JavaScript, ricamente interativos para a construção de aplicações Web usando técnicas como DOM, DHTML e vários recursos CSS. Todos os componentes da Biblioteca YUI foram lançados sob uma licença da BSD e estão livres para todos os usos. [1]

PARA BAIXAR:
Baixar versão 2.5.2, incluindo API documentação completa e vários exemplos funcionais.

PORQUE YUI?
O software é um produto do trabalho humano cada vez mais presente na sociedade. Qualquer discussão sobre a prática de software deve se fundamentar na compreensão da real natureza do que é software e no relacionamento que ele provoca entre as pessoas.[2]

Na minha opinião, se o YUI não surgiu específicamente para estreitar esse relacionamento, essa pelo menos, foi umas das conseqüências.

Acredito por muitas razões, que Ajax é uma solução eficaz para resolver problemas de usabilidade e acessibilidade em aplicativos Web. Mas, por outro lado, essa tendência de desenvolvimento parece estar atraindo “o tipo errado” de programador, que parece mais interessado na tecnologia brilhante do que na experiência do usuário que utilizará o software.

Opiniões à parte, o fato é que a inclusão do YUI em seus projetos, levarão ao usuário uma experiência mais agradável na utilização do software. Ao desenvolvedor, ficará claro que a reutilização de interface bem construida poderá gerar um ganho considerável na estapa de desenvolvimento do software.

LICENÇA
“Copyright (c) 2008, Yahoo! Inc.
All rights reserved.”
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS “AS IS” AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

Você poderá usar o YUI de forma ilimitada, desde que respeite as seguintes condições:

- Redistribuições do código-fonte devem manter o aviso de copyright acima, esta lista de condições e a seguinte isenção de responsabilidade.

- As redistribuições na forma binária devem reproduzir o aviso de copyright acima, esta lista de condições e a seguinte isenção de responsabilidade e / ou outros materiais fornecidos com a distribuição.

- Nem o nome do Yahoo! Inc. nem os nomes de seus colaboradores podem ser usados para endossar ou promover produtos derivados deste software sem a permissão específica por escrito do Yahoo! Inc.

Mais informações poder ser obtidas aqui!

BIBLIOGRAFIA
[1] http://developer.yahoo.com/yui. Acessado em: 01 junho de 2008.
[2] Publicado na Revista Ciência e Cultura. Vol 55. N 2. Abril / Maio / Junho de 2003. Páginas 29 a 33.
Editora da Sociedade Brasileira para o Progresso da Ciência. ISSN 0009-6725. Disponível URL:
http://www.dimap.ufrn.br/~jorge/textos/papers/PraticaDeSoftware.pdf.

read comments (0)

Categorias

Arquivos

Meta

Yui Blog!

Editor para YUI (E-TextEditor)

YUI TabView

YUI WebService (exemplo em PHP)

YUI Event Utility (on)

O que é Yahoo! User Interface (YUI)?

Categorias

Arquivos

Meta

Yui Blog!

buscar:

Editor para YUI (E-TextEditor)

YUI TabView

YUI WebService (exemplo em PHP)

YUI Event Utility (on)

O que é Yahoo! User Interface (YUI)?