HTML


<div id="main-content" class="wiki-content group">
	<h1 id="CustomizaçãodeFormulárioMobile-Índice">Índice</h1>
	<p>
		<style type='text/css'>/*<![CDATA[*/
div.rbtoc1412696021677 {
	padding: 0px;
}
div.rbtoc1412696021677 ul {
	list-style: none;
	margin-left: 0px;
}
div.rbtoc1412696021677 li {
	margin-left: 0px;
	padding-left: 0px;
}
/*]]>*/
</style>
	<div class='toc-macro rbtoc1412696021677'>
		<ul class='toc-indentation'>
			<li><span class='TOCOutline'>Formulario <a
					href='#CustomizaçãodeFormulárioMobile-FormulárioMobile'>móvil</a></span>.</li>
			<li><span class='TOCOutline'>2</span> <a
				href='#CustomizaçãodeFormulárioMobile-RecomendaçõesparaProcessoscomFormulárioMobile'>Recomendaciones
					para Procesos con Formulario Móvil</a></li>
			<li><span class='TOCOutline'>3</span> <a
				href='#CustomizaçãodeFormulárioMobile-Benefícios'>Beneficios</a></li>
			<li><span class='TOCOutline'>4</span> <a
				href='#CustomizaçãodeFormulárioMobile-CriandoumFormulárioMobile'>Creando
					un&#160;Formulario Móvil</a></li>
			<li><span class='TOCOutline'>5</span> <a
				href='#CustomizaçãodeFormulárioMobile-CustomizandodeFormulárioMobile'>Personalizando
					el Formulario Móvil</a>
				<ul class='toc-indentation'>
					<li><span class='TOCOutline'>5.1</span> <a
						href='#CustomizaçãodeFormulárioMobile-CSS'>CSS</a></li>
					<li><span class='TOCOutline'>5.2</span> <a
						href='#CustomizaçãodeFormulárioMobile-jQueryMobile'>jQuery
							Mobile</a></li>
					<li><span class='TOCOutline'>5.3</span> <a
						href='#CustomizaçãodeFormulárioMobile-JavaScript'>JavaScript</a></li>
					<li><span class='TOCOutline'>5.4</span> <a
						href='#CustomizaçãodeFormulárioMobile-Serviços'>Servicios</a></li>
					<li><span class='TOCOutline'>5.5</span> <a
						href='#CustomizaçãodeFormulárioMobile-TraduçãodeFormulários'>Traducción
							de Formularios</a></li>
					<li><span class='TOCOutline'>5.6</span> <a
						href='#CustomizaçãodeFormulárioMobile-PaiFilhoparadispositivosmóveis'>Principal
							secundario para dispositivos móviles</a>
						<ul class='toc-indentation'>
							<li><span class='TOCOutline'>5.6.1</span> <a
								href='#CustomizaçãodeFormulárioMobile-getValue'>getValue</a></li>
							<li><span class='TOCOutline'>5.6.2</span> <a
								href='#CustomizaçãodeFormulárioMobile-getValues'>getValues</a></li>
							<li><span class='TOCOutline'>5.6.3</span> <a
								href='#CustomizaçãodeFormulárioMobile-getValuesBySequence'>getValuesBySequence</a></li>
							<li><span class='TOCOutline'>5.6.4</span> <a
								href='#CustomizaçãodeFormulárioMobile-getValuesByField'>getValuesByField</a></li>
						</ul></li>
					<li><span class='TOCOutline'>5.7</span> <a
						href='#CustomizaçãodeFormulárioMobile-InsiraanexosdasolicitaçãodiretamentedoFormulário'>Ingrese
							adjuntos de la solicitud directamente desde el Formulario</a></li>
					<li><span class='TOCOutline'>5.8</span> <a
						href='#CustomizaçãodeFormulárioMobile-ComoidentificarqueestouusandooMobilenoseventos?'>¿Cómo
							identificar que estoy usando el Móvil en los eventos?</a></li>
					<li><span class='TOCOutline'>5.9</span> <a
						href='#CustomizaçãodeFormulárioMobile-Exemplo'>Ejemplo</a></li>
				</ul></li>
		</ul>
	</div>
	</p>
	<h1 id="CustomizaçãodeFormulárioMobile-FormulárioMobile">Formulario
		Móvil</h1>
	<p>En el Fluig, es posible mover solicitudes workflow, a partir de
		aplicaciones móviles. Debido a eso, al guardar un&#160;formulario en
		el Fluig, automáticamente se genera el formulario móvil, de acuerdo
		con el mapeo de los campos del formulario del proceso.</p>
	<p>A pesar de que el Fluig dispone de la generación automática,
		existen diversas particularidades para el desarrollo y personalización
		del&#160;formulario Móvil, estas se tratarán en el transcurso de esta
		guía.</p>
	<p>&#160;</p>
	<h1
		id="CustomizaçãodeFormulárioMobile-RecomendaçõesparaProcessoscomFormulárioMobile">Recomendaciones
		para Procesos con el Formulario Móvil</h1>
	<p>&#160;</p>
	<ol>
		<li><p>
				<strong>Formulario Responsivo:</strong> Hoy en el mercado existen
				variados&#160;tamaños de pantallas y resoluciones, por eso cualquier
				formulario desarrollado para Móvil debe ser responsivo, es decir, se
				debe ajustar a cualquier tamaño de pantalla.<br />&#160;
			</p></li>
		<li><p>
				<strong>Estética:</strong> La&#160;apariencia visual y design del
				html deben ser atractivos para los usuarios, conseguimos eso a
				través de CSS o jQueryMobile que se explicará en las próximas
				sesiones.<br />&#160;&#160;
			</p></li>
		<li><p>
				<strong>Usabilidad:</strong>&#160;El formulario debe ser fácil de
				usar, conteniendo apenas los campos importantes para tareas o
				procesos.<br />&#160;
			</p></li>
		<li><p>
				<strong>Área de clic:</strong>&#160;Los elementos del HTML deben
				estar bien posicionados de tal manera que facilite el área de clic,
				pues hoy existen dispositivos en que las pantallas son muy pequeñas.
				Sigue un ejemplo:
			</p>
			<p>&#160;</p>
			<p style="text-align: center;">
				<img class="confluence-embedded-image image-center" width="500"
					src="http://www.tdn.totvs.com/download/attachments/146181573/simula%C3%A7%C3%A3o-forms-mobile%282%29.png?version=1&modificationDate=1408551718000&api=v2"
					data-image-src="http://www.tdn.totvs.com/download/attachments/146181573/simula%C3%A7%C3%A3o-forms-mobile%282%29.png?version=1&modificationDate=1408551718000&api=v2"><br />&#160;
			</p></li>
		<li><p>
				<strong>Posicionamiento de las acciones:&#160;</strong>Las acciones
				más importantes deben estar posicionadas donde el usuario consigue
				alcanzar fácilmente, conforme a la figura:
			</p>
			<p style="text-align: center;">
				<img class="confluence-embedded-image" width="500"
					src="http://www.tdn.totvs.com/download/attachments/146181573/image2014-6-23%2012%3A32%3A59.png?version=1&modificationDate=1403537445000&api=v2"
					data-image-src="http://www.tdn.totvs.com/download/attachments/146181573/image2014-6-23%2012%3A32%3A59.png?version=1&modificationDate=1403537445000&api=v2">
			</p>
			<p>
				<img class="confluence-embedded-image image-center" width="500"
					src="http://www.tdn.totvs.com/download/attachments/146181573/image2014-6-23%2012%3A33%3A7.png?version=1&modificationDate=1403537453000&api=v2"
					data-image-src="http://www.tdn.totvs.com/download/attachments/146181573/image2014-6-23%2012%3A33%3A7.png?version=1&modificationDate=1403537453000&api=v2"><br />&#160;
			</p></li>
		<li><strong>Personalizaciones:&#160;</strong>Las
			personalizaciones se deben realizar dentro de los eventos del proceso
			o de definiciones de&#160;formulario en la Web, todos los eventos que
			se aplican en los formularios Web también se aplican en los
			formularios Móvil. Para obtener más informaciones acceda la
			guía&#160;<a href="75270483.html">Personalización de Formularios</a>.<br />
			<br /></li>
		<li><strong>Archivos adjuntos:&#160;</strong>Los archivos
			adjuntos del&#160;formulario Web no se cargan al formulario Móvil,
			por eso el CSS y las funciones Javascript's se deben implementar
			dentro del HTML Móvil.<br /> <br /></li>
		<li><strong>Acceso a servicios internos y
				externos:&#160;</strong>Cualquier acceso a <em>webservices</em> u otros
			servicios interno o externo se debe realizar vía javascript.
			Recomendamos el uso de<em>&#160;jQuery Soap</em> para <em>Webservices</em>.<br />
			<br /></li>
		<li><strong>No todas las informaciones precisan estar en
				el&#160;Formulario Móvil:</strong>&#160;El gran limitador del Móvil es el
			tamaño de pantalla, por eso mapee los campos que son más importantes
			para que tengan prioridad en el&#160;formulario. Existen campos que
			son informativos y no tienen gran utilidad en el proceso o tareas,
			estos no precisan incluirse en el&#160;formulario Móvil.<br /> <br /></li>
		<li><strong>Tipos: </strong>Definiciones de Formulario Móvil
			soporta los tipos:<br />
			<ol>
				<li>text</li>
				<li>textArea</li>
				<li>radio</li>
				<li>select</li>
				<li>ComboBox</li>
				<li>checkbox.<br /> <br /></li>
			</ol></li>
	</ol>
	<h1 id="CustomizaçãodeFormulárioMobile-Benefícios">
		<span style="color: rgb(0, 0, 0);">Beneficios</span>
	</h1>
	<p>
		<strong>¿Por qué debo usar el&#160;Formulario Móvil?</strong>
	</p>
	<ul>
		<li>Permite iniciar/mover solicitudes de cualquier dispositivo
			móvil, independiente de su ubicación geográfica.</li>
		<li>Acceso rápido a las informaciones, mostrando apenas las
			informaciones más relevantes.</li>
		<li>Permite la continuidad del proceso, aun fuera del ambiente
			empresarial.</li>
		<li>A través de la funcionalidad "Proceso Off-line" consigo
			rellenar informaciones aun sin acceso a internet, para futura
			sincronización.<br /> <br /> <br />
		</li>
	</ul>
	<h1 id="CustomizaçãodeFormulárioMobile-CriandoumFormulárioMobile">Creando
		un&#160;Formulario Móvil</h1>
	<p>En el Fluig es posible crear definiciones de formularios de
		diferentes maneras, utilizando el Fluig Studio, a través del modelado
		de procesos workflow o a través de upload de &#160;formulario en la
		navegación de documentos.</p>
	<p>Siga a continuación, moviéndose por las pestañas a seguir, las
		formas de creación de formularios:</p>
	<p>&#160;</p>
	<a name="composition-deck-install-windows"></a>
	<div id="install-windows" 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="Fluig Studio" title="Seleccione el lenguaje"
				nextafter="0" effecttype="default" effectduration="-1.0">
				<p>
					<strong><br /></strong>
				</p>
				<p>
					<strong>Fluig Studio</strong>
				</p>
				<p>
					Para incluir un nuevo formulario con soporte a dispositivos
					móviles, realice el procedimiento estándar para <a
						href="http://tdn.totvs.com/pages/viewpage.action?pageId=73894420#GuiaRapidoFluig-Definicaodeformulario"
						rel="nofollow">exportación de formulario</a> y seleccione los
					campos que compondrán el formulario móvil en la pantalla antes de
					la conclusión de la exportación.
				</p>
				<p>
					Después de la exportación se&#160;incluirá otro archivo HTML
					marcado como "móvil" en la carpeta <em>forms</em> del proyecto <strong>Fluig</strong>.&#160;
				</p>
				<p>&#160;</p>
				<p>Vea en la imagen a seguir la pantalla de selección móvil en
					la exportación de un formulario:</p>
				<p>
					<img class="confluence-embedded-image image-center"
						src="http://www.tdn.totvs.com/download/attachments/75270483/image2013-9-23%2015%3A32%3A37.png?version=1&modificationDate=1379961090000&api=v2"
						data-image-src="http://www.tdn.totvs.com/download/attachments/75270483/image2013-9-23%2015%3A32%3A37.png?version=1&modificationDate=1379961090000&api=v2">
				</p>
				<p style="text-align: center;">
					<strong>Figura 15 - Formulario móvil.</strong>
				</p>
				<p>&#160;</p>
				<p>Después de la exportación, el formulario debe quedar conforme
					a la imagen a seguir:</p>
				<p>
					<img class="confluence-embedded-image image-center"
						src="http://www.tdn.totvs.com/download/attachments/75270483/image2013-9-23%2015%3A30%3A53.png?version=1&modificationDate=1379960986000&api=v2"
						data-image-src="http://www.tdn.totvs.com/download/attachments/75270483/image2013-9-23%2015%3A30%3A53.png?version=1&modificationDate=1379960986000&api=v2">
				</p>
				<p>&#160;</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>
							El Fluig identifica el formulario Móvil por el nombre, este debe
							tener el mismo nombre del formulario Web sumado de la palabra<strong>&#160;<em>"_ecmMobile"</em></strong>.
						</p>
						<p>
							<strong>Ejemplo:</strong> Creado el formulario web
							"compras.html", el formulario Móvil, obligatoriamente, se debe
							nombrar como:&#160;<em><strong>"compras_ecmmobile.html"</strong></em>.&#160;
						</p>
					</div>
				</div>
			</div>
			<div id="2" class="deck-card " style="" cssclass="" accesskey=""
				label="Formul&amp;aacute;rio Mobile em Processos"
				title="Término de uso" nextafter="0" effecttype="default"
				effectduration="-1.0">
				<p>
					<strong><br /></strong>
				</p>
				<p>
					<strong>Configuración de Formulario Móvil en Procesos</strong>
				</p>
				<p>
					Es posible permitir la creación del Formulario Móvil también a
					través del&#160;<strong>Generador de Formulario</strong>, conforme
					al paso a seguir:
				</p>
				<p>&#160;</p>
				<p>
					<strong>Paso 1:&#160;</strong>Crear o editar un proceso existente y
					activar el ítem <strong>Formulario</strong>.
				</p>
				<p>
					<img class="confluence-embedded-image image-center"
						src="http://www.tdn.totvs.com/download/attachments/146181573/geracaoFormulario3%20-%20C%C3%B3pia.png?version=1&modificationDate=1403812044000&api=v2"
						data-image-src="http://www.tdn.totvs.com/download/attachments/146181573/geracaoFormulario3%20-%20C%C3%B3pia.png?version=1&modificationDate=1403812044000&api=v2">
				</p>
				<p>&#160;</p>
				<p>
					<strong>Paso 2:&#160;</strong>Seleccionar la carpeta destino donde
					ese formulario se publicará, también atribuya un título y
					descripción. Después, haga clic en&#160;<strong>Crear&#160;Formulario.</strong>
				</p>
				<p>
					<img class="confluence-embedded-image image-center"
						src="http://www.tdn.totvs.com/download/attachments/146181573/geracaoFormulario2%20-%20C%C3%B3pia.png?version=1&modificationDate=1403812046000&api=v2"
						data-image-src="http://www.tdn.totvs.com/download/attachments/146181573/geracaoFormulario2%20-%20C%C3%B3pia.png?version=1&modificationDate=1403812046000&api=v2">
				</p>
				<p>&#160;</p>
				<p>
					<strong>Paso 3:&#160;</strong>&#160;Incluya los campos y en cada
					uno de ellos, seleccione si este será también agregado al
					formulario para dispositivos móviles, haciendo clic en la opción <strong>Formulario
						Móvil?</strong>.
				</p>
				<p>
					<img class="confluence-embedded-image image-center" width="500"
						src="http://www.tdn.totvs.com/download/attachments/146181573/geracaoFormulario.png?version=2&modificationDate=1403811818000&api=v2"
						data-image-src="http://www.tdn.totvs.com/download/attachments/146181573/geracaoFormulario.png?version=2&modificationDate=1403811818000&api=v2">
				</p>
				<p>&#160;</p>
				<div class="aui-message hint shadowed information-macro has-no-icon">
					<p class="title">Información</p>
					<div class="message-content">
						<p>
							No todos los campos mapeados en el formulario del proceso, se
							pueden mapear para el formulario para dispositivos móviles. Los
							campos que se pueden mapear exhiben la opción <strong>"Formulario
								Mobile?".</strong>
						</p>
					</div>
				</div>
				<p>
					<br /> <br />
				</p>
			</div>
			<div id="3" class="deck-card " style="" cssclass="" accesskey=""
				label="Upload via Navega&amp;ccedil;&amp;atilde;o de Documentos"
				title="Instalación del fluig" nextafter="0" effecttype="default"
				effectduration="-1.0">
				<p>
					<strong><br /></strong>
				</p>
				<p>
					<strong>Upload vía Navegación de Documentos</strong>
				</p>
				<p>
					En la upload vía navegación de documentos se realiza como una
					publicación estándar de formulario, donde el formulario web debe
					tener un nombre definido y el Formulario Móvil debe ser sumado con
					el término&#160;<strong>_ecmmobile</strong>.&#160;
				</p>
				<p>
					<img class="confluence-embedded-image image-center"
						src="http://www.tdn.totvs.com/download/attachments/146181573/UPLOAD.png?version=1&modificationDate=1403813062000&api=v2"
						data-image-src="http://www.tdn.totvs.com/download/attachments/146181573/UPLOAD.png?version=1&modificationDate=1403813062000&api=v2">
				</p>
				<p>&#160;</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>
							El Fluig identifica el formulario Móvil por el nombre, el
							formulario Móvil debe tener el mismo nombre del formulario Web
							sumado de la palabra<strong>&#160;<em>"_ecmMobile"</em></strong>.
						</p>
						<p>
							<strong>Ejemplo:</strong> Creado el formulario web
							"compras.html", el formulario Móvil, obligatoriamente, se debe
							nombrar como:&#160;<em><strong>"compras_ecmmobile.html"</strong></em>.&#160;
						</p>
					</div>
				</div>
			</div>
			<div class="aui-message warning shadowed information-macro">
				<p class="title">Atención.</p>
				<span class="aui-icon icon-warning">Ícono</span>
				<div class="message-content">
					<p>Las Definiciones de Formularios generadas por los métodos de
						creacion anteriormente listados, precisan ser editados en el caso
						que necesite de alguna personalización especial, estos se generan
						automáticamente conteniendo los ítems básicos para su
						funcionamiento.</p>
				</div>
			</div>
		</div>
	</div>
	<!-- // .deck -->
	<p>&#160;</p>
	<h1 id="CustomizaçãodeFormulárioMobile-CustomizandodeFormulárioMobile">Personalizando
		de Formulario Móvil</h1>
	<p>
		<span style="font-size: 10.0pt; line-height: 13.0pt;">Con la
			inclusión de formularios que soporten la visualización en
			dispositivos móviles, es posible mover solicitudes Workflow y
			realizar el relleno de las informaciones de formularios con mayor
			movilidad y agilidad.</span>
	</p>
	<p>
		<span style="font-size: 10.0pt; line-height: 13.0pt;">Como
			hemos visto, el&#160;Formulario Móvil&#160;no carga archivos
			adjuntos, luego, cada personalización se debe realizar dentro del
			HTML, este posee una serie de particularidades que se tratarán a
			continuación:</span>
	</p>
	<h3 id="CustomizaçãodeFormulárioMobile-CSS">
		<strong style="font-size: 1.4em;">CSS</strong>
	</h3>
	<p>Al personalizar un&#160;Formulario Móvil, el CSS utilizado para
		parte Web probablemente no se aplica al archivo del dispositivo móvil,
		por eso se recomienda que el&#160;Formulario Móvil use un CSS propio
		que mantenga el formulario responsivo.</p>
	<p>
		El CSS se debe agregar dentro de la&#160;<strong>head</strong>&#160;en
		el archivo <em>.html</em> Mobile y se debe utilizar&#160;la tag:
	</p>
	<div class="code panel pdl" style="border-width: 1px;">
		<div class="codeContent panelContent pdl">
			<pre class="theme: Confluence; brush: css; gutter: false"
				style="font-size: 12px;">&lt;style type="text/css"> Ingrese aquí el CSS &lt;/style>.</pre>
		</div>
	</div>
	<p>&#160;</p>
	<p>Siga a continuación, moviéndose por las pestañas a
		seguir,&#160;algunos ejemplos de componentes CSS que se pueden aplicar
		en el formulario Móvil:</p>
	<p>&#160;</p>
	<a name="composition-deck-install-windows"></a>
	<div id="install-windows" 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="Body" title="Seleccione el lenguaje"
				nextafter="0" effecttype="default" effectduration="-1.0">
				<p>
					<strong><br /></strong>
				</p>
				<p>
					<strong>Body</strong>
				</p>
				<div class="code panel pdl" style="border-width: 1px;">
					<div class="codeContent panelContent pdl">
						<pre class="theme: Confluence; brush: css; gutter: false"
							style="font-size: 12px;">body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
