| Índice |
|---|
| outline | true |
|---|
| style | none |
|---|
| exclude | .*ndice |
|---|
|
Al publicar una definición de formulario no se recomienda utilizar declaraciones:
| Bloco de código |
|---|
|
<div id="main-content" class="wiki-content group">
<div>
<h1 id="CustomizaçãodeFormulários-Índice">Índice</h1>
<p> </p>
<p>
<style type='text/css'>/*<![CDATA[*/
div.rbtoc1412695666268 {
padding: 0px;
}
div.rbtoc1412695666268 ul {
list-style: none;
margin-left: 0px;
}
div.rbtoc1412695666268 li {
margin-left: 0px;
padding-left: 0px;
}
/*]]>*/
</style>
<div class='toc-macro rbtoc1412695666268'>
<ul class='toc-indentation'>
<li><span class='TOCOutline'>1</span> <a
href='#CustomizaçãodeFormulários-Declaração<!DOCTYPE>HTML'>Declaración
<!DOCTYPE > HTML</a></li>
<li><span class='TOCOutline'>2</span> <a
href='#CustomizaçãodeFormulários-FormController'>FormController</a></li>
<li><span class='TOCOutline'>3</span> <a
href='#CustomizaçãodeFormulários-CustomizaçãodeFormulários'>Personalización
de Formularios</a>
<ul class='toc-indentation'>
<li><span class='TOCOutline'>3.1</span> <a
href='#CustomizaçãodeFormulários-AfterProcessing'>AfterProcessing</a></li>
<li><span class='TOCOutline'>3.2</span> <a
href='#CustomizaçãodeFormulários-AfterSaveNew'>AfterSaveNew</a></li>
<li><span class='TOCOutline'>3.3</span> <a
href='#CustomizaçãodeFormulários-BeforeProcessing'>BeforeProcessing</a></li>
<li><span class='TOCOutline'>3.4</span> <a
href='#CustomizaçãodeFormulários-DisplayFields'>DisplayFields</a></li>
<li><span class='TOCOutline'>3.5</span> <a
href='#CustomizaçãodeFormulários-EnableFields'>EnableFields</a></li>
<li><span class='TOCOutline'>3.6</span> <a
href='#CustomizaçãodeFormulários-InputFields'>InputFields</a></li>
<li><span class='TOCOutline'>3.7</span> <a
href='#CustomizaçãodeFormulários-SetEnable'>SetEnable</a></li>
<li><span class='TOCOutline'>3.8</span> <a
href='#CustomizaçãodeFormulários-ValidateForm'>ValidateForm</a></li>
</ul></li>
<li><span class='TOCOutline'>4</span> <a
href='#CustomizaçãodeFormulários-Controlesvisuais'>Controles
visuales</a>
<ul class='toc-indentation'>
<li><span class='TOCOutline'>4.1</span> <a
href='#CustomizaçãodeFormulários-MáscaradeCampos'>Máscara de
Campos</a></li>
<li><span class='TOCOutline'>4.2</span> <a
href='#CustomizaçãodeFormulários-ComboBox'>ComboBox</a></li>
<li><span class='TOCOutline'>4.3</span> <a
href='#CustomizaçãodeFormulários-Zoom'>Zoom</a></li>
<li><span class='TOCOutline'>4.4</span> <a
href='#CustomizaçãodeFormulários-ZoomExterno'>Zoom Externo</a></li>
</ul></li>
<li><span class='TOCOutline'>5</span> <a
href='#CustomizaçãodeFormulários-ServiçosdeDados'>Servicios de
Datos</a>
<ul class='toc-indentation'>
<li><span class='TOCOutline'>5.1</span> <a
href='#CustomizaçãodeFormulários-Dataset'>Dataset</a></li>
<li><span class='TOCOutline'>5.2</span> <a
href='#CustomizaçãodeFormulários-DataService'>DataService</a></li>
</ul></li>
<li><span class='TOCOutline'>6</span> <a
href='#CustomizaçãodeFormulários-PaiFilho'>Padre Hijo</a>
<ul class='toc-indentation'>
<li><span class='TOCOutline'>6.1</span> <a
href='#CustomizaçãodeFormulários-PaiFilhoRadioButton'>Padre
Hijo Radio Button</a></li>
<li><span class='TOCOutline'>6.2</span> <a
href='#CustomizaçãodeFormulários-EventosdeFormulárioPaiFilho'>Eventos
de Formulario Padre Hijo</a>
<ul class='toc-indentation'>
<li><span class='TOCOutline'>6.2.1</span> <a
href='#CustomizaçãodeFormulários-getChildrenFromTable'>getChildrenFromTable</a></li>
<li><span class='TOCOutline'>6.2.2</span> <a
href='#CustomizaçãodeFormulários-getChildrenIndexes'>getChildrenIndexes</a></li>
</ul></li>
</ul></li>
<li><span class='TOCOutline'>7</span> <a
href='#CustomizaçãodeFormulários-Formuláriosparadispositivosmóveis'>Formularios
para dispositivos móviles</a>
<ul class='toc-indentation'>
<li><span class='TOCOutline'>7.1</span> <a
href='#CustomizaçãodeFormulários-PaiFilhoparadispositivosmóveis'>Padre
Hijo para dispositivos móviles</a>
<ul class='toc-indentation'>
<li><span class='TOCOutline'>7.1.1</span> <a
href='#CustomizaçãodeFormulários-getValue'>getValue</a></li>
<li><span class='TOCOutline'>7.1.2</span> <a
href='#CustomizaçãodeFormulários-getValues'>getValues</a></li>
<li><span class='TOCOutline'>7.1.3</span> <a
href='#CustomizaçãodeFormulários-getValuesBySequence'>getValuesBySequence</a></li>
<li><span class='TOCOutline'>7.1.4</span> <a
href='#CustomizaçãodeFormulários-getValuesByField'>getValuesByField</a></li>
</ul></li>
</ul></li>
<li><span class='TOCOutline'>8</span> <a
href='#CustomizaçãodeFormulários-Traduçãodeformulários'>Traducción
de formularios</a></li>
<li><span class='TOCOutline'>9</span> <a
href='#CustomizaçãodeFormulários-ThirdPartyTrademarks'>Third
Party Trademarks</a></li>
</ul>
</div>
</p>
<p> </p>
<h1 id="CustomizaçãodeFormulários-Declaração<!DOCTYPE>HTML">Declaración
<!DOCTYPE> HTML</h1>
</div>
<p>Al publicar una definición de formulario no se recomienda
utilizar declaraciones:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"><!DOCTYPE>, Ex: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></pre>
</div>
</div>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">La
utilización de las mismas puede impactar en algunas funcionalidades
de la definición de formulario, o en el Workflow utilizando el
navegador Microsoft® Internet Explorer ®.</span>
</p>
<h1 id="CustomizaçãodeFormulários-FormController">FormController</h1>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;"> </span>
</p>
<p>
O <strong>formController</strong> es el objeto que realiza la
comunicación entre el formulario y la personalización de los
eventos. Este objeto está disponible en cada uno de los <strong>eventos
de personalización<strong> de<br />formularios a través de
la variable <strong><em>form</em></strong>. La variable permite
modificar los valores de los espacios de un registro de formulario y
también obtener el estado de su edición, por ejemplo: si el <br />está
visualizando o editando el registro del formulario. Vea a
continuación los métodos disponibles para la variable <em><strong>form</strong></em>:
</p>
<div class="table-wrap">
<table class="confluenceTable">
<tbody>
<tr>
<th class="confluenceTh">Método</th>
<th class="confluenceTh">Descripción</th>
</tr>
<tr>
<td colspan="1" class="confluenceTd">long getCompanyId()</td>
<td colspan="1" class="confluenceTd">Devuelve el ID de la
empresa</td>
</tr>
<tr>
<td colspan="1" class="confluenceTd">int getDocumentId()</td>
<td colspan="1" class="confluenceTd">Devuelve el ID del
documento (registro del formulario)</td>
</tr>
<tr>
<td colspan="1" class="confluenceTd">int getVersion()</td>
<td colspan="1" class="confluenceTd">Devuelve la versión del
documento (registro del formulario)</td>
</tr>
<tr>
<td colspan="1" class="confluenceTd">int getCardIndex()</td>
<td colspan="1" class="confluenceTd">Devuelve el ID del
formulario</td>
</tr>
<tr>
<td colspan="1" class="confluenceTd"><span>String
getValue(String fieldName)</span></td>
<td colspan="1" class="confluenceTd"><span>Obtiene el
valor de espacio del formulario</span></td>
</tr>
<tr>
<td class="confluenceTd">void setValue(String fieldName,
String fieldValue)</td>
<td class="confluenceTd">Define el valor de un espacio del
formulario</td>
</tr>
<tr>
<td colspan="1" class="confluenceTd">boolean getEnabled(String
fieldName)</td>
<td colspan="1" class="confluenceTd">Verifica si un espacio
está habilitado</td>
</tr>
<tr>
<td colspan="1" class="confluenceTd">void setEnabled(String
fieldName, boolean enabled)</td>
<td colspan="1" class="confluenceTd">Define si un espacio debe
estar habilitado o no</td>
</tr>
<tr>
<td class="confluenceTd">String getFormMode()</td>
<td class="confluenceTd"><p>
Obtiene el modo de edición del formulario con probabilidad de
devolver los siguientes valores:<br /> ADD: Creación del
formulario
</p>
<p>MOD: Formulario en edición</p>
<p>VIEW: Visualización del formulario</p>
<p>NONE: No existe comunicación con el formulario, por
ejemplo, ocurre al momento de la validación de los espacios del
formulario donde no esté siendo presentado.</p></td>
</tr>
<tr>
<td colspan="1" class="confluenceTd">void
setHidePrintLink(boolean hide)</td>
<td colspan="1" class="confluenceTd">Cuando se define con el
valor <em>true</em>, deshabilita el botón de imprimir del
formulario.
</td>
</tr>
<tr>
<td colspan="1" class="confluenceTd">boolean isHidePrintLink()</td>
<td colspan="1" class="confluenceTd">Verifica si el botón para
imprimir está deshabilitado.</td>
</tr>
<tr>
<td colspan="1" class="confluenceTd"><span>Map<String,
String> getChildrenFromTable(String tableName)</span></td>
<td colspan="1" class="confluenceTd"><span>Devuelve un
mapa que contiene los nombres y valores de los espacios hijos de
una tabla padre.</td>
</tr>
<tr>
<td colspan="1" class="confluenceTd">void
setHideDeleteButton(boolean hide)</td>
<td colspan="1" class="confluenceTd">Cuando se define con el
valor <em>true</em>, deshabilita el botón de excluir registros
hijos en un formulario con padre-hijo.
</td>
</tr>
<tr>
<td colspan="1" class="confluenceTd">boolean
isHideDeleteButton()</td>
<td colspan="1" class="confluenceTd">Verifica si la exclusión
de registros hijos está deshabilitada.</td>
</tr>
<tr>
<td colspan="1" class="confluenceTd">boolean getMobile()</td>
<td colspan="1" class="confluenceTd">Verifica si se está
ingresando al registro de formulario a través de un dispositivo <em>mobile</em>.
</td>
</tr>
</tbody>
</table>
</div>
<p> </p>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;"><br /></span>
</p>
<p> </p>
<div>
<h1 id="CustomizaçãodeFormulários-CustomizaçãodeFormulários">Personalización
de Formularios:</h1>
</div>
<p>La personalización de definición de formularios se realiza a
través de la creación de scripts en el lenguaje JavaScript. El código
de implementación de cada script se almacena en un banco de datos y
dispensa el uso de otros archivos, como por ejemplo, “plugin.p”.</p>
<p>Los eventos de personalización para definir formularios son
creados a partir del Fluig Studio. Para publicar un formulario siga
los pasos según el ejemplo a continuación:</p>
<a name="composition-deck-samples"></a>
<div id="samples" class="deck" history="false" loopcards="false"
effecttype="fade" effectduration="0.5" nextafter="0.0">
<ul class="tab-navigation"></ul>
<!-- // .tab-navigation -->
<div class="deck-cards panel" style="">
<div id="1" class="deck-card active-pane" style="" cssclass=""
accesskey="" label="Passo1" title="" nextafter="0"
effecttype="default" effectduration="-1.0">
<p> </p>
<ul>
<li><p>
Para crear una definición de formulario, en la visión <em>Explorador
de paquetes </em>se debe ingresar a la carpeta <em>forms</em> del
proyecto Fluig, luego presionar clic con el botón derecho y en el
menú ingresar <em>Nuevo> Definición de Formulario</em>. 
</p></li>
</ul>
<p>
<img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/181962950/image2013-9-23%2010-28-32.png?version=1&modificationDate=1425495339000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/181962950/image2013-9-23%2010-28-32.png?version=1&modificationDate=1425495339000&api=v2">
</p>
<p style="text-align: center;">
<strong>Figura 1 - Nueva Definición de Formulario.</strong>
</p>
<p> </p>
</div>
<div id="2" class="deck-card " style="" cssclass="" accesskey=""
label="Passo 2" title="" nextafter="0" effecttype="default"
effectduration="-1.0">
<p> </p>
<div>
<ul>
<li><p>En la ventana de creación de definición de
formulario, basta completar el nombre deseado y luego presionar
clic en finalizar.</p></li>
</ul>
<p>
<img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/181962950/image2013-9-23%2010-28-32.png?version=2&modificationDate=1425495431000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/181962950/image2013-9-23%2010-28-32.png?version=2&modificationDate=1425495431000&api=v2">
</p>
<p style="text-align: center;">
<strong style="text-align: center;">Figura 2 - Nueva
Definición de Formulario.</strong>
</p>
<p>
<strong><br /></strong>
</p>
</div>
</div>
<div id="3" class="deck-card " style="" cssclass="" accesskey=""
label="Passo 3" title="" nextafter="0" effecttype="default"
effectduration="-1.0">
<p> </p>
<ul>
<li><p>
Al finalizar, se creará un paquete relacionado a la definición de
formulario en la carpeta <em>forms</em> y el editor de formulario
quedará disponible para la edición.
</p></li>
</ul>
<p>
<img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/181962950/image2013-9-23%2010-28-32.png?version=3&modificationDate=1425495504000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/181962950/image2013-9-23%2010-28-32.png?version=3&modificationDate=1425495504000&api=v2">
</p>
<p style="text-align: center;">
<strong style="text-align: center;">Figura 3 - Nueva
Definición de Formulario.</strong>
</p>
<p style="text-align: center;">
<strong><br /></strong>
</p>
</div>
<div id="4" class="deck-card " style="" cssclass="" accesskey=""
label="Passo 4" title="" nextafter="0" effecttype="default"
effectduration="-1.0">
<p> </p>
<ul>
<li><p>A partir del editor, se desarrolla todo el
contenido HTML. En el ejemplo se desarrolló un formulario simple
de registro</p></li>
</ul>
<div>
<p>
<img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/181962950/image2013-9-23%2010-33-32.png?version=1&modificationDate=1425495560478&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/181962950/image2013-9-23%2010-33-32.png?version=1&modificationDate=1425495560478&api=v2">
</p>
<p style="text-align: center;">
<strong style="text-align: center;">Figura 4 - Nueva
Definición de Formulario.</strong>
</p>
<p> </p>
</div>
</div>
</div>
</div>
<!-- // .deck -->
<p> </p>
<p>Después de crear una definición de formulario es posible crear
scripts personalizados. Los eventos para formularios se deben crear
según los pasos a continuación:</p>
<a name="composition-deck-samples"></a>
<div id="samples" class="deck" history="false" loopcards="false"
effecttype="fade" effectduration="0.5" nextafter="0.0">
<ul class="tab-navigation"></ul>
<!-- // .tab-navigation -->
<div class="deck-cards panel" style="">
<div id="1" class="deck-card active-pane" style="" cssclass=""
accesskey="" label="Passo1" title="" nextafter="0"
effecttype="default" effectduration="-1.0">
<p> </p>
<ul>
<li><p>
Para crear un script de formulario en Fluig, en la visión <em>Explorador
de paquetes</em> se debe ingresar a la carpeta <em>forms</em> del
proyecyo Fluig, luego presionar clic con el botón derecho y en el
menú ingresar <em>Nuevo > Otros</em>. 
</p></li>
</ul>
<p>
<img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/181962950/5.png?version=1&modificationDate=1425495635000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/181962950/5.png?version=1&modificationDate=1425495635000&api=v2">
</p>
<p style="text-align: center;">
<strong>Figura 5 - Creación de script evento de la
definición de formulario.
</p>
<p> </p>
</div>
<div id="2" class="deck-card " style="" cssclass="" accesskey=""
label="Passo 2" title="" nextafter="0" effecttype="default"
effectduration="-1.0">
<p> </p>
<div>
<ul>
<li><p>Seleccione la opción Script Evento de definición
de formulario y haga clic en el botón Avanzar.</p></li>
</ul>
<p>
<img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/181962950/6.png?version=1&modificationDate=1425495671000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/181962950/6.png?version=1&modificationDate=1425495671000&api=v2">
</p>
<p style="text-align: center;">
<strong style="text-align: center;">Figura 6 - Creación
de script evento de la definición de formulario.</strong>
</p>
<p>
<strong><br /></strong>
</p>
</div>
</div>
<div id="3" class="deck-card " style="" cssclass="" accesskey=""
label="Passo 3" title="" nextafter="0" effecttype="default"
effectduration="-1.0">
<p> </p>
<ul>
<li><p>
En esta ventana informe los espacios pertinentes al evento que
desea agregar y luego haga clic en el botón <em>Finalizar</em>.
</p></li>
</ul>
<p>
<img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/181962950/7.png?version=1&modificationDate=1425495712000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/181962950/7.png?version=1&modificationDate=1425495712000&api=v2">
</p>
<p style="text-align: center;">
<strong style="text-align: center;">Figura 7 - Creación de
script evento de la definición de formulario.</strong>
</p>
<p style="text-align: center;">
<strong><br /></strong>
</p>
</div>
<div id="4" class="deck-card " style="" cssclass="" accesskey=""
label="Passo 4" title="" nextafter="0" effecttype="default"
effectduration="-1.0">
<p> </p>
<ul>
<li><p>
En el ejemplo seleccionamos el evento <em>displayFields</em>, y
relacionamos la definición de formulario <em>form_exemplo_fluig</em>.
</p></li>
</ul>
<div>
<p>
<img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/181962950/8.png?version=1&modificationDate=1425495751000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/181962950/8.png?version=1&modificationDate=1425495751000&api=v2">
</p>
<p style="text-align: center;">
<strong style="text-align: center;">Figura 8 - Creación
de script evento de la definición de formulario.</strong>
</p>
<p> </p>
</div>
</div>
<div id="5" class="deck-card " style="" cssclass="" accesskey=""
label="Passo 5" title="" nextafter="0" effecttype="default"
effectduration="-1.0">
<p> </p>
<ul>
<li><p>Al finalizar estará disponible la estructura
principal del método en el editor.</p></li>
</ul>
<div>
<p>
<img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/181962950/9.png?version=1&modificationDate=1425495785000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/181962950/9.png?version=1&modificationDate=1425495785000&api=v2">
</p>
<p style="text-align: center;">
<strong>Figura 9 - Creación de script evento de la
definición de formulario.</strong>
</p>
<p> </p>
</div>
</div>
<div id="6" class="deck-card " style="" cssclass="" accesskey=""
label="Passo 6" title="" nextafter="0" effecttype="default"
effectduration="-1.0">
<p> </p>
<ul>
<li><p>El evento utilizado como ejemplo - validateForm,
valida el procedimiento de completos los espacios de solicitud y
de usuario.</p>
<p>El objeto formController, ha sido utilizado para verificar
el valor de los espacios, a través de la sintaxis
‘form.getValue(“fieldname”)’.</p>
<p>Al exportar la definición de formularios también se
exportarán, los eventos relacionados, al servidor Fluig.</p>
<p> </p></li>
</ul>
<div>
<p>
<img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/181962950/10.png?version=1&modificationDate=1425495821000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/181962950/10.png?version=1&modificationDate=1425495821000&api=v2">
</p>
<p style="text-align: center;">
<strong>Figura 10 - Creación de script evento de la
definición de formulario..</strong>
</p>
<p> </p>
</div>
</div>
</div>
</div>
<!-- // .deck -->
<p> </p>
<p>Todos los eventos de la definición de formularios reciben la
referencia al formulario. A través de esta referencia es posible
ingresar a los espacios del formulario, ingresar/definir el valor de
un espacio e ingresar/definir el estado de presentación del espacio.
Los detalles de cada evento se presentarán en las próximas secciones
de este documento.</p>
<p>
El Fluig puede utilizar el log de ejecución en los eventos de
personalización. A través de la variable <em>log</em> es posible
obtener un feedback respecto a la ejecución de cada evento. Existen
cuatro niveles de log:
</p>
<ul>
<li><strong>error:</strong> presentación de errores.</li>
<li><strong>debug:</strong> depurar la ejecución.</li>
<li><strong>warn:</strong> informar posible problema de
ejecución.</li>
<li><strong>info:</strong> presentación de mensajes.</li>
</ul>
<p>La presentación de cada uno de los tipos de log está sujeta a la
configuración del servidor de la aplicación. Por ejemplo, en JBoss ®,
por patrón, los mensajes de tipo info y warn se presentan en la
consola del servidor y las del tipo debug, error se presentan en el
archivo de log. A continuación se indica un ejemplo respecto al uso
del log en script:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">log.info(“Probando el log info”);</pre>
</div>
</div>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">Tendríamos
en la consola del servidor el mensaje <strong>“Probando el
log info”</strong>.
</span>
</p>
<p>
Es posible saber el estado de edición de un formulario mediante la
variable <em>form</em> informada como parámetro para los eventos de la
definición formulario. Para ingresar al estado de edición:
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">form.getFormMode()</pre>
</div>
</div>
<p>
La llamada a la función<em> form.getFormMode()</em> devolverá una
string con el modo de edición del formulario. Existen los siguientes
valores para el modo de edición del formulario:
</p>
<ul>
<li><strong>ADD:</strong> indicando modo de inclusión.</li>
<li><strong>MOD:</strong> indicando modo de edición.</li>
<li><strong>VIEW:</strong> indicando modo de visualización.</li>
<li><strong>NONE:</strong> indicando que no hay comunicación con
el formulario, por ejemplo, ocurre al momento de validar los espacios
del formularios donde no está siendo presentado.</li>
</ul>
<p>A continuación se detallarán los eventos disponibles para la
personalización de una definición de formulario en Fluig.</p>
<p> </p>
<h3 id="CustomizaçãodeFormulários-AfterProcessing">AfterProcessing</h3>
<p>Es el último evento a realizar para el fichero. El evento recibe
como parámetro una referencia al formulario de la definición de
formulario.</p>
<p>Ejemplo:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">function afterProcessing(form){
}</pre>
</div>
</div>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">En el
marco de este evento la variable form solo se puede utilizar para
consultas a los espacios de la definición de formularios, sus valores
y estado de presentación.
</p>
<p> </p>
<h3 id="CustomizaçãodeFormulários-AfterSaveNew">AfterSaveNew</h3>
<p>Este evento se realiza después de crear un nuevo formulario. El
evento recibe como parámetro una referencia al formulario de la
definición de formulario.</p>
<p>Para obtener el valor de un determinado espacio del formulario:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;"> form.getValue("nome-do-campo")</pre>
</div>
</div>
<p>Ejemplo:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;"> function afterSaveNew(form) {
log.info("Colaborador de abertura: " + form.getValue("RNC_colab_abertura"));
}</pre>
</div>
</div>
<p>
La consulta a los espacios del formulario es <em>case insensitve</em>.
En el ejemplo anterior, podríamos obtener el valor del espacio
utilizando <em>rnc_colab_abertura</em>.
</p>
<p> </p>
<h3 id="CustomizaçãodeFormulários-BeforeProcessing">BeforeProcessing</h3>
<p>Este evento es el primero a realizarse. Se produce antes de
cualquier otro evento de la definición de formulario. El evento recibe
como parámetro una referencia al formulario de la definición de
formulario.</p>
<p>Ejemplo:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">function beforeProcessing(form){
}</pre>
</div>
</div>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">En el
marco de este evento la variable form solo se puede utilizar para
consultar a los espacios de la definición de formularios, sus valores
y estado de presentación.</span>
</p>
<p> </p>
<h3 id="CustomizaçãodeFormulários-DisplayFields">DisplayFields</h3>
<p>Este evento se realiza en el momento en que se presentan los
objetos del formulario. El evento recibe como parámetro una referencia
al formulario de la definición de formulario y la referencia para
salida de presentación del formulario.</p>
<p>En este evento es posible modificar los valores a presentar en
el espacio del formulario. Para esto basta utilizar el siguiente
procedimiento:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">form.setValue(“nome-do-campo”, “valor”);</pre>
</div>
</div>
<p>Ejemplo:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;"> function displayFields(form, customHTML) {
if ( form.getFormMode() == “MOD” ) {
form.setValue('RNC_colab_abertura', new java.lang.Integer(1));
}
}</pre>
</div>
</div>
<p> </p>
<p>Aún en el evento DisplayFields es posible utilizar tres métodos
de forma independiente o conjunta para modificar la forma en qué se
presenta la renderización del formulario, eliminar renglones de un
fichero hijo y ocultar los botones “Imprimir” e “Imprimir en nueva
Ventana”.</p>
<p>
Para visualizar el formulario en el formato original con los espacios
deshabilitados, se debe utilizar el método <span
style="font-size: 10.0pt; line-height: 13.0pt;"> </span><em>setShowDisabledFields</em><span
style="font-size: 10.0pt; line-height: 13.0pt;">.</span>
</p>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">Para
habilitar o deshabilitar el botón de excluir en los renglones del
fichero hijo, que por patrón está habilitado, se debe utilizar el
método<span> <em>setHideDeleteButton</em>.
</span>
</span>
</p>
<p>
Para ocultar los botones <strong> </strong><em>Imprimir</em><strong> </strong>
e <em>Imprimir en nueva Ventana</em>,<strong> </strong>se debe
utilizar el método <em>setHidePrintLink</em>.
</p>
<p> </p>
<p> </p>
<p>Ejemplo de visualización sin utilizar los métodos.</p>
<p>
<img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/181962950/11.png?version=1&modificationDate=1425496752000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/181962950/11.png?version=1&modificationDate=1425496752000&api=v2">
</p>
<p style="text-align: center;">
<strong style="text-align: center;">Figura 11 - Ejemplo sin
utilizar los métodos .</strong>
</p>
<p style="text-align: left;">
<strong style="text-align: center;"><br /></strong>
</p>
<p>
Ejemplo de utilización de los métodos <em>setShowDisabledFields</em> y<em> <em>setHidePrintLink:</em></em>
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">function displayFields(form, customHTML) {
form.setShowDisabledFields(true);
form.setHidePrintLink(true);
}</pre>
</div>
</div>
<p style="text-align: left;">
<strong style="text-align: center;"><br /></strong>
</p>
<p style="text-align: left;">
<strong style="text-align: center;"><img
class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/181962950/12.png?version=1&modificationDate=1425496861000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/181962950/12.png?version=1&modificationDate=1425496861000&api=v2"></strong>
</p>
<p style="text-align: center;">
<strong style="text-align: center;"><strong
style="text-align: center;">Figura 12 - Ejemplo de
utilización de los métodos.</strong></strong>
</p>
<p> </p>
<p> </p>
<p>
Ejemplo de visualización sin utilizar el método <em>setHideDeleteButton</em>:
</p>
<p>
<img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/181962950/13.png?version=1&modificationDate=1425496922000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/181962950/13.png?version=1&modificationDate=1425496922000&api=v2">
</p>
<p style="text-align: center;">
<strong style="text-align: center;">Figura 13 - Ejemplo sin
utilizar el método.</strong>
</p>
<p> </p>
<p>
Ejemplo utilizando el método <em>setHideDeleteButton</em>:
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">function displayFields(form, customHTML) {
form.setHideDeleteButton(false);
}</pre>
</div>
</div>
<p style="text-align: center;">
<img class="confluence-embedded-image"
src="http://tdn.totvs.com/download/attachments/181962950/14.png?version=1&modificationDate=1425496991000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/181962950/14.png?version=1&modificationDate=1425496991000&api=v2">
</p>
<p style="text-align: center;">
<strong style="text-align: center;"><strong>Figura
14 - Ejemplo de utilización de los métodos.</strong></strong>
</p>
<p style="text-align: center;">
<strong style="text-align: center;"><strong><br /></strong></strong>
</p>
<p>Es importante destacar que este evento es el único que permite
la modificación de los valores a presentar en los espacios formulario
antes de su renderización.</p>
<p>A continuación un ejemplo para utilizar la salida de
presentación del formulario:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">if(form.getFormMode() != "VIEW") {
customHTML.append("<script>");
customHTML.append("function MostraEscondeBtn_zoom()");
customHTML.append("{");
customHTML.append("document.getElementById(\'zoomUsuario\').className = \'show\';");
customHTML.append("document.getElementById(\'zoomModulo\').className = \'show\';");
customHTML.append("}");
customHTML.append("</script>");
}</pre>
</div>
</div>
<p>
<strong><br /></strong>
</p>
<h3 id="CustomizaçãodeFormulários-EnableFields">EnableFields</h3>
<p>Este evento se realiza en el momento que se habilitan los
objetos del formulario, permitiendo deshabilitar algunos espacios, en
caso sea necesario. El evento recibe como parámetro una referencia al
formulario de la definición de formulario.</p>
<p>Para habilitar o deshabilitar un espacio del formulario se debe
ejecutar el siguiente procedimiento:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;"> form.setEnabled("nome-do-campo",true/false)</pre>
</div>
</div>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">Donde
“true” habilita el espacio y “falso” deshabilita el campo.</span>
</p>
<p>Ejemplo:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">function enableFields(form) {
if ( form.getFormMode() != 'ADD' ){
form.setEnabled("rnc_area",false);
form. setEnabled("rnc_tipo_ocorrencia",false);
}
}</pre>
</div>
</div>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">Cabe
destacar que el evento ocurre al momento de la renderización del
formulario y es el único que permite modificar el estado de
presentación de los espacios del formulario.</span>
</p>
<p>
Otra forma de deshabilitar los espacios es utilizando comandos
JavaScript implementados directamente en funciones del formulario. Sin
embargo, en este caso, no se permite utilizar la propiedad <em>disabled</em>,
ya que los espacios no se grabarán al guardar la ficha. Para esta
situación, se debe utilizar la propiedad <em>readonly</em> según el
ejemplo a continuación:
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">document.forms['nomeForm'].nomeCampo.setAttribute('readonly',true);</pre>
</div>
</div>
<p> </p>
<h3 id="CustomizaçãodeFormulários-InputFields">InputFields</h3>
<p>Este evento se realiza en el momento en que se informan los
datos del formulario al BO responsable del formulario del Fluig. El
evento recibe como parámetro una referencia al formulario de la
definición de formulario. Ejemplo:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">function inputFields(form){
}</pre>
</div>
</div>
<p> </p>
<h3 id="CustomizaçãodeFormulários-SetEnable">SetEnable</h3>
<p>Este evento se puede ejecutar en diferentes eventos de las
definiciones de formulario. Este evento no se implementa
automáticamente en la personalización de la definición de formulario.</p>
<p>Ejemplo:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">function setEnable() {
log.info(“Prueba de llamada de función”);
}
function displayFields(form, customHTML) {
setEnable();
}</pre>
</div>
</div>
<p> </p>
<h3 id="CustomizaçãodeFormulários-ValidateForm">ValidateForm</h3>
<p>Este evento se ejecuta antes de guardar los datos del formulario
en el banco de datos. El evento recibe como parámetro una referencia
al formulario de la definición de formulario. En caso de errores de
validación de los datos del formulario ese evento responderá un
mensaje de error.</p>
<p>Ejemplo:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">function validateForm(form) {
if (form.getValue('RNC_colab_abertura') == null){
throw "No se ha informado al colaborador de apertura";
}
} </pre>
</div>
</div>
<p> </p>
<div>
<h1 id="CustomizaçãodeFormulários-Controlesvisuais">Controles
visuales</h1>
</div>
<p>En este capítulo demostraremos como interactuar con algunos
tipos de controles de formularios que poseen características
especiales, como por ejemplo, completar el contenido de un ComboBox
utilizando Datasets.</p>
<p> </p>
<p>El Fluig, por patrón realiza la importación de la biblioteca
JavaScript en todos los formularios, excepto en los casos donde el
formulario ya lo realice. En estos casos el Fluig identificará que el
jQueri ya está definido y no realizará la importación
nuevamente. En caso el formulario utilice otra biblioteca que
pueda entrar en conflicto con el jQuery, será necesario definir en el
formulario la variable javascript fluigjQuery, con valor false,
que el Fluig dejará de realizar dicha importación, sin embargo algunas
otras funcionalidades como la máscara de espacios del Fluig, también
se deshabilitarán.</p>
<p> </p>
<h3 id="CustomizaçãodeFormulários-MáscaradeCampos">Máscara de
Espacios</h3>
<p>Muchos espacios en un formulario poseen un formato específico
para su contenido, como datos, CEP, CPF entre otros. </p>
<p>
Para ayudar a los desarrolladores de formularios, el Fluig permite
habilitar máscaras por espacio, basta informar el atributo "mask" y la
máscara deseada a los objetos <strong>input</strong> del
tipo <strong>text</strong>.
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeHeader panelHeader pdl"
style="border-bottom-width: 1px;">
<b>Ejemplo de utilización de máscaras</b>
</div>
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;"><input name="cep" type="text" mask="00000-000"></pre>
</div>
</div>
<p>
<span><br /></span>
</p>
<p>
<span>Para elaborar la máscara es posible utilizar:</span>
</p>
<div class="table-wrap">
<table class="confluenceTable">
<tbody>
<tr>
<th style="text-align: center;" class="confluenceTh">Código</th>
<th style="text-align: center;" class="confluenceTh">Descripción</th>
</tr>
<tr>
<td style="text-align: center;" class="confluenceTd"><strong>0</strong></td>
<td class="confluenceTd">Solamente Números</td>
</tr>
<tr>
<td style="text-align: center;" class="confluenceTd"><strong>9</strong></td>
<td class="confluenceTd">Solamente números más opcional.</td>
</tr>
<tr>
<td style="text-align: center;" class="confluenceTd"><strong>#</strong></td>
<td class="confluenceTd">Solamente números más recursivos.</td>
</tr>
<tr>
<td style="text-align: center;" class="confluenceTd"><strong>A</strong></td>
<td class="confluenceTd">Números o letras.</td>
</tr>
<tr>
<td style="text-align: center;" class="confluenceTd"><strong>S</strong></td>
<td class="confluenceTd">Solamente letras entre A-Z y a-z.</td>
</tr>
</tbody>
</table>
</div>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeHeader panelHeader pdl"
style="border-bottom-width: 1px;">
<b>Otros ejemplos de utilización de máscaras</b>
</div>
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">  
Fecha: "00/00/0000"
Horario: "00:00:00"
Fecha y hora: "00/00/0000 00:00:00"
CEP: "00000-000"
Teléfono: "00000-000"
Teléfono(ddd): "(00) 0000-0000"
Teléfono(ddd + 9ºdígitos): "(00) 90000-0000"
Placa de auto: "SSS 0000"
CPF: "000.000.000-00"
CNPJ: "00.000.000/0000-00"
IP: "099.099.099.099"
porcentaje: "#00.000,00%"
Valor: "#00.000.000.000.000,00"</pre>
</div>
</div>
<div class="aui-message warning shadowed information-macro">
<span class="aui-icon icon-warning">Icon</span>
<div class="message-content">En caso la importación de la
biblioteca jQuery esté deshabilitada a través de la variable
fluigjQuery, la funcionalidad de máscaras también estará
deshabilitada.</div>
</div>
<p> </p>
<h3 id="CustomizaçãodeFormulários-ComboBox">ComboBox</h3>
<p>Generalmente es necesario popular un ComboBox de un formulario
con un determinado grupo de valores.</p>
<p>
En el Fluig esto es posible a través de la utilización de <em>Datasets.</em>
Los Datasets son servicios de datos patrón disponibles por el Fluig,
como por ejemplo, el servicio de “Volúmenes” del producto.
</p>
<p>Para habilitar el Dataset en el ComboBox basta utilizar la
siguiente construcción:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;"><select name="RNC_volume" id="RNC_volume" dataset="nome-dataset" datasetkey="chave" datasetvalue="valor" addBlankLine=”false”></select></pre>
</div>
</div>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">Donde:</span>
</p>
<ul>
<li>dataset es el nombre del Dataset.</li>
<li>datasetkey es la clave del registro.</li>
<li>datasetvalue es el valor de un determinado espacio del
registro.</li>
<li>addBlankLine es lo que define si el primer renglón del combo
será un valor en blanco.</li>
</ul>
<p>Ejemplo:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;"><select name="RNC_volume" id="RNC_volume" dataset="destinationVolume" datasetkey="volumeID" datasetvalue="volumeDescription"></select></pre>
</div>
</div>
<p>En el ejemplo anterior realizamos una lista en un ComboBox con
todos los Volúmenes registrados en el Fluig.</p>
<p> </p>
<p class="Default">En caso sea necesario ordenar los datos
provenientes de un dataset interno, indicamos la creación de un
dataset personalizado que ejecute el interno y ordene los datos, antes
de eliminar el componente combobox.</p>
<p>
Para utilizar un ComboBox con solamente <strong>una opción</strong> no
se deben utilizar carácteres especiales y espacio en el <em>value
</em>da tag option.
</p>
<p>Ejemplos:</p>
<ul>
<li><em>Forma correcta</em></li>
</ul>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;"><select>
<option value="te">Teste</option>
</select></pre>
</div>
</div>
<p> </p>
<ul>
<li><em>Forma Incorrecta</em></li>
</ul>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;"><select>
<option value="te te te">Teste</option>
</select></pre>
</div>
</div>
<p> </p>
<h3 id="CustomizaçãodeFormulários-Zoom">Zoom</h3>
<p>Permite la consulta de entidades y otros formularios creados en
el Fluig para que el usuario pueda seleccionar datos.</p>
<div>El acceso a este componente es realizado a partir de una
llamada Javascript en el HTML de la definición de formulario.</div>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;">"/webdesk/zoom.jsp?datasetId="+dataset+"&dataFields="+campos+"&resultFields="+resultFields+"$type="+"&title="+titulo</pre>
</div>
</div>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">Donde:</span>
</p>
<p> </p>
<ul>
<li>title: es el título para la ventaja de zoom.</li>
<li><span style="font-size: 10.0pt; line-height: 13.0pt;">datasetId:
es el nombre del dataset (Built-in, CardIndex o Customized).</span></li>
<li>dataFields: son los nombres de los espacios a presentar.</li>
<li>resultFields: son los espacios que se deben devolver al
registro seleccionado por el usuario.</li>
<li>likeField: el nombre del espacio para filtro de datos (si es
necesario)</li>
<li>likeValue: el valor a usar en el filtro de datos (si es
necesario)</li>
</ul>
<p> </p>
<p class="ListParagraphCxSpLast">
<strong>ATENCIÓN</strong>: Este parámetro sólo es válido para datasets
internos. Datasets personalizados no permiten utilizar filtros.
</p>
<p> </p>
<div>
<ul>
<li>Para obtener el registro seleccionado por el usuario debemos
agregar la siguiente función JavaScript al formulario del proceso:</li>
</ul>
</div>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;">function setSelectedZoomItem(selectedItenom) {
}</pre>
</div>
</div>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">Donde <em>selectItem</em>
es el registro seleccionado por el usuario en la ventana de zoom.
</p>
<div class="aui-message warning shadowed information-macro">
<p class="title">Importante</p>
<span class="aui-icon icon-warning">Icon</span>
<div class="message-content">
<p>
La misma función “setSelectZoomItem” se utilizará para recibir el
resultado de todas las llamadas al zoom. Así, para diferenciar cada
llamada se ha creado el parámetro  <em>type</em>. Este
parámetro se devuelve en <em>selectedItem</em>  y se puede
utilizar para diferenciar las llamadas al zoom.
</p>
</div>
</div>
<p> </p>
<div>
<ul>
<li>Para ingresar un espacio del registro seleccionado:</li>
</ul>
</div>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;">selectedItem["fieldName"]</pre>
</div>
</div>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">Donde <em>fieldName</em>
es el nombre del espacio de devolución que se ha definido en la
llamada de zoom. Para obtener el registro componente de Zoom del
Fluig se ha desarrollado para permitir que el recurso de zoom se
utilice en definiciones de formularios.
</p>
<p> </p>
<p>Para que sea posible visualizar y rescatar información de los
espacios “metadatos” del formulario, es necesario utilizar la
siguiente nomenclatura:</p>
<div class="table-wrap">
<table class="confluenceTable">
<tbody>
<tr>
<td class="confluenceTd"><p>metadata_id</p></td>
<td class="confluenceTd"><p>Devuelve el código de la ficha</p></td>
</tr>
<tr>
<td class="confluenceTd"><p>medatata_version</p></td>
<td class="confluenceTd"><p>Devuelve la versión de la
ficha</p></td>
</tr>
<tr>
<td class="confluenceTd"><p>metadata_parent_id</p></td>
<td class="confluenceTd"><p>Devuelva el código de la
carpeta Padre</p></td>
</tr>
<tr>
<td class="confluenceTd"><p>metadata_card_index_id</p></td>
<td class="confluenceTd"><p>Devuelva el código del fichero</p></td>
</tr>
<tr>
<td class="confluenceTd"><p>metadata_card_index_version</p></td>
<td class="confluenceTd"><p>Devuelva la versión del
fichero</p></td>
</tr>
<tr>
<td class="confluenceTd"><p>metadata_active</p></td>
<td class="confluenceTd"><p>Versión activa</p></td>
</tr>
</tbody>
</table>
</div>
<p> </p>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">A
continuación un ejemplo de código utilizado para visualizar y
rescatar estos valores:</span>
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;">function zoomFormulario(titulo, dataset, campos, resultFields, type){
window.open("/webdesk/zoom.jsp?datasetId="+dataset+"&dataFields="+campos+
"&resultFields="+resultFields+"&type="+type+"&title="+titulo, "zoom", "status , scrollbars=no ,width=600, height=350 , top=0 , left=0");
} </pre>
</div>
</div>
<div class="aui-message hint shadowed information-macro">
<span class="aui-icon icon-hint">Icon</span>
<div class="message-content">
<p>La utilización de la PK en los filtros al utilizar dataset de
Grupo, Papel o Colaborador es opcional, sin embargo se debe utilizar
el mismo valor en la URL del zoom para obtener el valor
seleccionado, según el ejemplo a continuación.</p>
</div>
</div>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;">function setSelectedZoomItem(selectedItem) {
alert("Grupo: " + selectedItem['groupId'] + " Colaborador: "+ selectedItem['colleagueGroupPK.colleagueId']);
}
 
