Histórico da Página

<div id="main-content" class="wiki-content group">
	<div>
		<h1 id="CustomizaçãodeFormulários-Índice">Índice</h1>
		<p>&#160;</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&lt;!DOCTYPE&gt;HTML'>Declaración
						&lt;!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>&#160;</p>
		<h1 id="CustomizaçãodeFormulários-Declaração&lt;!DOCTYPE&gt;HTML">Declaración
			&lt;!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;">&lt;!DOCTYPE>, Ex: &lt;!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;">&#160;</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.&#160;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>.&#160;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.&#160;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&lt;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>&#160;</p>
	<p>
		<span style="font-size: 10.0pt; line-height: 13.0pt;"><br /></span>
	</p>
	<p>&#160;</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>&#160;</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>.&#160;
						</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>&#160;</p>
			</div>
			<div id="2" class="deck-card " style="" cssclass="" accesskey=""
				label="Passo 2" title="" nextafter="0" effecttype="default"
				effectduration="-1.0">
				<p>&#160;</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>&#160;</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>&#160;</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>&#160;</p>
				</div>
			</div>
		</div>
	</div>
	<!-- // .deck -->
	<p>&#160;</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>&#160;</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>.&#160;
						</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>&#160;</p>
			</div>
			<div id="2" class="deck-card " style="" cssclass="" accesskey=""
				label="Passo 2" title="" nextafter="0" effecttype="default"
				effectduration="-1.0">
				<p>&#160;</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>&#160;</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>&#160;</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>&#160;</p>
				</div>
			</div>
			<div id="5" class="deck-card " style="" cssclass="" accesskey=""
				label="Passo 5" title="" nextafter="0" effecttype="default"
				effectduration="-1.0">
				<p>&#160;</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>&#160;</p>
				</div>
			</div>
			<div id="6" class="deck-card " style="" cssclass="" accesskey=""
				label="Passo 6" title="" nextafter="0" effecttype="default"
				effectduration="-1.0">
				<p>&#160;</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>&#160;</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>&#160;</p>
				</div>
			</div>
		</div>
	</div>
	<!-- // .deck -->
	<p>&#160;</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>&#160;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>&#160;</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>&#160;</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;">&#160;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;">&#160;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>&#160;</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>&#160;</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;">&#160;function displayFields(form, customHTML) {
   if ( form.getFormMode() == “MOD” ) {
     form.setValue('RNC_colab_abertura', new java.lang.Integer(1));
   }
}</pre>
		</div>
	</div>
	<p>&#160;</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;">&#160;</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>&#160;<em>setHideDeleteButton</em>.
		</span>
		</span>
	</p>
	<p>
		Para ocultar los botones <strong>&#160;</strong><em>Imprimir</em><strong>&#160;</strong>
		e <em>Imprimir en nueva Ventana</em>,<strong> </strong>se debe
		utilizar el método <em>setHidePrintLink</em>.
	</p>
	<p>&#160;</p>
	<p>&#160;</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/75270483181962950/7523746611.png?version=1&modificationDate=1425496752000&api=v2"
			data-image-src="http://tdn.totvs.com/download/attachments/75270483181962950/7523746611.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>&#160;<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/75270483181962950/7523746912.png?version=1&modificationDate=1425496861000&api=v2"
			data-image-src="http://tdn.totvs.com/download/attachments/75270483181962950/7523746912.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>&#160;</p>
	<p>&#160;</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/75270483181962950/12668403713.png?version=1&modificationDate=1425496922000&api=v2"
			data-image-src="http://tdn.totvs.com/download/attachments/75270483181962950/12668403713.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>&#160;</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/75270483181962950/12668403814.png"