background-color: #D1D3D4; /* Background color */
color: #58595B; /* Foreground color used for text */
font-family: Helvetica;
font-size: 14px;
margin: 0; /* Amount of negative space around the outside of the body */
padding: 0; /* Amount of negative space around the inside of the body */ 
min-width:300px;
}</pre>
					</div>
				</div>
			</div>
			<div id="2" class="deck-card " style="" cssclass="" accesskey=""
				label="Headings" title="Término de uso" nextafter="0"
				effecttype="default" effectduration="-1.0">
				<p>
					<strong><br /></strong>
				</p>
				<p>
					<strong>Headings</strong>
				</p>
				<div class="code panel pdl" style="border-width: 1px;">
					<div class="codeContent panelContent pdl">
						<pre class="theme: Confluence; brush: css; gutter: false"
							style="font-size: 12px;">h1 {
margin: 0;
padding: 0;
background-color: #D1D3D4;
color: #FFF;
display: block;
font-size: 18px;
font-weight: bold;
padding: 10px 0;
text-align: center;
text-decoration: none;
}</pre>
					</div>
				</div>
			</div>
			<div id="3" class="deck-card " style="" cssclass="" accesskey=""
				label="List" title="Instalación del fluig" nextafter="0"
				effecttype="default" effectduration="-1.0">
				<p>
					<strong><br /></strong>
				</p>
				<p>
					<strong>List</strong>
				</p>
				<div class="code panel pdl" style="border-width: 1px;">
					<div class="codeContent panelContent pdl">
						<pre class="theme: Confluence; brush: css; gutter: false"
							style="font-size: 12px;">ul {
list-style: none;
margin: 10px;
padding: 0;
}
ul li {
background-color: #FFFFFF;
border: 1px solid #999999;
color: #58595B;
display: block;
font-size: 14px;
font-weight: bold;
margin-bottom: -1px;
padding: 12px 10px;
text-decoration: none;
}
ul li:first-child {
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
 
}
ul li:last-child {
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
 position:relative;
}</pre>
					</div>
				</div>
			</div>
			<div id="4" class="deck-card " style="" cssclass="" accesskey=""
				label="Label" title="Instalación del fluig" nextafter="0"
				effecttype="default" effectduration="-1.0">
				<p>
					<strong><br /></strong>
				</p>
				<p>
					<strong>Label</strong>
				</p>
				<div class="code panel pdl" style="border-width: 1px;">
					<div class="codeContent panelContent pdl">
						<pre class="theme: Confluence; brush: css; gutter: false"
							style="font-size: 12px;">.mylabel {
width: 28%;
 overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
display:inline-block;
 position:relative;
 float:left;
 line-height:32px;
}</pre>
					</div>
				</div>
			</div>
			<div id="5" class="deck-card " style="" cssclass="" accesskey=""
				label="Input Text" title="Instalación del fluig" nextafter="0"
				effecttype="default" effectduration="-1.0">
				<p>
					<strong><br /></strong>
				</p>
				<p>
					<strong>Entrada de texto</strong>
				</p>
				<div class="code panel pdl" style="border-width: 1px;">
					<div class="codeContent panelContent pdl">
						<pre class="theme: Confluence; brush: css; gutter: false"
							style="font-size: 12px;">input[type=text] {
width: 70%; 
 font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
background-color: #E8E8E8;
 position:relative;
 float:right;
}</pre>
					</div>
				</div>
			</div>
			<div id="3" class="deck-card " style="" cssclass="" accesskey=""
				label="TextArea" title="Instalación del fluig" nextafter="0"
				effecttype="default" effectduration="-1.0">
				<p>
					<strong><br /></strong>
				</p>
				<p>
					<strong>TextArea</strong>
				</p>
				<div class="code panel pdl" style="border-width: 1px;">
					<div class="codeContent panelContent pdl">
						<pre class="theme: Confluence; brush: css; gutter: false"
							style="font-size: 12px;">textarea {
width: 70%; 
 font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
background-color: #E8E8E8;
 position:relative;
 float:right;
}</pre>
					</div>
				</div>
			</div>
			<div id="3" class="deck-card " style="" cssclass="" accesskey=""
				label="Select" title="Instalación del fluig" nextafter="0"
				effecttype="default" effectduration="-1.0">
				<p>
					<strong><br /></strong>
				</p>
				<p>
					<strong>Select</strong>
				</p>
				<div class="code panel pdl" style="border-width: 1px;">
					<div class="codeContent panelContent pdl">
						<pre class="theme: Confluence; brush: css; gutter: false"
							style="font-size: 12px;">select {
width: 70%; 
 font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
background-color: #E8E8E8;
 position:relative;
 float:right;
}</pre>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- // .deck -->
	<p>&#160;</p>
	<p>Usted debe tratar en el CSS todos los componentes que se
		utilizarán en su HTML Móvil para que todos tengan el mismo estándar,
		su HTML Móvil con CSS debe tener esa estructura:</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>Formulário de Compras &lt;/title>
