Histórico da Página

...

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:
Posicionamento das ações: As ações mais importantes devem estar posicionadas onde o usuário consegue alcançar facilmente, conforme a figura:
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.
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.
Download de anexos: Este procedimento será automático, porém apenas os anexos do formulário serão baixados, ignorando os anexos da ficha.
Tipos: Definições de Formulário Mobile suporta os tipos:
1. text
2. textArea
3. radio
4. select
5. combobox
6. checkbox.
7. email ⁽³⁾
8. tel ⁽³⁾
9. range ⁽³⁾
10. date ⁽³⁾
11. time ⁽¹⁾⁽³⁾
12. week ⁽²⁾⁽³⁾
13. number
14. hidden
15. password

...

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.

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 simplesO CSS deve ser inserido dentro da head no arquivo .html Mobile e deve ser utilizada a tag:

Bloco de código

language	csshtml/xml

<style type=<html >
<head>
<script type="text/cssjavascript"> 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>

Nota

title	Atenção

Referências aos arquivos externos, como por exemplo o JQuery mobile, não devem ser utilizados em processos que tenham o uso off-line, pois quando a utilização é feita de forma off-line apenas o formulário é armazenado.

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> src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
</head>
<body>
</body>
</html>
<script language="javascript">
 /* Aqui você deve incluir a lógica javascript */ body >
</script>html>

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.

...

Referências aos arquivos externos, como por exemplo o JQuery mobile, não devem ser utilizados em processos que tenham o uso off-line, pois quando a utilização é feita de forma off-line apenas o formulário é armazenado.

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.

...

Atalhos

Árvore de páginas

Versões comparadas

Versão antiga 84

Nova versão 85

Chave

CSS

jQuery Mobile

JavaScript

Serviços