<input type="button" class="btZoom" onclick="zoomFormulario('title', 'colleagueGroup', 'groupId,Codigo,colleagueGroupPK.colleagueId,Matricula','groupId,colleagueGroupPK.colleagueId', 'nofield');">
 </pre>
</div>
</div>
<p> </p>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">Para
utilizar filtros la llamada es similar al del </span><em
style="font-size: 10.0pt; line-height: 13.0pt;">dataFields</em><span
style="font-size: 10.0pt; line-height: 13.0pt;">.</span>
</p>
<p>Sigue el ejemplo a continuación:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;">window.open("/webdesk/zoom.jsp?datasetId=preCad&dataFields=codigo, Código, descricao, Descrição&resultFields=descricao&type=precad&filterValues=metadata_active, false","zoom" , "status, scrollbars=no, width=600, height=350, top=0, left=0");</pre>
</div>
</div>
<p>En este ejemplo, el zoom devolverá solamente las fichas
inactivas.</p>
<p> </p>
<h3 id="CustomizaçãodeFormulários-ZoomExterno">Zoom Externo</h3>
<p>En situaciones donde los datos de los elementos externos al
Fluig son muy voluminosos, se recomienda la construcción de una
aplicación externa al Fluig que realizará el papel de zoom para el
usuario. A continuación se describirá una técnica JavaScrip donde será
posible llamar una aplicación externa y la misma podrá retornar el
dato solicitado por el usuario a un espacio del formulario del Fluig.</p>
<p>
El primer paso para implementar esta técnica es crear una lógica en
JavaScript que abrirá una nueva ventana llamando la aplicación externa
que funcionará como zoom para el formulario. Vamos a utilizar y
explicar el comando<em> window.open</em> en este ejemplo:
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;">Window.open(URL Aplicación Externa, Nombre de la Ventana que se abrirá, comando adicionales)</pre>
</div>
</div>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">Donde:</span>
</p>
<ul>
<li>URL Aplicación Externa: Es la url de la aplicación externa
que funcionará como zoom para el Fluig. Ej: <a
href="http://servidor-ecm/applications/forneczoom.asp"
class="external-link" rel="nofollow">http://servidor/applications/forneczoom.asp</a>.
</li>
<li>Nombre de la Ventana: Nombre de la ventana que utilizará el
navegador del usuario como identificador. Para evitar la
sobreposición del contenido en ventana, se recomienda que a cada zoom
llamado por un mismo formulario se agregue un nombre diferente. Ej:
“ZoomFormec”.</li>
<li>Comandos Adicionales: Comandos adicionales utilizados para
crear la ventana que contendrá la aplicación zoom. Ej: “width=230,
height=230”.</li>
</ul>
<div class="aui-message hint shadowed information-macro">
<p class="title">Nota</p>
<span class="aui-icon icon-hint">Icon</span>
<div class="message-content">
<p>Debido a una restricción de los navegadores, la url del
programa de zoom externo al Fluig deberá estar en el mismo dominio
que se encuentra el Fluig. En caso contrario no será posible
atribuir al espacio del formulario el valor elegido para el zoom.
Este problema ocurrirá porque los navegadores prohíben la práctica
de codificación JavaScript cross-domain.</p>
</div>
</div>
<p> </p>
<p>El código a continuación programará un formulario del Fluig
conteniendo un espacio y un botón lateral que invocará la ventana de
la aplicación externa.</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"><form name=”FornecedorForm”>
Código del Proveedor:
<input name=”cod_fornec” size=’10” value=”” type=”text”>
<input value=”lista” onClick=”mostraLista()” type=”button”>
</form>
<script language=”JavaScript”>
Function mostraLista() {
Window.open(“fornecedores.html”, “list”,”width=230,height=230”);
}
</script>       </pre>
</div>
</div>
<p> </p>
<p>El segundo paso consiste en programar dentro de la aplicación
externa una función JavaScript que devuelva al campo del formulario el
valor elegido al usuario en la aplicación externa. Esta aplicación
externa se podrá desarrollar en cualquier tecnología de desarrollo web
existente en el mercado donde la misma pueda realizar la ejecución de
scripts JavaScript al lado del cliente. A continuación se indica un
ejemplo de una función JavaScript que informa el valor al espacio del
formulario.</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"><script language=”JavaScript”>
function elegir(valor) {
// El siguiente renglón prueba si la ventana del formulario del fluig que abrió la ventana de zoom aún está abierta
if (window.opener && !window.opener.close) {
// establece el valor informado al espacio
window.opener.document.(id del form en el formulario fluig).(nombre del campo).value = valor;
}
// Cierra la ventana de la aplicación zoom
window.close();
}
</script></pre>
</div>
</div>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">Donde:</span>
</p>
<ul>
<li>Id del form en el formulario Fluig: En caso de que se haya
definido algún id para el tag <em><form></em> en el formulario del
Fluig, es interesante realizar una referencia en este comando. Se
puede utilizar también la referencia de colección <em>forms</em>
dentro del comando <em>(forms[posición])</em>. <br />Ej: <em>ProveedorForm,
forms[0]</em>.
</li>
</ul>
<ul>
<li>Nombre del espacio: Nombre del espacio que recibirá el valor
informado a la función. <br />Ej: <em>cod_proveed</em>.
</li>
<li>Valor: Datos que se informará al espacio del formulario del
Fluig.</li>
</ul>
<p> </p>
<p>El ejemplo a continuación programará un ejemplo de zoom externo
realizado enteramente en HTML con datos estáticos apenas para
ilustrar. Los datos de zoom provienen de cualquier fuente sea esta
interna o externa al Fluig.</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"><html>
<head>
<title>Lista de proveedores</title>
<script language="JavaScript">
function elegir(valor) {
// Prueba de validez del Opener
if (window.opener && !window.opener.closed) {
// grabando el valor del espacio cod_fornec
window.opener.document.forms[0].cod_fornec.value = valor;
}
window.close();
}
</script>
 
