El objetivo de este ejercicio es mostrar varias imágenes superpuestas en un mismo control jugando con la transparencia.

Todo el proceso con la imágenes se debe hacer en memoria, sin usar ficheros en disco.

Se han diseñado y codificado 3 controles distintos que encapsulamos en un formulario sin origen.

Como se puede ver en la imagen hemos conseguido que los 3 controles tengan el mismo aspecto.

Los 3 controles son formularios sin origen que se incrustan como Vistas de Datos en el formulario principal.

Los llamaremos Control Muestra Botón, Control Muestra QML y Control Muestra HTML.

Se ha intentado encapsular lo máximo posible los controles. Solo tenemos que fijar el valor de 3 variables locales:

oCFONDO_B64 - Cadena de texto con la codificación Base64 del fondo azul

oCNENE_B64 - Cadena de texto con la codificación Base64 de la imagen del Modelo

oCVESTIDO_B64 - Cadena de texto con la codificación Base64 de la imagen del Vestido

La variable CFONDO_B64 contiene el valor fijo del Fondo azul y por lo tanto solo se pinta una vez, al inicio de los controles Muestra.

El evento Simple click en alguno de los 2 Casilleros con los Modelos o Vestidos ejecutará el manejador Javascript VER_MUESTRA.

Básicamente hace lo siguiente:

oDetermina qué casillero ha sido pulsado (Modelo o Vestido)

oObtiene el registro seleccionado en el casillero

oLee la cadena Base64 del campo de texto que guarda la imagen codificada

oAsigna la cadena Base64 a la variable local correspondiente de cada uno de los 3 controles Muestra

oPone en marcha el Timer de los 3 controles Muestra para que se desencadene el Refresco de las imágenes

VER_MUESTRA

// Este manejador se ejecuta con el evento Simple click de los casilleros de Modelos y Vestidos

var oForm = theRoot.dataView();

var oLista = new VRegisterList(theRoot)

var oRegistro = new VRegister(theRoot)

// ID del Casillero que ha generado el evento de Item Click

var cControl = theRoot.varToString("EVENT_SENDER_ID")

// cItem puede valer NENE o VESTIDO

// Quitamos CAS_ del ID del casillero

var cItem = cControl.slice(4)

var nSeleccionado = 0, cBase64 = ""


// Referencias a los subformularios con las Muestras

var oBoton = oForm.control("CTR_MUESTRA_BOTON");

var oQML   = oForm.control("CTR_MUESTRA_QML");

var oHTML  = oForm.control("CTR_MUESTRA_HTML");

// Referencia al casillero seleccioando

var oCasillero = oForm.control(cControl);

// Tipo de Vista 2 -> Slot o Casillero

// alert("Tipo de Vista: " + oCasillero.viewType())


// Comprobamos el Indicador de Ocultar VESTIDO

var lMostrarVestido = theRoot.varToBool("LMOSTRAR_VESTIDO")


// Item seleccionado, la numeración empieza en 0

try {

       // Si no hay registro seleccionado currentSelect() devuelve error

       nSeleccionado = oCasillero.currentSelect()

}

catch(oError) {

       lMostrarVestido = false

}

if (lMostrarVestido == false) {

       if (cItem == "VESTIDO") {

               theRoot.setVar("LMOSTRAR_VESTIDO",1)

       }

       if (cItem == "OCULTARVESTIDO") {

               cItem = "VESTIDO"

               nSeleccionado = -1;

               cBase64 = "";

       }

}

// alert("Item seleccionado: " + nSeleccionado)

if (nSeleccionado > -1) {

       // Obtenemos la Lista de registros en oLista

       if (oCasillero.getList(oLista) == false) {

               alert("Ha fallado la lectura de la Lista de Items")

       }

       else {

               // alert("Nº de Items: " + oLista.size()) ;

       }

       // Obtenemos el registro seleccionado

       oRegistro = oLista.readAt(nSeleccionado)

       // Obtenemos los ID's de Modelo y Vestido

       theRoot.setVar("ID_" + cItem,oRegistro.fieldToString("ID"))

       // Obtenemos la cadena Base64 desde el campo texto del registro

       cBase64 = oRegistro.fieldToString(cItem + "_B64");

}

// Fijamos la Variable local correspondiente del subformulario

oBoton.root().setVar("C" + cItem + "_B64",cBase64)        

oQML.root().setVar("C" + cItem + "_B64",cBase64)

oHTML.root().setVar("C" + cItem + "_B64",cBase64)


// Actualizamos controles para que el botón <Quitar Vestido> lea la propiedad Activado

oForm.updateControls()


// Arrancamos el Timer para desencadenar el Evento en el subformulario con la Muestra

oBoton.startTimer(100)

oQML.startTimer(100)

oHTML.startTimer(100)



Created with the Personal Edition of HelpNDoc: Free help authoring tool