He incluido 4 métodos con los cuales puedes hacer al gusto un objeto scroll. Estos trabajan muy bien y son bien fáciles de entenderlos. Todos estos métodos son opcionales, si no los fijas ellos harán default a algunos valores particulares los cuales he elegido.
Importante: Cuando estés utilizando estos métodos deben de ser nombrados antes que hayas construido el scroll:
objectName = new Scroll(x,y,width,height)
objectName.method()
objectName.build()
Método setMargins() :
Determina los márgenes, izquierdo, arriba, abajo apara los contenidos del objeto scroll
Utilización:
objectName.setMargins(left,right,top,bottom)
Defaults a (10,10,10,10)
setDimensions() Método:
Determina las dimensiones de la barra de scroll y el denso del borde. Los siguientes diagramas te ayudaran con la explicación:
Utilización:
objectName.setDimensions(barX,barY,barW,barH,arrowuH,arrowdH,boxH,border)
Normalmente es (0,0,15,objectName.h,15,15,30,1) - Hace el scroll directamente al lado del scroll frame.
Método setColors() :
Determina el color en varias partes del scroll.
Utilización:
objectName.setColors(background,border,bar,arrow,box)
Los colores deben de ser fijados como una tira (entre comillas). Para hacer que el color sea transparente utiliza nulo null.
Defaults a (null,"#000000","#C5C5C5","#555555","#898989") - fondo transparente, scrollbar gris, flechas negras.
Método setImages():
El Método setImages() es el que siempre querrás utilizar. En lugar de nada mas tener unos cuadrados bien simples para la parte de la barra del scroll, puedes definir tus mismas imágenes. También te he permitido de definir las imágenes que representan un estado de "clic" para que puedas imitar botones 3D.
Puedes fijar imágenes para la caja del scroll (la parte que hace el scroll), la fecha para arriba, la fecha para abajo y la barra vertical de fondo. Para los 3 primeros se encuentran dos estados - 0 cuando no es cliqueado. La barra no tiene un estado de cliqueado.
Utilización:
objectName.setImages(box0,box1,up0,up1,dn0,dn1,bar,dir)
Ejemplo:
myscroll.setImages('box0.gif','box1.gif','arrowUp0.gif','arrowUp1.gif','arrowDn0.gif','arrowDn1.gif','bar.gif')
Si no deseas tener una imagen en algunos de ellos, solamente tienes que utilizar el valor nulo null (sin comillas).
Él dir es opcional y te permite de fijar al directorio en donde todas las imágenes están localizadas:
myscroll.setImages('box0.gif','box1.gif','arrowUp0.gif','arrowUp1.gif','arrowDn0.gif','arrowDn1.gif','bar.gif','../images/')
La Imagen Barra "Bar":
La barra es lo que he nombrado como la parte de atrás de la caja del scroll (realmente yo no se como hay que nombrar a estas cosas). He removido el parámetro altura de la barra "barHeight" y en lugar he agregado dos propiedades mas this.bar.imageW y this.bar.imageH las cuales hacen default a this.bar.width y this.bar.height (fijado por el método Dimensiones(). Esto significa que la imagen insertada para la barra por default esta se estirará a todo el largo de la barra de scroll. Esto es bueno ya que nada mas tienes que tener una imagen pequeña. Pero si en lugar deseas una imagen la cual necesita una altura ya puesta puedes cambiar estos valores manualmente para que la imagen en la barra no se estire:
// debe de ser hecho antes de contruirlo() myscroll.bar.imageW = 20 myscroll.bar.imageH = 350
Por default el objeto scroll recortará las capas en las cuales se encuentran las imágenes. Porque puedo ver que tal vez será necesario que tus imágenes se extiendan un poco más largo, he incluido a la propiedad clipImages la cual se fija en falso false la cual parará a las capas de que recorten las imágenes. La demostración que he proveído hace esto para que las flechas traslapen la caja de scroll.
Ver demo-images.html para un ejemplo de scroll de imágenes hechas al gusto Ver Fuente de Código.
| Casa | Próxima Lección: Objeto Lista |