Criando um sistema em Ajax usando YUI – parte 1

Iniciarei uma série de artigos mostrando na prática como criar um sistema usando o framework Yahoo! YUI.

Nesse primeiro artigo usarei os templates "Grids CSS" para criar a(s) página(s) sem se preocupar com css (já iniciando dentro dos padrões web) e definirei os menus da aplicação usando os componentes de Menu do yui. Os modelos do framework são importantes principalmente se você não tem prática ou desconhece sobre Web Standards.

O framework

Primeiro vamos baixar e adicionar ao projeto as bibliotecas e templates do Framework. A pasta build contém as bibliotecas e folhas de estilo e a pasta examples contém modelos de usabilidade do framework.

Criando o modelo

Vamos criar uma página que será o front da aplicação. Crie um index.html e escolheremos um dos templates já disponibilizados. 

O próprio Yahoo! recomenda o uso do modo Strict mostrando que se comprometem com os padrões. Indicam no Getting Started a seguinte assinatura doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- layouts require "Standards Mode" rendering,  hich the 401-strict doctype triggers -->

Precisamos acrescentar a referência para os arquivos css do yui:

<link type="text/css" rel="stylesheet" href="js/yui/build/reset/reset.css" />
<link type="text/css" rel="stylesheet" href="js/yui/build/fonts/fonts.css" />
<link type="text/css" rel="stylesheet" href="js/yui/build/grids/grids.css" />

Definindo o esboço da página

Para usar o Grid CSS espera-se que exista a seguinte estrutura, onde os elementos já sao definicos como:

<div id="doc">
 <div id="hd"></div> <!-- header -->
 <div id="bd"></div> <!-- body -->
 <div id="ft"></div> <!-- footer -->
</div> 

Dividindo a página em 3 regiões: hd (Cabeçalho), bd (Corpo) e ft (Rodapé).

Escolhendo o template 

 

Após criar-mos as marcações exigidas pelo Grids CSS escolheremos um dos templates definidos para controlar as regiões de conteúdo.

Esses templates controlam duas regiões de conteúdo pré-definidas pelo framework denominadas em região "primária" e "secundária" (ou sidebar)  como na imagem ao lado.

 

O Grids CSS provê 7 templates onde 6 deles especificam a estrutura de conteúdo em  região "principal" e "barra lateral". o Sétimo template define um layout sem a barra lateral onde a região principal ocupa toda a extensão da página.

A imagem ao lado exibe os templates com suas respectivas identificações.

Utilizarei o "yui-t2" nessa série. 

Esse template escolhido está mais próximo de um sistema padrão com boa largura (180px) para a região lateral onde ficarão os menus e 550px para a região de conteúdo.

Especificando o template

Acrescente no div "doc" a referência ao "class" do modelo escolhido.

<div id="doc" class="yui-t2">

 A página ficará assim:

… 

<body>
<div id=
"doc" class="yui-t2">
   <div id=
"hd"></div> <!-- header -->
   <div id="bd"></div> <!-- body -->
   <div id="ft"></div> <!-- footer -->
</div>
</body>

… 

Definindo o conteúdo

Escolhemos um modelo que tem duas regiões de conteúdo. Vou acrescentar duas regiões definindo a área de menus e de conteúdo principal no corpo da aplicação:

<div id="doc" class="yui-t2">
  <div id="hd"></div>
   <div id="bd">
     <div id="menu" class="yui-b"></div>
     <div id="conteudo" class="yui-main"></div>
   </div>
   <div id="ft"></div>
</div>

Observe que a disposição não tem importancia porque a ordem dos elementos que definem as regiões de conteúdo é controlada no css que determina que o estilo "yui-main"(o principal) será à direita (no caso do nosso template escolhido).

Acrescentarei  na região do conteúdo principal (yui-main) mais duas regiões. Uma será para apresentar os formulários em cima da coluna "main" e os grids resultantes das ações dessess formulários na região de baixo, ficando assim: 

<div id="doc" class="yui-t2">
  <div id="hd"></div>
  <div id="bd">
   <div id="menu" class="yui-b"></div>
   <div id="conteudo" class="yui-main">
       <div class="yui-b">
         <div id="formulario" class="yui-g"></div>
         <div id="grid" class="yui-g"></div>
      </div>
   </div>
  </div>
  <div id="ft"></div>
</div>

Adicionando os Menus

Importarei os componentes usados para criar os menus dinâmicos. Acrescente:

<!-- Dependências -->
<link type="text/css" rel="stylesheet" href="js/yui/build/menu/assets/menu.css" />
<script type="text/javascript" src="js/yui/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="js/yui/build/event/event.js"></script>
<script type="text/javascript" src="js/yui/build/dom/dom.js"></script>
<script type="text/javascript" src="js/yui/build/container/container_core.js"></script>
<!-- Componente -->
<script type="text/javascript" src="js/yui/build/menu/menu.js"></script>

Escolhi usar um modelo de menu clássico, para isso definimos a estrutura deles:

<div id="bd">
    <!-- Menu -->
   <div id="menu" class="yui-b">
      <div id="basicmenu" class="yuimenu">
         <div class="bd">
             <ul>
               <li class="yuimenuitem first-of-type">Documentos
                  <div id="doc_menu" class="yuimenu">
                     <div class="bd">
                        <ul>
                        <li class="yuimenuitem"><a href="#">Novo Documento</a></li>
                        <li class="yuimenuitem"><a href="#">Pesquisa</a></li>
                        </ul>
                     </div>
                   </div>
                </li>
               <li class="yuimenuitem">Processo</li>
               <li class="yuimenuitem">Sair</li>
            </ul>
          </div>
      </div>
   </div>
   <!-- Fim Menu -->
</div> 

Modifiquei alguns estilos padrões criando um outro arquivo css com as seguintes definições(aconselho a não alterar diretamente nos arquivos do framework, crie um outro arquivo de css e acrescente suas customizações porque no caso de um upgrade do framework você não as perde) :

div.yui-b p {
    margin:0 0 .5em 0;
    color:#999;
}
           
div.yui-b p strong {
    font-weight:bold;
    color:#000;
}
           
div.yui-b p em {
   color:#000;
}           
           
h1 {
   padding:.25em .5em;
   background-color:#ccc;
}

div.yuimenu {
    position:absolute;
   visibility:hidden;
   border:0px;
}

div.yuimenu li a {
   color: #3333FF;
}

#basicmenu {
    position:static;
    visibility:visible;
}
#bd{
   height:400px;
   /*background-color: #0059A5;*/
   width: 760px;
   margin-top: -13px;
}
          
#doc {
   width:760px;
}
          
.yui-b{
   width: 550px;
}
.yui-main{
   width: 550px;
}
.yui-g{
   width: 550px;
}

Instanciando o componente Menu

Acrescente os componentes:

<script type="text/javascript" src="js/yui/build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="js/yui/build/event/event.js"></script>

Adicione um evento para carregar os menus ao carregar a página.

YAHOO.util.Event.addListener(window, "load", YAHOO.example.onWindowLoad);

A função YAHOO.example.onWindowLoad é um Listener para o evento "load" do objeto window.

Definiremos o objeto Menu na função YAHOO.example.onWindowLoad

/**
 * @id YAHOO.example.onWindowLoad
 * @classDescription Instancia Menus
 * @param {Object} p_oEvent
 */

YAHOO.example.onWindowLoad = function(p_oEvent) {
    function hideSubmenus() {
        if(oMenu.activeItem) {
            var oSubmenu = oMenu.activeItem.cfg.getProperty("submenu");
            if(oSubmenu) {
                oSubmenu.hide();
            }
        }
    }

    function cancelTimer() {
        if(nTimeoutId) {
            window.clearTimeout(nTimeoutId);
        }
    }
   
    function onSubmenuMouseOut(p_sType, p_aArguments, p_oMenu) {
        cancelTimer();
        nTimeoutId = window.setTimeout(hideSubmenus, 100);
    }

    var nTimeoutId;
    var oMenu = new YAHOO.widget.Menu("basicmenu", { position: "static" });
    oMenu.render();
    var doc = oMenu.getItem(0).cfg.getProperty("submenu");
    oMenu.mouseOverEvent.subscribe(cancelTimer);
    doc.mouseOverEvent.subscribe(cancelTimer);
    doc.mouseOutEvent.subscribe(onSubmenuMouseOut, doc, true);

    YAHOO.util.Event.addListener(document, "click", hideSubmenus);
}

Criei funções para controlar o aspecto de "tirar o mouse sobre um Menu" para ele se recolher porque por padrão isso não acontece e é chato.

Definindo a estrutura dinâmica

No próximo artigo mostrarei como fazer um cadastro com upload de arquivos, por enquanto ficamos com esse exemplo já chamando um formulário no menu documento -> Novo Documento.