?version=1&modificationDate=1425496991000&api=v2"
			data-image-src="http://tdn.totvs.com/download/attachments/75270483181962950/12668403814.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("&lt;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("&lt;/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;">&#160;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>&#160;</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>&#160;</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>&#160;</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>&#160;</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>&#160;</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.&#160;En caso el formulario utilice otra biblioteca que
		pueda entrar en conflicto con el jQuery, será necesario definir en el
		formulario la variable javascript&#160;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>&#160;</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.&#160;</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>&#160;del
		tipo&#160;<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;">&lt;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;">                    &#160;
                     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>&#160;</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;">&lt;select name="RNC_volume" id="RNC_volume" dataset="nome-dataset" datasetkey="chave" datasetvalue="valor" addBlankLine=”false”>&lt;/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;">&lt;select name="RNC_volume" id="RNC_volume" dataset="destinationVolume" datasetkey="volumeID" datasetvalue="volumeDescription">&lt;/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>&#160;</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;">&lt;select>
  &lt;option value="te">Teste&lt;/option>
&lt;/select></pre>
		</div>
	</div>
	<p>&#160;</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;">&lt;select>
  &lt;option value="te te te">Teste&lt;/option>
&lt;/select></pre>
		</div>
	</div>
	<p>&#160;</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+"&amp;dataFields="+campos+"&amp;resultFields="+resultFields+"$type="+"&amp;title="+titulo</pre>
		</div>
	</div>
	<p>
		<span style="font-size: 10.0pt; line-height: 13.0pt;">Donde:</span>
	</p>
	<p>&#160;</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>&#160;</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>&#160;</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 &#160;<em>type</em>. Este
				parámetro se devuelve en <em>selectedItem</em>&#160; y se puede
				utilizar para diferenciar las llamadas al zoom.
			</p>
		</div>
	</div>
	<p>&#160;</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>&#160;</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>&#160;</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+"&amp;dataFields="+campos+
	"&amp;resultFields="+resultFields+"&amp;type="+type+"&amp;title="+titulo, "zoom", "status , scrollbars=no ,width=600, height=350 , top=0 , left=0");
}&#160;</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']);
}
&#160;
&lt;input type="button" class="btZoom" onclick="zoomFormulario('title', 'colleagueGroup', 'groupId,Codigo,colleagueGroupPK.colleagueId,Matricula','groupId,colleagueGroupPK.colleagueId', 'nofield');">
&#160;</pre>
		</div>
	</div>
	<p>&#160;</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&amp;dataFields=codigo, Código, descricao, Descrição&amp;resultFields=descricao&amp;type=precad&amp;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>&#160;</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>&#160;</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;">&lt;form name=”FornecedorForm”>
  Código del Proveedor:
  &lt;input name=”cod_fornec” size=’10” value=”” type=”text”>
  &lt;input value=”lista” onClick=”mostraLista()” type=”button”>
&lt;/form>
&lt;script language=”JavaScript”>
   Function mostraLista() {
     Window.open(“fornecedores.html”, “list”,”width=230,height=230”);
   }
&lt;/script>&#160; &#160; &#160; &#160;</pre>
		</div>
	</div>
	<p>&#160;</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;">&lt;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 &amp;&amp; !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();
   }
&lt;/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>&lt;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>.&#160;<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.&#160;<br />Ej: <em>cod_proveed</em>.
		</li>
		<li>Valor: Datos que se informará al espacio del formulario del
			Fluig.</li>
	</ul>
	<p>&#160;</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;">&lt;html>
  &lt;head>
  &lt;title>Lista de proveedores&lt;/title> 

&lt;script language="JavaScript"> 
function elegir(valor) { 
  // Prueba de validez del Opener 
  if (window.opener &amp;&amp; !window.opener.closed) { 
      // grabando el valor del espacio cod_fornec 
      window.opener.document.forms[0].cod_fornec.value = valor; 
  } 
   window.close(); 
} 
&lt;/script>
&#160;
  &lt;/head>
  &lt;body>   
  &lt;!-- Los datos a continuación están fijos pero se podrían configurar a partir de cualquier origen. --> 
  &lt;table border="1" cellpadding="5" cellspacing="0"> 
  &lt;tbody>&lt;tr bgcolor="#cccccc">&lt;td colspan="2">&lt;b>Exemplo aplicacao ECM&lt;/b>&lt;/td>&lt;/tr> 
  &lt;tr bgcolor="#cccccc">&lt;td>&lt;b>Codigo&lt;/b>&lt;/td>&lt;td>&lt;b>NASDAQ&lt;/b>&lt;/td>&lt;/tr> 
  &lt;tr>&lt;td>&lt;a href="javascript:escolha('TOTVSv3')">TOTVS&lt;/a>&lt;/td> 
  &lt;td>&lt;a href="javascript:escolha('TOTVSv3')">TOTVSv3&lt;/a>&lt;/td>&lt;/tr> 
  &lt;tr>&lt;td>&lt;a href="javascript:escolha('RM1')">RM&lt;/a>&lt;/td> 
  &lt;td>&lt;a href="javascript:escolha('RM1')">RM1&lt;/a>&lt;/td>&lt;/tr> 
  &lt;tr>&lt;td>&lt;a href="javascript:escolha('DTS3')">Datasul&lt;/a>&lt;/td> 
  &lt;td>&lt;a href="javascript:escolha('dts3')">Dts3&lt;/a>&lt;/td>&lt;/tr> 
  &lt;tr>&lt;td>&lt;a href="javascript:escolha('Lgx2')">Logix&lt;/a>&lt;/td> 
  &lt;td>&lt;a href="javascript:escolha('Lgx2')">Lgx2&lt;/a>&lt;/td>&lt;/tr> 
  &lt;/tbody>
  &lt;/table>&#160;
  &lt;!-- Fin de los datos--> 
  &lt;/body>
&lt;/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>&#160;</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>&#160;</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;">&#160;&lt;html>
    &lt;head>
        &lt;title>
            Prueba XMLRPC
        &lt;/title>
        &lt;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");
				}
            }
        &lt;/script>
    &lt;/head>
    &lt;script src="../vcXMLRPC.js">&lt;/script>
    &lt;body onload="init()">
    &lt;form id="form1">
        &lt;b> Nombre del Usuario: &lt;/b>
        &lt;input type="text" name="colleagueName" id="colleagueName" />
	    &lt;br>&lt;br>    
		&lt;b> Matrícula del Usuario: &lt;/b>
        &lt;input type="text" name="colleagueId" id="colleagueId" />
		&lt;br>&lt;br>
		&lt;b>Login del Usuario:&lt;/b>
        &lt;input type="text" name="login" id="login" />
        &lt;br>&lt;br>           &#160;
		&lt;b> Ramal del Usuario: &lt;/b>
        &lt;input type="text" name="extensionNr" id="extensionNr" />
        &lt;br>&lt;br>
        &lt;b> Grupo del Usuario: &lt;/b>
        &lt;input type="text" name="groupId" id="groupId" />
        &lt;br>&lt;br>
        &lt;b> Correo electrónico del Usuario: &lt;/b>
        &lt;input type="text" name="mail" id="mail" />
        &lt;br>&lt;br>
    &lt;/form>
    &lt;/body>
&lt;/html></pre>
		</div>
	</div>
	<p>&#160;</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>&#160;</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>&#160;</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>&#160;</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:&#160;<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>&lt;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 &lt;
		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 &lt;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;">&#160; &#160;
		
	</p>
	<p>
		<strong>&lt;TR></strong> (primero abajo del table) - El primer tag de
		&lt;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 &lt;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>&lt;TR></strong>&#160; (Segundo abajo del table) - La técnica
		padre hijo ocultará el renglón &lt;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 &lt;TR> se replicará en la ventana con los datos
		iniciales definidos para estos espacios.
	</p>
	<p>
		<strong>&lt;/table></strong>&#160; -&#160;Fin del objetivo de la
		técnica.
	</p>
	<p>&#160;</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;">&lt;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;">&#160;&lt;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;">&#160; &#160;
			&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160;
			&#160; &#160; &#160; &#160; &#160; &#160;&#160;</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;">&#160;&lt;table tablename="prueba" addbuttonlabel="Agregar nuevo ingrediente"></pre>
		</div>
	</div>
	<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</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;">&#160;&lt;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;">&lt;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;">&lt;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>&#160;</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;">&lt;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: &#160;<em>text, radio button, checkbox,
							select, select multiple, hidden, textarea, image&#160;</em>e<em>&#160;button.
						</em><em style="font-size: 10.0pt; line-height: 13.0pt;">Download
							de ejemplo de Formulario Padre x Hijo:&#160;<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;">&lt;table border="1" tablename="prueba" addbuttonlabel="Agregar Hijo"  nodeletebutton="true">
	&lt;thead>
		&lt;tr>
			&lt;td>&lt;b>Nome&lt;/b>&lt;/td>
			&lt;td>&lt;b>Idade&lt;/b>&lt;/td>
			&lt;td>&lt;b>&lt;font face =	"arial" size=5 color ="blue">Sim:&lt;/b>&lt;/td>
		 	&lt;td>&lt;b>&lt;font face = "arial" size=5 color ="blue">Não:&lt;/b>&lt;/td>
	 	&lt;/tr>
	&lt;/thead>
	&lt;tr>
		&lt;td>&lt;input type="text" name="nombrehijo">&lt;/td>
		&lt;td>&lt;input type="text" name="edadhijo">&lt;/td>
 		&lt;td>&lt;input type="radio" name="nameradiohijo" id = "idsimhijo" value="ant_yes">&lt;/td>
	 	&lt;td>&lt;input type="radio" name="nameradiohijo" id = "idnaohijo" value="ant_no">&lt;/td>
	&lt;/tr>
