Histórico da Página
Índice
Índice | ||||||
---|---|---|---|---|---|---|
|
Formulário Mobile
|
Formulario Móvil
En el Fluig, es posible mover solicitudes No Fluig, é possível movimentar solicitações workflow, a partir de aplicativos móveisaplicaciones móviles. Devido Debido 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
eso, al guardar un formulario en el Fluig, automáticamente se genera el formulario móvil, de acuerdo con el mapeo de los campos del formulario del proceso.
A pesar de que el Fluig dispone de la generación automática, existen diversas particularidades para el desarrollo y personalización del formulario Móvil, estas se tratarán en el transcurso de esta guía.
Recomendaciones para Procesos con el Formulario Móvil
Formulario Responsivo: Hoy en el mercado existen variados 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 pantallaFormulá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 La apariencia visual e y design do del html devem deben ser atraentes atractivos para os usuárioslos usuarios, conseguimos isso através eso a través de CSS ou o jQueryMobile que será explicado nas próximas sessõesse explicará en las próximas sesiones.
Usabilidade: O formulário deve Usabilidad: El formulario debe ser fácil de usar, contendo conteniendo apenas o los campos importantes para tarefas ou processotareas o procesos.
Área de cliqueclic: Os Los elementos do del HTML devem deben estar bem bien posicionados de forma tal manera que facilite a el área de clique, pois hoje existem dispositivos que as telas são muito pequenas.Segue um exemplo:
Posicionamento das ações: As ações mais importantes devem estar posicionadas onde o usuário consegue alcançar facilmente, conforme a figura:
clic, pues hoy existen dispositivos en que las pantallas son muy pequeñas. Sigue un ejemplo:
Posicionamiento de las acciones: Las acciones más importantes deben estar posicionadas donde el usuario consigue alcanzar fácilmente, conforme a la figura:
- Personalizaciones: Las personalizaciones se deben realizar dentro de los eventos del proceso o de definiciones de 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 Personalización de Formularios.
- Archivos adjuntos: Los archivos adjuntos del 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.
- Acceso a servicios internos y externos: Cualquier acceso a webservices u otros servicios interno o externo se debe realizar vía javascript. Recomendamos el uso de jQuery Soap para Webservices.
- No todas las informaciones precisan estar en el Formulario Móvil: 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 formulario. Existen campos que son informativos y no tienen gran utilidad en el proceso o tareas, estos no precisan incluirse en el formulario Móvil.
- Tipos: Definiciones de Formulario Móvil soporta los Customizações: As customizações devem ser feitas dentro dos eventos do processo ou de definições de formulário na Web, todos os eventos que são aplicados nos formulários Web também são aplicados nos formulários Mobile. Para mais informações acesse o guia Desenvolvimento de Formulários.
Arquivos anexos: Os arquivos anexos do formulário Web não são carregados para o formulário Mobile, por isso o CSS e as funções Javascript's devem ser implementadas dentro do HTML Mobile.
Acesso a serviços internos e externos: Qualquer acesso a webservices ou outros serviços interno ou externo deve ser feito via javascript. Recomendamos o uso de jQuery Soap para Webservices.
Nem todas informações precisam estar no Formulário Mobile: O grande limitador do Mobile é o tamanho de tela, por isso mapeie os campos que são mais importantes para que tenham prioridade no formulário. Existem campos que são informativos e não tem grande utilidade no processo ou tarefas, estes não precisam ser inclusos no formulário Mobile.
Tipos: Definições de Formulário Mobile suporta os tipos:- text
- textArea
- radio
- select
- comboboxComboBox
- checkbox.
Benefícios
Beneficios
¿Por qué debo usar el Formulario MóvilPorque devo usar o Formulário Mobile?
- Permite iniciar/movimentar solicitações mover solicitudes de qualquer cualquier dispositivo móvelmóvil, independente independiente de sua localização su ubicación geográfica.
- Acesso rápido as informaçõesAcceso rápido a las informaciones, mostrando apenas as informações mais las informaciones más relevantes.
- Permite a continuidade do processo, mesmo fora do la continuidad del proceso, aun fuera del ambiente empresarial.
- Através da funcionalidade "Processo A través de la funcionalidad "Proceso Off-line" consigo preencher informações mesmo sem acesso rellenar informaciones aun sin acceso a internet, para futura sincronizaçãosincronización.
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:
Creando un Formulario Móvil
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 formulario en la navegación de documentos.
Siga a continuación, moviéndose por las pestañas a seguir, las formas de creación de formularios:
Deck of Cards | |||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||||||||||||||||||||||
|
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.
|
Personalizando de Formulario Móvil
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.
Como hemos visto, el Formulario Móvil 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:
CSS
Al personalizar un 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 Formulario Móvil use un CSS propio que mantenga el formulario responsivo.
El CSS se debe agregar dentro de la head en el archivo .html Mobile y se debe utilizar la O CSS deve ser inserido dentro da head no arquivo .html Mobile e deve ser utilizada a tag:
Bloco de código | ||
---|---|---|
| ||
<style type="text/css"> Insira aqui o CSS </style>. |
Acompanhe Siga a continuación, moviéndose por las pestañas a seguir, movimentando-se pelas abas abaixo, alguns exemplos algunos ejemplos de componentes CSS que podem ser aplicados no formulários Mobilese pueden aplicar en el formulario Móvil:
Deck of Cards | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Você deve tratar no Usted debe tratar en el CSS todos os los componentes que serão utilizados no seu HTML Mobile se utilizarán en su HTML Móvil para que todos tenham o mesmo padrão, seu HTML Mobile com CSS deve ter essa estruturatengan el mismo estándar, su HTML Móvil con CSS debe tener esa estructura:
Bloco de código | ||
---|---|---|
| ||
<html > <head> <title>Formulário de Compras </title> <style type="text/css"> <!--AquiAquí vocêusted devedebe incluir ala estruturaestructura dodel CSS de cada componente--> </style> </head> <body> </ body > </html> |
Nota | |||
---|---|---|---|
| |||
Esta es la estructura Essa é a estrutura básica, dentro de cada tag deve ter debe haber elementos e y lógicas correspondentes correspondientes a elasellas. |
...
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 El jQuery Móvil es un framework 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. Es posible seguir ejemplos en el link: http://demos.jquerymobile.com/1.4.2/.
Este pode ser incorporado no HMTL Mobile se puede incorporar en el HMTL Móvil de forma simplessimple:
Bloco de código | ||
---|---|---|
| ||
<html > <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script> </head> <body> </ body > </html> |
...
JavaScript
Assim Así como o el CSS, o el javascript também deve también debe estar dentro do del HTML MobileMóvil, logo luego toda lógica que na en la web, normalmente, fica em arquivos queda en archivos .js, deve ser transferido para o Formulário Mobilese debe transferir al Formulario Móvil.
Para manter uma organização dentro do mantener una organización dentro del HTML, recomendamos deixar as dejar las lógicas no final no arquivoal final en el archivo:
Bloco de código | ||
---|---|---|
| ||
<html> <head> </head> <body> </body> </html> <script language="javascript"> /* AquiAquí vocêusted devedebe incluir ala lógica javascript */ </script> |
Nota | ||
---|---|---|
| ||
Para testar o Formulário Mobileprobar el Formulario Móvil, 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
el archivo html Móvil en un navegador en el desktop. Si no hay inconsistencias, el formulario probablemente abrirá correctamente también en el Fluig Móvil. |
Servicios
Para utilizar servicios internos o externos al Fluig es necesario instanciar, ejecutar y tratar el retorno del servicio vía javascript. Para webservices, recomendamos el 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 dicasA continuación algunas sugerencias:
- O El uso de serviços servicios internos do del Fluig, como por exemplo ejemplo Dataset, devem ser feitos preferencialmente nas se deben realizar preferentemente en los 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 personalización de Formulario y Procesos, de esta manera lo que se personalizará para la web, también se adoptará para móvil, evitando la replicación del código.
- Técnicas especiais especiales para formulário el formulario web, como por exemplo ejemplo a chamadas llamadas de dataset dentro do formulário, não são aplicadas no Mobiledel formulario, no se aplican en el Móvil.
...
Traducción de
...
Formularios
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:
La traducción de Formulario Móvil se debe realizar siguiendo la guía de Traducción de Formularios . Pero el diferencial, es que será necesario incluir tres nuevos archivos con las literales siguiendo la nomenclatura a continuación:
- PortuguésPortuguês: nome_do_formulario_mobile_pt_BR.properties;
- InglêsInglés: nome_do_formulario_mobile_en_US.properties;
- EspanholEspañol: nome_do_formulario_mobile_es.properties.
- compras_ecmmobile_pt_BR.properties;
- compras_ecmmobile_en_US.properties;
- compras_ecmmobile_es.properties.
...
Principal secundario para dispositivos
...
médicos
Os Los 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 emplean la técnica de principal y secundario no se ingresarán en el formulario generado automáticamente para dispositivos móviles por el Fluig. Pero el producto le permite desarrollar un formulario personalizado para dispositivos móviles consultando estos campos.
Nota |
---|
A edição La edición 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íveisprincipal y secundario a través de dispositivos móviles no es posible, aun en formularios personalizados. Estos campos son disponibles 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
La consulta a los espacios padre e hijo en dispositivos móviles se realiza a través de funciones javaScript, disponibles dentro del objeto masterList al momento de exhibir el formulario. Son ellas:
getValue
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 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 | ||
---|---|---|
| ||
masterList.getValue(sequence,field); |
getValues
Retorna um Devuelve un objeto com con todos os los valores dos campos pai e filhode los campos principal y secundario, agrupados pelo por el número de sequênciasecuencia. Este método não possui parâmetrosno posee parámetros.
Bloco de código | ||
---|---|---|
| ||
masterList.getValues(); |
...
getValuesBySequence
Retorna um Devuelve un objeto com con todos os valores do campos de uma determinada sequencia. Recebe como paramento o numero da sequencialos valores de los espacios de una determinada secuencia. Recibe como parámetro el número de la secuencia.
Bloco de código | ||
---|---|---|
| ||
masterList.getValuesBySequence(sequence); |
getValuesByField
Retorna todas as sequências e Devuelve todas las secuencias y valores de um un determinado campo. Recebe como parâmetro o nome do campoRecibe como parámetros el nombre del espacio.
Bloco de código |
---|
masterList.getValuesByField(field); |
Insira anexos da solicitação diretamente do Formulário
Ingrese adjuntos de la solicitud directamente desde el Formulario
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 onclink del button el método 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 | ||
---|---|---|
| ||
<input type="button" value="Insira Foto" onclick="showCamera(nome_do_anexo);"/> <script language="javascript"> function showCamera(parameter) { JSInterface.showCamera(parameter); } </script> |
O parâmetro El parámetro nome_do_anexo é uma es una 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:
y corresponde al nombre del anexo que se guardará en la lista de adjuntos de aquella solicitud.
¿Cómo identificar que estoy usando el Móvil en los eventos?
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.
Existen dos formas de hacer esa personalización:
Eventos del Formulario
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 do Formulárioeventos:
- AfterProcessing
- AfterSaveNew
- BeforeProcessing
- DisplayFields
- EnableFields
- InputFields
- ValidadeForm
Para utilizar
o evento é necessário fazer a seguinte chamada: el evento es necesario hacer la siguiente llamada form.getMobile(),
onde donde retornará
um un booleano indicando
se é um formulário mobile ou não. Exemplosi es un formulario móvil o no. Ejemplo:
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)); } }
Todos os eventos que recebem no método o form podem fazer uma customização exclusiva para o Formulário Mobile, são os
Eventos
do Processodel Proceso
En los eventos de processoproceso,
a propriedade WKMobile identifica se a ação foi realizada pelo dispositivo móvel. Ela pode ser utilizada nos eventos do processo conforme exemplola propiedad WKMobile identifica si la acción fue realizada por el dispositivo móvil, ella puede ser utilizada en los eventos del proceso conforme al ejemplo:
Bloco de código language javascript function beforeStateEntry(sequenceId){ var isMobile = getValue("WKMobile"); if (isMobile!=null && isMobile==true){ throw "
EsseEse
processoproceso
nãono
podepuede ser ejecutado
executadopor
peloel
mobilemóvil."; } }
Nos
Consumo de Datasets via xmlRPC
Bloco de código | ||
---|---|---|
| ||
<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 | ||
---|---|---|
| ||
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 | ||
---|---|---|
| ||
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
Bloco de código | ||
---|---|---|
| ||
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!");
}
} |
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
- Formulário Mobile
Ejemplo
Haga el download de los archivos ejemplo aquí.
A continuación un ejemplo de formulario que se mapeó para uso en dispositivos móviles:
- Formulário Web
- Formulario Móvil
Informações | ||
---|---|---|
| ||
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: |
Itens que estão em uma tabela podem ser transformados em um collapsible do jQueryMobile.
Ao acionar o botão '+', o item é expandido:
el Formulario Web tiene muchos campos y su mapeo para dispositivos móviles se debe realizar con mucho cuidado. Los campos Datos de la propuesta se mapearon para Móvil, observen que tiene campos que no existen en el Móvil, pues no se hace necesario en este contexto: |
Ítems que están en una tabla se pueden transformar en un collapsible del jQueryMobile.
Al activar el botón '+', el ítem se expande: