Componentes JSON&JS (Parte 12 de 12)

El JavaScript     

Una vez creado el fichero JSON del control y agregado a la carpeta Omnis correspondiente, será el momento para añadir el archivo JavaScript que le da soporte (si hemos usado el "JSON Control Editor" esto se habrá hecho automáticamente). Para hacerlo manualmente deberemos añadir lo siguiente al fichero html, que cargue nuestro formulario remoto:

 ≤script type="text/javascript" src="scripts/ctl_net_omnis_mycontrol.js"≥≤/script≥

Si lo colocamos bajo la sección para scripts del archivo "jsctempl.htm" (en la carpeta html) haremos que siempre se incluya en la página HTML que Omnis genera automáticamente para probar nuestro formularios remotos, pero, para la aplicación final, también deberemos incluirlo en la página HTML que lance la aplicación web o móvil desplegada.

Componentes JSON&JS (Parte 11 de 12)

html    

Es obligatorio y permite especificar cómo se generará el HTML inicial que remitirá al cliente el control (es el contenedor del control). Posee los siguientes elementos:

• template

Obligatorio. Básicamente consiste en un texto que conforma la plantilla con el "div" que contendrá el control. Por ejemplo: ≤div %o %s data-props='%p' data-mvprops=‘%m’≥≤/div≥:

JsControls sustituirá el "%o" por los atributos del JavaScript, mediante su "id", por lo que deberá especificarse este elemento, reemplazará el "%s" con el atributo de estilo para la "div", basándose en las propiedades que soporta el control, también reemplazará el "%p" según las propiedades de control que siempre que no sean multi-valor. "%p" es reemplazado por una cadena JSON, que describe un objeto, donde cada uno de sus miembros contiene el nombre de la propiedad y su valor. 

El valor puede haber sido asignado por Omnis según lo requerido, para ciertos tipos de propiedades, tales como "color" e "icon". El cliente JavaScript usará esta cadena para componer un objeto adicional, con la configuración de la propiedad.

JsControls también reemplazará "%m" con las propiedades de control multi-valr. "%m" deberá omitirse si el control no hace uso de éste tipo de propiedades. Como en el caso de "%p", "%m" es sustituido por una cadena JSON, excepto que se trata de una matriz de objetos, con una entrada para cada elemento o valor-múltiple.

• extrastyles

Opcional. Texto no superior a 255 caracteres con los atributos de estilo extra para incluir junto con el atributo de estilo "%s" en la plantilla, por ejemplo: "Margen: 2px".

• padding

Opcional. Deberá ser un entero utilizado para establecer el "padding" (en píxeles) junto con "%s".

• relativeposition

Opcional y booleano. (por defecto "false") Si es "true", el atributo de estilo que reemplaza "%s" usará posicionamiento relativo en lugar de absoluto. 

• nowrap

Opcional y booleano. (por defecto "false") Si es "true", el atributo style que reemplaza el "%s" incluirá "white-space nowrap".

Ejemplo:

"html": {

"template": "

", "extrastyles":"margin:1px;"

}

La "div" resultante para el control podría verse así:

≤div style='position:absolute; top:0px; left:0px; height:106px; width:88px; font- family:'Times New Roman',Georgia,Serif; font-size:12pt;font- weight:bold; font- style:italic;text-align:right;color:#00FFFF; overflow- x:auto; overflow-y:auto;margin:1px;' data-backgroundcolor='#555555; rgba(85,85,85,1.0000)' data-dragmode='1' data- effect='1' data-linestyle='1' data-bordercolor='16711935' data- props='{"headercolor":"#FF0000","headericon":"icons/datafile/omnispic/001663 n16.png? 46", "rangeofinternalconstants":14, "rangeofexternalconstants":5, "headerpattern": 1, "headerfontstyle":4, "headerlinestyle":7, "headermultiline":"Lots of text entered like this\rwith multiple\rlines\r", "headerset": 13, "headerremotemenu":"NewRemoteMenu", "headerfont":"Courier New,Monospace"}'  data- mvprops='[{"mvprop1":1,"mvprop2":false,"mvprop3":""}, {"mvprop1": 2,"mvprop2":true, "mvprop3":"NewRemoteMenu"}, {"mvprop1": 2,"mvprop2":true,"mvprop3":"aaaa"}]'≥≤/div≥

Es importante el uso de comillas simples para encerrar los atributos de la plantilla, ya que JSON incluye comillas dobles. JsControls escapará el uso de comillas simples en el JSON que se inserten en como \u0027.

customtabname

El elemento "customtabname" es opcional y permite especificar el nombre que tendrá en la ficha de propiedades el control, al mostrarse sobre el "Property Manager".