&lt;/table></pre>
		</div>
	</div>
	<p>&#160;</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 &#160;<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);">&#160;</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 &#160;<em>form</em>
		</p>
		<p>
			<span style="color: rgb(0, 51, 102);">&#160;</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);">&#160;</span>
		</p>
		<p>Ejemplo:</p>
		<div class="syntaxhighlighter nogutter  javascript">
			<p>&#160;</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 &lt; 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 &lt; 100) {
        throw "Valor Total de la readquisición no puede ser inferior a 100";
    }
}
</pre>
				</div>
			</div>
			<p>&#160;</p>
		</div>
		<p>&#160;</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.&#160;</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/75270483181962950/7523752515.png?version=1&modificationDate=1425497106000&api=v2"
			data-image-src="http://tdn.totvs.com/download/attachments/75270483181962950/7523752515.png?version=1&modificationDate=1425497106000&api=v2">
	</p>
	<p style="text-align: center;">
		<strong>Figura 15 - Definición de formulario mobile.</strong>
	</p>
	<p>&#160;</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/75270483181962950/7523752416.png?version=1&modificationDate=1425497150000&api=v2"
			data-image-src="http://tdn.totvs.com/download/attachments/75270483181962950/7523752416.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;">&#160;</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>&#160;</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&#160;</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>&#160;</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>&#160;</p>
	<p>
		Ejemplos: <a href="attachments/75270483/144081017.zip">Formularios
			Padre Hijo + Eventos</a>.&#160;
	</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;">&lt;label>i18n.translate("nm_cliente")&lt;/label>
&lt;input name=”nm_cliente”>
&lt;br>
&lt;label>i18n.translate("contato_cliente")&lt;/label>
&lt;input name=”contato_cliente”></pre>
		</div>
	</div>
	<p>&#160;</p>
	<p>&#160;</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>&#160;</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;">&#160;</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>&#160;</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/75270483181962950/142934302.png01.PNG?version=1&modificationDate=1425497242069&api=v2"
						data-image-src="http://tdn.totvs.com/download/attachments/75270483181962950/142934302.png01.PNG?version=1&modificationDate=1425497242069&api=v2">
				</p>
				<p style="text-align: center;">
					<strong>Figura 1 - Menú Contextual Externalizar Strings.</strong>
				</p>
				<p>&#160;</p>
			</div>
			<div id="2" class="deck-card " style="" cssclass="" accesskey=""
				label="Passo 2" title="" nextafter="0" effecttype="default"
				effectduration="-1.0">
				<p>&#160;</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/75270483181962950/142934303.png02.PNG?version=1&modificationDate=1425497288000&api=v2"
							data-image-src="http://tdn.totvs.com/download/attachments/75270483181962950/142934303.png02.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>&#160;</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/75270483181962950/142934304.png03.PNG?version=1&modificationDate=1425497325000&api=v2"
						data-image-src="http://tdn.totvs.com/download/attachments/75270483181962950/142934304.png03.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>&#160;</p>
	<p>&#160;</p>
</div>