</head>
<body>
<!-- Los datos a continuación están fijos pero se podrían configurar a partir de cualquier origen. -->
<table border="1" cellpadding="5" cellspacing="0">
<tbody><tr bgcolor="#cccccc"><td colspan="2"><b>Exemplo aplicacao ECM</b></td></tr>
<tr bgcolor="#cccccc"><td><b>Codigo</b></td><td><b>NASDAQ</b></td></tr>
<tr><td><a href="javascript:escolha('TOTVSv3')">TOTVS</a></td>
<td><a href="javascript:escolha('TOTVSv3')">TOTVSv3</a></td></tr>
<tr><td><a href="javascript:escolha('RM1')">RM</a></td>
<td><a href="javascript:escolha('RM1')">RM1</a></td></tr>
<tr><td><a href="javascript:escolha('DTS3')">Datasul</a></td>
<td><a href="javascript:escolha('dts3')">Dts3</a></td></tr>
<tr><td><a href="javascript:escolha('Lgx2')">Logix</a></td>
<td><a href="javascript:escolha('Lgx2')">Lgx2</a></td></tr>
</tbody>
</table> 
<!-- Fin de los datos-->
</body>
</html></pre>
</div>
</div>
<p>Para colocar un ejemplo en práctica en el el producto, se debe
publicar la definición del formulario e informar el archivo del zoom
externo como anexo de la definición de formulario.</p>
<p>
<a href="attachments/75270483/75237520.zip">Ejemplo de Zoom.zip</a>
</p>
<p>
Al hacer clic en uno de los ítems de la pantalla de zoom aparecerá la
función JavaScript elección que enviará el valor al campo <em>cod_fornec</em>
en el formulario do Fluig.
</p>
<p>
<strong><br /></strong>
</p>
<div>
<h1 id="CustomizaçãodeFormulários-ServiçosdeDados">Servicios de
Datos</h1>
</div>
<p>El Flui posee integración con dos tipos de servicios de datos,
estos son: Dataset y Servicios Externos. Ambos se pueden utilizar en
todos los eventos disponibles para personalizar la definición de
formulario.</p>
<h3 id="CustomizaçãodeFormulários-Dataset">Dataset</h3>
<p>Es un servicio de datos que provee acceso a la información,
independiente del origen de los datos. El Fluig provee Datasets
internos que permiten el acceso a entidades, como Usuarios, Grupo de
Usuarios, entre otros. Consulte el registro de Datasets del Fluig para
obtener la relación completa de los Datasets disponibles y sus
respectivos espacios.</p>
<div class="aui-message hint shadowed information-macro">
<p class="title">Nota</p>
<span class="aui-icon icon-hint">Icon</span>
<div class="message-content">
<p>Los ejemplos a continuación utilizan la función
getDatasetValues, disponible solamente para los Datasets de entidad
y definición de formulario (cuando se informa el número de la
definición de formulario). Para utilizar los Datasets personalizados
consulte la Guía de Referencia Personalización de Datasets.</p>
</div>
</div>
<p> </p>
<p>
En la función getDatasetValues, NO se devolverán los valores de todos
los espacios por cuestiones de seguridad. Para obtener todos los datos
se utiliza el DatasetFactory, ejemplificado en <a href="73083770.html">Personalización
de Datasets</a>.
</p>
<p>
Por ejemplo, para ingresar el Dataset de usuarios del Fluig en el
evento <em>displayFields</em> de una definición de formulario:
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;">function displayFields(form,customHTML) {
// Obteniendo el usuario a través de dataset.
filter = new java.util.HashMap();
filter.put("colleaguePK.colleagueId","adm");
usuario = getDatasetValues('colleague',filter);
form.setValue('RNC_colab_abertura',usuario.get(0).get("colleagueId"));
}</pre>
</div>
</div>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;"><br /></span>
</p>
<p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">También
se puede realizar una llamada a los Datasets dentro de la definición
de formulario a través de funciones JavaScript.</span>
</p>
<p> </p>
<p>El acceso a los Datasets también se puede realizar directamente
en el formulario de la definición de formulario. Por ejemplo, para
ingresar el Dataset de usuario e ingresar los valores en los espacios
del HTML:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"> <html>
<head>
<title>
Prueba XMLRPC
</title>
<script language="javascript">
function init(){
var filter = new Object();
filter["colleaguePK.colleagueId"] = "adm";
var colleagues = getDatasetValues("colleague", filter);
if(colleagues.length > 0){
document.getElementById("colleagueName").value = colleagues[0].colleagueName;
document.getElementById("colleagueId").value = colleagues[0].colleagueId;
document.getElementById("login").value = colleagues[0].login;
document.getElementById("extensionNr").value = colleagues[0].extensionNr;
document.getElementById("groupId").value = colleagues[0].groupId;
document.getElementById("mail").value = colleagues[0].mail;
}else{
alert("Ningún Usuario Encontrado");
}
}
</script>
</head>
<script src="../vcXMLRPC.js"></script>
<body onload="init()">
<form id="form1">
<b> Nombre del Usuario: </b>
<input type="text" name="colleagueName" id="colleagueName" />
<br><br>
<b> Matrícula del Usuario: </b>
<input type="text" name="colleagueId" id="colleagueId" />
<br><br>
<b>Login del Usuario:</b>
<input type="text" name="login" id="login" />
<br><br>  
<b> Ramal del Usuario: </b>
<input type="text" name="extensionNr" id="extensionNr" />
<br><br>
<b> Grupo del Usuario: </b>
<input type="text" name="groupId" id="groupId" />
<br><br>
<b> Correo electrónico del Usuario: </b>
<input type="text" name="mail" id="mail" />
<br><br>
</form>
</body>
</html></pre>
</div>
</div>
<p> </p>
<p>El Dataset para definir el formulario utiliza la misma llamada
del Dataset de entidades, como en el caso del usuario. Mientras al
contrario de pasar como parámetro el nombre del Dataset informaremos
el número de la definición de formulario, por ejemplo:</p>
<p> </p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;">function displayFields(form,customHTML) {
// Obteniendo el usuario a través de dataset.
filter = new java.util.HashMap();
filter.put("RNC_nr_solicitacao",new java.lang.Integer(20));
fichas = getDatasetValues(Number(676),filter);
log.info("Usuario de Apertura: "+ fichas.get(0).get("RNC_colab_abertura"));
}</pre>
</div>
</div>
<p> </p>
<p>
<em>Download de ejemplo de Formulario Combobox y Dataset:</em> <a
href="attachments/75270483/75237528.html">form.html</a><em>.</em>
</p>
<p> </p>
<h3 id="CustomizaçãodeFormulários-DataService">DataService</h3>
<p>Es un servicio de datos que permite el acceso de aplicaciones de
terceros a través del Fluig. Este servicio de datos soporta dos tipos
de conexión, estos son: AppServer del Progress® y Web Services.</p>
<p>Los servicios de datos se registran y configuran a partir de la
función Visualización de Servicios del Fluig Studio.</p>
<p>
Para más información sobre el registro de los servicios,
consulte: <a href="73082260.html">Integración con
Aplicaciones Externos</a>. Y para información sobre el uso de los
productos en los eventos, consulte:; <a href="73082818.html">Personalización
de Workflow</a>.
</p>
<p>
<strong><br /></strong>
</p>
<div>
<h1 id="CustomizaçãodeFormulários-PaiFilho">Padre Hijo</h1>
</div>
<p>
La técnica Padre X Hijo ha sido modificada y ahora la posición del tag
<em>tablename</em> se realiza dentro del tag "table" en el código
html.
</p>
<p>En el nuevo modelo implementado ahora el procesador del fichero
aplicará los cambios de padre hijo de la siguiente manera:</p>
<p>
<strong><table tablename="prueba"></strong> - La propriedad <em>tablename</em>
determina que ahora abajo de esa tabla se implementará un sistema de
padre hijo dentro de la definición de formulario. La etiqueta <
table > tendrá sus barridos en la búsqueda de otros parámetros
relacionados a la técnica que se explicarán más adelante en este
texto. Se creará una otra <table> alrededor de la tabla principal
que contendrá un botón que permite agregar nuevos hijos. Esto no
ocurrirá apenas en los casos en que la propiedad <em>noaddbutton</em>
también se ha informado en conjunto con la propiedad <em>tablename</em>.<span
style="font-size: 10.0pt; line-height: 13.0pt;">   
</p>
<p>
<strong><TR></strong> (primero abajo del table) - El primer tag de
<TR> encontrada dentro de la tabla se visualiza como un tag que
contendrá los labels de la tabla padre hijo a esta tag se agregará una
columna <TD> conteniendo el ícono y la función de eliminar hijos
existentes en ventana. Esta nueva columna será la primera columna a la
izquierda de la tabla.
</p>
<p>
<strong><TR></strong>  (Segundo abajo del table) - La técnica
padre hijo ocultará el renglón <TR> original, y transforma en su
“template mestre” para crear hijos de aquellos tabla. Cada vez que se
activa el botón “nuevo” todo el conjunto de espacios existentes dentro
de este segundo <TR> se replicará en la ventana con los datos
iniciales definidos para estos espacios.
</p>
<p>
<strong></table></strong>  - Fin del objetivo de la
técnica.
</p>
<p> </p>
<p>La técnica también soporta nuevos atributos que se pueden pasar
y utilizar para personalizar la técnica padre e hijo. Son ellas:</p>
<p>
<strong>noaddbutton</strong> - Remueve el botón “agregar” de la
ventana en el momento de la edición del formulario. Esto permite al
desarrollador elegir donde colocará la función que creará los hijos en
ventana pudiendo amarrar la llamada de la función en un link texto o
una figura u otro objeto del html.
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"><table tablename="teste" noaddbutton=true></pre>
</div>
</div>
<p>
<strong><br /></strong>
</p>
<p>
<strong>nodeletebutton</strong> - Remueve el botón “papelera” de la
ventana en el momento de la edición de la ficha. Esto permite al
desarrollador impedir la eliminación de los registros o definir otra
forma de ejecutar la función que removerá los hijos de la tabla.
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"> <table tablename="teste" nodeletebutton=true></pre>
</div>
</div>
<p>
<strong><br /></strong>
</p>
<p>
<strong>addbuttonlabel</strong> - Determina que texto será colocado en
el botón de agregar hijos de la técnica. En caso que no se indique el
botón vendrá con el texto patrón (nuevo)<span
style="font-size: 10.0pt; line-height: 13.0pt;">   
                   
            </span>
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"> <table tablename="prueba" addbuttonlabel="Agregar nuevo ingrediente"></pre>
</div>
</div>
<p>                         </p>
<p>
<strong>addbuttonclass </strong>- Permite definir que clases css será
utilizada por el botón. Esa clase css deberá estar disponible en el
documento html del fichero.
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"> <table tablename="prueba" addbuttonclass="wdkbuttonClass"></pre>
</div>
</div>
<p>
<strong><br /></strong>
</p>
<p>
<strong>deleteicon</strong> - Permite determinar que imagen funcionará
como icono de la eliminación de hijos en ventana. Esta imagen deberá
ser un anexo de la definición de formulario, y se deberá informar en
la clase como cualquier imagen utilizada como anexo en la definición
de formulario.
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"><table tablename="teste" deleteicon="teste.jpg"> </pre>
</div>
</div>
<p>
<strong><strong><br /></strong></strong>
</p>
<p>
<strong><strong>customFnDelete</strong> - </strong>Permite la
personalización de la función que aparece al presionar clic que
elimina un hijo de la table. La función personalizada deberá estar
disponible en el documento html de la definición de formulario y,
obligatoriamente, llamar la función patrón.<strong><br /></strong>
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"><table tablename="prueba" customFnDelete="fnCustomDelete(this)">
function fnCustomDelete(oElement){
//Personalización
alert ("¡Eliminando hijo!");
// Llamada la función patrón, NO RETIRAR.
fnWdkRemoveChild(oElement);
//Personalización
alert ("¡Hijo eliminado!");
}</pre>
</div>
</div>
<p> </p>
<p>
Es posible utilizar la combinación de uno o más atributos en la misma
tabla padre hijo. No obstante si se utiliza la propiedad <em>noaddbutton</em>
los valores de las propiedades <em>addbuttonlabel</em> y <em>addbuttonclass</em>
serán ignorados. No se generará un mensaje de error en la publicación
o apersonamiento de esta definición de formulario, sin embargo en el
momento de la edición del formulario la misma no presentará el botón
patrón que permite registrar nuevos hijos en la definición de
formulario. La propiedad <em>deleteicon</em> no se afecta por la
propiedad <em>noaddbutton</em>. Ejemplo de uso combinado de
parámetros:
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"><table tablename="teste" addbuttonlabel="Agregar nuevo ingrediente" addbuttonclass="wdkbuttonClass" deleteicon="teste.jpg"></pre>
</div>
</div>
<div class="aui-message warning shadowed information-macro">
<span class="aui-icon icon-warning">Icon</span>
<div class="message-content">
<ul>
<li>La técnica 2.0 Padre hijo no es compatible con la primera
implementación. Definición de formularios que se han realizado con
la primera técnica se deberán volver a trabajar para utilizar esta
nueva técnica.</li>
</ul>
<ul>
<li><p>
La técnica 2.0 del padre Hijo no acepta todos los componentes
html, pero acepta los principales, siendo los homologados por el
producto los tipos:  <em>text, radio button, checkbox,
select, select multiple, hidden, textarea, image </em>e<em> button.
</em><em style="font-size: 10.0pt; line-height: 13.0pt;">Download
de ejemplo de Formulario Padre x Hijo: <a
href="attachments/75270483/75237527.htm">form.htm</a>.
</em>
</p></li>
<li><p>
<span style="font-size: 10.0pt; line-height: 13.0pt;">
Espacios de una tabla padre e hijo no estarán disponibles para
utilizar como descripción de las fichas en la configuración del
formulario.
</p></li>
</ul>
</div>
</div>
<p>
<strong><br /></strong>
</p>
<p>
<strong><br /></strong>
</p>
<h3 id="CustomizaçãodeFormulários-PaiFilhoRadioButton">Padre Hijo
Radio Button</h3>
<p>Para utilizar los espacios radio button, además de la definición
patrón del componente html, es necesario que se utilice el atributo
‘value’ para que los datos se guarden correctamente.</p>
<p>
<strong><br /></strong>
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"><table border="1" tablename="prueba" addbuttonlabel="Agregar Hijo" nodeletebutton="true">
<thead>
<tr>
<td><b>Nome</b></td>
<td><b>Idade</b></td>
<td><b><font face = "arial" size=5 color ="blue">Sim:</b></td>
<td><b><font face = "arial" size=5 color ="blue">Não:</b></td>
</tr>
</thead>
<tr>
<td><input type="text" name="nombrehijo"></td>
<td><input type="text" name="edadhijo"></td>
<td><input type="radio" name="nameradiohijo" id = "idsimhijo" value="ant_yes"></td>
<td><input type="radio" name="nameradiohijo" id = "idnaohijo" value="ant_no"></td>
</tr>
</table></pre>
</div>
</div>
<p> </p>
<div>
<h3 id="CustomizaçãodeFormulários-EventosdeFormulárioPaiFilho">Eventos
de Formulario Padre Hijo</h3>
<p>
Para facilitar la manipular de los datos en una personalización de
formularios que utilizan la técnica Padre Hijo, están disponibles los
siguientes métodos: Ambos son llamados a partir del objeto  <em>form</em>
que se pasa como parámetro en las funciones de personalización de
formularios.
</p>
<p>
<span style="color: rgb(0, 51, 102);"> </span>
</p>
<h6 id="CustomizaçãodeFormulários-getChildrenFromTable">getChildrenFromTable</h6>
<p>
Este evento devuelve un mapa con todos espacios hijos de un Padre
Hijo a partir de su  <em>form</em>
</p>
<p>
<span style="color: rgb(0, 51, 102);"> </span>
</p>
<h6 id="CustomizaçãodeFormulários-getChildrenIndexes">getChildrenIndexes</h6>
<p>
Este evento devuelve los índices de los registros (renglones)
contenidos en un Padre Hijo a partir de su <em>tablename</em>.
</p>
<p>
<span style="color: rgb(0, 51, 102);"> </span>
</p>
<p>Ejemplo:</p>
<div class="syntaxhighlighter nogutter javascript">
<p> </p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Eclipse; brush: java; gutter: false"
style="font-size: 12px;">function validateForm(form){
var indexes = form.getChildrenIndexes("tabledetailname");
var total = 0;
for (var i = 0; i < indexes.length; i++) {
var fieldValue = parseInt(form.getValue("valor___" + indexes[i]));
if (isNaN(fieldValue)){
fieldValue = 0;
}
total = total + fieldValue;
log.info(total);
}
log.info(total);
if (total < 100) {
throw "Valor Total de la readquisición no puede ser inferior a 100";
}
}
</pre>
</div>
</div>
<p> </p>
</div>
<p> </p>
<h1 id="CustomizaçãodeFormulários-Formuláriosparadispositivosmóveis">Formularios
para dispositivos móviles</h1>
</div>
<p>Incluyendo la definición de formularios que soporten la
visualización en dispositivos móviles, es posible ejecutar solicitudes
Workflow a través de estos dispositivos y completar la información de
la definición de formularios HTML, garantizando mayor movilidad y
agilidad para realizar ejecuciones de solicitudes workflow.</p>
<p>Para incluir un nuevo fichero con soporte de dispositivos
móviles, realice el procedimiento patrón para exportar la definición
de formulario y seleccione los espacios que estarán en el formulario
mobile en la ventana antes que termine la exportación. Después de
realizar la exportación se incluirá, también, otro archivo HTML y
señalizado como "mobile" en la carpeta forms del proyecto Fluig. </p>
<p>Vea la imagen a continuación en la ventana de selección mobile
en la exportación de una definición de formulario.</p>
<p>
<img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/181962950/15.png?version=1&modificationDate=1425497106000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/181962950/15.png?version=1&modificationDate=1425497106000&api=v2">
</p>
<p style="text-align: center;">
<strong>Figura 15 - Definición de formulario mobile.</strong>
</p>
<p> </p>
<p>Después de realizar la exportación el formulario debe quedar
según se indica a continuación:</p>
<p>
<img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/181962950/16.png?version=1&modificationDate=1425497150000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/181962950/16.png?version=1&modificationDate=1425497150000&api=v2">
</p>
<p style="text-align: center;">
<strong style="text-align: center;">Figura 16 - Resultado
formulario mobile.</strong>
</p>
<p style="text-align: left;"> </p>
<h3 id="CustomizaçãodeFormulários-PaiFilhoparadispositivosmóveis">Padre
Hijo para dispositivos móviles</h3>
<p>Los espacios que emplean la técnica de padre e hijo no se
añadirán en el formulario generado automáticamente para dispositivos
móviles por el Fluig. Sin embargo el producto le permite desarrollar
un formulario personalizado para dispositivos móviles consultando
estos espacios.</p>
<div class="aui-message warning shadowed information-macro">
<span class="aui-icon icon-warning">Icon</span>
<div class="message-content">La edición de espacios padre e hijo
a través de dispositivos móviles no es posible, aún en formularios
personalizados. Solamente consulta.</div>
</div>
<p> </p>
<p>
La consulta a los espacios padre e hijo en dispositivos móviles se
realiza a través de funciones javaScript, disponibles dentro del
objeto <strong>masterList </strong> al momento de exhibir el
formulario. Son ellas:
</p>
<h4 id="CustomizaçãodeFormulários-getValue">getValue</h4>
<p>
<span style="color: rgb(51, 51, 51);">Devuelve un string con el
valor de un espacio padre e hijo, recibiendo como parámetros el
número de secuencia del hijo y el nombre del espacio.</span>
</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">masterList.getValue(sequence,field);</pre>
</div>
</div>
<p>
<span style="color: rgb(0, 0, 0);"><br /></span>
</p>
<h4 id="CustomizaçãodeFormulários-getValues">getValues</h4>
<p>Devuelve un objeto con todos los valores de los espacios padre e
hijo, agrupados por el número de secuencia. Este método no posee
parámetros.</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">masterList.getValues();</pre>
</div>
</div>
<p> </p>
<h4 id="CustomizaçãodeFormulários-getValuesBySequence">getValuesBySequence</h4>
<p>Devuelve un objeto con todos los valores de los espacios de una
determinada secuencia. Recibe como parámetro el número de la
secuencia.</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: javascript; gutter: false"
style="font-size: 12px;">masterList.getValuesBySequence(sequence);</pre>
</div>
</div>
<p>
<span style="font-size: 1.2em;"><br /></span>
</p>
<h4 id="CustomizaçãodeFormulários-getValuesByField">
<span>getValuesByField</span>
</h4>
<p>Devuelve todas as secuencias y valores de un determinado campo.
Recibe como parámetros el nombre del espacio.</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: xml; gutter: false"
style="font-size: 12px;">masterList.getValuesByField(field);</pre>
</div>
</div>
<p> </p>
<p>
Ejemplos: <a href="attachments/75270483/144081017.zip">Formularios
Padre Hijo + Eventos</a>. 
</p>
<div>
<h1 id="CustomizaçãodeFormulários-Traduçãodeformulários">Traducción
de formularios</h1>
</div>
<p>Para traducir los formularios se debe utilizar la función
i18n.translate(“literal_de_la_traducción”) en los puntos del archivo
HTML que se deben traducir, según el ejemplo a continuación:</p>
<div class="code panel pdl" style="border-width: 1px;">
<div class="codeContent panelContent pdl">
<pre class="theme: Confluence; brush: html/xml; gutter: false"
style="font-size: 12px;"><label>i18n.translate("nm_cliente")</label>
<input name=”nm_cliente”>
<br>
<label>i18n.translate("contato_cliente")</label>
<input name=”contato_cliente”></pre>
</div>
</div>
<p> </p>
<p> </p>
<div class="aui-message hint shadowed information-macro">
<span class="aui-icon icon-hint">Icon</span>
<div class="message-content">
Las literales y sus respectivos valores se informan en archivos de
propiedades con la extensión .properties para cada uno de los idiomas
deseados. Los idiomas soportados para la traducción son los mismos
soportados por le Fluig.<br />
<ul>
<li>Portugués (pt_BR);</li>
<li>Inglés (en_US);</li>
<li>Español (es).</li>
</ul>
</div>
</div>
<p> </p>
<p>Los archivos que contienen las literales tienen la siguiente
nomenclatura:</p>
<ul>
<li><strong>Portugués:</strong>
nombre_del_formulario_pt_BR.properties;</li>
<li><strong>Inglés:</strong>
nombre_del_formulario_en_US.properties;</li>
<li><strong>Español: </strong>nombre_del_formulario_es.properties.</li>
</ul>
<p style="text-align: left;"> </p>
<p style="text-align: left;">Los archivos de propiedades se crearán
según los pasos presentados a continuación:</p>
<a name="composition-deck-samples"></a>
<div id="samples" class="deck" history="false" loopcards="false"
effecttype="fade" effectduration="0.5" nextafter="0.0">
<ul class="tab-navigation"></ul>
<!-- // .tab-navigation -->
<div class="deck-cards panel" style="">
<div id="1" class="deck-card active-pane" style="" cssclass=""
accesskey="" label="Passo1" title="" nextafter="0"
effecttype="default" effectduration="-1.0">
<p> </p>
<ul>
<li><p>
Para generar los archivos de propiedades en la visión <em>Explorador
de Paquetes,</em> se debe ingresar el archivo HTML del formulario a
traducir, presionar clic con el botón derecho e ingresar a la
opción <em>Externalizar Strings</em>.
</p></li>
</ul>
<p>
<img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/181962950/01.PNG?version=1&modificationDate=1425497242069&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/181962950/01.PNG?version=1&modificationDate=1425497242069&api=v2">
</p>
<p style="text-align: center;">
<strong>Figura 1 - Menú Contextual Externalizar Strings.</strong>
</p>
<p> </p>
</div>
<div id="2" class="deck-card " style="" cssclass="" accesskey=""
label="Passo 2" title="" nextafter="0" effecttype="default"
effectduration="-1.0">
<p> </p>
<div>
<ul>
<li><p>Los archivos que contienen las literales son
creados en la carpeta del formulario.</p></li>
</ul>
<p>
<img class="confluence-embedded-image image-center"
src="http://tdn.totvs.com/download/attachments/181962950/02.PNG?version=1&modificationDate=1425497288000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/181962950/02.PNG?version=1&modificationDate=1425497288000&api=v2">
</p>
<p style="text-align: center;">
<strong style="text-align: center;">Figura 2 - Archivos
Properties en la Carpeta del Formulario.</strong>
</p>
<p>
<strong><br /></strong>
</p>
</div>
</div>
<div id="3" class="deck-card " style="" cssclass="" accesskey=""
label="Passo 3" title="" nextafter="0" effecttype="default"
effectduration="-1.0">
<p> </p>
<ul>
<li><p>Informe los valores correspondientes a las
literales para el idioma de cada archivo.</p></li>
</ul>
<p>
<img class="confluence-embedded-image image-center" width="900"
src="http://tdn.totvs.com/download/attachments/181962950/03.PNG?version=1&modificationDate=1425497325000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/181962950/03.PNG?version=1&modificationDate=1425497325000&api=v2">
</p>
<p style="text-align: center;">
<strong style="text-align: center;">Figura 3 - Edición de
un Archivo Properties.</strong>
</p>
<p style="text-align: center;">
<strong><br /></strong>
</p>
</div>
</div>
</div>
<!-- // .deck -->
<p>
Al exportar un formulario para el Fluig, los archivos de propiedades
conteniendo las literales son publicados como sus anexos.<br />El
formulario se presenta en el idioma que está configurado para el
usuario corriente.
</p>
<p> </p>
<p> </p>
</div>
|
<!DOCTYPE>, Ex: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
La utilización de las mismas puede impactar en algunas funcionalidades de la definición de formulario, o en el Workflow utilizando el navegador Microsoft® Internet Explorer ®.
FormController
O formController es el objeto que realiza la comunicación entre el formulario y la personalización de los eventos. Este objeto está disponible en cada uno de los eventos de personalización de
formularios a través de la variable form. La variable permite modificar los valores de los espacios de un registro de formulario y también obtener el estado de su edición, por ejemplo: si el
está visualizando o editando el registro del formulario. Vea a continuación los métodos disponibles para la variable form:
| |
|---|
| long getCompanyId() | Devuelve el ID de la empresa |
| int getDocumentId() | Devuelve el ID del documento (registro del formulario) |
| int getVersion() | Devuelve la versión del documento (registro del formulario) |
| int getCardIndex() | Devuelve el ID del formulario |
| String getValue(String fieldName) | Obtiene el valor de espacio del formulario |
| void setValue(String fieldName, String fieldValue) | Define el valor de un espacio del formulario |
| boolean getEnabled(String fieldName) | Verifica si un espacio está habilitado |
| void setEnabled(String fieldName, boolean enabled) | Define si un espacio debe estar habilitado o no |
| String getFormMode() | Obtiene el modo de edición del formulario con probabilidad de devolver los siguientes valores:
ADD: Creación del formulario MOD: Formulario en edición VIEW: Visualización del formulario NONE: No existe comunicación con el formulario, por ejemplo, ocurre al momento de la validación de los espacios del formulario donde no esté siendo presentado. |
| void setHidePrintLink(boolean hide) | Cuando se define con el valor true, deshabilita el botón de imprimir del formulario. |
| boolean isHidePrintLink() | Verifica si el botón para imprimir está deshabilitado. |
| Map<String, String> getChildrenFromTable(String tableName) | Devuelve un mapa que contiene los nombres y valores de los espacios hijos de una tabla padre. |
| void setHideDeleteButton(boolean hide) | Cuando se define con el valor true, deshabilita el botón de excluir registros hijos en un formulario con padre-hijo. |
| boolean isHideDeleteButton() | Verifica si la exclusión de registros hijos está deshabilitada. |
| boolean getMobile() | Verifica si se está ingresando al registro de formulario a través de un dispositivo mobile. |
La personalización de definición de formularios se realiza a través de la creación de scripts en el lenguaje JavaScript. El código de implementación de cada script se almacena en un banco de datos y dispensa el uso de otros archivos, como por ejemplo, “plugin.p”.
Los eventos de personalización para definir formularios son creados a partir del Fluig Studio. Para publicar un formulario siga los pasos según el ejemplo a continuación:
La personalización de definición de formularios se realiza a través de la creación de scripts en el lenguaje JavaScript. El código de implementación de cada script se almacena en un banco de datos y dispensa el uso de otros archivos, como por ejemplo, “plugin.p”.
Los eventos de personalización para definir formularios son creados a partir del Fluig Studio. Para publicar un formulario siga los pasos según el ejemplo a continuación:
| Deck of Cards |
|---|
| effectDuration | 0.5 |
|---|
| id | samples |
|---|
| history | false |
|---|
| effectType | fade |
|---|
|
| Card |
|---|
| default | true |
|---|
| id | 1 |
|---|
| label | Passo1 |
|---|
| Para crear una definición de formulario, en la visión Explorador de paquetes se debe ingresar a la carpeta forms del proyecto Fluig, luego presionar clic con el botón derecho y en el menú ingresar Nuevo> Definición de Formulario.
 Image Added
