8.4.

Men desplegable
La navegacin de algunas pginas web se realiza mediante mens desplegables, que disponen de varios niveles jerrquicos que se despliegan a medida que el usuario pasa el puntero del ratn por encima de cada elemento. Aunque CSS permite realizar mens desplegables horizontales y verticales de cualquier nivel de profundidad, los navegadores de la familia Internet Explorer versin 6.0 y anteriores no disponen del suficiente soporte de CSS como para crear este tipo de mens. De esta forma, la nica forma de crear un men desplegable que funcione correctamente en cualquier navegador consiste en utilizar JavaScript. A pesar de que realizar un men desplegable sencillo con JavaScript no es una tarea muy compleja, se va a utilizar un componente ya realizado que pertenece a la librera de desarrollo web de Yahoo. La Yahoo UI Library, conocida como YUI, y que se puede traducir como "Librera de componentes de interfaz de usuario de Yahoo" es un conjunto de utilidades y controles escritos en JavaScript para el desarrollo rpido y sencillo de aplicaciones web complejas. La librera completa est dividida en mdulos y componentes relacionados con CSS, DOM, eventos, AJAX, etc. Entre las utilidades disponibles se encuentran calendarios, tooltips, cuadros que autocompletan el texto, rboles jerrquicos, etc. Adems de esas utilidades, la YUI incluye un completo mdulo de mens que permite realizar decenas de tipos de mens diferentes: horizontales, verticales, desplegables, estticos, mens contextuales, mens de aplicacin, mens realizados con XHTML o con JavaScript, etc. La librera YUI se puede descargar gratuitamente en http://developer.yahoo.com/yui/, la informacin especfica sobre los mens se puede encontrar en http://developer.yahoo.com/yui/menu/ y se pueden ver decenas de ejemplos de mens ya realizados en http://developer.yahoo.com/yui/examples/menu/. A continuacin se indican los pasos necesarios para incluir un men vertical desplegable: 1) Enlazar los archivos JavaScript y CSS requeridos:

La librera YUI se puede descargar gratuitamente con todos los archivos necesarios, toda la documentacin y cientos de ejemplos (por lo que comprimida ya ocupa ms de 11 MB). Aunque es posible utilizar los archivos CSS y JavaScript proporcionados por la librera desde nuestro servidor, Yahoo permite enlazar los archivos CSS y JavaScript desde sus propios servidores. De esta forma, todos los archivos requeridos por las utilidades de Yahoo se pueden servir directamente desde sus servidores, mucho ms rpidos y fiables que cualquier servidor particular. Como el usuario se descarga los archivos desde los servidores de Yahoo, el ahorro de ancho de banda es total y la aplicacin carga mucho ms rpido. Para crear un men vertical, se deben enlazar los siguientes archivos: <!-- Dependencias --> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/menu/assets/skins/sam /menu.css"> <script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/yahoo-dom-event/yahoodom-event.js"></script> <script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/container/container_co re-min.js"></script>

<!-- Cdigo para mens --> <script type="text/javascript" src="http://yui.yahooapis.com/2.3.0/build/menu/menumin.js"></script> Si se opta por servir los archivos desde nuestro propio servidor, es recomendable enlazar las versiones comprimidas de cada archivo, que se pueden reconocer porque su nombre termina en -min.js. 2) Definir el cdigo XHTML de los elementos del men: <div id="menu_vertical" class="yuimenu"> <div class="bd"> <ul class="first-of-type">

<li class="yuimenuitem"><a href="#">Lorem ipsum</a></li> <li class="yuimenuitem"><a href="#">Dolor sit amet</a></li> <li class="yuimenuitem">Consectetuer <div id="consectetuer" class="yuimenu"> <div class="bd"> <ul> <li class="yuimenuitem"><a href="#">Donec quis nunc</a></li> <li class="yuimenuitem"><a href="#">Fusce eleifend</a></li> <li class="yuimenuitem"><a href="#">Donec erat</a></li> <li class="yuimenuitem"><a href="#">Faucibus orci</a></li> <li class="yuimenuitem"><a href="#">Volutpat quam</a></li> </ul> </div> </div> </li> <li class="yuimenuitem"><a href="#">Adipiscing elit</a></li> </ul> </div> </div> La librera YUI dispone de muchos tipos diferentes de mens. Adems, los mens se pueden construir completamente con JavaScript (en la pgina XHTML no aparecen los elementos del men) o a partir del cdigo XHTML de los elementos del men incluido en la pgina. Este ltimo mtodo, definir el men con XHTML y despus aplicarle JavaScript, es la forma recomendada, ya que si el usuario no tiene JavaScript activado, el

men se visualiza correctamente. Por ese motivo, no se va a estudiar el mtodo de construccin de un men de YUI exclusivamente con JavaScript. Los elementos que forman los mens creados con YUI se construyen mediante listas no ordenadas con las etiquetas <ul> y <li>. Un pequeo inconveniente de los mens definidos con la librera YUI es que cada uno de los mens (el principal y todos los desplegables) debe encerrarse con dos elementos de tipo <div>. En otras palabras, el esquema de cada men (y submen desplegable) es el siguiente: <div id="cualquier_identificador" class="yuimenu"> <div class="bd"> <ul class="first-of-type"> ... </ul> </div> </div> Los valores de los atributos class de los elementos <div> anteriores deben mantenerse para que el men funcione correctamente. 3) Construir el men y mostrarlo en la pgina: <script type="text/javascript"> YAHOO.util.Event.onContentReady("menu_vertical", function () { var elMenu = new YAHOO.widget.Menu("menu_vertical", { width: '150px' }); elMenu.render(); elMenu.show(); }); </script> El cdigo JavaScript que crea dinmicamente el men requiere que el rbol DOM de la pgina se haya construido completamente, por lo que se utiliza la funcin onContentReady() que forma parte de las utilidades para eventos de la librera YUI.

Para construir el men se crea un nuevo objeto de tipo YAHOO.widget.Menu y se le pasan las opciones de inicializacin (en este caso, que tenga una anchura de 150 pxel).: var elMenu = new YAHOO.widget.Menu("menu_vertical", { width: '150px' }); Una vez creado el objeto del men, se construye mediante la instruccin elMenu.render() y se muestra en la pgina con la instruccin elMenu.show(). El resultado final es un men vertical desplegable con el siguiente aspecto:

El script
//Mas en: http://javascript.espaciolatino.com/ //Primero comprobamos el navegador

Como funciona
La gran mayora de los tpicos mens desplegables estn basados en el atributo style.visibility de las capas (elementos DIV de las pginas web). Este script te puede servir para un pequeo men o como base para desarrollar algo ms sofisticado. Un men bsicamente es una lista de opciones, esta lista la colocamos en una capa DIV. La primera funcin, despMenu(), sirve para mostrar u ocultar esta capa, el primer argumento es el ID de la capa y el segundo es 0 para ocultarla y 1 para mostrarla. La segunda funcin, destacar(),se usa para resaltar modificar el color de fondo de la opcin del men cuando pase el ratn, el primer argumento es el ID de la capa que contiene al elemento del men y el segundo se interpreta como sigue: 0: indica que se debe resaltar, el ratn est encima. 1: se vuelve a la normalidad. El color original se guarda en la variable global itemOrig.

var itemOrig; function despMenu(nombre,sn) { obj = document.getElementById[nombre]; if (sn>0) obj.style.visibility = "visible"; else obj.style.visibility = "hidden"; } function destacar(obj, val) { if (val==1)

{ itemOrig = obj.style.backgroundColor; obj.style.backgroundColor="Aqua"; } else obj.style.backgroundColor= itemOrig; } --> < /script>

La pgina
<HEAD> < !-- Definimos estilos para el menu -> < style type="text/css"> < !-.itMenu { position: absolute; clip: rect( ); background: #99FF99; visibility: hidden} .cabMenu { position: absolute; clip: rect( ); color: #FFFF66; background: #0033FF} .itMenuAct { background: #CCFFFF; width: 160px } .itMenuDes { background: #99FF99; width: 160px } --> < /style> < SCRIPT language="JavaScript"> < !---Aqu sitas el cdigo javascript ---> < /script> < /HEAD>

Como se usa

<BODY>

< !-- La etiqueta DIV que sigue define la capa con la cabecera del men. Cuando el ratn pase por aqu se despliega el men-->

< div id="Menu1" style="width:140px; height:21px; z-index:2;

left: 39px; top: 23px" class="cabMenu"

onMouseOver="despMenu('itMenu1',1)" onMouseout="despMenu('itMenu1',0)">Cabecera del men

< /div>

<!-- La etiqueta DIV que sigue define la capa que contendr el men, la que se despliega cuando el ratn pase por la cabecera-->

<div id="itMenu1" style="width:103px; height:75px; z-index:1; left: 39px; top: 44px" class="itMenu"

onMouseOver="despMenu(this.id,1)" onMouseout="despMenu(this.id,0)">

< div id="itMenu11" class="itMenuDes" onMouseover="destacar(this,1)" onMouseout="destacar(this,0)" >

< a href="destino1.htm" >Item 1</a>

< /div>

< div id="itMenu12" class="itMenuDes" onMouseover="destacar(this,1)" onMouseout="destacar(this,0)" >

< a href="destino1.htm" >Item 2</a>

< /div>

< div id="itMenu13" class="itMenuDes" onMouseover="destacar(this,1)" onMouseout="destacar(this,0)" >

< a href="destino1.htm" >Item 3</a>

< /div>

< /div>

Resto de la pgina web

< /BODY>

< /HTML>

/********************* //* jQuery Multi Level CSS Menu (horizontal)- By Dynamic Drive DHTML code library: http://www.dynamicdrive.com //* Menu instructions page: http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/ //* Last modified: Sept 6th, 08'. Usage Terms: http://www.dynamicdrive.com/style/csslibrary/tos/ *********************/ //Specify full URL to down and right arrow images (25 is padding-right to add to top level LIs with drop downs): var arrowimages={down:['downarrowclass', 'arrow-down.gif', 25], right:['rightarrowclass', 'arrow-right.gif']} var jquerycssmenu={ fadesettings: {overduration: 350, outduration: 100}, //duration of fade in/ out animation, in milliseconds buildmenu:function(menuid, arrowsvar){ jQuery(document).ready(function($){ var $mainmenu=$("#"+menuid+">ul") var $headers=$mainmenu.find("ul").parent() $headers.each(function(i){ var $curobj=$(this) var $subul=$(this).find('ul:eq(0)') this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()} this.istopheader=$curobj.parents("ul").length==1? true : false $subul.css({top:this.istopheader? this._dimensions.h+"px" : 0}) $curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append( '<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1]) +'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0]) + '" style="border:0;" />' ) $curobj.hover( function(e){ var $targetul=$(this).children("ul:eq(0)") this._offsets={left:$(this).offset().left, top:$(this).offset().top} var menuleft=this.istopheader? 0 : this._dimensions.w menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$ (window).width())? (this.istopheader? this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft $targetul.css({left:menuleft+"px"}).fadeIn(jquerycssmenu.fadese ttings.overduration)

}, function(e){ $(this).children("ul:eq(0)").fadeOut(jquerycssmenu.fadesettings .outduration) } ) //end hover }) //end $headers.each() $mainmenu.find("ul").css({display:'none', visibility:'visible'}) }) //end document.ready } } //build menu with ID="myjquerymenu" on page: jquerycssmenu.buildmenu("myjquerymenu", arrowimages)

Sencillo Men horizontal desplegable con html y css

Este es un pequeo ejemplo de como crear un simple y sencillo men desplegable usando solamente html y css sin necesidad de usarjavascript. la estructura de html de nuestro menu

cdigo:
<ul id=menu> <li><a href=#>Inicio</a> </li> <li><a href=#>Opcion 1</a> <ul> <li><a href=#>submenu1</a></li> <li><a href=#>submenu1</a></li> <li><a href=#>submenu1</a></li> </ul> </li>

<li><a href=#>Opcion 2</a> <ul> <li><a href=#>submenu2</a></li> <li><a href=#>submenu2</a></li> <li><a href=#>submenu2</a></li> </ul> </li> <li><a href=#>Opcion 3</a> <ul> <li><a href=#>submenu3</a></li> <li><a href=#>submenu3</a></li> <li><a href=#>submenu3</a></li> </ul> como podemos ver es una lista desordenada (ul) a la cual le hemos aadido elementos(li) y a estas a la vez le hemos agregado enlaces y alguno de estos elementos( li) hemos anidado listas. El siguiente paso sera darle estilo a nuestro men. #menu{ /*estilo de nuestra lista*/ background-color:#414141; list-style:none; width:auto; position:relative; display:block; height:36px; } #menu li{ /*estilo a cada uno de los elementos(li) de nuestro menu*/ float:left;/* propiedad importante para que nuestro menu tome la forma horizontal*/ display:block; position:relative; } #menu li a{

/*estilo de los enlaces */ color:#fff; text-decoration:none; font-family:Helvetica, Arial, sans-serif; font-size:14px; line-height:1.3em; padding:10px 14px 8px 16px; display:block; } #menu li ul{ /*estilo de los submenus*/ width:120px; background:#F8F8F8; border:1px #ccc solid; display:none; /*importante para que los submenus no estn visibles*/ position:absolute; z-index:999; margin-top:0px; } #menu li ul li{ /*estilo a cada uno de los elementos(li) de nuestro submenu*/ width:100%; list-style:none; display:block; } #menu li ul li a{ /*estilo a cada uno de los enlaces de nuestro submenu*/ color:#21759b; font-size:14px; line-height:1.3em; display:block; font-weight:normal;

padding:8px } #menu li ul li a:hover{ /*un poco de decoracion a los enlaces de nuestro submenu al estar el cursor sobre ellos con ayuda de el selector :hover */ background-color:#FFF; color:#444; text-decoration:underline; } aqu viene lo importante para que funcione nuestro men y se desplieguen los submenus al colocar el cursor sobre una opcin de el men, para ello utilizaremos el selector :hover. #menu li:hover ul{ /*con este selector definimos que cuando el cursor este sobre un elemento(li) que contenga un elemento(ul) dentro le asigne la propiedad display:block; para que este a su vez pase de invisible a visible*/ display:block; } ahora ya tenemos un bonito pero sencillo men desplegable al cual le podemos cambiar propiedades para darle estilo a nuestro gusto con propiedades css3 como degradados, bordes,fuentes, lo que se nos ocurra.

Men horizontal desplegable animado

Home CSS Men horizontal desplegable animado
Como habris podido ver, he hecho un men nuevo para el blog, ya que no era la primera vez que reciba una queja sobre los enlaces flotantes en pantallas pequeas. Bien, pues como me dispona a hacer este tipo de mens desplegables, lo primero que hice fue fijarme en uno que vi en CiudadBlogger

Necesitaba personalizarlo mucho ms, poner bordes redondeados (tarea que se complic bastante), sombras, colores de pestaas diferentes, etc. Pero no solo eso: Tambin quera hacerlo sin imgenes (cosa que he conseguido) y slo con transiciones CSS en vez de Javascript para los efectos (no se si habra alguna posibilidad de hacerlo con animaciones), cosa que pude hacer al final, como luego explicar. As que me puse a disearlo desde cero, siendo este el resultado:

Demo y descarga

El HTML
Usaremos un div con id menu-altern en el que meteremos una lista ordenada normal <ul> (s, la de las vietas) con otras listas dentro: <div id='menu-altern'> <ul> <li><a href='#'>Pgina Principal</a></li> <li><a href='#'>Opina y sugiere</a> </li> <li><a href='#'>Entradas CMC</a></li> <li class='expandible'>Literatura<div class='flechaabajo'/><ul> <li><a href='#'>Tema 8</a></li> <li><a href='#'>Tema 9</a></li> <li><a href='#'>Tema 10</a></li> </ul></li> <li class='destacada'><a href='#'>Sgueme</a></li> </ul> </div>

El CSS
sta es la parte ms difcil y la que me llev ms tiempo. Todas las explicaciones estn puestas como comentarios en el CSS. #menu-altern{ color:#FFFFFF; /*Color del texto*/ width: 589px; /*Ancho del men--> El nmero de pestaas principales por el ancho que le demos a cada una(585px) MS LOS BORDES (que son 4 de 1px)*/ height:35px; /*Altura del men*/ box-shadow: 1px 2px rgba(0,0,0,.3); /*La sombra del men*/ border-radius:4px; /*Bordes redondeados al men*/ font-family:"Ubuntu",Trebuchet, Arial, Helvetica, sans-serif;/*La tipografa del texto*/ z-index:999;/*Para que sobresalga por encima de cualquier otro elemento de la pgina*/ text-align:center;/*Para que los links estn centrados*/ } #menu-altern ul {z-index:999; } /*Anchura y altura de cada link*/ #menu-altern ul li{ list-style: none; /*Para quitar la vieta*/ display:inline;/*Con el men finalizado podramos eliminarlo, pero durante la realizacin sirvi para que los enlaces fueran uno tras otro en vez de en columnas*/ float: left;/*Indispensable, para que se agrupen de derecha a izda*/ width: 117px;/*ancho*/ height:35px; /*la misma que la del menu*/

line-height:35px;/*El mismo valor que la altura, para que aparezca centrado verticalmente*/ background:#666;/*Fondo*/ cursor: pointer;/*Forma del ratn*/ border-right: 1px solid #999;/*Borde derecho*/ } #menu-altern ul li:first-child{ /*El primer elemento li de una lista---> Esto es lo que nos dar problemas con los bordes redondeados*/ margin-left: -40px; /*Corregimos posicin del men--->NO NECESARIA SI EN NUESTRO CSS TENEMOS "*{margin:0; padding:0;*/ border-bottom-left-radius: 4px;/*bordes redondeados izquierdos*/ border-top-left-radius: 4px; } #menu-altern ul li:first-child a{/*Los bordes del enlace del li anterior->Si este mantuviera bordes cuadrados, no dejara que se vieran los redondeados*/ border-bottom-left-radius: 4px; border-top-left-radius: 4px; } #menu-altern ul li:last-child, #menu-altern ul li:last-child a{/*Los dos pasos anteriores, pero para el ltimo elemento de una lista*/ border-bottom-right-radius: 4px; border-top-right-radius: 4px; border-right: 0px;/*hacemos que el ltimo elemento no tenga borde derecho*/ } #menu-altern .flechaabajo{/*Elemento con forma de flecha jugando con los bordes. Por ahora nos tocar ponerla a mano, ya que no me he parado a desarrollar una funcin Javascript para insertarla despus del texto de cada elemento con clase "expandible"*/

display: inline-block;/*Para que se muestre de forma similar a un carcter*/ position: relative; /*Nos permite fijar una posicin desde la que debiera ser suya original. Adems lo anterior se consigue junto con esto*/ /*Posicin de la flecha*/ top: -1px; left: 10px; /*Bordes que le dan esa forma*/ border-left: 6px solid transparent; border-top: 6px solid #fff; border-right: 6px solid transparent; border-bottom:0; } #menu-altern ul li a {/*Los enlaces dentro de la lista principal*/ display: block;/* Para que mantengan la altura y el ancho de la lista*/ text-decoration: none;/*Para que no nos lo subraye ni nada por el estilo*/ color: #fff;/*Color del link*/ position: relative;/*es prescindible, pero me gusta tenerlo ah por si despus tengo que posicionarlo*/ } /*Sublista (submen)*/ #menu-altern ul li ul{/*La lista anidada*/ /*No es imprescindible, pero mejor asegurarse de que no nos aparecen sombras raras*/ box-shadow: none; border-radius:0px; /*Corregimos la posicin*/

position: relative; left: -40px;/*correccin de la posicin--->NO NECESARIA SI EN NUESTRO CSS TENEMOS "*{margin:0; padding:0;}"*/ width:117px;/*Anchura-->la misma que la del link y el resto de cosas de antes*/ display:none;/*Que no aparezca por defecto*/ z-index:999;/*Que aparezca encima de todo*/ } #menu-altern ul li ul li{/*Sub-botones*/ display:block; box-shadow: 1px 2px rgba(0,0,0,.3);/*Para que haga el efecto de sombra de toda la lista*/ float:none;/*Era importante mientras lo desarroll para que no sigan flotando a la izda. Ahora es prescindible*/ position:relative; background:#666666;/*Color de fondo*/ z-index:999;/*Que aparezca encima de todo*/ } #menu-altern ul li ul li a{ color:#ffffff;/*Color de los links*/ border:0px;/*Eliminamos el borde derecho que tenamos puesto*/ } #menu-altern ul li ul li:first-child, #menu-altern ul li ul li:first-child a{ /*Para que no sea afectado por la primera correccin*/ margin-left:0px; border-radius:0px; }

#menu-altern ul li ul li:last-child,#menu-altern ul li ul li:last-child a{/*Estilismo para dar borde redondeado al final de la lista*/ border-radius:0px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } /*Estilos pgina(s) destacadas*/ #menu-altern ul li.destacada, #menu-altern ul li.destacada ul li{ background:#C00; } /*Efectos hover (cuando pasas el ratn por encima) meramente estilsticos*/ #menu-altern ul li.destacada:hover, #menu-altern ul li.destacada ul li:hover{ background:#FF1A1A; }

#menu-altern ul li:hover{ background:#888; }

El Javascript
He hecho dos funciones: La primera (la que estoy usando en el blog) es para que se active si haces click, y la segunda para que lo haga al pasar el ratn por encima (hover). Para poder usarlas tenis que tener jQuery. Para ello, en el editor de html de blogger pegis antes de </head>: //Primera $(document).ready(function() { // Muestra y oculta los mens

$('#menu-altern ul li:has(ul)').click( //funcin al hace click en un "li" que tiene una "ul" function() { $(this).find('ul').slideToggle(); }); }); //Segunda $(document).ready(function() { // Muestra y oculta los mens $('#menu-altern ul li:has(ul)').hover( //funcin al pasar el ratn por encima de un "li" que tiene una "ul" function(e) //Primera funcin-->ratn por encima { $(this).find('ul').fadeIn(); }, function(e) //Cuando el ratn deja de estar encima. { $(this).find('ul').fadeOut(); } ); });

Animacin por CSS

El mayor problema que me encontr fue que me cegu en hacer aparecer las listas anidadas con css, y no lo consegu hasta hoy mismo, mientras escribo esta entrada.

Opacidad
Lo haba intentado con opacity:0; y cambiarla al hacer hover a 1, pero esto tena (y tiene) un problema, y es que la lista, a pesar de ser transparente, sigue estando ah. /*Antes de esto debemos de haber configurado "#menu-altern ul li ul" con "display:block"*/ #menu-altern ul li ul li{ display:block; box-shadow: 1px 2px 1px rgba(0,0,0,.3); float:none; position:relative; background:#666666; z-index:999; overflow: hidden; -moz-transition:all 1s;/*Firefox*/ -webkit-transition:all 1s;/*Crome/Safari*/ -ms-transition:all 1s;/*IE-->No funciona todava*/ -o-transition:all 1s;/*Opera*/ transition:all 1s; opacity:0; } #menu-altern ul li:hover ul li{ opacity:1; }

Altura
Lo haba intentado antes, pero no ha sido hasta hoy cuando se me han abierto los ojos. Cambi la altura de los item de la lista anidada a 0, y puse al hacer hover la altura a 35px (la altura del men):

/*Antes de esto debemos de haber configurado "#menu-altern ul li ul" con "display:block"*/ #menu-altern ul li ul li{ display:block; box-shadow: 1px 2px 1px rgba(0,0,0,.3); float:none; position:relative; background:#666666; z-index:999; height:0px; overflow: hidden; -moz-transition:all 1s;/*Firefox*/ -webkit-transition:all 1s;/*Crome/Safari*/ -ms-transition:all 1s;/*IE-->No funciona todava*/ -o-transition:all 1s;/*Opera*/ transition:all 1s; } #menu-altern ul li:hover ul li{ height:35px; }

El resultado
Os dejo con los cuatro resultados diferentes, y un link de descarga de todos los archivos:

256 Colores RGB (8 bits) FF3300 FF3333 FF0033 000000 33FF33 00CC00 00CC00 009900 00FFFF 33FFFF CCCCFF CCCCFF 009999 FFFF33 CCCC00 FF33FF CC00CC 7D337D E100E1 FF3333 FF6633 FF9933 FFCC33 FFFF33 CC0033 CC3333 CC6633 CC9933 CCCC33 CCFF33 990033 993333 996633 999933 99CC33 99FF33 666633 669933 66CC33 66FF33 336633 339933 006633 009933 33CC33 CC3300 CC3333 CC0033 CC0000 66FF66 009900 009900 006600 3333FF 66FFFF 0000CC 000066 FF9999 FFCC99 FF9966 663333 OLIVE 66FF00 FFCCCC CC0066 FF6699 990066 99FF99 006600 006600 66FF00 6666FF 99FFFF 000099 000033 003333 FFFF99 666600 FF99FF 660066 7D997D AF00AF FF3399 FF6699 FF9999 FFCC99 FFFF99 CC0099 CC3399 CC6699 CC9999 CCCC99 CCFF99 990099 993399 996699 999999 99CC99 99FF99 666699 669999 66CC99 66FF99 336699 339999 006699 009999 33CC99 990033 993300 660000 330000 CCFFCC 003300 003300 009900 9999FF CCFFFF 000099 000099 FFFFCC 333300 FFCCFF 330033 7DCC7D 990099 FF33CC FF66CC FF99CC FFCCCC FFFFCC CC00CC CC33CC CC66CC CC99CC CCCCCC CCFFCC 9900CC 9933CC 9966CC 9999CC 99CCCC 99FFCC 6666CC 6699CC 66CCCC 66FFCC 3366CC 3399CC 0066CC 0099CC 33CCCC FF33FF FF66FF FF99FF FFCCFF FFFFFF CC00FF CC33FF CC66FF CC99FF CCCCFF CCFFFF 9900FF 9933FF 9966FF 9999FF 99CCFF 99FFFF 6666FF 6699FF 66CCFF 66FFFF 3366FF 3399FF 0066FF 0099FF 33CCFF

RED FF0000

MAROON 990000

LIME 66FF00

GREEN 00FF00

AQUA 00FFFF 00CCCC YELLOW FUCHSIA TEAL FF3300 FF6600 FF9900 FFCC00 FFFF00 CC0000 CC3300 CC6600 CC9900 CCCC00 CCFF00 990000 993300 996600 999900 99CC00 99FF00 666600 669900 66CC00 66FF00 336600 339900 006600 009900 33CC00

TEAL 006666

BLUE 0000FF

006666 FFFF66 999900 FF66FF 990099 7D667D CC00CC FF3366 FF6666 FF9966 FFCC66 FFFF66 CC0066 CC3366 CC6666 CC9966 CCCC66 CCFF66 990066 993366 996666 999966 99CC66 99FF66 666666 669966 66CC66 66FF66 336666 339966 006666 009966 33CC66

00CC00 33FF00 00FF00 663300 660000 333300 003300 330000 000000

00CC33 33FF33 00FF33 663333 660033 333333 003333 330033 000033

00CC66 33FF66 00FF66 663366 660066 333366 003366 330066 000066

00CC99 33FF99 00FF99 663399 660099 333399 003399 330099 000099

00CCCC 33FFCC 00FFCC 6633CC 6600CC 3333CC 0033CC 3300CC 0000CC

00CCFF 33FFFF 00FFFF 6633FF 6600FF 3333FF 0033FF 3300FF 0000FF

Crear aplicaciones Web

Use NetBeans (o cualquier otro IDE de su eleccin) para crear una nueva aplicacin web. Se utiliza Tomcat. Una vez ms usted puede elegir cualquier servidor que desee. Estoy nombrando el proyecto como SongsSpringJdbc medida que nos Primavera para acceder a la base de datos a travs de JDBC. Aadir biblioteca de Spring Framework 3.0 y biblioteca JSTL al proyecto. Tambin incluya ojdbc14.jar a las bibliotecas, ya que contiene el controlador JDBC de Oracle. Para utilizar AOP con Spring (usamos AOP para la gestin de transacciones), es necesario agregar los siguientes archivos jar.: aopalliance.jar asm-all-3.3.1.jar aspjectjrt.jar aspjectjweaver.jar

He hecho todos estos archivos en una sola descarga en http://www.megafileupload.com/en/file/311042/springdeplib-rar.html . As que descargar y agregar estos archivos. Jar a sus bibliotecas de proyecto a fin de que se colocan en la ruta de clases. Agregue los siguientes archivos del proyecto anterior, canciones con Hibernate , ya que siguen siendo los mismos para este proyecto. Los objetos de esquema en la base de datos, mesa de canciones y secuencia songid, siguen siendo los mismos, por lo que no hay necesidad de crearlos. entidades / Song.java index.jsp addsong.jsp listsongs.jsp

primavera / songs.xml
Este es el archivo de configuracin para beans Spring. <? Xml version = encoding "1.0" = "UTF-8"> <Frijoles xmlns = "http://www.springframework.org/schema/beans" xmlns: xsi = "http://www.w3.org/2001/XMLSchema-instance" xmlns: AOP = "http://www.springframework.org/schema/aop" xmlns: tx = "http://www.springframework.org/schema/tx" xsi: schemaLocation = "http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans3.0.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.0.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsd "> <bean id="oracledatasource" class="org.springframework.jdbc.datasource.DriverManagerDataSource"> <propiedad name="driverClassName" value="oracle.jdbc.driver.OracleDriver" /> <propiedad name="url" value="jdbc:oracle:thin:@localhost:1521:xe" /> <propiedad name="username" value="music" /> <propiedad name="password" value="music" /> </ Bean> <bean id="jdbcTemplate" class="org.springframework.jdbc.core.simple.SimpleJdbcTemplate"> <constructor-arg ref="oracledatasource"/> </ Bean> <bean id="songsbean" class="spring.SongsManagement"> <propiedad name="jdbcTemplate" ref="jdbcTemplate"/> </ Bean> <bean id="txManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManage r"> <propiedad name="fuentedatos" ref="oracledatasource"/> </ Bean> <tx:annotation-driven transaction-manager="txManager" /> </ Beans>

primavera / SongMapper.java
Esto se utiliza para asignar una fila en la tabla Canciones de oposicin cancin. primavera paquete; importar entities.Song; java.sql.ResultSet importacin; java.sql.SQLException importacin; importar org.springframework.jdbc.core.RowMapper; SongMapper clase pblica implementa RowMapper { Cancin mapRow pblico (ResultSet rs, int rownum) throws SQLException { Cancin s = new Song ();

s.setSongid (rs.getInt ("songid")); s.setTitle (rs.getString ("title")); s.setSinger (rs.getString ("cantante")); volver s; } }

primavera / SongsManagement.java
Este es un grano en la primavera que administra canciones. Utiliza JdbcTemplate acceder a la base de datos a travs de JDBC. primavera paquete; importar entities.Song; importar java.util.List; org.springframework.jdbc.core.simple.SimpleJdbcTemplate importacin; importar org.springframework.transaction.annotation.Propagation; importar org.springframework.transaction.annotation.Transactional; SongsManagement public class { JdbcTemplate SimpleJdbcTemplate privado; public void setJdbcTemplate (SimpleJdbcTemplate plantilla) { this.jdbcTemplate = plantilla; } @ Transactional (propagacin = Propagation.REQUIRED) addSong public void (String titulo, String cantante) { jdbcTemplate.update ("insert into valores de canciones (songid.nextval,,)?", ttulo, cantante); } Lista pblica getSongs () { volver jdbcTemplate.query ("select * from orden canciones por ttulo", nuevo SongMapper ()); } }

dao / SongsDAO.java
En esta clase se accede primavera frijol y llama al mtodo para agregar y enumerar las canciones. paquete dao; importar entities.Song; importar java.util.List; org.springframework.context.ApplicationContext importacin; org.springframework.context.support.ClassPathXmlApplicationContext importacin; importar spring.SongsManagement; public class SongsDAO { pblica addSong booleana esttica (Ttulo String, String cantante) { ApplicationContext ctx = new ClassPathXmlApplicationContext ("primavera / songs.xml"); SongsManagement sm = (SongsManagement) ctx.getBean ("songsbean"); try { sm.addSong (ttulo, artista); return true; }

catch (Exception ex) { System.out.println ("Error en addSong () ->" + ex.getMessage ()); return false; } } Lista public static getSongs () { ApplicationContext ctx = new ClassPathXmlApplicationContext ("primavera / songs.xml"); SongsManagement sm = (SongsManagement) ctx.getBean ("songsbean"); volver sm.getSongs (); } }

Eso es Todo
Como el resto de los archivos son los mismos, slo implementar el proyecto y ejecutar index.jsp.