Os 4 estágios de adoção do Ajax

Um artigo interessante saiu hoje no Ajaxian sobre os estágios de adoção do ajax. Identifiquei-me imediatamente com o artigo, menos no item 1, eu sempre fui favorável ao ajax e já usava DHTML de forma tímida antes da popularização.

Depois da popularização da tecnologia e consequente surgimento de frameworks que tornaram o desenvolvimento produtivo não vejo um site ou sistemas iniciando sem os benefícios que o ajax proporciona principalmente no quesito usabilidade.

Acompanhem o artigo http://ajaxian.com/archives/the-4-states-of-ajax-adoption

Yahoo! UI Library

Links interessantes para exemplos feitos com o framework Ajax do Yahoo!

 

 

Utilidades e componentes

 http://developer.yahoo.com/yui/

 

 

Site do desenvolvedor do framework, Dustin Diaz

http://www.dustindiaz.com/

Site com contribuição do Dustin

http://www.thinkvitamin.com/

15 coisas legais para se fazer com a YUI

http://www.thinkvitamin.com/features/javascript/15-things-you-can-do-with-yahoo-ui

Treeview com DnD

https://secure0.forward-comp.co.uk/yui/cv/test.html

Exemplos diversos

http://www.thinkvitamin.com/misc/yui-demos/demo-04.html
http://www.thinkvitamin.com/misc/yui-demos/demo-06.html
http://www.thinkvitamin.com/misc/yui-demos/demo-09.html
http://www.dustindiaz.com/sweet-titles/

Esse é o mais bacana

http://www.thinkvitamin.com/misc/yui-demos/demo-13.html

Espero iniciar uma série de artigos cobrindo o framework já que estamos adotando nos novos projetos, coisas interessantíssimas estão saindo, mas muito experimental, assim que tiver coisa pronta eu posto.

 

* Atualização – [19-09-2006] 

Blog do projeto, vale assinar para acompanhar a evolução do framework

http://www.yuiblog.com/ 

Blog do Jack Slocum com material interessante e extensions

http://jackslocum.com/yui/index.php 

Alem é claro de especializados em ajax como o Ajaxian

http://ajaxian.com/by/topic/yahoo/ 

 

* Atualização – [24-09-2006]

Nate Koechley (Membro da equipe que criou o YUI) 

http://nate.koechley.com/blog/

Bill Scott (Evangelista YUI)

http://looksgoodworkswell.blogspot.com/ 

 

*Atualização – [26-09-2006]

A pedidos:  a lista de discussão sobre o YUI

http://tech.groups.yahoo.com/group/ydn-javascript/ 

Mais exemplos 

http://yuiblog.com/sandbox/yui/ 

 

* Atualização – [29-09-2006]

Sistema de CRM feito com YUI

http://www.sugarcrm.com/crm/demo/45-community-preview.html 

* Atualização – [10-10-2006]

Editor de texto que está sendo construído com YUI, acompanhem a evolução

http://blog.davglass.com/files/yui/editor/ 

Mais efeitos com YUI

http://blog.davglass.com/files/yui/effects/ 

Comentários para o sistema de conteúdo muito usado em blogs, o WordPress.

http://www.milfont.org/blog/archives/83 

Vamos fazer guerra!

Seria bom que o exército americano investisse mais pesado em projetos como o America's Army e menos em bombas e mísseis.

Porque acontecem guerras? Por causa do estado, principalmente por ele! 

Uns defendem a intervenção americana no Iraque outros acusam, eu simplesmente ignoro. O presidente do Irã questiona a legitimidade do estado de Israel , eu também, mas eu questiono a legitimidade do estado do Irã tambem, questiono de todos.

O Iraque ficou melhor sem Saddan? Ficou a mesma merda, temos que combater todo sanguinário, mas deslegitimizando o estado. Substituir um pelo ouro resolve a vida de alguem? Democracia fosse solução Venezuela era excelente no IDH já que segundo nosso presidente lá tem democracia em excesso

Sou utopista? Talves, mas não acredito em estado, não sou anarco-socialismo, sou ancap, acredito na propriedade privada. Alias Proudhon no fim da vida em suas "Correspondencias" acreditava que nem toda propriedade privada era um roubo.

O ideal é que se quisessem guerrear os exércitos se reunisse numa lan e se degladiassem até o último morto, após isso assinam a rendição do exército perdedor, marcam uma nova lan party e e vão tomar umas.