Objeto Lista

El Objeto Lista es un widget de selección genérica, algo como un Lista de Selección HTML pero mucho más configurable. He creado específicamente este objeto con la intención de que este sea incorporado adentro de widgets más largos y complejos - esta se forma a los principios básicos como otros widgets son creados. Los widgets que he creado cuales utilizan este objeto son Lista de Selección, Lista de Scroll, y Lista de Menu.

Aquí esta como la Lista default aparecerá:

Todos los colores, espacios, letras, y por supuesto los artículos contenidos son cambiables fácilmente. También he incluido código para que así puedas hacer una lista con columnas múltiples, y tener un imagen cambiable adentro de la lista. El último es principalmente utilizado por el Objeto MenuList.

Creando una Lista

Lo primero que necesitas es dynlayer.js y list.js

Son solamente cuatro parámetros que son necesitados inicialmente:

objectName = new List(x,y,width,itemH)

El parámetro itemH es opcional. Esto da referencia a la altura y cada artículo en la lista. Para hacer el Objeto Lista un poco mejor, he dejado esto que sea indefinido, y hacer que la lista se produzca automáticamente ella misma de acuerdo con la altura mínima que cada artículo tiene que ser. Esto evita cualquier problema con el tamaño de las letras dentro de plataformas así no importa cuales letras son utilizadas, el texto adentro de la lista estará siempre compacto y igualmente espaciado. La única desventaja para esto es que toma un poquito mas largo para iniciar y nunca podrás saber la altura de la lista. Si fijas el artículoH "itemH" apropiadamente podrás entonces fijar una altura específica.

Ejemplos:

mylist = new List(30,40,150)  // itemH estara siendo cuidado automaticamente

mylist = new List(30,40,150,30) // cada articulo "item" sera de 30 pixeles de altura

Agregando artículos a la Lista

Para agregar artículos a la lista tienes que utilizar el método add():

objectName.add(value,text)

El valor value especificado es de como cada artículo contendrá la data. Esto podrá ser cualquier variable; un número, una tira (como un URL), o hasta arrays y objetos. El texto text será el texto mostrado en la Lista.

Ejemplo:

mylist.add('index.html','Home')
mylist.add('page1.html','Page 1')
mylist.add('page2.html','Page 2')

Lista de Múltiples Columnas

Este objeto Lista puede ser utilizado para imitar una tabla de artículos con solamente utilizar la característica de múltiples columnas. Para hacer esto debes de añadir en número deseado de los valores de la célula de texto en el método add() también:

objectName.add(value,text1,text2,text3 etc....)

Debes de fijar los anchos de las columnas antes de que hagas esto. Solamente manda una lista del ancho de los pixeles al método setCols(). Aquí hay un ejemplo:

mylist = new List(50,50,150)
mylist.setCols(50,50,50)  // 3 columnas, harán el total del ancho
mylist.add(0,'item','0','zero')
mylist.add(1,'item','1','one')
mylist.add(2,'item','2','two')
mylist.add(3,'item','3','three')
mylist.add(4,'item','4','four')

Creando y Activando la Lista

Esto está hecho como todos mis widgets. Llama al método build() cuando hayas terminado de fijar todo, escribe las CSS y Div´s en la página y luego llama al método activate(). Aquí hay un ejemplo completo:

<html>
<head>
<title>The Dynamic Duo - List Object Demo 1</title>
<script language="JavaScript" src="../dynapi/dynlayer.js"></script>
<script language="JavaScript" src="list.js"></script>
<script language="JavaScript">

function init() {
	mylist.activate()
}

mylist = new List(50,50,150)
mylist.add('zero','item 0')
mylist.add('one','item 1')
mylist.add('two','item 2')
mylist.add('three','item 3')
mylist.add('four','item 4')
mylist.build()

writeCSS (
mylist.css
)

</script>
</head>

<body bgcolor="#ffffff" onLoad="init()">

<script language="JavaScript">
document.write(mylist.div)
</script>

</body>
</html>

Ver el código de arriba list1.html. Ver Fuente de Código.

Ver list2-multicol.html para un ejemplo de una lista con múltiple columnas. Ver Fuente de Código.

Haciendo la Lista al Gusto

Las propiedades abajo pueden ser utilizadas para cambiar como se ve la lista. Estos son los defaults:

itemSpacing = 1
fontname = 'Helvetica'
fontsize = 11
visibility = 'inherit'

color.textNormal = '#000000'
color.textSelected = '#FFFFFF'
color.bgNormal = '#E6E6E6'
color.bgSelected = '#0000A0'
color.bgRollover = '#D1D1D1'
color.bg = '#C0C0C0'

Los únicos que son necesarios de explicar son las propiedades itemSpacing y color.bg. El itemSpacing es el número de pixeles que separa a cada artículo en la lista. El color de fondo (color.bg) será un color entre los artículos. Las otras propiedades se explican ellas mismas.