&lt;style type="text/css">
 &lt;!--Aquí usted debe incluir la estructura del CSS de cada componente-->
&lt;/style>
&lt;/head>
&lt;body>
&lt;/ body >
&lt;/html></pre>
		</div>
	</div>
	<div class="aui-message warning shadowed information-macro">
		<p class="title">Atención.</p>
		<span class="aui-icon icon-warning">Ícono</span>
		<div class="message-content">
			<p>Esta es la estructura básica, dentro de cada tag debe haber
				elementos y lógicas correspondientes a ellas.</p>
		</div>
	</div>
	<p>&#160;</p>
	<h3 id="CustomizaçãodeFormulárioMobile-jQueryMobile">jQuery Mobile</h3>
	<p>
		El jQuery Móvil es un <em>framework</em> de interfaz para dispositivos
		móviles que tiene el objetivo de dar un layout responsivo para las
		definiciones de formularios. Él facilita mucho en el desarrollo, pues
		usted no precisa crear un CSS proprio para cada elemento y se puede
		utilizar en el Fluig Móvil.&#160;<span
			style="font-size: 10.0pt; line-height: 13.0pt;">Es posible
			seguir ejemplos en el link:&#160;</span><a
			href="http://demos.jquerymobile.com/1.4.2/"
			style="font-size: 10.0pt; line-height: 13.0pt;" class="external-link"
			rel="nofollow">http://demos.jquerymobile.com/1.4.2/</a>.
	</p>
	<p>&#160;</p>
	<p>Este se puede incorporar en el HMTL Móvil de forma simple:</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;script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js">&lt;/script>
