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.