Ver list3-custom.html para un ejemplo de una Lista que tiene diferentes colores y cosas. Ver Fuente

Otras Propiedades y Métodos

La Lista tiene propiedades y métodos creados adentro de ella, para que puedas utilizarlos en cualquiera ocasión.

Propiedades:

lyr (DynLayer)
un Dynlayer asociado con la capa de mas-alto de la Lista, toda funcionalidad del DynLayer puede ser disponible para la Lista por esta propiedad/objeto
value (cualquier variable)
esto reflejará el valor del artículo seleccionado en este momento
selectedIndex (integer)
El número de índice del artículo seleccionado en este momento
items (array)
un array de todos los artículos, así es como estos estan guardados en el código de la Lista
items[x].selected (boolean)
utilizado para chequear si el artículo "x" ha sido seleccionado
items[x].value (any variable)
el valor del artículo "x"
items[x].text (tira, o un array de tiras)
la tira de texto de los artículos "x", lo que estan visualmente mostrado en la Lista. Si utilizas la opción de columnas múltiples, este valor es un array de todos los valores de texto mandados en el método add()(items[x].text[0], items[x].text[1] etc)
multipleSeleccion "multiSelect" (boolean)
determina si los artículos múltiples pueden ser seleccionados, falso por default (solamente uno puedes ser seleccionado). Nota: cuando esto esta permitido, las propiedades del valor y selectIndex no pueden realmente ser utilizadas porque estas reflejaran solo los artículos que fueron seleccionados de último. Tendrás que alrededor de los items[] array para encontrar todos los artículos seleccionados y los valores apropiados.
permiteDeseleccionar "allowDeselect" (boolean)
determina si no puedes hacer una no selección de un artículo con solo cliquearlo de nuevo, falso por default (una vez que es seleccionado, no puede ser deseleccionado). Este valor no tiene efecto si la opción multiSelect es verdadera.

preSelect (integer)

hará la Lista pre seleccionar un artículo dado cuando es activado

w (integer)

devuelve el ancho de la Lista

h (integer)

devuelve la altura total de la Lista. Si estas utilizando la característica "auto-tamaño" este valor debe solamente de ser utilizado después de que ha sido desactivada.

Métodos:

select(index)
selecciona el artículo dado
deselect(index)
deselecciona el artículo dado
setImage()
explicado abajo

Ver list4-props.html para un ejemplo utilizando casi todas estas propiedades, te daré un mejor idea de como utilizarlas Ver la Fuente de Código.

El Evento onSelect

El evento onSelect es llamado después que un artículo es seleccionado. Usualmente debes de asignar un controlador a este evento para hacer algo como redirigir el browser a un url (el cual debe de ser fijado por los valores de los artículos en la lista). Para asignar el controlador, solamente fíjelo a una función que tu creas:

objectName.onSelect = myFunction

Esa función vendrá a ser parte del Objeto List y podrás utilizar cualquiera de las propiedades. Como un ejemplo de la función, ya he incluido un controlador para redirigir en el Objeto List ( tu tienes que asignar el controlador manualmente):

function ListRedirect() {
	location.href = this.value
}

Para asignar este solamente tienes que escribir:

objectName.onSelect = ListRedirect

Ver list5-redirect.html para un ejemplo de redirigir Ver Fuente de Código.

La Opción Imagen

He implementado una opción imagen especialmente para el uso en el objeto MenuLista ,pero esto puede ser de uso en otro lugar. Lo que esto hace es pegar a una imagen en el lado derecho del artículo, y cambiará a esta con un estado 'selected' imagen cuando cliqueas en ello. Para la ListaMenu, esto usualmente será una imagen de una fecha. Por default esta imagen aparecerá en el lado derecho, pero esto puede ser cambiable si editaras la fuente de código para el Objeto Lista.

Para utilizar esta opción tienes que utilizar dos etapas. Primero tienes que llamar al método setImage():

object.setImage(image0,image1,width,height)

Donde:

Ejemplo:

mylist.setImage('image-off.gif','image-on.gif',20,20)

Después de llamar a este método, debes de asignar la imagen a los artículos que deseas. Puedes hacer esto con solo fijando una propiedad adicional, hasImage, a los artículos que deseas:

mylist.setImage('image-off.gif','image-on.gif',20,20)
mylist.items[0].hasImage = true

Ver list6-image.html para un ejemplo de una imagen. Ver Fuente de Código.

Este objeto por el mismo es suave, no lo he escrito con la intención de que este sea utilizado individualmente, en lugar para ser utilizado como las bases en otros widgets que tengo en mente. Para ver lo que he hecho para extender este objeto lee sobre este en las lecciones siguientes:

Fuente de Código

Descargar: list.js
Ver Fuente: list.js

Casa Próxima Lección: SelectList Objeto
copyright 1998 Dan Steinman