<div id="main-content" class="wiki-content group">
<h3
id="id-5.ChamadasaZoomsdoDatasulatravésdeFormuláriosnoFluig-5.1.Objetivo">
<strong>5.1. Objetivo</strong>
</h3>
<p align="LEFT" class="western">
<span>El <strong>Fluig</strong>(ECM) debe ser capaz de invocar
zooms en el <strong>Metadados Datasul</strong> para aquellos casos en
que el formulario de entrada de datos se desarrolló por el propio <strong>Fluig</strong>.
</span>
</p>
<p align="LEFT" class="western">
<span>En un formulario Fluig, existiendo un campo que
represente un <strong>zoom Metadatos</strong>, al hacer clice este,
Fluig deberá realizar una llamada HTTP pasando una URL con los
parámetros para abrir una nueva ventana del browser que contenga el <strong>zoom</strong>.
Al lado del Fluig se utilizará un Javascript con el comando <strong>Window.open()</strong>,
de acuerdo con las instrucciones que se presentan en el documento: “<strong>Guía
de Referencia Personalización de Fichаrios.pdf</strong>” del ECM, ítem: <strong>Zoom
Externo</strong>. Al lado del Datasul, la URL lanzada por Fluig abrirá el
zoom del Metadatos utilizando la técnica de <strong><em>External
Call</em></strong> del Framework.
</span>
</p>
<p align="LEFT" class="western">
<span><br /></span>
</p>
<h3
id="id-5.ChamadasaZoomsdoDatasulatravésdeFormuláriosnoFluig-5.2.GuiadeProgramação">
<strong>5.2. Guía de Programación</strong>
</h3>
<p>
A continuación, veremos los pasos necesarios para crear un campo en un
formulario de proceso y asociarlo a un <strong>Zoom</strong> de <strong>Datasul</strong>.
Como ejemplo, vamos a utilizar el zoom de País de la aplicación CRM,
de acuerdo con los siguientes gráficos.
</p>
<p>
<img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/81789187/Screen01.png?version=1&modificationDate=1380907388000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/81789187/Screen01.png?version=1&modificationDate=1380907388000&api=v2">
</p>
<p style="text-align: center;">
<strong>Gráfico 4.2.a</strong>
</p>
<p style="text-align: left; margin-left: 30.0px;">
<strong><br /></strong>Al hacer clic en el botón <strong>"..."</strong>
junto al campo <strong>País</strong> del formulario del Gráfico 4.2.a,
se abrirá la ventana del Gráfico 4.2. b para que el usuario seleccione
un país.
</p>
<p style="text-align: left; margin-left: 30.0px;">
<img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/81789187/Screen02.png?version=1&modificationDate=1380907405000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/81789187/Screen02.png?version=1&modificationDate=1380907405000&api=v2">
</p>
<p style="text-align: center;">
<strong>Gráfico 4.2.b</strong>
</p>
<p style="text-align: left; margin-left: 30.0px;">
<strong><br /></strong>Después de seleccionar un país y hacer clic en
el botón <strong>Seleccionar</strong>, se cerrará la ventana de zoom y
el formulario del proceso recibirá los datos del país seleccionado. Un
script en el formulario HTML será responsable de recibir los datos del
registro y presentar el nombre del país en el campo correspondiente,
como lo muestra el Gráfico 4.2.c.
</p>
<p>
<img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/81789187/Screen3.png?version=1&modificationDate=1380906303000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/81789187/Screen3.png?version=1&modificationDate=1380906303000&api=v2">
</p>
<p style="text-align: center;">
<strong>Gráfico 4.2.c</strong>
</p>
<p> </p>
<h3 style="text-align: left; margin-left: 30.0px;"
id="id-5.ChamadasaZoomsdoDatasulatravésdeFormuláriosnoFluig-CriandoumFormulário">
<strong>Creando un Formulario</strong>
</h3>
<p style="margin-left: 30.0px;">
<u><strong>A.</strong></u> A través del <strong>Fluig Studio</strong>
cree un nuevo <strong>Dataset</strong> para almacenar información de
conexión con el servidor Datasul y credenciales de usuario. Varios
formularios de diferentes procesos que tengan zooms asociados podrán
utilizar este Dataset.
</p>
<p style="margin-left: 60.0px;">
A partir de un <strong>proyecto Fluig</strong> en el <strong>Fluig Studio</strong>
seleccione la carpeta <strong>datasets</strong>, hága clic con el
botón derecho del ratón y seleccione la opción <strong>Nuevo</strong>.
Luego seleccione el ítem <strong>Dataset personalizado Fluig</strong>,
como muestra el gráfico 4.2.d.
</p>
<p style="margin-left: 30.0px;">
<img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/81789187/Screen1.png?version=2&modificationDate=1380907040000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/81789187/Screen1.png?version=2&modificationDate=1380907040000&api=v2">
</p>
<p style="margin-left: 30.0px; text-align: center;">
<strong>Gráfico 4.2.d</strong>
</p>
<p style="margin-left: 60.0px;">A continuación informe los
parámetros de acuerdo con el Gráfico 4.2.e.</p>
<p style="margin-left: 30.0px; text-align: center;">
<img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/81789187/Screen2.png?version=2&modificationDate=1380907129000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/81789187/Screen2.png?version=2&modificationDate=1380907129000&api=v2"><strong>Gráfico
4.2.e</strong>
</p>
<p align="LEFT" class="western" style="margin-left: 60.0px;">
<span>Escriba el siguiente código en el DatasulServerDS:</span>
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Eclipse; brush: javascript; gutter: true"
style="font-size: 12px;">function createDataset(fields, constraints, sortFields) {
var newDataset = DatasetBuilder.newDataset();
// Crea las columnas
newDataset.addColumn("server");
newDataset.addColumn("port");
newDataset.addColumn("user");
newDataset.addColumn("password");
// Crea los registros
newDataset.addRow(new Array('10.80.17.124', '8080', 'framework', 'ZnJhbWV3b3Jr='));
return newDataset;
}</pre>
</div>
</div>
<p align="LEFT" class="western" style="margin-left: 60.0px;">
<span>Todos los <strong>formularios </strong>en el<strong>
Fluig</strong> que hagan acceso a <strong>zooms </strong>en<strong>Datasul
utilizarán ese dataset</strong>. El dataset deberá personalizarse en el
cliente, para contener el servidor y puerto de Datasul, el usuario de
integración y contraseña. La contraseña debe estar provista en
Base64. Para codificar la contraseña a Base64 utilizar la siguiente
función de Javascript:
</span>
</p>
<pre> var pwd64 = btoa("framework");</pre>
<p> </p>
<p align="LEFT" class="western" style="margin-left: 60.0px;">
<span>Después de crear el dataset, haga clic en este con el
botón derecho y seleccione la opción </span><span><strong>exportar</strong></span><span>
para enviar el dataset al<strong>Fluig</strong>, de acuerdo con el <strong>Gráfico
4.2.f</strong>.
</span>
</p>
<p align="LEFT" class="western" style="margin-left: 60.0px;">
<span><img class="confluence-embedded-image"
src="http://tdn.totvs.com/download/attachments/81789187/Screen03.png?version=2&modificationDate=1380909280000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/81789187/Screen03.png?version=2&modificationDate=1380909280000&api=v2"><br /></span>
</p>
<p align="LEFT" class="western"
style="margin-left: 60.0px; text-align: center;">
<strong>Gráfico 4.2.f</strong>
</p>
<p align="LEFT" class="western" style="margin-left: 60.0px;">
<span><br /></span>
</p>
<p align="LEFT" class="western" style="margin-left: 60.0px;">
<span><u><strong>B.</strong></u> Cree un nuevo formulario
haciendo clic con el botón derecho en la carpeta <strong>forms</strong>
del proyecto Fluig. Luego seleccione <strong>Nuevo > Otros >
Fluig > Definición de Formulario</strong>, como se muestra en el Gráfico
4.2.g.<br /></span>
</p>
<p align="LEFT" class="western"
style="margin-left: 60.0px; text-align: center;">
<span><img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/81789187/Fig1.png?version=1&modificationDate=1381756845000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/81789187/Fig1.png?version=1&modificationDate=1381756845000&api=v2"><strong>Gráfico
4.2.g</strong><br /></span>
</p>
<p align="LEFT" class="western" style="margin-left: 60.0px;">
<span><u><strong>C.</strong></u> Para el nombre del formulario
informe <strong>ClienteForm</strong> de acuerdo con el Gráfico 4.2.h.<br /></span>
</p>
<p align="LEFT" class="western"
style="margin-left: 60.0px; text-align: center;">
<span><img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/81789187/Fig2.png?version=1&modificationDate=1381756898000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/81789187/Fig2.png?version=1&modificationDate=1381756898000&api=v2"><strong>Gráfico
4.2.h</strong><br /></span>
</p>
<p align="LEFT" class="western" style="margin-left: 60.0px;">
<span><u><strong>D.</strong></u> Cambie el nombre del
formulario de <strong>DatasulForm.html</strong> (sólo el formulario,
mantenga el nombre de la carpeta como <strong>ClienteForm</strong>)</span>
</p>
<p align="LEFT" class="western" style="margin-left: 60.0px;">
<span><u><strong>E.</strong></u> Sustituya el código del
formulario por el código que está a continuación:</span>
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Eclipse; brush: html/xml; gutter: true"
style="font-size: 12px;"><html>
<head>
<script language="javascript" type="text/javascript" src="/webdesk/vcXMLRPC.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="Datasul.js" language="javascript"></script>
<script>
var server;
var user;
var password;
/**
* Inicializa el formulario y obtiene los datos del dataset 'DatasulServerDS'.
*/
function loadForm() {
try {
// Obtiene los datos del DatasulServerDS
var dataset = DatasetFactory.getDataset("DatasulServerDS", null, null, null);
server = dataset.values[0]["server"] + ":" + dataset.values[0]["port"];
user = dataset.values[0]["user"];
password = dataset.values[0]["password"];
var zoomAppletTag = '<applet' +
' code="com.totvs.framework.md.zoom.fluig.ZoomApplet"' +
' id="dsZoom" height="0" width="0"' +
' codebase="http://' + server + '/datasul/applets"' +
' archive="datasul-framework-mdablscript-java.jar"' +
  ' MAYSCRIPT></applet>';
document.getElementById("zoomApplet").innerHTML = zoomAppletTag;
$("#customForm").load("CustomForm.html");
} catch(e) {
alert(e);
}
}
/**
Realiza la apertura de un formulario Zoom Metadatos.
* @param server
* @param user
* @param password
* @param title
* @param program
*/
function callZoom(program) {
var portNumber = document.dsZoom.getPortNumber();
var url = "http://" + server + "/josso/signon/externalUserAuthentication.do?" +
"josso_cmd=external-login&type=md&program=" + program +
"&viewtype=view&zoomMode=true&userid=" + user +
"&password=" + password +
"&zoomCallBackPort=" + portNumber;
try {
window.open(url, "Zoom" ,"width=800,height=600");
} catch (e) {
alert(e);
}
}
</script>
</head>
<body onload="loadForm()">
<form name="customForm">
<input type="hidden" name="hidden">
<div id="customForm"></div>
<div id="zoomApplet"></div>
</form>
</body>
</html></pre>
</div>
</div>
<p style="margin-left: 30.0px;">
<strong>Obs. El código anterior no debe ni requiere
cambiarse.</strong>
</p>
<p align="LEFT" class="western" style="margin-left: 37.4333px;">
<span><u><strong>F.</strong></u> En la carpeta <strong>ClienteForm</strong>,
haga clic con botón derecho del ratón y seleccione <strong>Nuevo</strong>
> <strong>Archivo</strong>. Añadir un archivo llamado <strong>CustomForm.html</strong>
y sustituya el contenido generado para este por el siguiente código.
En este archivo que se crearán los campos del formulario según el
proceso en el que se utilizará.</span>
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Eclipse; brush: html/xml; gutter: true"
style="font-size: 12px;"><h2>Cliente</h2>
<table>
<tr>
<td align="right" width="150" class="Labels"><b>Código:</b></td>
<td class="Normal"><strong><input type="text" size="6" name="A1_COD"></strong></td>
</tr>
<tr>
<td align="right" width="150" class="Labels"><b>Nome:</b></td>
<td class="Normal"><strong><input type="text" size="40" name="A1_NOME"></strong></td>
</tr>
<tr>
<td align="right" width="150" class="Labels"><b>Nombre Fantasia:</b></td>
<td class="Normal"><strong><input type="text" size="20" name="A1_NREDUZ"></strong></td>
</tr>
<tr>
<td align="right" width="150" class="Labels"><b>Endereco:</b></td>
<td class="Normal"><strong><input type="text" size="40" name="A1_END"></strong></td>
</tr>
<tr>
<td align="right" width="150" class="Labels"><b>Municipio:</b></td>
<td class="Normal"><strong><input type="text" size="40" name="A1_MUN"></strong></td>
</tr>
<tr>
<td align="right" width="150" class="Labels"><b>Estado:</b></td>
<td class="Normal"><strong><input type="text" size="2" name="A1_EST"></strong></td>
</tr>
<tr>
<td align="right" width="150" class="Labels"><b>Pais:</b></td>
<td class="Normal"><strong><input type="text" size="15" name="A1_PAIS"><input value="..."
onClick="callZoom('crm1150.CRUDpais')" type="button"></strong></td>
</tr>
</table>
<script>
/**
* Función utilizada por Zoom Datasul para responder con el registro seleccionado
para el formulario en Fluig.
*/
function zoomCallBack(data) {
try {
var obj = JSON.parse(data);
document.customForm.A1_PAIS.value = obj.nom_pais;
} catch (e) {
alert(e.message);
}
}
</script></pre>
</div>
</div>
<p align="LEFT" class="western" style="margin-left: 37.4333px;">
<span>El contenido del archivo <strong>CustomForm.html</strong>
debe tener las definiciones de los campos del formulario, como se
muestra en el ejemplo anterior. Además se deberá crear la función <strong>zoomCallBack
(datos)</strong>, que será llamado por Datasul después de que el usuario
lleve a cabo la selección del registro en la pantalla Zoom. Esa
función recibirá un string JSON con los datos del registro
seleccionado.
</span>
</p>
<p align="LEFT" class="western" style="margin-left: 37.4333px;">
<span>En el campo <strong>A1_PAIS</strong> que representa el <strong>zoom,</strong>
el evento <strong>onClick</strong> realiza una llamada a la función<strong>
callZoom</strong>(). Esta función recibe como parámetro el <strong>programa
de metadatos</strong> a abrir en el Datasul. Este identificación del programa
debe ser la misma que el formulario completado en el <strong>menú</strong>
de Datasul.<br /></span>
</p>
<p align="LEFT" class="western" style="margin-left: 37.4333px;">
<span><br /></span>
</p>
<p align="LEFT" style="margin-left: 30.0px;">
<u><strong>G.</strong></u> Una vez creado el <strong>DatasulForm.html</strong>
y <strong>CustomForm.htm</strong>l,expórtelos al <strong>Fluig</strong>.
Haga clic en el botón derecho del <strong>DatasulForm.html</strong> y
lleve a cabo la exportación (el archivo <strong>CustomForm.htm</strong>l
se exportará junto automáticamente). En la secuencia informe una
carpeta y concluya la exportación. Una vez finalizada esta etapa, el
formulario se colocará en la central de documentos del Fluig abajo de
la carpeta seleccionada.
</p>
<p> </p>
<p style="margin-left: 30.0px;">
<u><strong>H.</strong></u> Por último, cambie el proceso que utilizará
el <strong>ClienteForm</strong> al asociarle el formulario, como se
muestra en la figura 4.2.i.
</p>
<p align="LEFT" style="margin-left: 30.0px; text-align: center;">
<img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/81789187/Screen07.png?version=1&modificationDate=1380915042000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/81789187/Screen07.png?version=1&modificationDate=1380915042000&api=v2">Gráfico
4.2.i</img>
</p>
<p align="LEFT">
<strong><br /></strong>
</p>
<h3
id="id-5.ChamadasaZoomsdoDatasulatravésdeFormuláriosnoFluig-FunçãoABLScriptparaFormuláriosFreeForm">
<strong>Función ABLScript para Formularios FreeForm</strong>
</h3>
<p>
En el ejemplo visto anteriormente, donde utilizamos el zoom de País, <strong>no
fue necesario realizar ninguna implementación o modificación al lado
del Datasul</strong>. Eso se debe al hecho de que utilizamos un formulario
metadatos del tipo <strong>CRUDFreeForm</strong> como zoom. También
podemos implementar un zoom a través de un formulario <strong>FreeForm</strong>,
en este caso se necesitará crear un código de ABLScript en el
formulario para enviar al Fluig el registro seleccionado por el
usuario. Veremos a continuación un ejemplo de script para <strong>FreeForm</strong>.
</p>
<p align="LEFT" class="western">
<span>Suponiendo que en el formulario <strong>FreeForm</strong>
existe un botón llamado
</span><span><strong>Selecciona,</strong></span><span> que al
accionarse debe cerrar la ventana Metadatos y</span><span> enviar el
registro seleccionado. En el evento de «clic» del botón <strong>Seleccionar</strong>
podremos obtener un script similar a este:
</span>
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Eclipse; brush: plain; gutter: true"
style="font-size: 12px;">DEFINE TEMP-TABLE ttGrid
FIELD num_id AS INTEGER
FIELD nom_pais AS CHARACTER
FIELD nom_nacion AS CHARACTER
FIELD num_ddi AS CHARACTER
FIELD log_suspenso AS LOGICAL
FIELD nom_mascar_cep AS CHARACTER
FIELD cod_pais_ibge AS CHARACTER
FIELD log_cep AS LOGICAL
FIELD cod_pais_erp AS CHARACTER
FIELD log_integrad_erp AS LOGICAL.
DEFINE VARIABLE pais AS CHARACTER.
ttGrid = GETPROPERTY("grid", "selectedItemsCheckbox").
ttGrid:SET-CURRENT(0).
pais = JSON-ENCODE(ttGrid).
CALL-BACK-WINDOW-OPENER(pais, true).
</pre>
</div>
</div>
<p style="margin-left: 30.0px;">
La función CALL-BACK-WINDOW-OPENER() envía los datos del registro
seleccionado para el Fluig y lego cierra la ventana del formulario de
zoom. El primer parámetro debe ser un string con los datos del
registro seleccionado en formato JSON. El segundo parámetro es una
variable de tipo <strong>boolean</strong> que cuando es <strong>true</strong>,
indica la función que la ventana de zoom debe cerrar.
</p>
<p style="margin-left: 30.0px;">De manera similar al ejemplo
anterior, los zooms de CRUDFreemForm responden a Fluig una string JSON
con los campos del registro seleccionado. Al lado del Fluig se pueden
obtener los campos del registro de la siguiente manera:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Eclipse; brush: javascript; gutter: true"
style="font-size: 12px;">var obj = JSON.parse(value);
document.customForm.A1_PAIS.value = obj.records[0].nom_pais;</pre>
</div>
</div>
<pre>
<br /><br />
</pre>
</div>
|