Revisiones:
El DynWindow Objeto es un objeto DHTML el cual crea una ventana arrastrable y contiene el objeto Scroll2 para ver los ficheros externos - imitando de como una ventana real OS trabaja. Una posible utilización para esto es por ejemplo creando unas buenas ventanas de dialogo o proveyendo una forma alternativa para ver documentos HTML.
Constructor:
Los scripts requeridos son dynlayer.js, dynlayer-common.js, mouseevents, drag.js, y dynwindow.js .
<SCRIPT LANGUAGE="JavaScript" SRC="../dynlayer.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="../dynlayer-common.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="../mouseevents.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="../drag.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="../dynwindow.js"></SCRIPT>
Si deseas utilizar la versión Scroll del DynWindow también necesitarás el fichero scroll.js.
Constructor para el Objeto DynWindow:
mywindow = new DynWindow(x,y,width,height)
Para fijar de donde las imágenes son tomadas utiliza el método setImages(directory):
mywindow.setImages('../images/dynwindow/')
Los nombres de los ficheros para las imágenes deben de ser llamados igual como los míos, puedes tomar todas las imágenes utilizadas con solo descargar el DynAPI.
Dale un vistazo bien cerca a las funciones demostradas en las demostraciones mouseDown, mouseMove, y mouseUp, debe de encontrarse en el mismo orden para que esta funcione apropiadamente.
Luego haz la secuencia standard build(), writeCSS(), write(div), activate().
Justamente como en el Scroll2 puedes tener contenido enlinea (inline) al escribir mywindow.divStart y mywindow.divEnd. Si no lo necesitas puedes solamente utilizar el mywindow.div.
Añadir el Scroll2
El scroll2 es opcional, tal vez no desees utilizarlo en caso que quieras hacer algo más complejo dentro de la ventana. Esto es lo que haces:
mywindow.addScroll(16) // enviar ancho de la barra del scroll
mywindow.scroll.imgSet('../images/scroll2/metal/',16,16,37,-1,2,-1,2,1,1) // utilize una imageSet
mywindow.scroll.window.setMargins(5,5,5,5) // opcional
Utilización de DynWindow
Hay solamente un método que estarás utilizando durante la operación de DynWindow:
setTitle(title)
Esto fija el título de la ventana. Usualmente querrás hacer esto al mismo tiempo que cargas un nuevo documento (ver abajo).
Cargando Ficheros
Si no utilizas el Scroll2, puedes continuar cargando contenido externo utilizando el construido adentro DynLayer mywindow.contentlyr
mywindow.contentlyr.load('file.html')
Ese fichero debe de llamar de vuelta al mywindow.contentlyr.loadFinish()
<body onLoad="parent.mywindow.contentlyr.loadFinish(); parent.mywindow.setTitle('My Title')">
Si utilizas el Scroll2, debes de utilizar la propiedad construida adentro scroll:
mywindow.scroll.load('file.html')
Esta vez llamará al parent.mywindow.scroll.activate()
<body onLoad="parent.mywindow.scroll.activate(); parent.mywindow.setTitle('My Title');">
Hay 3 métodos principales:
En este momento no hay una acción de prevención (default) para estos eventos, pero estoy trabajando en ello. Pienso que estaré haciendo un objeto una CajaIcono (IconBox), no directamente relacionada a este Objeto. Luego con asignar el evento onDisminuir "onMinimize" utilizara la CajaIcono (IconBox) para añadir una imagen en la pantalla y cerrar la ventana.
Para disminuir, y restaurar el DynWindow tendré que añadir solamente un poco mas al Scroll2. Esto será añadido.
El oncerrar "onclose" tu probablemente puedes hacerlo como he hecho yo en los ejemplos y solamente esconder la ventana:
// fijar eventos
mywindow.onMinimize = new Function("alert('disminuir')")
mywindow.onRestore = new Function("alert('restaurar')")
mywindow.onClose = new Function("this.lyr.hide()")
Ejemplo: dynwindow1.html [fuente] - para un ejemplo DynWindow sin un Scroll2.
Ejemplo: dynwindow2.html [fuente] - a DynWindow con un Scroll2.
| Casa | Próxima Lección: Objeto Reloj |