&lt;/head>
&lt;body>
&lt;/ body >
&lt;/html></pre>
		</div>
	</div>
	<p>&#160;</p>
	<h3 id="CustomizaçãodeFormulárioMobile-JavaScript">JavaScript</h3>
	<p>
		Así como el CSS, el javascript también debe estar dentro del HTML
		Móvil, luego toda lógica que en la web, normalmente, queda en archivos
		<strong>.js</strong>, se debe transferir al&#160;Formulario Móvil.
	</p>
	<p>
		<span style="font-size: 10.0pt; line-height: 13.0pt;">Para
			mantener una organización dentro del HTML, recomendamos dejar las
			lógicas al final en el archivo:</span>
	</p>
	<p>
		<span style="font-size: 10.0pt; line-height: 13.0pt;"><br /></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;">&lt;html>
&lt;head>
&lt;/head>
&lt;body>
&lt;/body>
&lt;/html>
&lt;script language="javascript">
 /* Aquí usted debe incluir la lógica javascript */
&lt;/script></pre>
		</div>
	</div>
	<div class="aui-message warning shadowed information-macro">
		<p class="title">Atención.</p>
		<span class="aui-icon icon-warning">Ícono</span>
		<div class="message-content">
			<p>
				Para probar el Formulario Móvil, abra el archivo html Móvil en un
				navegador en el desktop. <span
					style="font-size: 10.0pt; line-height: 13.0pt;">Si no hay
					inconsistencias, el formulario probablemente abrirá correctamente
					también en el Fluig Móvil.</span>
			</p>
		</div>
	</div>
	<p>&#160;</p>
	<h3 id="CustomizaçãodeFormulárioMobile-Serviços">Servicios</h3>
	<p>
		Para utilizar servicios internos o externos al Fluig es necesario
		instanciar, ejecutar y tratar el retorno del servicio vía javascript.
		Para <em>webservices</em>, recomendamos el uso de<a
			href="http://plugins.jquery.com/soap" class="external-link"
			rel="nofollow">&#160;jQuery Soap</a>.
	</p>
	<p>A continuación algunas sugerencias:</p>
	<ul>
		<li>El uso de servicios internos del Fluig, como por ejemplo
			Dataset, se deben realizar preferentemente en los eventos de
			personalización de&#160;<a href="75270483.html">Formulario</a> y <a
			href="73082818.html">Procesos</a>, de esta manera lo que se
			personalizará para la web, también se adoptará para móvil, evitando
			la replicación del código.
		</li>
		<li>Técnicas especiales para el formulario web, como por ejemplo
			a llamadas de dataset dentro del formulario, no se aplican en el
			Móvil.&#160;</li>
	</ul>
	<p>&#160;</p>
	<h3 id="CustomizaçãodeFormulárioMobile-TraduçãodeFormulários">Traducción
		de Formularios</h3>
	<p>
		La traducción de Formulario Móvil se debe realizar siguiendo la guía
		de&#160;<a
			href="http://tdn.totvs.com/pages/viewpage.action?pageId=75270483#CustomizaçãodeFormulários-Traduçãodeformulários"
			style="font-size: 10.0pt; line-height: 13.0pt;" rel="nofollow">Traducción
			de Formularios</a><span style="font-size: 10.0pt; line-height: 13.0pt;">&#160;</span><span
			style="font-size: 10.0pt; line-height: 13.0pt;">. Pero el
			diferencial, es que será necesario incluir tres nuevos archivos con
			las literales siguiendo la nomenclatura a continuación:</span>
	</p>
	<ul>
		<li><strong>Portugués:</strong>&#160;nome_do_formulario_mobile_pt_BR.properties;</li>
		<li><strong>Inglés:</strong>&#160;nome_do_formulario_mobile_en_US.properties;</li>
		<li><strong>Español:&#160;</strong>nome_do_formulario_mobile_es.properties.</li>
	</ul>
	<div>
		<strong>Ejemplo</strong>: Si el&#160;Formulario se llama <strong>compras_ecmmobile</strong>,
		entonces los nombres de los archivos <em>.properties</em>&#160;serán:
	</div>
	<div>
		<ul>
			<li>compras_ecmmobile_pt_BR.properties;</li>
			<li>compras_ecmmobile_en_US.properties;</li>
			<li>compras_ecmmobile_es.properties.</li>
		</ul>
	</div>
	<p>&#160;</p>
	<h3 id="CustomizaçãodeFormulárioMobile-PaiFilhoparadispositivosmóveis">Principal
		secundario para dispositivos médicos</h3>
	<p>Los campos que emplean la técnica de principal y secundario no
		se ingresarán en el&#160;formulario generado automáticamente para
		dispositivos móviles por el Fluig. Pero el producto le permite
		desarrollar un&#160;formulario personalizado para dispositivos móviles
		consultando estos campos.</p>
	<div class="aui-message warning shadowed information-macro">
		<span class="aui-icon icon-warning">Ícono</span>
		<div class="message-content">La edición de campos principal y
			secundario a través de dispositivos móviles no es posible, aun en
			formularios personalizados. Estos campos son disponibles apenas para
			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>
	<p>&#160;</p>
	<h4 id="CustomizaçãodeFormulárioMobile-getValue">getValue</h4>
	<p>
		<span>Devuelve una string con el valor de un campo principal y
			secundario, recibiendo como parámetros el número de secuencia del
			secundario y el nombre del campo.</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árioMobile-getValues">getValues</h4>
	<p>Devuelve un objeto con todos los valores de los campos principal
		y secundario, 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árioMobile-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><br /></span>
	</p>
	<h4 id="CustomizaçãodeFormulárioMobile-getValuesByField">getValuesByField</h4>
	<p>Devuelve todas las 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>
	<h3
		id="CustomizaçãodeFormulárioMobile-InsiraanexosdasolicitaçãodiretamentedoFormulário">Ingrese
		adjuntos de la solicitud directamente desde el Formulario</h3>
	<p>
		Existe una forma bien simple para guardar adjuntos upload a través de
		un botón en el formulario. Para eso es necesario ingresar en el evento
		<strong style="line-height: 1.4285715;"><em>onclink</em></strong>&#160;del&#160;<strong
			style="line-height: 1.4285715;"><em>button</em></strong> el método <em><strong>showCamera</strong></em>:
	</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;">&lt;input type="button" value="Insira Foto" onclick="showCamera(nome_do_anexo);"/>
