ver Control Muestra HTML

Para mostrar las imágenes usamos un control visor HTML.

En el código HTML, guardado en la variable local CHTML_MAQUETA, se han incluido marcadores donde debemos insertar la imagen codificada como Base64.

Los marcadores son:

o<<CFONDO_B64>>  para embeber la imagen de fondo

o<<CNENE_B64>>  para embeber la imagen del  Modelo

o<<CVESTIDO_B64>>  para embeber la imagen del Vestido

o<<MOSTRAR_VESTIDO>>  para mostrar u ocultar la capa del Vestido

En el comando Set (CHTML_MAQUETA, /*JAVASCRIPT*/ ...) utilizamos una fórmula JavaScript porque el editor dispone de fuente de espaciado fijo y de un tamaño adecuado a mis dioptrias. En JavaScript utilizamos el caracter backslash para que podamos introducir una cadena multilínea. Las comillas simples de JavaScript nos permiten utilizar las comillas dobles en el código HTML.

VARIABLE LOCAL CHTML_MAQUETA


function get_html() {

       // Usamos JavaScript para asignar un valor ya que en el editor de JS disponemos de tipo de letra de espaciado fijo y de mayor tamaño

       return '\

       <!DOCTYPE html>\

       <html>\

       <head>\

       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />\

       <title>Recortables</title>\

       <style type="text/css">\

       body { overflow:hidden; }\

       html { overflow:hidden; }\

       .recortable {\

               position: absolute;\

               height: 300px;\

               width: 150px;\

               left: 0px;\

               top: 0px;\

       }\

       </style>\

       </head>\

       <body>\

<!-- Tenemos 3 capas superpuestas -->\

       <div id="capa_fondo" class="recortable"><img src="data:image/png;base64,<<CFONDO_B64>>"/></div>\

       <div id="capa_modelo" class="recortable"><a href="#"><img src="data:image/png;base64,<<CNENE_B64>>"/></a></div>\

       <div id="capa_vestido" class="recortable"><a href="#"><img src="data:image/png;base64,<<CVESTIDO_B64>>" /></a></div>\

       <script>\

       document.getElementById("capa_vestido").style.visibility="<<MOSTRAR_VESTIDO>>"; \

       </script>\

       </body>\

       </html>\

       '

}

get_html()


La imagen de Fondo se carga el el PRE_INIT del formulario. Usamos la función loadResource() de la clase VImagen para obtener un objeto oImagen del que obtenemos la cadena Base64 mediante la clase VByteArray.

CARGAR_FONDO

importClass("VImage");

importClass("VByteArray");


var oByteArray = new VByteArray()

var oImagen = new VImage();


// Obtenemos el fondo de un recurso gráfico del proyecto

var cIDRef = theApp.mainProjectInfo().alias() + "/IMG_FONDOAZUL"

oImagen.loadResource(cIDRef)


if (oImagen) {

       // Obtenemos el ByteArray desde el objeto Image

       oByteArray = oImagen.saveToData("PNG",0)

       // Pasamos el contenido del ByteArray a Base64

       var oByteArrayBase64 = oByteArray.toBase64()

       // Obtenemos el String para guardarlo en la variable local

       var cBase64 = oByteArrayBase64.toLatin1String()

       theRoot.setVar("CFONDO_B64",cBase64)

}


El evento Timer del formulario ejecutará el manejador MOSTRAR_IMAGENES.

MOSTRAR_IMAGENES

importClass("VImage");

importClass("VByteArray");

var cBase64 = ""

var cHTMLMaqueta = theRoot.varToString("CHTML_MAQUETA")

var cHTML = "", cVisible = ""

var oForm = theRoot.dataView();

var oHTML = oForm.control("CTR_HTML")


// Paramos el Timer que ha desencadenado el Evento de refresco

oForm.stopTimer()


// Cargamos el NENE

cBase64 = theRoot.varToString("CNENE_B64");

cHTML = cHTMLMaqueta.replace("<<CNENE_B64>>",cBase64)


// Cargamos el VESTIDO

cBase64 = theRoot.varToString("CVESTIDO_B64");

cHTML = cHTML.replace("<<CVESTIDO_B64>>",cBase64)

cVisible = (cBase64.length > 0 ? "visible" : "hidden")


theRoot.setVar("CVESTIDO_VISIBLE",cVisible)

cHTML = cHTML.replace("<<MOSTRAR_VESTIDO>>",cVisible)        


// Establecemos el contenido del Control HTML

// theRoot.setVar("CHTML",cHTMLMaqueta)

oHTML.setSourceCode(cHTML)


// Tenemos que delegar los clicks siempre después de fijar el código HTML, de lo contrario no funciona

oHTML.setLinkDelegationPolicy(VCWebView.DelegateAllLinks);






Created with the Personal Edition of HelpNDoc: Free CHM Help documentation generator