Figura 1 - Nueva Definición de Formulario.
|
| Card |
|---|
| En la ventana de creación de definición de formulario, basta completar el nombre deseado y luego presionar clic en finalizar
Image Added
Figura 2 - Nueva Definición de Formulario.
|
| Card |
|---|
| Image Added
Figura 3 - Nueva Definición de Formulario.
.
|
| Card |
|---|
| Image Added
Figura 4 - Nueva Definición de Formulario.
|
|
Después de crear una definición de formulario es posible crear scripts personalizados. Los eventos para formularios se deben crear según los pasos a continuación:
| Deck of Cards |
|---|
| effectDuration | 0.5 |
|---|
| id | samples |
|---|
| history | false |
|---|
| effectType | fade |
|---|
|
| Card |
|---|
| default | true |
|---|
| id | 1 |
|---|
| label | Passo1 |
|---|
| Para crear un script de formulario en Fluig, en la visión Explorador de paquetes se debe ingresar a la carpeta forms del proyecyo Fluig, luego presionar clic con el botón derecho y en el menú ingresar Nuevo > Otros.
Image Added
Figura 5 - Creación de script evento de la definición de formulario. |
| Card |
|---|
| Image Added
Figura 6 - Creación de script evento de la definición de formulario.
|
| Card |
|---|
| Image Added
Figura 7 - Creación de script evento de la definición de formulario.
.
|
| Card |
|---|
| Image Added
Figura 8 - Creación de script evento de la definición de formulario.
|
| Card |
|---|
| Image Added
Figura 9 - Creación de script evento de la definición de formulario.
. |
| Card |
|---|
| El evento utilizado como ejemplo - validateForm, valida el procedimiento de completos los espacios de solicitud y de usuario.El objeto formController, ha sido utilizado para verificar el valor de los espacios, a través de la sintaxis ‘form.getValue(“fieldname”)’. Al exportar la definición de formularios también se exportarán, los eventos relacionados, al servidor Fluig.
Image Added
Figura 10 - Creación de script evento de la definición de formulario. . |
|
Todos los eventos de la definición de formularios reciben la referencia al formulario. A través de esta referencia es posible ingresar a los espacios del formulario, ingresar/definir el valor de un espacio e ingresar/definir el estado de presentación del espacio. Los detalles de cada evento se presentarán en las próximas secciones de este documento.
El Fluig puede utilizar el log de ejecución en los eventos de personalización. A través de la variable log es posible obtener un feedback respecto a la ejecución de cada evento. Existen cuatro niveles de log:
- error: presentación de errores.
- debug: depurar la ejecución.
- warn: informar posible problema de ejecución.
- info: presentación de mensajes.
La presentación de cada uno de los tipos de log está sujeta a la configuración del servidor de la aplicación. Por ejemplo, en JBoss ®, por patrón, los mensajes de tipo info y warn se presentan en la consola del servidor y las del tipo debug, error se presentan en el archivo de log. A continuación se indica un ejemplo respecto al uso del log en script:
| Bloco de código |
|---|
|
log.info(“Testando o log info”); |
Tendríamos en la consola del servidor el mensaje “Probando el log info”.
Es posible saber el estado de edición de un formulario mediante la variable form informada como parámetro para los eventos de la definición formulario. Para ingresar al estado de edición:
| Bloco de código |
|---|
|
form.getFormMode() |
La llamada a la función form.getFormMode() devolverá una string con el modo de edición del formulario. Existen los siguientes valores para el modo de edición del formulario:
- ADD: indicando modo de inclusión.
- MOD: indicando modo de edición.
- VIEW: indicando modo de visualización.
- NONE: indicando que no hay comunicación con el formulario, por ejemplo, ocurre al momento de validar los espacios del formularios donde no está siendo presentado.
A continuación se detallarán los eventos disponibles para la personalización de una definición de formulario en Fluig.
AfterProcessing
Es el último evento a realizar para el fichero. El evento recibe como parámetro una referencia al formulario de la definición de formulario.
Ejemplo:
| Bloco de código |
|---|
|
function afterProcessing(form){
} |
En el marco de este evento la variable form solo se puede utilizar para consultas a los espacios de la definición de formularios, sus valores y estado de presentación.
AfterSaveNew
Este evento se realiza después de crear un nuevo formulario. El evento recibe como parámetro una referencia al formulario de la definición de formulario.
Para obtener el valor de un determinado espacio del formulario:
| Bloco de código |
|---|
|
form.getValue("nome-do-campo") |
Ejemplo:
| Bloco de código |
|---|
|
function afterSaveNew(form) {
log.info("Colaborador de abertura: " + form.getValue("RNC_colab_abertura"));
} |
La consulta a los espacios del formulario es case insensitve. En el ejemplo anterior, podríamos obtener el valor del espacio utilizando rnc_colab_abertura.
BeforeProcessing
Este evento es el primero a realizarse. Se produce antes de cualquier otro evento de la definición de formulario. El evento recibe como parámetro una referencia al formulario de la definición de formulario.
Ejemplo:
| Bloco de código |
|---|
|
function beforeProcessing(form){
} |
En el marco de este evento la variable form solo se puede utilizar para consultar a los espacios de la definición de formularios, sus valores y estado de presentación.
DisplayFields
Este evento se realiza en el momento en que se presentan los objetos del formulario. El evento recibe como parámetro una referencia al formulario de la definición de formulario y la referencia para salida de presentación del formulario.
En este evento es posible modificar los valores a presentar en el espacio del formulario. Para esto basta utilizar el siguiente procedimiento:
| Bloco de código |
|---|
|
form.setValue(“nome-do-campo”, “valor”); |
Ejemplo:
| Bloco de código |
|---|
|
function displayFields(form, customHTML) {
if ( form.getFormMode() == “MOD” ) {
form.setValue('RNC_colab_abertura', new java.lang.Integer(1));
}
} |
Aún en el evento DisplayFields es posible utilizar tres métodos de forma independiente o conjunta para modificar la forma en qué se presenta la renderización del formulario, eliminar renglones de un fichero hijo y ocultar los botones “Imprimir” e “Imprimir en nueva Ventana”.
Para visualizar el formulario en el formato original con los espacios deshabilitados, se debe utilizar el método setShowDisabledFields.
Para habilitar o deshabilitar el botón de excluir en los renglones del fichero hijo, que por patrón está habilitado, se debe utilizar el método setHideDeleteButton.
Para ocultar los botones Imprimir e Imprimir en nueva Ventana, se debe utilizar el método setHidePrintLink.
Ejemplo de visualización sin utilizar los métodos.
Image Added
Figura 11 - Ejemplo sin utilizar los métodos .
Ejemplo de utilización de los métodos setShowDisabledFields y setHidePrintLink:
| Bloco de código |
|---|
|
function displayFields(form, customHTML) {
form.setShowDisabledFields(true);
form.setHidePrintLink(true);
} |
Image Added
Figura 12 - Ejemplo de utilización de los métodos.
Ejemplo de visualización sin utilizar el método setHideDeleteButton:
Image Added
Figura 13 - Ejemplo sin utilizar el método.
Ejemplo utilizando el método setHideDeleteButton:
| Bloco de código |
|---|
|
function displayFields(form, customHTML) {
form.setHideDeleteButton(false);
} |
Image Added
Figura 14 - Ejemplo de utilización de los métodos.
Es importante destacar que este evento es el único que permite la modificación de los valores a presentar en los espacios formulario antes de su renderización.
A continuación un ejemplo para utilizar la salida de presentación del formulario:
| Bloco de código |
|---|
|
if(form.getFormMode() != "VIEW") {
customHTML.append("<script>");
customHTML.append("function MostraEscondeBtn_zoom()");
customHTML.append("{");
customHTML.append("document.getElementById(\'zoomUsuario\').className = \'show\';");
customHTML.append("document.getElementById(\'zoomModulo\').className = \'show\';");
customHTML.append("}");
customHTML.append("</script>");
} |
EnableFields
Este evento se realiza en el momento que se habilitan los objetos del formulario, permitiendo deshabilitar algunos espacios, en caso sea necesario. El evento recibe como parámetro una referencia al formulario de la definición de formulario.
Para habilitar o deshabilitar un espacio del formulario se debe ejecutar el siguiente procedimiento:
| Bloco de código |
|---|
|
form.setEnabled("nome-do-campo",true/false) |
Donde “true” habilita el espacio y “falso” deshabilita el campo.
Ejemplo:
| Bloco de código |
|---|
|
function enableFields(form) {
if ( form.getFormMode() != 'ADD' ){
form.setEnabled("rnc_area",false);
form. setEnabled("rnc_tipo_ocorrencia",false);
}
} |
Cabe destacar que el evento ocurre al momento de la renderización del formulario y es el único que permite modificar el estado de presentación de los espacios del formulario.
Otra forma de deshabilitar los espacios es utilizando comandos JavaScript implementados directamente en funciones del formulario. Sin embargo, en este caso, no se permite utilizar la propiedad disabled, ya que los espacios no se grabarán al guardar la ficha. Para esta situación, se debe utilizar la propiedadreadonly según el ejemplo a continuación:
| Bloco de código |
|---|
|
document.forms['nomeForm'].nomeCampo.setAttribute('readonly',true); |
InputFields
Este evento se realiza en el momento en que se informan los datos del formulario al BO responsable del formulario del Fluig. El evento recibe como parámetro una referencia al formulario de la definición de formulario. Ejemplo:
| Bloco de código |
|---|
|
function inputFields(form){
} |
SetEnable
Este evento se puede ejecutar en diferentes eventos de las definiciones de formulario. Este evento no se implementa automáticamente en la personalización de la definición de formulario.
Ejemplo:
| Bloco de código |
|---|
|
function setEnable() {
log.info(“Teste de chamada de função”);
}
function displayFields(form, customHTML) {
setEnable();
} |
ValidateForm
Este evento se ejecuta antes de guardar los datos del formulario en el banco de datos. El evento recibe como parámetro una referencia al formulario de la definición de formulario. En caso de errores de validación de los datos del formulario ese evento responderá un mensaje de error.
Ejemplo:
| Bloco de código |
|---|
|
function validateForm(form) {
if (form.getValue('RNC_colab_abertura') == null){
throw "O colaborador de abertura não foi informado";
}
} |
En este capítulo demostraremos como interactuar con algunos tipos de controles de formularios que poseen características especiales, como por ejemplo, completar el contenido de un ComboBox utilizando Datasets.
El Fluig, por patrón realiza la importación de la biblioteca JavaScript en todos los formularios, excepto en los casos donde el formulario ya lo realice. En estos casos el Fluig identificará que el jQueri ya está definido y no realizará la importación nuevamente. En caso el formulario utilice otra biblioteca que pueda entrar en conflicto con el jQuery, será necesario definir en el formulario la variable javascript fluigjQuery, con valor false, que el Fluig dejará de realizar dicha importación, sin embargo algunas otras funcionalidades como la máscara de espacios del Fluig, también se deshabilitarán.
Muchos espacios en un formulario poseen un formato específico para su contenido, como datos, CEP, CPF entre otros.
Para ayudar a los desarrolladores de formularios, el Fluig permite habilitar máscaras por espacio, basta informar el atributo "mask" y la máscara deseada a los objetos input del tipo text.
| Bloco de código |
|---|
| language | javascript |
|---|
| title | Exemplo de utilização de máscaras |
|---|
|
<input name="cep" type="text" mask="00000-000"> |
Para elaborar la máscara es posible utilizar:
| Código | Descrição |
|---|
| 0 | Somente Números. |
| 9 | Somente números mais opcional. |
| # | Somente números mais recursivo. |
| A | Números ou letras. |
| S | Somente letras entre A-Z e a-z. |
| Bloco de código |
|---|
| language | javascript |
|---|
| title | Outros exemplos de utilização de máscaras |
|---|
|
Data: "00/00/0000"
Horário: "00:00:00"
Data e Hora: "00/00/0000 00:00:00"
CEP: "00000-000"
Telefone: "0000-0000"
Telefone(ddd): "(00) 0000-0000"
Telefone(ddd + 9ºdígitos): "(00) 90000-0000"
Placa de carro: "SSS 0000"
CPF: "000.000.000-00"
CNPJ: "00.000.000/0000-00"
IP: "099.099.099.099"
porcentagem: "#00.000,00%"
Valor: "#00.000.000.000.000,00" |
| Nota |
|---|
| Caso a importação da biblioteca jQuery esteja desabilitada através da variável fluigjQuery, a funcionalidade de máscaras também estará desabilitada. |
ComboBox
Geralmente é necessário popular um ComboBox de um formulário com um determinado grupo de valores.
No Fluig isto é possível através da utilização de Datasets. Os Datasets são serviços de dados padrão disponibilizados pelo Fluig, como por exemplo, o serviço de “Volumes” do produto.
Para habilitar o Dataset no ComboBox basta usar a seguinte construção:
| Bloco de código |
|---|
|
<select name="RNC_volume" id="RNC_volume" dataset="nome-dataset" datasetkey="chave" datasetvalue="valor" addBlankLine=”false”></select> |
Onde:
- dataset é o nome do Dataset.
- datasetkey é a chave do registro.
- datasetvalue é o valor de um determinado campo do registro.
- addBlankLine é o que define se a primeira linha do combo será um valor em branco.
Exemplo:
| Bloco de código |
|---|
|
<select name="RNC_volume" id="RNC_volume" dataset="destinationVolume" datasetkey="volumeID" datasetvalue="volumeDescription"></select> |
No exemplo acima estamos listando em um ComboBox todas os Volumes cadastradas no Fluig.
Caso seja necessária a ordenação dos dados provindos de um dataset interno, indicamos a criação de um dataset customizado que execute o interno e ordene os dados, antes de alimentar o componente combobox.
Para utilizar um ComboBox com somente uma opção não deve ser utilizado caracteres especiais e espaço no value da tag option.
Exemplos:
| Bloco de código |
|---|
|
<select>
<option value="te">Teste</option>
</select> |
| Bloco de código |
|---|
|
<select>
<option value="te te te">Teste</option>
</select> |
Zoom
Permite a consulta de entidades e outros formulário criados no Fluig para seleção de dados pelo usuário.
O acesso a este componente é realizado a partir de uma chamada Javascript no HTML da definição de formulário.
| Bloco de código |
|---|
|
"/webdesk/zoom.jsp?datasetId="+dataset+"&dataFields="+campos+"&resultFields="+resultFields+"$type="+"&title="+titulo |
Onde:
- title: é o título para a janela de zoom.
- datasetId: é o nome do dataset (Built-in, CardIndex ou Customized).
- dataFields: são os nomes dos campos a serem apresentados.
- resultFields: são os campos que devem ser retornados para o registro selecionado pelo usuário.
- likeField: o nome do campo para filtro de dados (se necessário).
- likeValue: o valor a ser usado no filtro de dados (se necessário).
ATENÇÃO: Este parâmetro só é válido para datasets internos. Datasets customizados não permitem a utilização de filtros.
- Para obter o registro selecionado pelo usuário devemos adicionar a seguinte função JavaScript ao formulário do processo:
| Bloco de código |
|---|
|
function setSelectedZoomItem(selectedItem) {
} |
Onde selectItem é o registro selecionado pelo usuário na tela de zoom.
| Nota |
|---|
|
A mesma função “setSelectZoomItem” será usada para receber o resultado de todas as chamadas ao zoom. Assim, para diferenciar cada chamada foi criado o parâmetro type. Esse parâmetro é retornado em selectedItem e pode ser usado para diferenciar as chamadas ao zoom. |
- Para acessar um campo do registro selecionado:
| Bloco de código |
|---|
|
selectedItem["fieldName"] |
Onde fieldName é o nome do campo de retorno que foi definido na chamada de zoom.Para obter o registroo componente de Zoom do Fluig foi desenvolvido para permitir que o recurso de zoom fosse utilizado em definições de formulários.
Para que seja possível visualizar e resgatar informações dos campos “metadatas” do formulário, é necessário utilizar a seguinte nomenclatura:
metadata_id | Retorna o código da ficha |
medatata_version | Retorna a versão da ficha |
metadata_parent_id | Retorna o código da pasta Pai |
metadata_card_index_id | Retorna o código do fichário |
metadata_card_index_version | Retorna a versão do fichário |
metadata_active | Versão ativa |
Abaixo um exemplo de código utilizado para visualização e resgate destes valores:
| Bloco de código |
|---|
|
function zoomFormulario(titulo, dataset, campos, resultFields, type){
window.open("/webdesk/zoom.jsp?datasetId="+dataset+"&dataFields="+campos+
"&resultFields="+resultFields+"&type="+type+"&title="+titulo, "zoom", "status , scrollbars=no ,width=600, height=350 , top=0 , left=0");
} |
| Informações |
|---|
A utilização da PK nos filtros ao utilizar dataset de Grupo, Papel ou Colaborador é opcional, porém o mesmo valor utilizado na URL do zoom deve ser utilizado para a obtenção do valor selecionado, conforme exemplo abaixo. |
| Bloco de código |
|---|
|
function setSelectedZoomItem(selectedItem) {
alert("Grupo: " + selectedItem['groupId'] + " Colaborador: "+ selectedItem['colleagueGroupPK.colleagueId']);
}
<input type="button" class="btZoom" onclick="zoomFormulario('title', 'colleagueGroup', 'groupId,Codigo,colleagueGroupPK.colleagueId,Matricula','groupId,colleagueGroupPK.colleagueId', 'nofield');">
|
Para utilizar filtros a chamada é similar ao de dataFields.
Segue exemplo abaixo:
| Bloco de código |
|---|
|
window.open("/webdesk/zoom.jsp?datasetId=preCad&dataFields=codigo, Código, descricao, Descrição&resultFields=descricao&type=precad&filterValues=metadata_active, false","zoom" , "status, scrollbars=no, width=600, height=350, top=0, left=0"); |
Neste exemplo, o zoom irá retornar somente as fichas inativas.
Zoom Externo
Em situações aonde os dados dos elementos externos ao Fluig são muito volumosos é recomendada a construção de uma aplicação externa ao Fluig que fará o papel de zoom para o usuário. Abaixo será descrita uma técnica JavaScript aonde será possível chamar uma aplicação externa e a mesma poderá devolver o dado solicitado pelo usuário para um campo do formulário do Fluig.
O primeiro passo para implementação dessa técnica é criar uma lógica em JavaScript que irá abrir uma nova janela chamando a aplicação externa que irá se comportar como zoom para o formulário. Vamos utilizar e explanar o comando window.open neste exemplo:
| Bloco de código |
|---|
|
Window.open(URL Aplicação Externa, Nome da Janela que será aberta, comandos adicionais) |
Onde:
- URL Aplicação Externa: É a url da aplicação externa que funcionará como zoom para o Fluig. Ex: http://servidor/applications/forneczoom.asp.
- Nome da Janela: Nome da janela que será utilizado pelo navegador do usuário como identificador. Para evitar a sobreposição de conteúdo em janela é recomendado que para cada zoom chamado por um mesmo formulário seja adicionado um nome diferente. Ex: “ZoomFormec”.
- Comandos Adicionais: Comandos adicionais utilizados para a criação da janela que irá conter a aplicação zoom. Ex: “width=230, height=230”.
| Informações |
|---|
|
Devido a uma restrição dos navegadores a url do programa de zoom externo ao Fluig deverá estar no mesmo domínio em que o Fluig se encontra. Caso contrário não será possível atribuir ao campo do formulário o valor escolhido para o zoom. Este problema ocorrerá por que os navegadores proíbem a pratica de codificação JavaScript cross-domain. |
O código abaixo irá programar um formulário do Fluig contendo um campo e um botão lateral que irá invocar a janela da aplicação externa.
| Bloco de código |
|---|
|
<form name=”FornecedorForm”>
Código do Fornecedor:
<input name=”cod_fornec” size=’10” value=”” type=”text”>
<input value=”lista” onClick=”mostraLista()” type=”button”>
</form>
<script language=”JavaScript”>
Function mostraLista() {
Window.open(“fornecedores.html”, “list”,”width=230,height=230”);
}
</script> |
O segundo passo é programar dentro da aplicação externa uma função JavaScript que devolva para o campo do formulário o valor escolhido para o usuário na aplicação externa. Essa aplicação externa poderá ser desenvolvida em qualquer tecnologia de desenvolvimento web existente no mercado de que a mesma possa realizar a execução de scripts JavaScript no lado do cliente. Segue exemplo de uma função JavaScript que passa o valor para o campo do formulário:
| Bloco de código |
|---|
|
<script language=”JavaScript”>
function escolha(valor) {
// A linha abaixo testa se a janela do formulário do fluig que abriu a janela de zoom ainda está aberta
if (window.opener && !window.opener.close) {
// seta o valor passando para o campo
window.opener.document.(id do form no formulário fluig).(nome do campo).value = valor;
}
// Fecha a janela da aplicação zoom
window.close();
}
</script> |
Onde:
- Id do form no formuário Fluig: Caso algum id tenha sido definido para a tag <form> no formulário do Fluig é interessante referenciar neste comando. Pode ser utilizada também a referência de coleção forms dentro do comando (forms[posição]).
Ex: FornecedorForm, forms[0].
- Nome do Campo: Nome do campo que irá receber o valor passado para a função.
Ex: cod_fornec. - Valor: Dado que será passado para o campo do formulário do Fluig.
O exemplo a seguir irá programar um exemplo de zoom externo feito inteiramente em HTML com dados estáticos apenas para ilustração. Os dados de zoom podem provir de qualquer fonte seja ela interna ou externa ao Fluig.
| Bloco de código |
|---|
|
<html>
<head>
<title>Lista de fornecedores</title>
<script language="JavaScript">
function escolha(valor) {
// Teste de validade do Opener
if (window.opener && !window.opener.closed) {
// gravando o valor do campo cod_fornec
window.opener.document.forms[0].cod_fornec.value = valor;
}
window.close();
}
</script>
</head>
<body>
<!-- Os dados abaixo estão fixos mas poderiam ser montados a partir de qualquer origem. -->
<table border="1" cellpadding="5" cellspacing="0">
<tbody><tr bgcolor="#cccccc"><td colspan="2"><b>Exemplo aplicacao ECM</b></td></tr>
<tr bgcolor="#cccccc"><td><b>Codigo</b></td><td><b>NASDAQ</b></td></tr>
<tr><td><a href="javascript:escolha('TOTVSv3')">TOTVS</a></td>
<td><a href="javascript:escolha('TOTVSv3')">TOTVSv3</a></td></tr>
<tr><td><a href="javascript:escolha('RM1')">RM</a></td>
<td><a href="javascript:escolha('RM1')">RM1</a></td></tr>
<tr><td><a href="javascript:escolha('DTS3')">Datasul</a></td>
<td><a href="javascript:escolha('dts3')">Dts3</a></td></tr>
<tr><td><a href="javascript:escolha('Lgx2')">Logix</a></td>
<td><a href="javascript:escolha('Lgx2')">Lgx2</a></td></tr>
</tbody>
</table>
<!-- Fim dos dados -->
</body>
</html> |
Para colocar o exemplo em prática no produto, basta publicar a definição de formulário a seguir informando o arquivo do zoom externo como anexo da definição de formulário.
Exemplo de Zoom.zip
Ao clicar em um dos itens da tela de zoom será chamada a função JavaScript escolha que ira enviar o valor para o campo cod_fornec no formulário do Fluig.
O Fluig possui integração com dois tipos de serviços de dados, são eles: Dataset e Serviços Externos. Ambos podem ser usados em todos os eventos disponíveis para customização de definição de formulário.
Dataset
É um serviço de dados que fornece acesso às informações, independente da origem dos dados. O Fluig fornece Datasets internos que permitem acesso as entidades, como Usuários, Grupos de Usuários, entre outros. Consulte o cadastro de Datasets do Fluig para obter a relação completa dos Datasets disponíveis e seus respectivos campos.
| Informações |
|---|
|
Os exemplos abaixo utilizam a função getDatasetValues, disponível somente para os Datasets de entidade e definição de formulário(quando informado o número da definição de formulário). Para a utilização de Datasets customizados consulte o Guia de Referência Customização de Datasets. |
Na função getDatasetValues, NÃO são retornados os valores de todos os campos por questões de segurança. Para obter todos os dados é utilizado o DatasetFactory, exemplificado em Desenvolvimento de Datasets.
Por exemplo, para acessar o Dataset de usuários do Fluigno evento displayFields de uma definição de formulário:
| Bloco de código |
|---|
|
function displayFields(form,customHTML) {
// Obtendo o usuario via dataset
filter = new java.util.HashMap();
filter.put("colleaguePK.colleagueId","adm");
usuario = getDatasetValues('colleague',filter);
form.setValue('RNC_colab_abertura',usuario.get(0).get("colleagueId"));
} |
Também é possível fazer uma chamada aos Datasets dentro da definição de formulário através de funções JavaScript.
O acesso aos Datasets também pode ser realizado diretamente no formulário da definição de formulário. Por exemplo, para acessar o Dataset de usuário e inserir os valores nos campos do HTML:
| Bloco de código |
|---|
|
<html>
<head>
<title>
Teste XMLRPC
</title>
<script language="javascript">
function init(){
var filter = new Object();
filter["colleaguePK.colleagueId"] = "adm";
var colleagues = getDatasetValues("colleague", filter);
if(colleagues.length > 0){
document.getElementById("colleagueName").value = colleagues[0].colleagueName;
document.getElementById("colleagueId").value = colleagues[0].colleagueId;
document.getElementById("login").value = colleagues[0].login;
document.getElementById("extensionNr").value = colleagues[0].extensionNr;
document.getElementById("groupId").value = colleagues[0].groupId;
document.getElementById("mail").value = colleagues[0].mail;
}else{
alert("Nenhum Usuário Encontrado");
}
}
</script>
</head>
<script src="../vcXMLRPC.js"></script>
<body onload="init()">
<form id="form1">
<b> Nome do Usuário: </b>
<input type="text" name="colleagueName" id="colleagueName" />
<br><br>
<b> Matricula do Usuário: </b>
<input type="text" name="colleagueId" id="colleagueId" />
<br><br>
<b>Login do Usuário:</b>
<input type="text" name="login" id="login" />
<br><br>
<b> Ramal do Usuário: </b>
<input type="text" name="extensionNr" id="extensionNr" />
<br><br>
<b> Grupo do Usuário: </b>
<input type="text" name="groupId" id="groupId" />
<br><br>
<b> E-mail do Usuário: </b>
<input type="text" name="mail" id="mail" />
<br><br>
</form>
</body>
</html> |
O Dataset para definição de formulário utiliza a mesma chamada do Dataset de entidades, como no caso do usuário. Entretanto ao invés de passarmos como parâmetro o nome do Dataset passaremos o número da definição de formulário, por exemplo:
| Bloco de código |
|---|
|
function displayFields(form,customHTML) {
// Obtendo o usuario via dataset
filter = new java.util.HashMap();
filter.put("RNC_nr_solicitacao",new java.lang.Integer(20));
fichas = getDatasetValues(Number(676),filter);
log.info("Usuário de Abertura: "+ fichas.get(0).get("RNC_colab_abertura"));
} |
Download de exemplo de Formulário Combobox e Dataset: form.html.
DataService
É um serviço de dados que permite o acesso de aplicações de terceiros através do Fluig. Este serviço de dados suporta dois tipos de conexão, são eles: AppServer do Progress® e Web Services.
Os serviços de dados são cadastrados e configurados a partir da função Visualização de Serviços do Fluig Studio.
Para mais informações sobre o cadastro dos serviços consulte: Integração Com Aplicativos Externos. E para informações de utilização dos serviços nos eventos consulte: Desenvolvimento de Workflow.
A técnica Pai X Filho foi modificada e agora a posição da tag tablename é feita dentro da tag "table" do código html.
No novo modelo implementado agora o parser do fichário aplicará as mudanças do pai filho da seguinte forma:
<table tablename="teste"> - A propriedade tablename determina que Agora abaixo dessa tabela será implementado um sistema de pai filho dentro da definição de formulário. A tag <table> terá seus parâmetros varridos na busca de outros parâmetros relacionados à técnica que serão explicados mais adiante nesse texto. Será criada uma outra <table> ao redor da tabela principal que conterá um botão que permite adicionar novos filhos. Isso não ocorrerá apenas em casos em que a propriedade noaddbutton também seja informada em conjunto com a propriedade tablename.
<TR> (primeiro abaixo do table) - A primeira tag de <TR> encontrada dentro da tabela é visualizada como uma tag que conterá os labels da tabela pai filho a esta tag será adicionada uma coluna <TD> contendo o ícone e a função de eliminar filhos existentes em tela. Está nova coluna será a primeira coluna a esquerda da tabela.
<TR> (Segundo abaixo do table) - A técnica pai filho irá ocultar a linha <TR> original e transforma lá no seu “template mestre” para criação dos filhos daquela tabela. Cada vez que o botão “novo” for acionado todo o conjunto de campos existentes dentro desse segundo <TR> será replicado em tela com os dados iniciais definidos para estes campos.
</table> - Fim do escopo da técnica.
A técnica também suporta novos atributos que podem ser passados eu usados para customizar a técnica pai e filho. São elas:
noaddbutton - Remove o botão “adicionar” da tela no momento da edição do formulário. Isso permite ao desenvolvedor escolher aonde ele vai colocar a função que criará os filhos em tela podendo amarrar a chamada da função em um link texto ou uma figura ou outro objeto do html.
| Bloco de código |
|---|
|
<table tablename="teste" noaddbutton=true> |
nodeletebutton - Remove o botão “lixeira” da tela no momento da edição da ficha. Isso permite ao desenvolvedor impedir a eliminação dos registros ou definir outra forma de executar a função que removerá os filhos da tabela.
| Bloco de código |
|---|
|
<table tablename="teste" nodeletebutton=true> |
addbuttonlabel - Determina que texto será posto no botão de adicionar filhos da técnica. Caso não seja informado o botão virá com o texto padrão (novo).
| Bloco de código |
|---|
|
<table tablename="teste" addbuttonlabel="Adicionar novo ingrediente"> |
addbuttonclass - Permite definir qual classe css será utilizada pelo botão. Essa classe css deverá estar disponível no documento html do fichário.
| Bloco de código |
|---|
|
<table tablename="teste" addbuttonclass="wdkbuttonClass"> |
deleteicon - Permite determinar qual será a imagem que funcionará como ícone da eliminação de filhos em tela. Essa imagem deverá ser um anexo da definição de formulário e deverá ser informada na classe como uma imagem qualquer utilizada como anexo na definição de formulário.
| Bloco de código |
|---|
|
<table tablename="teste" deleteicon="teste.jpg"> |
customFnDelete - Permite a customização da função que é chamada ao clicar no botão que elimina um filho da tabela. A função customizada deverá estar disponível no documento html da definição de formulário e, obrigatoriamente, chamar a função padrão.
| Bloco de código |
|---|
|
<table tablename="teste" customFnDelete="fnCustomDelete(this)">
function fnCustomDelete(oElement){
//Customização
alert ("Eliminando filho!");
// Chamada a funcao padrao, NAO RETIRAR
fnWdkRemoveChild(oElement);
//Customização
alert ("Filho eliminado!");
} |
É possível usar a combinação de um ou mais atributos na mesma tabela pai filho. Contudo se a propriedade noaddbutton for utilizada os valores das propriedades addbuttonlabel e addbuttonclass serão ignoradas. Não será gerada uma mensagem de erro na publicação ou versionamento dessa definição de formulário, porém no momento da edição do formulário a mesma não irá apresentar o botão padrão que permite cadastrar novos filhos na definição de formulário. A propriedade deleteicon não é afetada pela propriedade noaddbutton. Exemplo de uso combinado de parâmetros:
| Bloco de código |
|---|
|
<table tablename="teste" addbuttonlabel="Adicionar novo ingrediente" addbuttonclass="wdkbuttonClass" deleteicon="teste.jpg"> |
| Nota |
|---|
- A técnica 2.0 do Pai filho não é retro-compatível com a primeira implementação. Definição de formulários que foram feitas com a primeira técnica deverão ser retrabalhados para utilizar este nova técnica.
A técnica 2.0 do pai Filho não aceita todos os componentes html, mas aceita os principais, sendo os homologados pelo produto os tipos: text, radio button, checkbox, select, select multiple, hidden, textarea, image e button. Download de exemplo de Formulário Pai x Filho: form.htm. Campos de uma tabela pai e filho não estão disponíveis para serem utilizados como descrição das fichas na configuração do formulário.
|
Pai Filho Radio Button
Para utilizar campos radio button, além da definição padrão do componente html, é necessário que seja utilizado o atributo ‘value’ para os dados serem salvos corretamente.
| Bloco de código |
|---|
|
<table border="1" tablename="teste" addbuttonlabel="Adicionar Filho" nodeletebutton="true">
<thead>
<tr>
<td><b>Nome</b></td>
<td><b>Idade</b></td>
<td><b><font face = "arial" size=5 color ="blue">Sim:</b></td>
<td><b><font face = "arial" size=5 color ="blue">Não:</b></td>
</tr>
</thead>
<tr>
<td><input type="text" name="nomefilho"></td>
<td><input type="text" name="idadefilho"></td>
<td><input type="radio" name="nameradiofilho" id = "idsimfilho" value="ant_yes"></td>
<td><input type="radio" name="nameradiofilho" id = "idnaofilho" value="ant_no"></td>
</tr>
</table> |
Para facilitar a manipulação dos dados em uma customização de formulário que faz uso da técnica Pai Filho, foram disponibilizados os métodos listados a seguir. Ambos são chamados a partir do objeto form que é passado como parâmetro nas funções de customização de formulários.
Esse evento retorna um mapa com todos os campos filhos de um Pai Filho a partir do seu tablename.
Esse evento retorna os índices dos registros (linhas) contidos em um Pai Filho a partir do seu tablename.
Exemplo:
| Bloco de código |
|---|
|
function validateForm(form){
var indexes = form.getChildrenIndexes("tabledetailname");
var total = 0;
for (var i = 0; i < indexes.length; i++) {
var fieldValue = parseInt(form.getValue("valor___" + indexes[i]));
if (isNaN(fieldValue)){
fieldValue = 0;
}
total = total + fieldValue;
log.info(total);
}
log.info(total);
if (total < 100) {
throw "Valor Total da requisição não pode ser inferior a 100";
}
}
|
Com a inclusão de definição de formulários que suportem a visualização em dispositivos móveis, é possível movimentar solicitações Workflow através destes dispositivos e realizar o preenchimento das informações da definição de formulários HTML, garantindo maior mobilidade e agilidade para realizar movimentações de solicitações workflow.
Para incluir um novo fichário com suporte de dispositivos móveis, realize o procedimento padrão para exportação da definição de formulário e selecione os campos que irão compor o formulário mobile na tela antes da conclusão da exportação. Após a exportação será incluindo também outro arquivo HTML e marcando-o como "mobile" na pasta forms do projeto Fluig.
Veja na imagem a seguir a tela de seleção mobile na exportação de uma definição de formulário:
Image Added
Figura 15 - Definição de formulário mobile.
Após exportado o formulário deve ficar conforme a seguir:
Image Added
Figura 16 - Resultado formulário mobile.
Pai Filho para dispositivos móveis
Os campos que empregam a técnica de pai e filho não são inseridos no formulário gerado automaticamente para dispositivos móveis pelo Fluig. Porem o produto lhe permite desenvolver um formulário customizado para dispositivos móveis consultando estes campos.
| Nota |
|---|
| A edição de campos pai e filho através de dispositivos mobile não é possível, mesmo em formulários customizados. Somente consulta. |
A consulta aos campos pai e filho em dispositivos móveis é realizada por meio de funções javaScript, disponíveis dentro do objeto masterList no momento da exibição do formulário. São elas:
getValue
Retorna uma string com o valor de um campo pai e filho, recebendo como parâmetros o numero de sequencia do filho e o nome do campo.
| Bloco de código |
|---|
|
masterList.getValue(sequence,field); |
getValues
Retorna um objeto com todos os valores dos campos pai e filho, agrupados pelo numero de sequencia. Este método não possui parâmetros.
| Bloco de código |
|---|
|
masterList.getValues(); |
getValuesBySequence
Retorna um objeto com todos os valores do campos de uma determinada sequencia. Recebe como paramento o numero da sequencia.
| Bloco de código |
|---|
|
masterList.getValuesBySequence(sequence); |
getValuesByField
Retorna todas as sequencias e valores de um determinado campo. Recebe como parâmetro o nome do campo.
| Bloco de código |
|---|
masterList.getValuesByField(field); |
Exemplos: Formulários Pai Filho + Eventos.
Para traduzir formulários é necessário utilizar a função i18n.translate(“literal_da_tradução”) nos pontos do arquivo HTML que devem ser traduzidos, conforme exemplo a seguir:
| Bloco de código |
|---|
|
<label>i18n.translate("nm_cliente")</label>
<input name=”nm_cliente”>
<br>
<label>i18n.translate("contato_cliente")</label>
<input name=”contato_cliente”> |
| Informações |
|---|
As literais e seus respectivos valores são informados em arquivos de propriedades com a extensão .properties para cada um dos idiomas desejados. Os idiomas suportados para a tradução são os mesmos suportados pelo Fluig:
- Português (pt_BR);
- Inglês (en_US);
- Espanhol (es).
|
Os arquivos contendo as literais têm a seguinte nomenclatura:
- Português: nome_do_formulario_pt_BR.properties;
- Inglês: nome_do_formulario_en_US.properties;
- Espanhol: nome_do_formulario_es.properties.
Os arquivos de propriedades são criados de acordo com os passos apresentados a seguir:
| Deck of Cards |
|---|
| effectDuration | 0.5 |
|---|
| id | samples |
|---|
| history | false |
|---|
| effectType | fade |
|---|
|
| Card |
|---|
| default | true |
|---|
| id | 1 |
|---|
| label | Passo1 |
|---|
| Para gerar os arquivos de propriedades, na visão Explorador de Pacotes, deve-se acessar o arquivo HTML do formulário a ser traduzido, clicar com o botão direito e acessar a opção Externalizar Strings.
Image Added Figura 1 - Menu Contextual Externalizar Strings. |
| Card |
|---|
| Image Added Figura 2 - Arquivos Properties na Pasta do Formulário.
|
| Card |
|---|
| Image Added Figura 3 - Edição de um Arquivo Properties.
|
|
Ao exportar um formulário para o Fluig, os arquivos de propriedades contendo as literais são publicados como anexos dele.
O formulário é apresentado no idioma que está configurado para o usuário corrente.
Adobe, Flash, Flex, Flex Builder, PostScript and Reader are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.
Apache is a trademark of The Apache Software Foundation.
Apple is a trademark of Apple Inc., registered in the U.S. and other countries.
Firefox and Mozilla are registered trademarks of the Mozilla Foundation.
Google, Android and Google Chrome are trademarks of the Google Inc.
IOS is a trademark or registered trademark of Cisco in the U.S. and other countries and is used under license.
JavaScript is a trademark of Oracle Corporation.
Linux® is the registered trademark of Linus Torvalds in the U.S. and other countries.
Microsoft, Active Directory, Excel, Internet Explorer, Outlook, PowerPoint, SQL Server, Windows and Windows Vista are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries.
MySQL is a trademark of Oracle Corporation and/or its affiliates.
Oracle, Java and OpenOffice.org are registered trademarks of Oracle and/or its affiliates. Other names may be trademarks of their respective owners.
Progress and OpenEdge are trademarks or registered trademarks of Progress Software Corporation or one of its subsidiaries or affiliates in the U.S. and other countries.
Red Hat and JBoss are registered trademarks of Red Hat, Inc. in the United States and other countries.
Any other third party trademarks are the property of their respective owners.