&#160;
&lt;script language="javascript">
          
          function showCamera(parameter) {
              JSInterface.showCamera(parameter);
          }
&lt;/script></pre>
		</div>
	</div>
	<p>
		El parámetro <em
			style="font-family: Calibri, sans-serif; font-size: 11.0pt; line-height: 107.0%;"><strong>nome_do_anexo</strong></em>
		es una String y corresponde al nombre del anexo que se guardará en la
		lista de adjuntos de aquella solicitud.&#160;
	</p>
	<p>&#160;</p>
	<h3
		id="CustomizaçãodeFormulárioMobile-ComoidentificarqueestouusandooMobilenoseventos?">¿Cómo
		identificar que estoy usando el Móvil en los eventos?</h3>
	<p>Con ese recurso es posible aplicar una personalización o/y
		restricción solamente en el Formulario Móvil, independiente de la Web.
		Así puedo definir que un proceso o actividad va a recibir un valor
		diferenciado o que determinada actividad no se puede ejecutar por el
		Móvil vía personalización.</p>
	<p>&#160;</p>
	<p>Existen dos formas de hacer esa personalización:</p>
	<ul>
		<ul>
			<li><strong>Eventos del Formulario</strong><br />Todos los
				eventos que reciben en el método el form pueden hacer una
				personalización exclusiva para el Formulario Móvil, son los eventos:
				<ul>
					<li>AfterProcessing</li>
					<li>AfterSaveNew</li>
					<li>BeforeProcessing</li>
					<li>DisplayFields</li>
					<li>EnableFields</li>
					<li>InputFields</li>
					<li>ValidadeForm</li>
				</ul>
				<p>
					Para utilizar el evento es necesario hacer la siguiente
					llamada&#160;<strong style="line-height: 1.4285715;">form.getMobile()</strong>,
					donde retornará un booleano indicando si es un formulario móvil o
					no. Ejemplo:<br /> <br />
				</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.getMobile() != null &amp;&amp; form.getMobile()) {
     form.setValue('mtr_usuario', new java.lang.Integer(123456));
   }
}</pre>
					</div>
				</div>
				<p>
					<br /> <br />
				</p></li>
		</ul>
	</ul>
	<ul>
		<li style="list-style-type: none; background-image: none;"><ul>
				<li><p>
						<strong>Eventos del Proceso</strong><br />En los eventos de
						proceso, la propiedad <strong>WKMobile</strong> identifica si la
						acción fue realizada por el dispositivo móvil, ella puede ser
						utilizada en los eventos del proceso conforme al ejemplo:<br /> <br />
					</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

