...
| Deck of Cards |
|---|
| effectDuration | 0.5 |
|---|
| id | install-windows |
|---|
| history | false |
|---|
| effectType | fade |
|---|
|
| Card |
|---|
| default | true |
|---|
| id | 1 |
|---|
| label | 1º |
|---|
| title | Selecione a linguagem |
|---|
| - Na primeira tela o idioma da mídia de instalação deve ser selecionado.
| | Card |
|---|
| id | 2 |
|---|
| label | 2º |
|---|
| title | Termo de uso |
|---|
| Em Termo de Uso é exibido o contrato de licença do produto que contém os termos de uso, copyright e recomendações para a execução da instalação que deverão ser lidos atentamente.
Informação da flag: está opção assinalada indica que o usuário está de acordo com os termos do contrato de licença do produto.
Para prosseguir, assinale a opção Eu concordo com este contrato de licença e em seguida, clique em Próximo.
| Card |
|---|
| id | 3 |
|---|
| label | 3º |
|---|
| title | Instalação do fluig |
|---|
| - Em Instalação do Fluig informar se deverá ser realizada a instalação ou atualização do Fluig. Mantenha assinalada a opção Instalar o Fluig.
|
| Fluig Studio | | title | Selecione a linguagem |
|---|
| Para incluir um novo formulário com suporte a dispositivos móveis, realize o procedimento padrão para exportação da definição de formulário e selecione os campos que irão compor o formulário mobile na tela antes da conclusão da exportação. Após a exportação será incluindo também outro arquivo HTML e marcando-o como "mobile" na pasta forms do projeto Fluig. Veja na imagem a seguir a tela de seleção mobile na exportação de uma definição de formulário:  Image Modified
Figura 15 - Definição de formulário mobile. Após exportado o formulário deve ficar conforme a seguir: Image Modified 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", por exemplo: O meu formulário web chama "compras.html", o formulário Mobile, obrigatoriamente, deve-se chamar "compras_ecmmobile.html". |
| Card |
|---|
| id | 2 |
|---|
| label | Formulário Mobile em Processos |
|---|
| title | Termo de uso |
|---|
| É possível gerar o Formulário Mobile através |
|
...
do Gerador Web de Formulário (confirmar o nome), conforme passo a seguir: Passo 1: Criar ou editar um processo existente e acionar o campo formulário.  Image Modified
Passo 2: Selecionar a pasta destino onde esse formulário será publicado, assim como atribuir um título e descrição. Após isso clique |
|
...
em Criar Formulário.  Image Modified
Passo 3: |
|
...
Inclua os campos e em cada um deles, selecione se é um campo pro Formulário Mobile.  Image Modified
| Informações |
|---|
| Nem todos os tipos que funcionam na web podem ser mapeados pro Mobile, os campos que podem ser mapeados aparece a opção "Formulário Mobile |
|
?".| Card |
|---|
| id | 3 |
|---|
| label | Upload via Navegação de Documentos |
|---|
| title | Instalação do fluig |
|---|
| |
|
...
No upload via navegação de documentos é feito como uma publicação normal 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 Modified
|
| Nota |
|---|
| Todos esses formulários gerados pelos métodos de criação formulários precisam ser editados caso necessite de alguma customização especial, eles são gerados automaticamente e com o básico para seu funcionamento. |
|
Customizando Formulário Mobile
...
O CSS deve ser inserido dentro da head no html Mobile e deve ser utilizada a tag <style type="text/css"> Insira aqui o CSS </style>. Segue alguns exemplos de CSS que podem ser aplicados nos formulários Mobile, eles estão separados por componentes: por componentes:
| Deck of Cards |
|---|
| effectDuration | 0.5 |
|---|
| id | install-windows |
|---|
| history | false |
|---|
| effectType | fade |
|---|
|
| Card |
|---|
| default | true |
|---|
| id | 1 |
|---|
| label | Body |
|---|
| title | Selecione a linguagem |
|---|
|
Body | Bloco de código |
|---|
| 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;
} |
|
| Card |
|---|
| id | 2 |
|---|
| label | Headings |
|---|
| title | Termo de uso |
|---|
|
Headings | Bloco de código |
|---|
| 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;
} |
|
| Card |
|---|
| id | 3 |
|---|
| label | List |
|---|
| title | Instalação do fluig |
|---|
|
List | Bloco de código |
|---|
| 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; |
|
}| Card |
|---|
| id | 4 |
|---|
| label | Label |
|---|
| title | Instalação do fluig |
|---|
|
Label | Bloco de código |
|---|
| .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;
} |
|
| Card |
|---|
| id | 5 |
|---|
| label | Input Text |
|---|
| title | Instalação do fluig |
|---|
|
Input Text | Bloco de código |
|---|
| input[type=text] {
width: 70%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
background-color: #E8E8E8;
position:relative;
float:right;
} |
|
| Card |
|---|
| id | 3 |
|---|
| label | TextArea |
|---|
| title | Instalação do fluig |
|---|
|
TextArea | Bloco de código |
|---|
| textarea {
width: 70%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 14px;
background-color: #E8E8E8;
position:relative;
float:right;
} |
|
| Card |
|---|
| id | 3 |
|---|
| label | Select |
|---|
| title | Instalação do fluig |
|---|
|
Select | Bloco de código |
|---|
| 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 |
|---|
|
<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 |
|---|
|
Essa é a estrutura básica, dentro de cada tag deve ter elementos e lógicas correspondentes a elas. |
...