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">
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>
<div id="bd"></div>
<div id="ft"></div>
</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>
<div id="bd"></div>
<div id="ft"></div>
</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:
<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>
<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">
<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>
</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;
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
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.
- 
Loading ...
