...
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:
| Deck of Cards |
|---|
| effectDuration | 0.5 |
|---|
| id | samples |
|---|
| history | false |
|---|
| effectType | fade |
|---|
|
| Card |
|---|
| 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 |
|---|
| 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 |
|---|
| 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 |
|---|
| input[type=text] { width: 70%;
font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 14px; background-color: #E8E8E8;
position:relative;
float:right; } |
| Card |
|---|
| textarea { width: 70%;
font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 14px; background-color: #E8E8E8;
position:relative;
float:right; } |
| Card |
|---|
| select { width: 70%;
font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 14px; background-color: #E8E8E8;
position:relative;
float:right; } |
|
...
| Nota |
|---|
|
Essa é a estrutura básica, dentro de cada tag deve ter elementos e lógicas correspondentes a elas. |
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 anexados, deve ser transferido para o Formulário Mobile.
O javascript tem que ficar dentro do uma tag <script> aqui vai a lógica em javascript </script>, para manter uma organização dentro do HTML, recomendamos deixar as lógicas no final no arquivo.
Serviços
...
| Nota |
|---|
|
Para testar o formulário Mobile, primeiro abro-o em um navegador no desktop normal, se eles abrir no desktop sem nenhum erro, deve abrir normalmente dentro do 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.
| Nota |
|---|
|
- 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, pois assim tudo que é aplicado na web, também será aplicado no Mobile. Evita 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.
|
JQuery Mobile
Internacionalização
...
Pai X Filho Mobile
Exemplo