Índice

outline	true
style	none
exclude	.*ndice

Formulário Mobile

No Fluig, é possível movimentar solicitações workflow, a partir de aplicativos móveis. Devido a isso, ao salvar um formulários no Fluig, automaticamente o formulários mobile é gerado, de acordo com o mapeamento dos campos do formulários do processo.

Apesar do Fluig dispor da geração automática, existem diversas particularidades para o desenvolvimento e customização de formulário Mobile, estas serão tradadas no decorrer deste guia.

Recomendações para Processos com Formulário Mobile

...

Formulário Responsivo: Hoje no mercado existem variados tamanhos de telas e resoluções, por isso qualquer formulário desenvolvida para Mobile deve ser responsivo, ou seja, deve se ajustar a qualquer tamanho de tela.

...

Estética: A aparência visual e design do html devem ser atraentes para os usuários, conseguimos isso através de CSS ou jQueryMobile que será explicado nas próximas sessões.

...

Usabilidade: O formulário deve ser fácil de usar, contendo apenas o campos importantes para tarefas ou processo.

...

Área de clique: Os elementos do HTML devem estar bem posicionados de forma que facilite a área de clique, pois hoje existem dispositivos que as telas são muito pequenas.Segue um exemplo:

Image Removed

...

Posicionamento das ações: As ações mais importantes devem estar posicionadas onde o usuário consegue alcançar facilmente, conforme a figura:

Image Removed

...

Benefícios

Porque devo usar o Formulário Mobile?

...

Criando um Formulário Mobile

No Fluig é possível criar definições de formulários de diferentes maneiras, utilizando o Fluig Studio, através da modelagem de processos workflow ou através de upload de formulário na navegação de documentos.

Acompanhe a seguir, movimentando-se pelas abas abaixo, as formas de criação de formulários:

...

effectDuration	0.5
id	install-windows
history	false
effectType	fade

...

default	true
id	1
label	Fluig Studio
title	Selecione a linguagem

Fluig Studio

Para incluir um novo formulário com suporte a dispositivos móveis, realize o procedimento padrão para exportaçã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á incluído outro arquivo HTML marcado como "mobile" na pasta forms do projeto Fluig.

Veja na imagem a seguir a tela de seleção mobile na exportação de um formulário:

Image Removed

Figura 15 - Formulário mobile.

Após a exportação, o formulário deve ficar conforme imagem a seguir:

Image Removed

Informações

title	Nota

O Fluig identificada o formulário Mobile pelo nome, este deve ter o mesmo nome do formulário Web acrescido da palavra "_ecmMobile".

Exemplo: Criado o formulário web "compras.html", o formulário Mobile, obrigatoriamente, deve ser nomeada como: "compras_ecmmobile.html".

...

id	2
label	Formulário Mobile em Processos
title	Termo de uso

Configuração de Formulário Mobile em Processos

É possível permitir a criação do Formulário Mobile também através do Gerador de Formulário, conforme passo a seguir:

Passo 1: Criar ou editar um processo existente e acionar o item Formulário.

Image Removed

Passo 2: Selecionar a pasta destino onde esse formulário será publicada, também atribua um título e descrição. Após isso, clique em Criar Formulário.

Image Removed

Passo 3: Inclua os campos e em cada um deles, selecione se este será também adicionado ao formulário para dispositivos móveis, clicando na opção Formulário Mobile?.

Image Removed

Informações

icon	false
title	Informação

Nem todos os campos mapeados no formulário do processo, podem ser mapeados para o formulário para dispositivos móveis. Os campos que podem ser mapeados exibem a opção "Formulário Mobile?".

...

id	3
label	Upload via Navegação de Documentos
title	Instalação do fluig

Upload via Navegação de Documentos

No upload via navegação de documentos é feito como uma publicação padrão de formulário, onde o formulário web deve ter um nome definido e o Formulário Mobile deve ser acrescido com o termo _ecmmobile.

Image Removed

Informações

title	Nota

O Fluig identificada o formulário Mobile pelo nome, o formulário Mobile deve ter o mesmo nome do formulário Web acrescido da palavra "_ecmMobile".

Exemplo: Criado o formulário web "compras.html", o formulário Mobile, obrigatoriamente, deve ser nomeado como: "compras_ecmmobile.html".

Nota

title	Atenção

As Definições de Formulários geradas pelos métodos de criação acima elencados, precisam ser editados caso necessite de alguma customização especial, eles são gerados automaticamente contendo os itens básicos para seu funcionamento.

Customizando de Formulário Mobile

Com a inclusão de formulários que suportem a visualização em dispositivos móveis, é possível movimentar solicitações Workflow e realizar o preenchimento das informações de formulários com maior mobilidade e agilidade.

Como já vimos, o Formulário Mobile não carrega arquivos anexos, logo, toda customização deve ser feita dentro do HTML, este possui uma série de particularidades que serão tratadas a seguir:

CSS

Ao customizar um Formulário Mobile, o CSS utilizado para parte Web provavelmente não se aplica ao para o arquivo do dispositivo móvel, por isso é recomendado que o Formulário Mobile use um CSS próprio que mantenha o formulário responsivo.

O CSS deve ser inserido dentro da head no arquivo .html Mobile e deve ser utilizada a tag:

Bloco de código

language	css

<style type="text/css"> Insira aqui o CSS </style>.

Acompanhe a seguir, movimentando-se pelas abas abaixo, alguns exemplos de componentes CSS que podem ser aplicados no formulários Mobile:

...

effectDuration	0.5
id	install-windows
history	false
effectType	fade

...

default	true
id	1
label	Body
title	Selecione a linguagem

Body

Bloco de código

language	css

body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
background-color: #D1D3D4; /* Background color */
color: #58595B; /* Foreground color used for text */
font-family: Helvetica;
font-size: 14px;
margin: 0; /* Amount of negative space around the outside of the body */
padding: 0; /* Amount of negative space around the inside of the body */ 
min-width:300px;
}

...

id	2
label	Headings
title	Termo de uso

Headings

Bloco de código

language	css

h1 {
margin: 0;
padding: 0;
background-color: #D1D3D4;
color: #FFF;
display: block;
font-size: 18px;
font-weight: bold;
padding: 10px 0;
text-align: center;
text-decoration: none;
}

...

id	3
label	List
title	Instalação do fluig

List

Bloco de código

language	css

ul {
list-style: none;
margin: 10px;
padding: 0;
}
ul li {
background-color: #FFFFFF;
border: 1px solid #999999;
color: #58595B;
display: block;
font-size: 14px;
font-weight: bold;
margin-bottom: -1px;
padding: 12px 10px;
text-decoration: none;
}
ul li:first-child {
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
 
}
ul li:last-child {
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
 position:relative;
}

...

id	4
label	Label
title	Instalação do fluig

Label

Bloco de código

language	css

.mylabel {
width: 28%;
 overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
display:inline-block;
 position:relative;
 float:left;
 line-height:32px;
}

...

id	5
label	Input Text
title	Instalação do fluig

Input Text

Bloco de código

language	css

input[type=text] {
width: 70%; 
 font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
background-color: #E8E8E8;
 position:relative;
 float:right;
}

...

id	3
label	TextArea
title	Instalação do fluig

TextArea

Bloco de código

language	css

textarea {
width: 70%; 
 font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
background-color: #E8E8E8;
 position:relative;
 float:right;
}

...

id	3
label	Select
title	Instalação do fluig

Select

Bloco de código

language	css

select {
width: 70%; 
 font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
background-color: #E8E8E8;
 position:relative;
 float:right;
}

Você deve tratar no CSS todos os componentes que serão utilizados no seu HTML Mobile para que todos tenham o mesmo padrão, seu HTML Mobile com CSS deve ter essa estrutura:

Bloco de código

language	html/xml

<html >
<head>
<title>Formulário de Compras </title>
<style type="text/css">
 <!--Aqui você deve incluir a estrutura do CSS de cada componente-->
</style>
</head>
<body>
</ body >
</html>

Nota

title	Atenção

Essa é a estrutura básica, dentro de cada tag deve ter elementos e lógicas correspondentes a elas.

jQuery Mobile

O jQuery Mobile é um framework de interface para dispositivos móveis que visa dar um layout responsivo para as definições de formulários. Ele facilita muito no desenvolvimento, pois você não precisa ficar criando um CSS próprio para cada elemento e pode ser utilizado no Fluig Mobile. É possível acompanhar exemplos no link: http://demos.jquerymobile.com/1.4.2/.

Este pode ser incorporado no HMTL Mobile de forma simples:

Bloco de código

language	html/xml

<html >
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
</head>
<body>
</ body >
</html>

JavaScript

Assim como o CSS, o javascript também deve estar dentro do HTML Mobile, logo toda lógica que na web, normalmente, fica em arquivos .js, deve ser transferido para o Formulário Mobile.

Para manter uma organização dentro do HTML, recomendamos deixar as lógicas no final no arquivo:

Bloco de código

language	html/xml

<html>
<head>
</head>
<body>
</body>
</html>
<script language="javascript">
 /* Aqui você deve incluir a lógica javascript */
</script>

Nota

title	Atenção

Para testar o Formulário Mobile, abra o arquivo html Mobile em um navegador no desktop. Se não houverem inconsistências, o formulário provavelmente abrirá corretamente também no Fluig Mobile.

Serviços

Para utilizar serviços internos ou externos ao Fluig é necessário instanciar, executar e tratar o retorno do serviço via javascript. Para webservices, recomendamos o uso de jQuery Soap.

Segue algumas dicas:

O uso de serviços internos do Fluig, como por exemplo Dataset, devem ser feitos preferencialmente nas eventos de customização de Formulário e Processos, desta maneira o que será customizado para a web, também será adotado para mobile, evitando a replicação de código.
Técnicas especiais para formulário web, como por exemplo a chamadas de dataset dentro do formulário, não são aplicadas no Mobile.

Tradução de Formulários

A tradução de Formulário Mobile deve ser feita seguindo o guia de Tradução de Formulários . Porém o diferencial, é que será preciso incluir três novos arquivos com as literais seguindo a nomenclatura abaixo:

Português: nome_do_formulario_mobile_pt_BR.properties;
Inglês: nome_do_formulario_mobile_en_US.properties;
Espanhol: nome_do_formulario_mobile_es.properties.

Exemplo: Se o Formulário chama-se compras_ecmmobile, então os nomes dos arquivos .properties serão:

compras_ecmmobile_pt_BR.properties;
compras_ecmmobile_en_US.properties;
compras_ecmmobile_es.properties.

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 customizada para dispositivos móveis consultando estes campos.

Nota
A edição de campos pai e filho através de dispositivos móveis não é possível, mesmo em formulários customizadas. Estes campos são disponíveis apenas para 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 número de sequência do filho e o nome do campo.

Bloco de código

language	javascript

masterList.getValue(sequence,field);

getValues

Retorna um objeto com todos os valores dos campos pai e filho, agrupados pelo número de sequência. Este método não possui parâmetros.

Bloco de código

language	javascript

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

language	javascript

masterList.getValuesBySequence(sequence);

getValuesByField

Retorna todas as sequências e valores de um determinado campo. Recebe como parâmetro o nome do campo.

Bloco de código
masterList.getValuesByField(field);

Insira anexos da solicitação diretamente do Formulário

Existe uma forma bem simples para salvar anexos upload através de um botão no formulário. Para isso é necessário inserir no evento onclink do button o método showCamera:

Bloco de código

language	xml

<input type="button" value="Insira Foto" onclick="showCamera(nome_do_anexo);"/>
 
<script language="javascript">
          
          function showCamera(parameter) {
              JSInterface.showCamera(parameter);
          }
</script>

O parâmetro nome_do_anexo é uma String e corresponde ao nome do anexo que será salvo na listagem de anexos daquela solicitação.

Como identificar que estou usando o Mobile nos eventos?

Com esse recurso é possível aplicar uma customização ou/e restrição somente no Formulário Mobile, independente da Web. Assim posso definir que um processo ou atividade vai receber um valor diferenciado ou que determinada atividade não pode ser executada pelo Mobile via customização.

Existe duas formas de fazer tal customização:

...

AfterProcessing
AfterSaveNew
BeforeProcessing
DisplayFields
EnableFields
InputFields
ValidadeForm

...

Bloco de código

language	javascript

function displayFields(form, customHTML) {
   if ( form.getMobile() != null && form.getMobile()) {
     form.setValue('mtr_usuario', new java.lang.Integer(123456));
   }
}

...

language	javascript

...

 beforeStateEntry(sequenceId){
	var isMobile = getValue("WKMobile");
	if (isMobile!=null &amp;&amp; isMobile==true

...

Consumo de Datasets via xmlRPC

Agora o acesso de datasets pelo Mobile está muito mais fácil, com o xmlPRC é possível trocar de informações com Fluig via AJAX.

Para utiliza-lo, basta acionar as seguintes importações no HTML do formulário:

Bloco de código

language	javascript

 <script src="http://URL_DO_SERVIDOR/webdesk/vcXMLRPC-mobile.js"></script>
<script src="http://URL_DO_SERVIDOR/portal/resources/js/jquery/jquery-1.7.2.js"></script>

O acesso aos Datasets é igual à Web, a seguir são apresentados dois exemplos:

1) Built-in Datasets: este tipo de Dataset permite navegar em dados das entidades do próprio Fluig, como usuários, grupos, processos ou tarefas por exemplo. Esses datasets são pré-definidos no produto e não podem ser alterados pelo usuário;

Bloco de código

language	javascript

var filter = new Object();
filter["colleaguePK.colleagueId"] = "john"; 
var colleagues = getDatasetValues("colleague", filter);
if(colleagues.length > 0){       
	document.getElementById("colleagueName").value = colleagues[0].colleagueName;
	document.getElementById("login").value = colleagues[0].login;
}else{
	alert("Nenhum Usuário Encontrado");
}

2) CardIndex Datasets: este tipo de Dataset permite navegar nos dados existentes em formulários de uma determinada definição de formulário publicada no Fluig. Para que uma definição de formulário seja disponibilizada como Dataset, é necessário preencher o campo Nome Dataset na publicação da definição de formulário. O valor informado será utilizado para a busca do Dataset no Fluig;

Bloco de código

language	javascript

var c1 = DatasetFactory.createConstraint("cod_area", "2", "2", ConstraintType.MUST); 
var constraints = new Array(c1);
			
var area = DatasetFactory.getDataset("areas", null, constraints, null);
			
