I. INFORMACIÓN
JSConstructor permite crear y destruir elementos HTML en tiempo de ejecución.
Cuando usted agrega el UC a su webpanel, automáticamente son agregados también:
SDT:
- SDT_JSConstructor
Variables de Webpanel:
- JSConstructorValores : SDT_JSConstructor
- JSConstructorValor : SDT_JSConstructor.SDT_JSConstructorItem
Mediante el uso de estas variables usted podrá configurar el elemento HTML previo a ser creado.
IMPORTANTE:
El elemento creado con JSConstructor no se relaciona con las variables o elementos Genexus, pero le permitirá crear visualizaciones que de otro modo tal vez se encuentren limitadas. Si usted sabe cómo relacionar el elemento con Genexus, agréguelo a este proyecto y compártalo con todos, por favor. Gracias!
II. MODO DE USO
2.1. PROCEDIMIENTO CREAR ELEMENTO
-
Agregue el UC a su Webpanel del modo habitual.
-
Renombre el UC según sus requerimientos.
-
Renombre las variables de tipo SDT_JSConstructor según sus requerimientos.
-
En la ventana de Eventos, agregue los pares de valores a la variable de tipo SDT_JSConstructor, de acuerdo a sus requerimientos.
-
Ejecute el método Crear() del UC, enviando los parámetros requeridos por el mismo.
-
Consulte el valor de las propiedades qcExito y qcMensaje del UC para averiguar el resultado de la operación.
>> REFERENCIA:
Crear(ParentId:Character, NodeName:Character, ParamValores:SDT_Constructor): Void
ParentId : ID del elemento HTML que contendrá al elemento a crear.
NodeName : Nombre del TAG HTML del elemento a crear.
ParamValores : Lista de pares de propiedad/valor a asignar al elemento a crear.
IMPORTANTE:
Tenga en cuenta el lugar donde el elemento será emplazado tras ser creado: esto lo define en el primer párametro del método Crear(); si usted envía un valor vacío en este parámetro, el UC asumirá que el nuevo elemento será agregado al elemento BODY de la página HTML.
>> EJEMPLO
Event Start
// Esto enviará mensajes de depuración en ejecución
// (utiliza la librería Javascript gx.dbg).
// Por defecto, la depuración está desactivada.
JSConstructor.qcDepurar = true
EndEvent
// Subrutina de ejemplo:
Sub "Crear"
// Esta es una carga manual, usted puede hacerla de manera
// dinamica, colocando, por ejemplo, la variable SDT en su webpanel, etc...
&JSConstructorValor = New SDT_JSContructor.SDT_JSContructorItem()
&JSConstructorValor.Propiedad = "id"
&JSConstructorValor.Valor = "MyInnerDiv"
&JSConstructorValores.Add(&JSConstructorValor)
&JSConstructorValor = New SDT_JSContructor.SDT_JSContructorItem()
&JSConstructorValor.Propiedad = "style"
&JSConstructorValor.Valor = "width:100%; color:#CC0000"
&JSConstructorValores.Add(&JSConstructorValor)
// Continue llenando la variable &JSConstructorValores ...
// Agregue el nuevo elemento a la página:
JSConstructor1.Crear("MyDiv", "div", &JSConstructorValores)
// Consulte el resultado:
If JSConstructor1.qcExito
Msg("Elemento Creado!")
Else
Msg("Error: " + JSConstructor1.qcMensaje)
EndIf
// Puede reutilizar el UC para crear todos los elementos que desee,
// para eso recuerde vaciar la variable SDT al finalizar o previo
// a la ejecución del método Crear():
&JSConstructorValores.Clear()
EndSub
// Llame a la subrutina desde un evento Genexus o personalizado:
Event Enter
Do "Crear"
EndEvent
2.2. PROCEDIMIENTO DESTRUIR ELEMENTO(S)
-
Agregue el UC a su Webpanel del modo habitual.
-
Renombre el UC según sus requerimientos.
-
Ejecute el método Destruir() del UC, enviando los parámetros requeridos por el mismo.
-
Consulte el valor de las propiedades qcExito y qcMensaje del UC para averiguar el resultado de la operación.
>> REFERENCIA:
Destruir(ParentId:Character, DOMId:Character): Void
ParentId : ID del elemento HTML que contiene los elementos a Remover.
DOMId : ID del elemento HTML que desea Remover.
>> EJEMPLOS:
// Ejemplo 1: Remueve de la pagina el elemento de ID "MiCheckbox":
JSConstructor1.Destruir("", "MiCheckbox");
// Ejemplo 2: Remueve de la pagina el elemento de ID "MiImagen" del
// contenedor "DivGaleria": Si el elemento "MiImagen" no es un Nodo dentro
// de "DivGaleria", no se remueve nada, aun si "MiImagen" esta presente
// en otro sector de la página.
JSConstructor1.Destruir("DivGaleria", "MiImagen");
// Ejemplo 3: Remueve de la pagina Todos los Nodos dentro de "MiContenedor"
JSConstructor1.Destruir("MiContenedor", "");
III. CONSIDERACIONES ESPECIALES
3.1. REUSABILIDAD
El UC puede ser reutilizado para crear distintos elementos HTML, siempre y cuando la llamada al método Crear() se realice en distintas instancias.
Esto quiere decir que si desea crear varios elementos durante una misma ejecución, deberá agregar a su WebPanel un UC por cada elemento a crear.
EJEMPLO 1
// En este ejemplo, hay una llamada al método Crear() del mismo UC,
// pero en distintos momentos, o eventos del WebPanel:
Event "CrearImagen"
&JSConstructorValores.Clear()
&ParentId = "MiContenedor"
&TagHtml = "img"
&JSConstructorValor = New SDT_JSContructor.SDT_JSContructorItem()
&JSConstructorValor.Propiedad = "id"
&JSConstructorValor.Valor = "MiImagen"
&JSConstructorValores.Add(&JSConstructorValor)
&JSConstructorValor = New SDT_JSContructor.SDT_JSContructorItem()
&JSConstructorValor.Propiedad = "src"
&JSConstructorValor.Valor = "./HolaMundo.jpg"
&JSConstructorValores.Add(&JSConstructorValor)
Do "CrearElemento"
EndEvent
Event "CrearTextbox"
&JSConstructorValores.Clear()
&ParentId = "MiFormulario"
&TagHtml = "input"
&JSConstructorValor = New SDT_JSContructor.SDT_JSContructorItem()
&JSConstructorValor.Propiedad = "id"
&JSConstructorValor.Valor = "MiTextbox"
&JSConstructorValores.Add(&JSConstructorValor)
&JSConstructorValor = New SDT_JSContructor.SDT_JSContructorItem()
&JSConstructorValor.Propiedad = "type"
&JSConstructorValor.Valor = "text"
&JSConstructorValores.Add(&JSConstructorValor)
Do "CrearElemento"
EndEvent
Sub "CrearElemento"
JSConstructor1.Crear(&ParentId, &TagHtml, &JSConstructorValores)
EndSub
EJEMPLO 2
// En este ejemplo, se requiere crear varios elementos HTML durante la misma
/ instancia. Para salvar este detalle, se crea un UC por cada elemento a crear.
Event "CrearVarios"
&JSConstructorValores.Clear()
&ParentId = "MiContenedor"
&TagHtml = "img"
&JSConstructorValor = New SDT_JSContructor.SDT_JSContructorItem()
&JSConstructorValor.Propiedad = "id"
&JSConstructorValor.Valor = "MiImagen"
&JSConstructorValores.Add(&JSConstructorValor)
&JSConstructorValor = New SDT_JSContructor.SDT_JSContructorItem()
&JSConstructorValor.Propiedad = "src"
&JSConstructorValor.Valor = "./HolaMundo.jpg"
&JSConstructorValores.Add(&JSConstructorValor)
JSConstructorIMG.Crear(&ParentId, &TagHtml, &JSConstructorValores)
&JSConstructorValores.Clear()
&ParentId = "MiFormulario"
&TagHtml = "input"
&JSConstructorValor = New SDT_JSContructor.SDT_JSContructorItem()
&JSConstructorValor.Propiedad = "id"
&JSConstructorValor.Valor = "MiTextbox"
&JSConstructorValores.Add(&JSConstructorValor)
&JSConstructorValor = New SDT_JSContructor.SDT_JSContructorItem()
&JSConstructorValor.Propiedad = "type"
&JSConstructorValor.Valor = "text"
&JSConstructorValores.Add(&JSConstructorValor)
JSConstructorINPUT.Crear(&ParentId, &TagHtml, &JSConstructorValores)
EndEvent
3.2. W3C Y NAVEGADORES
3.2.1. DOCTYPE
En todos sus documentos HTML recuerde siempre declarar el DOCTYPE del mismo.
Esto previene que su aplicación tenga comportamientos inesperados según el navegador.
En Genexus, esto se define en:
* PANELES:
-> Preferences
-> (Plataforma de Implementación. Ej. ".NET Environment")
* PROPIEDADES:
-> User Interface
-> Web Interface
-> HTML Document Type
3.2.2. NAVEGADOR
Tenga presente que no todos los navegadores manejan las mismas propiedades y atributos de los elementos HTML.
Mientras se encuentre en entorno de Desarrollo, utilice siempre la opción "Depurar" de su UC para poder ir capturando todas las acciones ejecutadas por el UC en distintos navegadores, de modo de poder llegar a usar la menor cantidad de atributos y propiedades conflictivas, o bien poder averiguar cuál propiedad o atributo HTML asignar al elemento creado, según el navegador en uso.
Para detectar el navegador en Genexus, invoque a la función global BrowserID().
3.2.3. OBJETO STYLE:
El objeto style de los elementos HTML tiene distinto modo de acceder según el navegador:
En FireFox usted puede realizar esta asignación sin problemas:
elemento.style = "top:5px; width:50px";
Sin embargo, IE no admite este tipo de asignación directa, y deberá hacerla por separado:
elemento.style.top = "5px";
elemento.style.width = "50px";
En Genexus, significará que deberá agregar 2 elementos a la colección de propiedades/valor del método Crear(), en vez de sólo 1.
Ya que la sintaxis desglosada es compatible tanto para FireFox como para IE, opte siempre por ella, antes que por la agrupada.
Ejemplo:
&JSConstructorValor = New SDT_JSContructor.SDT_JSContructorItem()
&JSConstructorValor.Propiedad = "top"
&JSConstructorValor.Valor = "5px"
&JSConstructorValores.Add(&JSConstructorValor)
&JSConstructorValor = New SDT_JSContructor.SDT_JSContructorItem()
&JSConstructorValor.Propiedad = "width"
&JSConstructorValor.Valor = "50px"
&JSConstructorValores.Add(&JSConstructorValor)
3.3. ATRIBUTOS HTML
Usted puede configurar todos los atributos que desee, del nuevo elemento. Algunos atributos típicos son:
- id (*)
- name (*)
- type
- className
- style
- value
- innerHTML
- src
- href
(*) Se recomienda siempre enviar estos atributos, ya que son muy útiles.
OBSERVACIONES:
-
Recuerde que no todos los elementos comparten los mismos atributos. Si el atributo no existe para el elemento HTML a crear, el UC lo ignorará y continuará con el siguiente atributo de la lista.
-
Usted puede obligar al UC a que aplique todos los atributos HTML al elemento, mediante la opción "ForzarPropiedad" del UC.
IV. ERRORES (BUGS)
A la fecha de última versión de este UC, existen los siguientes fallos o bugs:
-
En ciertas ocasiones, Genexus no reconoce el valor de las propiedades qcExito ni qcMensaje del UC, por lo que no podrá comprobar desde Genexus si el elemento fue creado/destruido o no en la página.
*** MUCHAS GRACIAS POR USAR ESTE USER CONTROL ***
NO OLVIDE DEJAR SUS COMENTARIOS Y SUGERIR MEJORAS.