if(area.values.length){
	document.getElementById("cod_area").value = area.values[0].cod_area;
	document.getElementById("area").value = area.values[0].area;
}else{
	alert("Area não encontrada") ;
}

Para baixar um exemplo de formulário utilizando xmlPRC clique aqui.

Geologalização em formulário

Para utilizar a Geolocalização em formulários é bem simples, basta incluir esse script no html:

Bloco de código

language	javascript

function getLocationUpdate(){
	if(navigator.geolocation){
      // timeout at 60000 milliseconds (60 seconds)
      var options = {timeout:60000};
      geoLoc = navigator.geolocation;
      watchID = geoLoc.watchPosition(showLocation, 
                                     errorHandler,
                                     options);
	}else{
		alert("Sorry, esse dispositivo não suporta geolocalização!");
	}
}
 
function showLocation(position) {
  var lat = position.coords.latitude;
  var longi = position.coords.longitude;
  document.getElementById("latitude").value = lat;
  document.getElementById("longitude").value = longi;
}

function errorHandler(err) {
  if(err.code == 1) {
    alert("Erro: Acesso negado!");
  }else if( err.code == 2) {
    alert("Error: Posição está indisponível!");
  }
}

Para baixar um exemplo de formulário com geolocalização clique aqui

Versão minimas dos browsers suportados

Cada uma das plataformas utiliza um browser diferente para a renderização dos formulários. Esta informação deve ser considerada durante o desenvolvimento para evitar problemas de compatibilidade com os arquivos JavaScript/CSS. A tabela abaixo apresenta a versão minima dos browsers de cada plataforma que deve ser considerada durante o desenvolvimento:

Versão minima da plataforma	Versão minima do browser
Windows Phone 8	Internet Explorer 10
Android 4.0 (Ice Cream Sandwich)	Webkit 534.30
iOS 7	Mobile Safari 9537.53

Exemplo

Faça o download dos arquivos exemplo aqui.

Abaixo segue um exemplo de formulário que foi mapeado para uso em dispositivos móveis:

Formulário Web

Image Removed

Formulário Mobile

Image Removed

Informações

title	Nota

Como podemos ver, o Formulário Web tem muitos campos e seu mapeamento para dispositivos móveis deve ser feito com muito cuidado.

Os campos Dados da proposta foram mapeados para Mobile, notem que tem campos que não existem no Mobile, pois não se faz necessário neste contexto:

Image Removed

Itens que estão em uma tabela podem ser transformados em um collapsible do jQueryMobile.

Ao acionar o botão '+', o item é expandido:

...

){ 
		throw "Ese proceso no puede ser ejecutado por el móvil."; 
	}
}</pre>
						</div>
					</div></li>
			</ul></li>
	</ul>
	<h3 id="CustomizaçãodeFormulárioMobile-Exemplo">Ejemplo</h3>
	<p>
		Haga el <strong>download</strong> de los archivos ejemplo&#160;<a
			href="attachments/75270483/144081017.zip">aquí</a>.&#160;
	</p>
	<p>A continuación un ejemplo de formulario que se mapeó para uso en
		dispositivos móviles:</p>
	<p>&#160;</p>
	<ul>
		<li><strong>Formulario Web</strong></li>
	</ul>
	<p>
		<img class="confluence-embedded-image image-center" width="500"
			src="http://www.tdn.totvs.com/download/attachments/146181573/aprova%C3%A7%C3%A3o%20de%20descontos.png?version=1&modificationDate=1403636194000&api=v2"
			data-image-src="http://www.tdn.totvs.com/download/attachments/146181573/aprova%C3%A7%C3%A3o%20de%20descontos.png?version=1&modificationDate=1403636194000&api=v2">
	</p>
	<p>&#160;</p>
	<ul>
		<li><strong>Formulario Móvil</strong></li>
	</ul>
	<p>
		<img class="confluence-embedded-image image-center"
			src="http://www.tdn.totvs.com/download/attachments/146181573/IMG_1965.PNG?version=2&modificationDate=1403636848000&api=v2"
			data-image-src="http://www.tdn.totvs.com/download/attachments/146181573/IMG_1965.PNG?version=2&modificationDate=1403636848000&api=v2">
	</p>
	<p>&#160;</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>Como podemos ver, el Formulario Web tiene muchos campos y su
				mapeo para dispositivos móviles se debe realizar con mucho cuidado.</p>
			<p>
				Los campos <strong>Datos de la propuesta</strong> se mapearon para
				Móvil, observen que tiene campos que no existen en el Móvil, pues no
				se hace necesario en este contexto:
			</p>
			<p>
				<img class="confluence-embedded-image image-center" width="500"
					src="http://www.tdn.totvs.com/download/attachments/146181573/mapeamento.png?version=1&modificationDate=1403637220000&api=v2"
					data-image-src="http://www.tdn.totvs.com/download/attachments/146181573/mapeamento.png?version=1&modificationDate=1403637220000&api=v2">
			</p>
		</div>
	</div>
	<p>&#160;</p>
	<p>
		Ítems que están en una tabla se pueden transformar en un&#160;<em><span
			style="font-size: 10.0pt; line-height: 13.0pt;">collapsible&#160;</span></em><span
			style="font-size: 10.0pt; line-height: 13.0pt;">del
			jQueryMobile.</span>
	</p>
	<p>
		<span style="font-size: 10.0pt; line-height: 13.0pt;">Al
			activar el botón <strong>'+'</strong>, el ítem se expande:
		</span>
	</p>
	<p>
		<span style="font-size: 10.0pt; line-height: 13.0pt;"><br /></span>
	</p>
	<p>
		<img class="confluence-embedded-image" width="500"
			src="http://www.tdn.totvs.com/download/attachments/146181573/image2014-6-24%2016%3A25%3A27.png?version=1&modificationDate=1403637793000&api=v2"
			data-image-src="http://www.tdn.totvs.com/download/attachments/146181573/image2014-6-24%2016%3A25%3A27.png?version=1&modificationDate=1403637793000&api=v2">
	</p>
</div>

Árvore de páginas

Versões comparadas

Versão antiga 1

Nova versão 2

Chave

Índice

Formulário Mobile

Recomendações para Processos com Formulário Mobile

Benefícios

Criando um Formulário Mobile

Customizando de Formulário Mobile

CSS

jQuery Mobile

JavaScript

Serviços

Tradução de Formulários

Pai Filho para dispositivos móveis

getValue

getValues

getValuesBySequence

getValuesByField

Insira anexos da solicitação diretamente do Formulário

Como identificar que estou usando o Mobile nos eventos?

Consumo de Datasets via xmlRPC

Geologalização em formulário

Versão minimas dos browsers suportados

Exemplo

Árvore de páginas

Histórico da Página

Versões comparadas

Versão antiga 1

Nova versão 2

Chave

Índice

Formulário Mobile

Recomendações para Processos com Formulário Mobile

Benefícios

Criando um Formulário Mobile

Customizando de Formulário Mobile

CSS

jQuery Mobile

JavaScript

Serviços

Tradução de Formulários

Pai Filho para dispositivos móveis

getValue

getValues

getValuesBySequence

getValuesByField

Insira anexos da solicitação diretamente do Formulário

Como identificar que estou usando o Mobile nos eventos?

Consumo de Datasets via xmlRPC

Geologalização em formulário

Versão minimas dos browsers suportados

Exemplo